Wie füge ich eigene Verlinkungen zu Sozialen Netzwerken im Footer ein?

Es gibt zwei Wege, Verlinkungen zu sozialen Netzwerken im Footer deiner Spreadmind Plattform anzuzeigen:

Netzwerke im schmalen Standard Footer von Divi:

Hier hast du die Möglichkeit, aus fünf Netzwerken zu wählen: Facebook, Twitter, Google+, Instagram und RSS.

Netzwerke im "großen" Footer über Widgets:

Hier kannst du jedes beliebige Netzwerk deiner Wahl entsprechend verlinken und dabei auch ein eigenes Icon nutzen.

Wir stellen dir in dieser Anleitung die Umsetzung beider Varainten vor.

Netzwerke im schmalen Standard Footer von Divi:

Gehe dazu im Backend deiner Spreadmind Plattform zu "Design" > "Theme Optionen" > Registerkarte "Allgemein" zu der Option Facebook-Icon anzeigen und aktiviere diese Option. Ein paar Felder weiter unten findest du die Option URL des Facebook Profils – trage dort den Link zu deiner Facebook-Profil-Seite ein:

Klicke auf den Button "Änderungen speichern", welchen du entweder am Anfang oder am Ende der Seitenansicht findest.

Bei dieser Varainte kannst du lediglich die Farbe der Icons anpassen, nicht aber deren Form. Wechsle dazu im Backend über "Design" in den "Theme Customizer" und gehe bei "Footer" > "Untere Footerleiste" zur Option Farbe von Socialicons. Bei Klick auf die Farb-Fläche kannst du einen eigenen Farbwert hinterlegen:

Das soziale Netzwerk-Icon wird im Frontend nicht angezeigt:

Wenn du den oben aufgeführten Schritten gefolgt bist und das soziale Netzwerk-Icon im Frontend im Footer deiner Plattform nicht angezeigt wird, solltest du überprüfen, ob im Theme Customizer unter "Footer" > "Footerelemente" der Haken bei der Option Socialicons zeigen gesetzt ist:

Klicke im Theme Customizer auf den Button "Veröffentlichen", um deine Anpassung zu speichern und verlasse links über das X-Symbol den Theme Customizer.

Netzwerke im "großen" Footer über Widgets:

Um noch mehr aus deinem Footer herauszuholen, kannst du neben dem schmalen Standard-Footer auch einen Footer mit Hilfe von Widgets aufbauen. Gehe im Backend deiner Spreadmind Plattform zu "Webseite" > "Widgets" und füge das HTML Widget deiner Footerleiste hinzu. In unserem Beispiel platzieren wir das Widget in den Footerbereich #3:

Das Widget ist rechts nun unter dem "Footerbereich #3" zu sehen. Klappe die Optionen auf vergebe einen Titel (optional). Der HTML-Code ist wie folgt aufgebaut:

<a>...</a> = Innerhalb dieses Elements findet die Verlinkung zur Facebook-Profilseite statt, das Icon wird darüber eingebunden sowie der Titel "Facebook" dargestellt. Der Link öffnet sich automatisch in einem neuen Browsertab (target).
<img> = Innerhalb dieses Elements wird das eigene Facebook-Icon eingebunden mit einer Breite von 30px (width) und einer vom Text ausgehend mittigen Positionierung (style). Die Quelle zu diesem Bild (src) kannst du für das Facebook-Icon eins zu eins so verwenden.

Hier kannst du den Code kopieren und direkt in das HTML-Widget auf deiner Spreadmind Plattform einfügen:

<a href="http://www.facebook.de/" target="_blank">
<img src="/wp-content/uploads/sites/280/2016/08/icon_facebook.png" width="30" alt="Facebook" style="position: relative; top: 10px; margin-right: 5px;"> Facebook
</a><br>

Passe nun die URL auf deine Facebook-Profilseite an. Achte darauf, dass du die Anführungszeichen nicht entfernst und zwischen der URL und den Anführungszeichen keine Leerzeichen aufgeführt werden:

Klicke bei dem HTML-Widget auf den Button "Speichern" und warte einen Moment, bis die Anpassungen gesichert werden. Ein weiteres Speichern oder Aktualisieren dieser Seite ist nicht notwendig, die Änderungen sind sofort im Frontend sichtbar.

Wir haben für dich folgende Icons gestaltet:

Über die folgenden Links kannst du die Icons herunterladen:

Lade dann im Backend deiner Spreadmind Plattform unter "Medien" das Icon hoch:

Klicke nach dem Upload auf das Bild und kopiere die Medien-URL unter "Link kopieren":

Diesen Medien-Link musst du dann im Backend unter "Webseite" > "Widgets" in der entsprechenden Stelle deines HTML-Widgets beim img-Tag beim src-Attribut (src = source = Quelle) wie folgt austauschen:

VORHER:

<img src="/wp-content/uploads/sites/280/2016/08/icon_facebook.png" width="30" alt="Facebook" style="position: relative; top: 10px; margin-right: 5px;">

NACHHER:

<img src="https://spreadmind.s3.eu-central-1.amazonaws.com/wp-content/uploads/sites/280/2016/08/09164722/icon_facebook.png" width="30" alt="Facebook" style="position: relative; top: 10px; margin-right: 5px;">

Tipp:

Wenn du im HTML-Widget mehrere Icons einbindest, füge dazwischen folgendes HTML-Element ein, um einen Zeilenumbruch zu erzwingen: <br />

Direkt darunter kannst du dann wieder genau den gleichen HTML-Code von Facebook einfügen. Beachte, dass du folgende Elemente anpassen musst:

Link zur Profilseite bei <a href=>
Medien-URL bei <img src=>
Titel "Facebook"