Trick # 364 | Dieser Beitrag beinhaltet 776 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Mit dem Menü-Modul des Divi-Themes können Sie auch ganz einfach einen Farbwechsel des Navigationshintergrunds auslösen. Etwa nach einer bestimmten Scrollhöhe. Wie simpel das ist, zeigen wir Ihnen hier.
Ein Menü in dieser Art werden wir mit dem heutigen Hack erreichen – Scrollen Sie etwas nach unten (und wieder nach oben) um den Farbwechsel festzustellen:
Dazu benötigen Sie einen vorbereitenden Schritt – möglicherweise noch einen zweiten:
Setzen Sie das Menü-Modul zunächst in eine eigene Divi-Zeile und vergeben Sie dieser Zeile eine CSS-Klasse namens «change-header-color». Diesen Klassennamen können Sie bei bearbeitetem Element im Tab «Erweitert», «CSS-ID und Klassen» im Textfeld «CSS-Klassen» einfügen.
Das Menü soll möglicherweise beim Scrollen auch gleich am oberen Bildschirmrand haften bleiben. Das lösen Sie wie folgt: Ebenfalls im Tab «Erweitert» finden Sie etwas weiter unten die «Scroll Effects» – dort können Sie den Inhalt als «Stick to Top» festlegen, damit das Element beim Scrollen nicht aus dem Blickfeld verschwindet.
Danach kopieren Sie das folgende Script und fügen es in den <head>-Bereich Ihrer Website ein. Diesen Bereich können Sie im Backend unter Divi/Theme-Optionen/Integration bearbeiten:
Das Script legt fest, dass dem angepeilten Divi-Element beim Scrollen eine weitere CSS-Klasse hinzugefügt wird. Diese Klasse wird wieder entfernt, sobald man auf der Seite wieder nach oben scrollt.
Auf Zeile 5 können Sie festlegen, wie weit gescrollt werden soll, bevor die Aktion passiert – in unserem Beispiel sind das 100 Pixel.
In der Folge benötigen Sie noch etwas CSS-Code, den Sie ins CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS einfügen können:
Die Farben können Sie nach eigenem Gusto auf den Zeilen 2 und 10 anpassen. Ebenso die Animationsdauer, welche im vorliegenden Beispiel 2 Sekunden dauert. Diese bewirkt, dass die Hintergrundfarbe nicht abrupt wechselt.
Vor einiger Zeit haben wir Ihnen das Plugin «Image Source Control» gezeigt, mit welchem Sie die Namen der FotografInnen Ihrer Bilder ganz bequem darstellen können. Hin und wieder wurden wir angefragt, wie sich die Bildquelle stylen lässt. ...
Im Divi-Theme ist ein Portfolio-Modul enthalten, welches mit Filtern dargestellt wird. Wechselt man den Filter werden die anzuzeigenden Beiträge elegant von links nach rechts ins Bild geschoben. Dieser Effekt lässt sich aber verändern: Beiträge ...
Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem ...
Hin und wieder spendiert Elegant Themes einem Modul für das Divi-Theme eine neue Funktion. Wenn Sie ein solches Modul bereits häufig verwenden, kann es mühsam werden, diese Option bei allen Elementen nachträglich zu aktivieren. Da hilft ein ...
Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.
Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.
Unbedingt notwendige Cookies
«Unbedingt notwendige Cookies» sollte immer aktiviert sein, damit wir Ihre Präferenzen für Cookie-Einstellungen speichern können.
Wenn Sie dieses Cookie deaktivieren, können wir Ihre Einstellungen nicht speichern. Das bedeutet, dass Sie jedes Mal, wenn Sie diese Website besuchen, Cookies erneut aktivieren oder deaktivieren müssen.
Cookies von Drittanbietern
Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher auf der Website und die beliebtesten Seiten zu sammeln.
Wenn Sie dieses Cookie aktiviert lassen, können wir unsere Website verbessern.
Bitte aktivieren Sie zunächst «Unbedingt notwendige Cookies», damit wir Ihre Einstellungen speichern können.