Divi Tutorial: Social Media Icon Menü

Im heutigen Tutorial habe ich mir mein Lieblings-Theme – Divi von elegant themes – vorgenommen (auf dem unter anderem auch diese Seite basiert) und die „Secondary Nav“ / das „Sekundäre Menü“ genutzt, um auf die Social Media Präsenzen des Kunden zu verweisen. Das Coole an dieser Lösung ist, dass ihr

  • keinerlei Plugins installieren müsst und
  • nicht limitiert seid, auf welche Social Media Präsenzen ihr verweisen wollt

(Zu letzterem Punkt: standardmäßig lässt euch Divi auf Facebook, Twitter und… Google+ verweisen. Sowie euren RSS Feed verlinken. Das ist … nicht mehr so zeitgemäß, denn viele meiner Kunden wollen z. B. auf ihren YouTube Kanal oder auf LinkedIn oder auf Instagram oder oder oder verweisen.)

Wir starten mit dem Video und unterhalb des Videos gibt es noch mal eine Schritt-für-Schritt-Anleitung mit Code-Beispielen zum copy / pasten, damit das euch ebenfalls mühelos von der Hand gehen wird.

Schritt 1: Sekundäres Menü anlegen

  1. Geht zu Design -> Menüs und erstellt ein neues Menü
  2. Legt dort pro Social Media Präsenz einen „Individuellen Link“ an und fügt ihm dem Menü hinzu
  3. Geht auf „Ansicht anpassen“ (oben links) und klickt auf „Linkziel“, „HTML-Attribut title (optional)“ und „CSS-Klassen“
  4. Lasst die Links alle in einem neuen Tab öffnen, fügt überall „smlink“ als CSS-Klasse hinzu
  5. Pro Social Media Netzwerk benötigt ihr noch eine eigene CSS-Klasse pro Link, z. B. „sm-fb“ für Facebook, „sm-xing“ für XING, usw.
  6. Setzt das Häkchen bei „Sekundäres Menü“ in den Menü-Einstellungen
  7. Speichert das Menü
Visuelle Anleitung für die Erstellung des Social Media Icon Menüs

Visuelle Anleitung für die Erstellung des Social Media Icon Menüs

Schritt 2: CSS Code ergänzen

Wie im Video erläutert müsst ihr die folgenden Codes entweder in eurer style.css des Child Themes eintragen oder alternativ in den Divi Optionen unter „Divi“ -> „Theme Optionen“ -> „General“ -> „Benutzerdefinierte CSS“ (ganz unten auf der ersten Seite der Theme Optionen).

/* Secondary Nav */
#top-header #et-secondary-menu > ul > li.smlink a {
text-align: left;
position: relative;
width: 15px;
display: inline-block;
vertical-align: top;
font-size: 0;
}
#top-header #et-secondary-menu > ul > li.smlink a::before {
color: #fff;
content: "\e0cb";
font-family: 'ETModules';
font-size: 19px;
position: absolute;
}

Anschließend müsst ihr noch für jedes soziale Netzwerk, das nicht mit dem LinkedIn Symbol mit abgerundeten Ecken dargestellt werden soll, einen eigenen CSS-Code hinzufügen. Ich liste euch hier mal die gebräuchlichsten Codes, zunächst für Social Media Symbole OHNE Umrandung:


#top-header #et-secondary-menu > ul > li.smlink.sm-fb a::before { content: "\e093"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-twitter a::before { content: "\e094"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-pinterest a::before { content: "\e095"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-google a::before { content: "\e096"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-insta a::before { content: "\e09a"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-vimeo a::before { content: "\e09c"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-linkedin a::before { content: "\e09d"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-yt a::before { content: "\e0a3"; }

Social Media Symbole mit kreisrunder Umrandung:


#top-header #et-secondary-menu > ul > li.smlink.sm-fb a::before { content: "\e0aa"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-twitter a::before { content: "\e0ab"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-pinterest a::before { content: "\e0ac"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-google a::before { content: "\e0ad"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-insta a::before { content: "\e0b1"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-vimeo a::before { content: "\e0b3"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-linkedin a::before { content: "\e0b4"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-yt a::before { content: "\e0ba"; }

Social Media Symbole mit eckiger abgerundeter Umrandung:


#top-header #et-secondary-menu > ul > li.smlink.sm-fb a::before { content: "\e0c1"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-twitter a::before { content: "\e0c2"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-pinterest a::before { content: "\e0c3"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-google a::before { content: "\e0c4"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-insta a::before { content: "\e0c8"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-vimeo a::before { content: "\e0ca"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-linkedin a::before { content: "\e0cb"; }
#top-header #et-secondary-menu > ul > li.smlink.sm-yt a::before { content: "\e0d1"; }

Hier zuletzt noch der Code für das XING-Logo (das ihr euch hier herunterladen könnt):


#top-header #et-secondary-menu > ul > li.smlink.social_xing a::before {
content: "";
background: url('/wp-content/themes/AndreasDudas/img/xing_logo-squared.png');
background-size: contain;
width: 19px;
height: 19px;
border-radius: 4px;
background-position: center;
margin-top: -4px;
}

Mit diesen Code-Snippets sowie dem Video oben solltet ihr hoffentlich alles an der Hand haben, mit der ihr das Feature auch auf eurer Seite umsetzen könnt.

P.S.: Sollte euch das alles „zu blöd“ sein und ihr das lieber von uns erledigen lassen, so kriegen wir das pauschal für 50 EUR für euch hin. 😉

P.P.S.: Falls ihr euch das Video nicht komplett angesehen habt, dann habt ihr den besten Teil verpasst! Wir verweisen ganz am Ende nämlich auf unser DSGVO Paket, mit dem wir euch die ganzen nervigen Anpassungen, die an eurer Seite vorgenommen werden müssen, kurzerhand abnehmen. Mehr Infos zu diesem geilen Produkt gibt es auf unserer brandneuen Academy-Seite.

Über Oliver Gehrmann

Oliver Gehrmann ist Gründer der Agentur nexTab, Fan von Sammelkartenspielen, verheiratet und Vater von zwei Jungs, von denen gerüchteweise sogar vereinzelt Bilder in dieser Webseite eingearbeitet sind...