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

 

Kostenloses Quiz

Finde auf einfache Weise heraus, was du ändern kannst, um endlich Kundenanfragen über deine Website zu erhalten.

Finde heraus, warum du zu wenig Kunden durch deine Website gewinnst

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.

3 Kommentare

  1. Danke vielmals, hat prima geklappt!

    Antworten
  2. Meine erste Suche im Netz ergab dein Treffer.

    .zip herunter geladen. Social Datei angepasst und fertig.

    Mega Danke dafür.

    Antworten
    • Gerngeschehen 😉 Freut mich sehr, wenn es verwendet wird.

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Vielleicht interessiert dich auch…

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee bietet in meinen Augen eine einfache und sympathische Möglichkeit, eine Datenschutzerklärung für das neue Schweizer Datenschutzgesetz zu erstellen. Gerne stelle ich dir hier eine Anleitung zur Verfügung, wie du die Datenschutzerklärung erstellen und in...

Bilder pixelgenau zuschneiden

Bilder pixelgenau zuschneiden

Wohl jeder, der an einer Website arbeitet, steht früher oder später vor dem Problem "wie schneide ich ein Bild/Foto pixelgenau zu". Damit dies auch einfach und schnell geht, empfehle ich jeweils Adobe Photoshop (Elements) oder den kostenlosen Online Dienst Pixlr...

Terminbuchung: Meine 3 besten Empfehlungen 2023

Terminbuchung: Meine 3 besten Empfehlungen 2023

Auf immer mehr Websiten werden online Terminbuchungen angeboten. Lange suchte ich nach überzeugende Lösungen. Meine 3 Favoriten stelle ich Dir hier gerne vor.Amelia Wirklich lange suchte ich nach einer passenden Lösung. Amelia hat mich direkt überzeugt. WordPress...

Newsletter Software: Meine 3 besten Empfehlungen 2023

Newsletter Software: Meine 3 besten Empfehlungen 2023

E-Mail-Marketing ist eine sehr gute und effektive Methode um interessierte Personen zu informieren. Dabei gibt es unzählige Newsletter Anbieter und auch WordPress Plugins für den Versand von Newslettern. Hier den richtigen Anbieter zu finden kann sehr zeitaufwändig...

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket ist wohl das einfachste und beste Cache Plugin für Deine WordPress Website. Nichts nervt mehr als ewig laaaaaangsam ladende Websiten. Dies ist schlecht für Deine Websitenbesucher, für Dein Google Ranking und deshalb auch für Dein Portemonnaie. Die...

WordPress: Änderungen rückgängig machen / Revisionen verwenden

WordPress: Änderungen rückgängig machen / Revisionen verwenden

Du kennst sicher folgendes Problem: Du änderst eine Inhaltsseite und einen Tag später bemerkst Du, dass die alte Version besser gewesen wäre. Oder Du bearbeitest einen Beitrag, speicherst und aus unerklärlichen Gründen ist der Inhalt verschoben, verändert oder ganz...