XING icon in Divi Theme integrieren

Es war nicht einfach, hier ein einfaches Tutorial zu finden. Leider kommt das Divi-Theme ohne Xing icon, man muss deshalb selbst etwas Hand anlegen. Im Support-Bereich habe ich ein paar Empfehlungen ausprobiert, letztendlich hat es mit dieser Hilfe hier geklappt:

 

Man sollte diese Anpassungen auf jeden Fall im Child Theme Code ändern, sonst gehen sie beim nächsten Update flöten…

Hierzu ist das Plugin Child theme Creator eine große Hilfe, man kann dann ganz einfach unter Werkzeuge/Kindthemen ganze Dateien aus dem Eltern-Theme in Childtheme kopieren, an dem man dann die Änderungen vornimmt.

Und so einfach geht’s dann:

Lade zunächste ein weißes Xing-icon (20×20 px) in Deine Mediathek hoch und klicke dann auf das Bild und kopiere deren Bild-Url. Diese brauchst Du später in Schritt 6.

1. Gehe zu Design / Editor

2. Wähle recht oben Dein Child Theme aus (das Du vorher kreiiert haben solltest).

3. Wähle die „social_icons.php“ aus und kopiere den folgenden Text vor </ul>:

<li class=“et-social-icon et-social-xing„>
<a href=“#“ class=“icon„>
<span><?php esc_html_e( ‚Xing‚, ‚Divi‘ ); ?></span>
</a>
</li>
–> unter # bitte die Xing-URL eintragen, zu der hin verlinkt werden soll.
4. Speichere den eintrag indem Du unten den button Datei aktualisieren klickst.

5. Dann gehe zur style.css Datei innerhalb Deines Child Themes und gib dort (ganz untenm unter allem was da schon drinnen steht) den folgenden Code ein:

.et-social-xing a.icon:before { content: url(„xing icon url here„); }

–> unter xing icon url here kopierst Du bitte die URL Deines Xing-Bilder, dass Du in Deiner Mediathek liegen hast, rein. (siehe oben).

 

Und schon sollte das Xing icon auch innerhalb der Social media icons im Header und Footer zu sehen sein. 🙂