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.

Klicke auf den Button, um diesen externen Inhalt von YouTube nachzuladen.
Her damit!

PGlmcmFtZSB3aWR0aD0iMTA4MCIgaGVpZ2h0PSI2MDgiIHNyYz0iaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvc1h1aXJpeG5xXzA/ZmVhdHVyZT1vZW1iZWQiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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...

Cookie-Einstellung

Bitte gib uns kurz eine Rückmeldung, welche Cookies du von dieser Seite zulässt. Eine gezielte Verbesserung unserer Seite ist uns leider nur möglich, wenn du alle Cookies akzeptierst. Weitere Infos in der Hilfe.

Triff eine Auswahl, um fortzufahren

Danke!

Hilfe

Hilfe

Um fortfahren zu können, muss eine Cookie-Auswahl getroffen werden. Nachfolgend gibt es weitere Infos zu den verschiedenen Optionen und ihrer Bedeutung.

  • Alle Cookies zulassen:
    Jedes Cookie wie z.B. Tracking- und Analytische-Cookies.
  • Nur First-Party-Cookies zulassen:
    Nur Cookies von dieser Webseite.
  • Keine Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies.

Du kannst deine Cookie-Einstellung jederzeit hier ändern: Datenschutzerklärung. Impressum

Zurück