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:

Webdesign-Osnabrueck

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!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage bei Swish!

Das könnte dich auch interessieren

Anzeige
Aktuelle Beiträge
WordPress: Link auf Nofollow setzen

WordPress: Link auf Nofollow setzen

Wie setzte ich Links auf Nofollow? Wann sollen Links auf Nofollow gesetzt werden und was bedeutet Nofollow eigentlich? Das alles sind Fragen, die sich wohl irgendwann jeder beim Aufbau einer Website stellt. Ich persönlich halte das Thema für überbewertet und genau aus...

0 Kommentare

Einen Kommentar abschicken

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