Trick # 371 | Dieser Beitrag beinhaltet 1051 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Manchmal kann es hilfreich sein, wenn die Navigation der Website beim Scrollen etwas geschrumpft wird. Sie «klebt dann beispielsweise ganz oben an der Seite – nimmt dort aber etwas weniger Platz ein. Das geht ganz einfach mit einem Script und etwas CSS-Code.
Das Menü, das wir schrumpfen lassen wollen könnte etwa so aussehen wie das folgende. Scrollen Sie ein wenig hoch und runter, damit Sie den Effekt sehen.
Um diesen Effekt zu erzielen, muss dem Menü-Modul eine CSS-Klasse zugewiesen werden. Wir verwenden hier den Klassennamen «shrink-header», den Sie im Tab «Erweitert» des Menü-Moduls unter «CSS-ID & Klassen» im Textfeld «CSS-Klasse» eintragen können.
Auch werden Sie das Menü vermutlich am Seitenkopf fixieren wollen, wenn Sie scrollen. Dies können Sie etwas weiter unten im Tab «Erweitert» einstellen: Unter «Scroll Effects» den Punkt «Stick To Top» auswählen.
Danach benötigen Sie das folgende Script, welches Sie in den <head>-Bereich Ihrer Website setzen können. Dieses finden Sie im Backend unter Divi/Theme-Optionen/Integration:
Das Script aktiviert den Schrumpfeffekt nach einer Scrolldistanz von 100 Pixeln. Wenn Sie möchten, können Sie diesen Wert auf Zeile 5 anpassen.
Nun folgt noch ein Stück CSS-Code. Diesen können Sie im CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS deponieren:
/* Zeitdauer der Animation des Menüs festlegen */
.shrink-header .et_pb_row {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Inneren Zwischenraum des fixierten Menüs festlegen */
.shrink-fixed-header .et_pb_row {
padding: 0px 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zeitdauer der Animation des Logos festlegen */
.shrink-header .et_pb_menu__logo img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zielgrösse des Logos festlegen */
.shrink-fixed-header .et_pb_menu__logo img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zeitdauer der Animation der Menü-Schriftgrösse festlegen */
.shrink-header .et_pb_menu ul li a {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zielgrösse der Menü-Schriftart festlegen */
.shrink-fixed-header .et_pb_menu ul li a {
font-size: 16px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Aber natürlich: Die Werte können Sie einfach anpassen. Die Animationen sind in diesem Beispiel alle auf .5s gestellt, was einer halben Sekunde entspricht.
Vielleicht kennen Sie es und Sie hatten schon einmal Probleme im Layout Ihrer Divi-Website erlebt, bei denen sich Elemente nach Belieben verhalten? Abstände und Zwischenräume, die so gar nicht korrekt waren. Eine Einzelbehandlung der Abstände ...
Haben Sie die Adventsdekoration schon aus dem Schrank geholt? Und die alte Bing-Crosby-Platte aufgelegt? Wenn Ihnen zum heutigen ersten Advent schon vorweihnächtlich zumute ist, möchten Sie es vielleicht auf Ihrer Website schneien lassen. ...
Einen Websiteinhalt - sei es nun ein Bild, Text oder ein anderes Element - können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.
Auch im Divi-Theme lässt sich mit der Maus hervorragend zoomen. «Ctrl» drücken und dazu das Mausrad bewegen; schon verkleinert oder vergrössert sich die Seitenansicht. Fast immer wenigstens. Ein Mini-Hack erklärt, was unternommen werden muss, ...
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.