Social Icons Divi

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.

Divi Social Media Icons

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 🙂

Divi Social Media Icons

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.

Divi Social Media Icons

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)

Hast Du Dich schon mal gefragt, wie Du es einstellen kannst, dass sich die Social Icons in einem neuem Fenster öffenen?

Hier findest Du die Anleitung:

Divi – Social Icons in neuem Fenster öffnen

Wünsche Dir viel Freude mit Deiner Website und denk daran…

bleib natürlich – auch online.

Karin

 

Newsletter

Mit deiner Anmeldung stimmst du zu, dass ich dir meinen Newsletter zusende. Du hast jederzeit die Möglichkeit, dich von meinem Newsletter wieder abzumelden. Weitere Informationen findest du in der Datenschutzerklärung.

Affiliate/Werbelinks

In meinem Artikel verwende ich Affiliate-Links. Wenn du auf einen solchen Link klickst und darüber einen Kauf tätigst, erhalte ich eine Provision vom Anbieter. Für dich ändert sich dadurch weder das Angebot noch der Preis. Damit unterstützt du meine Arbeit bei der Erstellung kostenloser Anleitungen und Blogartikel.