Loge beim nach unter scrollen wechseln mit Divi

Logo ändern beim nach unten scrollen mit Divi

6. November 2018

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:

 

 

 

@media only screen and (min-width : 981px) {
/**change logo on scroll**/
.et-fixed-header #logo {
content: url(DEINE_LOGO_URL);
}
}

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

/**change logo on scroll**/
.et-fixed-header #logo {
content: url(DEINE_LOGO_URL);
}
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

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

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