Logo ändern beim nach unten scrollen mit Divi

von | 04.02.2018 | 0 Kommentare

In diesem Tutorial möchte ich dir zeigen, wie du ein zweites Logo mit dem Divi Theme verwenden kannst. Wieso sollte man das tun, wirst du dich vielleicht fragen? Nun nehmen wir an, du verwendest eine transparente Navigationsleiste, weil dein Hintergrundbild im Ganzen zu sehen sein soll. Beim nach unten scrollen ist jedoch eine vollfarbene Leiste von Vorteil, da sonst die Menüpunkte der Navigationsleiste mit den Inhalten der Webseite „vermischt“ werden. Im untere Beispiel wird die Menüleiste nach dem Scrollen weiß, sodass ein weißes Logo nicht mehr zu erkennen wäre. Daher wurde ein zweites Logo implementiert, welches sich von der Navigationsleiste farblich abhebt.

Das Beispiel wurde von der Startseite einer Webdesign Agentur aus Osnabrück abgefilmt:

Logo-Wechsel nach dem Scrollen

Verschiedene Logos verwenden mit Divi

Ok, dann lass uns beginnen.

Als erstes musst du dein zweites Logo zu den Medien hinzufügen.

1. Dies kannst du unter Medien > Datei hinzufügen 

Logo hochladen

2. Jetzt benötigen wir die URL des zweiten Logos. Diese erhältst du, indem du auf das Bild klickst. Kopiere die URL, da wir sie gleich noch benötigen.

WordPress Bild URL

CSS um das Logo zu wechseln

Jetzt müssen wir noch etwas CSS Code in unserem Child Theme oder dem Theme Customizer platzieren. Vergiss nicht den Platzhalter mit deiner URL zu ersetzen. Nach dem Veröffentlichen sollte das Logo beim nach unten scrollen wechseln.

CSS Snippet zum Logo-Wechsel mit Divi

Wenn du möchtest, dass das zweite Logo nur auf Desktop Computern wechselt, dann verwende folgendes Snippet:

Möchtest du, dass die Logos auf alle Geräten wechseln, dann ist das folgende Snippet zielführend:

Wenn dir der Artikel gefallen hat, dann freuen wir uns über ein Follow auf Twitter und Facebook. Mehr WordPress und Divi Video Tutorials findest du auf unserem YouTube Channel.

Noch Fragen? Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz' die Kommentarfunktion unter diesem Beitrag!

Das könnte dich auch interessieren

0 Kommentare

Einen Kommentar abschicken

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

NEWSLETTER ABONNIEREN

Wöchentlich die neusten Beiträge und Tutorials ins E-Mail Postfach.

NEWSLETTER ABONNIEREN

Wir haben dir eine Newsletter Bestätigung zugesendet. Klicke hierfür auf den Bestätigungsbutton in der E-Mail