Um den Header auf “Sticky Top” einzustellen gibt es in Elementor eine einfache Einstellung. ABER um den Header beim Scrollen zu verkleinern oder die Farbe zu ändern leider noch nicht.
Wir benutzen ein paar CSS Snippets und können so den Header anpassen wie wir es gerne haben möchten.
Erstelle wie gewohnt einen Header und stelle Ihn auf Sticky top. Gehe zu –> Erweitert –> Bewegungseffekte –> Sticky –> Oben
Und stelle “Offset Effekte” auf 1.
Z-Index auf 9
Wir fangen mit dem Logo an. Wichtig ist, dass Du keine Breite eingestellt hast. Falls doch, merk dir die Werte und lösche sie alle wie im Bild.
Jetzt gib dem Logo/Bild eine eindeutige CSS Klasse z.B. Logo1
Jetzt füge den Code unter Erweitert –> “Eigene CSS” ein.
Falls Du eine andere CSS Klasse genommen hast, dann musst du diese entsprechend im Code ändern.
/* --- LOGO ---- *//* Logo sizing before sticky */.Logo1 img {width: auto;max-height: 120px;transition: all 0.5s ease;}/* Logo sizing after sticky */.elementor-sticky--effects .Logo1 img {max-height: 65px;width: auto;}Jetzt vergeben wir für das Menü auch eine CSS Klasse und fügen wieder den entsprechenden CSS Code ein. auch hier müssen die Voreinstellungen bei der Schriftgröße gelöscht sein.
/* — Menü —- */
/* menü sizing before sticky */
.menu1 {
font-size: 15px;
transition: all 0.5s ease;
}
.elementor-sticky–effects .menu1 {
font-size: 10px;
}
um die Farbe ds gesamten Header zu ändern, füge folgenden Code im CSS ein.
Die Farbe ist hier in RGBA angegeben um eine Transparenz darzustellen. Du kannst aber auch HEX Farbcodes verwenden.
/* Background color on sticky */.elementor-sticky--effects {background-color:rgba(255,255,255,0.85);transition: all 0.5s ease;}Ungebetenen User mit Administratorenrechte finden und löschen. (Maleware wp-vcd.php)
Du möchtest ein Freebie wie z.B. ein E-book anbieten und möchtest, dass sich Interessierte Besucher in Deinen Newsletter eintragen, um das Freebie zu erhalten? Hier eine Anleitung in 3 Schritten.
Hi, ich bin Christian. Ich arbeite freiberuflich als Webdesigner, bin Gründer der Seite websites4success.com und biete WordPress Support für meine Kunden an. Wie ihr wisst, ist WordPress sehr dynamisch und so stoße ich in meinem Arbeitsalltag immer wieder auf neue Probleme, Herausforderungen und Hürden und muss neue Lösunge finden.
Um auch andere an meinem Wissen und meinen Lösungen teilhaben zu lassen, habe ich diesen Blog gestartet und teile hier Tipps und Erfahrungen aus meinem Arbeitsalltag.
