Divi Theme: weitere Social Media Icons hinzufügen

Je nach Design Einstellungen hast Du bei Divi* die Möglichkeit im Header und im Footer Social Media Icons wie Facebook, Google + und Twitter anzeigen zu lassen. Aber vielleicht möchtest Du Deinen YouTube Kanal oder Instagram einbinden? Gerne zeige ich Dir wie dies geht.

Beginnen wir aber mit der integrierten Lösung.

1. Social Media Icons anzeigen

Gehe im WordPress Backend zu Divi – Theme Optionen. Hier hast Du im Reiter „General“ die Möglichkeit die URL’s zu Deinen Social Media Kanälen einzugeben und mit dem Schalter das Icon auf Deiner Website zu aktivieren.

Achte hierbei darauf, dass auch beim Designmodifikator – Header & Navigation – Headerelemente die Option „Social Icons anzeigen“ aktiviert ist.
Das Gleiche gilt für Designmodifikator – Footer – Footerelemente.
Dies natürlich nur, wenn Du die Social Media Icons im Header und im Footer anzeigen lassen möchtest 🙂

Aber jetzt gehen wir zum eigentlichen Thema.

2. Weitere Social Media Icon hinzufügen

Damit Du bei Divi* weitere Social Media Icons hinzufügen kannst, musst Du auf die Theme Dateien zugreifen können. z.B. via FTP Server. Ich empfehle Dir auf jeden Fall mit einem „Child Theme“ zu arbeiten. So bleiben diese Änderungen auch nach einem Divi Update aktiv. Am Ende des Artikel findest Du einen Download mit diesen Dateien.

OK legen wir los.

Kopiere als Erstes die Datei social_icons.php im Ordner Divi – includes auf Deinem Computer. Dies ist die Originaldatei und beinhaltet bereits Code, damit die Social Media Icons angezeigt werden. Öffne nun diese Datei in einem Editor.

Nun fügst Du den untenstehenden Code zwischen dem letzten <?php endif; ?> und </ul> ein.

Divi Social Media Icons

Code zum kopieren und einfügen:

<li class="et-social-icon et-social-youtube">
<a href="https://www.youtube.com/" class="icon">
<span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
</a>
</li>

Im Beispiel wäre dies nun der Code für YouTube. Füge nun bei https://www.youtube.com/ den Link zu Deinem YouTube Kanal ein. Achte darauf, dass die Anführungs- und Endzeichen stehen bleiben!

Möchtest Du nicht Deinen YouTube Kanal, sondern z.B. Instagram verlinken? Dann ändere den gelb markierten Text auf instagram. Zudem füge beim rot markierten Bereich Deine Instagram URL ein.

Möchtest Du mehr als einen zusätzlichen Social Media Kanal verlinken? Dann kopiere den Code so oft wie Du möchtest und ändere jeweils die URL und den gelb markierten Bereich.

Diese Methode funktioniert für folgende Social Media Kanäle:

Pinterest
Linkedin
Tumblr
Instagram
Skype
Flikr
MySpace
Dribble
Youtube

So Du hast es bereits fast geschafft. Nun musst Du nur noch die Datei social_icons.php speichern und in Dein Divi Child Theme hochladen.

Dazu musst Du in Deinem Divi Child Theme einen neuen Ordner „includes“ erstellen und die social_icons.php Datei hier hochladen.

Fertig! :-D

Download Divi Child Theme inkl. social_icons.php

Gerne kannst Du hier ein vorbereitetes Divi Child Theme downloaden. Vergiss aber nicht in der Datei social_icons.php Deine Social Media Kanäle hinzuzufügen.

Download Divi Child Theme (zip-Datei)