Elementor: Wechselnder Header beim Scrollen

Kategorie: Plugins

Die Umstellung einer Website auf den Page und Theme Builder Elementor ist eine hervorragende Möglichkeit, um deiner Seite einen neuen Look zu geben. Eine der ersten Änderungen, die sich anbietet, ist die Bearbeitung des Headers. In dieser Anleitung zeige ich dir, wie du deinen Elementor Header während des Scrollens ändern kannst, indem du die clevere Sticky-Funktion von Elementor nutzt.

Wie man den Header beim Scrollen mit Elementor ändert

Es ist vielleicht nicht die einfachste Sache der Welt, aber kann in vielen Fällen sehr nützlich sein. Und einmal verstanden ist es wie Fahrrad fahren. Du kannst es immer wieder verwenden!

Es gibt zwei “Stile”, die ich dir zeigen werde:

  1. Eine “Slide”-Variante, bei dem der Header beim Scrollen auf und ab animiert wird
  2. Und eine “Fade”-Variante, bei der die Transparenz des Headers animiert wird

Dieses Tutorial wird das Ganze Schritt für Schritt Durchgehen, so dass auch Anfänger in Elementor und WordPress am Ende diesen Effekt in ihre Website einbauen können.

Was ist ein wechselnder Header

Ein wechselnder Header ist eine Möglichkeit, um den Header bzw. dessen Inhalt zu wechseln, indem zwei Header verwendet werden. Es wird einen anfänglichen Header geben, dein “Haupt”-Header, der als erster Header sichtbar ist. Wenn der Nutzer dann die Webseite scrollt, erscheint ein zweiter Header. Diese Methode ist eine Alternative zu einem einzelnen Header, der sich beim Scrollen ändert.

Hinzufügen mehrerer Elementor Sticky Header Effekte

Einer der größten Vorteile mit zwei separaten Headern zu arbeiten ist, dass du zwei völlig unterschiedliche Menüs erstellen kannst und nicht auf das gleiche Layout beschränkt bist. Das ist besonders praktisch bei WooCommerce-Seiten, wo mehrere Elemente wie Einkaufswagen, Wunschliste und “Mein Konto” im Menü vorhanden sind.

Zudem ist es auch einfacher, verschiedene Effekte in einem hinzuzufügen, wie z.B. ein Logo, das sich beim Scrollen verändert oder schrumpft, Hintergrundfarben für einen Header, der sich beim Scrollen verändert, und einen komplett schrumpfenden Header, der beim Scrollen viel dünner ist. Und all das kannst du auf einmal machen, indem du diesen Artikel anwendest.

Was du brauchst, um diesem Tutorial zu folgen

Um den Effekt und die Methode nutzen zu können, benötigst du Elementor Pro, d.h. die Funktionen der Bezahlversion des Page Builders. Es werden keine weiteren Plugins benötigt. Du musst auch etwas CSS hinzufügen. Aber keine Sorge, die Menge ist überschaubar und dir wird genau erklärt, was durch das CSS passiert. Alles was du tun musst, ist kopieren und einfügen.

Wie Elementor Sticky Headers funktionieren

Elementor Sticky Header funktionieren aufgrund der Sticky-Funktion von Elementor. Es gibt eine "Sticky"-Option im Reiter "Erweitert" unter "Bewegungseffekte". Diese Option findest du bei fast jedem Element. Wenn diese Option aktiviert ist und ein Wert für den "Effekte Offset" angegeben wird, wird dem Element eine spezielle Klasse zugewiesen. Diese Klasse können wir im CSS verwenden, um das Element zu stylen.

Effekte Offset

Der Effekt-Offset bestimmt, wie weit die Webseite gescrollt werden muss, um den Sticky-Effekt zu erzielen. Wenn du zum Beispiel 100 für den Effekte-Offset einträgst, tritt der Effekt ein, wenn die Seite um 100 Pixel gescrollt wird.

Konkret bedeutet das, dass die spezielle CSS-Klasse, 'elementor-sticky-active' im Code auftaucht, wenn du zum Effekte Offset scrollst. Und das CSS, das auf diese Klasse abzielt, tritt dann in Kraft.

Wenn wir also die Header tauschen, setzen wir den zweiten Header sticky, verstecken ihn über der Webseite oder lassen sie einfach verschwinden (je nachdem, welchen Stil du bevorzugst). Dann schreiben wir CSS, das auf die Klasse des zweiten Headers abzielt, damit er erscheint, wenn der Nutzer bis zu der Stelle scrollt, die du im Effekte Offset eingestellt hast.

Header beim Scrollen ändern mit Elementor Schritt für Schritt

Schritt 1: Header-Template erstellen

Erstelle Deinen Header im Theme Builder von Elementor. Navigiere in deinem Dashboard in die linke Menüleiste und gehe dort unter Elementor > Templates > Theme Builder. Füge ein neues Header-Template hinzu.

Schritt 2: Erstelle deine beiden Header als Abschnitte

In deinem Header-Template fügst du zwei Abschnitte hinzu und gestaltest sie so, wie du möchtest. Für deinen Haupt-Header vergibst Du einen Z-Index von 100.

Schritt 3: Sticky-Funktion und CSS-Klassen hinzufügen

Von deinem Haupt-Header wählst du den Abschnitt aus, navigierst zum Reiter "Erweitert" und fügst in den CSS-Klassen header-1 hinzu, was die Klasse für den Abschnitt deines Haupt-Headers sein wird.

Für deinen zweiten Header, der beim Scrollen erscheint, navigiere zu dem Abschnitt, gehe im Elementor-Editor zu Erweitert und runter zu CSS-Klassen. Füge dort header-2 hinzu, und dies wird die Klasse für den Abschnitt deines sekundären Headers sein.

Schritt 4: Safari-Fix

Beim Testen habe ich festgestellt, dass die Header im Safari-Browser nicht reibungslos umschalten. Flüssige Animationen sind jedoch sehr wichtig. Hier ist der Fix, den ich verwendet habe, um sicherzustellen, dass deine Header auf Safari, Chrome und Firefox reibungslos wechseln.

Es ist ganz einfach. Verschiebe deinen zweiten Header so weit nach oben, dass er über deinem Haupt-Header liegt. Also so, dass der zweite Header im Navigator vor dem Haupt-Header kommt.

Elementor: Wechselnder Header beim Scrollen 1

Schritt 5: Hinzufügen von Sticky-Effekten

Du wirst den Sticky-Effekt nur in dem zweiten Header nutzen. Hier navigierst du im Abschnitt zum Reiter Erweitert > zu den Bewegungseffekten > unter Sticky wählst du "Oben”.

Wähle aus, ob du den Effekt auf Desktop, Tablet und Mobile aktivieren möchtest. Oft macht es Sinn, den Effekt nur auf Desktop- und Tablet-Geräten zu nutzen, um den Platz auf mobilen Geräten besser zu nutzen. Die Entscheidung liegt ganz bei dir.

Den “Offset” bei 0 lassen.

Der Effekte-Offset ist deine Haupt-Einstellung. Die Zahl, die du hier einträgst, ist die Anzahl der Pixel, die die Webseite scrollen muss, bis der Sticky-Effekt eintritt. Du kannst hier frei herumspielen und ausprobieren, was für dich am besten funktioniert.

Beachte nur, dass der ganze Effekt nicht in Kraft tritt, wenn du den Wert auf 0 lässt.

Schritt 6: Hinzufügen von CSS

Es gibt unterschiedliche Möglichkeiten, das CSS hinzuzufügen. Ein Weg führt über die style.css deines Child-Themes. Diese findest du, indem du in deinem Dashboard zu Design > Theme Editor navigierst. Stelle sicher, dass dein Child-Theme im Theme-Editor ausgewählt ist, indem du das Häkchen bei "Select theme to edit" in der rechten Toolbar setzt.

Elementor: Wechselnder Header beim Scrollen 2

Wenn du kein Child-Theme hast, kannst du dein CSS im WordPress Customizer hinzufügen. Diesen findest du, indem du zu Design > Customizer > Zusätzliches CSS navigierst.

Ich versuche, das Hinzufügen von CSS im Elementor-Editor zu vermeiden, da man schnell den Überblick verlieren kann. Das kann später zu Kopfschmerzen führen, weil man nicht mehr weiß an welcher Stelle man das zusätzliche CSS eingefügt hat. Am besten hältst du deinen gesamten CSS-Code zentral an einer Stelle.

Hier ist das CSS

Da es zwei Stile gibt, den Slide-Down und den Fade-In Stil, fügst du nur einen der untenstehenden CSS Schnipsel hinzu. Füge nicht beide hinzu.

Option 1: Der Reveal oder Slide-Down Header

/* Header Slide-Down */

.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}

.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}

.elementor-sticky--effects.header-1 {
display: none!important;
}

/* Ende Header Slide-Down*/

Option 2: Der Fade-In Header

/* Header Fade-In */

.header-2 {
opacity: 0;
-moz-transition: opacity .25s ease-out!important;
-webkit-transition: opacity .25s ease-out!important;
transition: opacity .25s ease-out!important;
}

.elementor-sticky--effects.header-2 {
opacity: 1!important;
}

/* Ende Header Fade-In */

Schritt 7: Safari-Fix Teil 2

Nachdem du das CSS hinzugefügt hast, sollte dein zweiter Header ausgeblendet werden und alles funktionieren.

Aber: Wegen des Safari-Fixes gibt es einen zusätzlichen Abstand über dem haupt-Header. Im Abschnitt des Haupt-Headers vergibst du deswegen unter Erweitert dem oberen Margin einen negativen Wert. Meist passt hier ein Wert um -80px. Plus minus ein paar Pixel.

Zusammenfassung Elementor wechselnder Header

Hoffentlich findest du diesen Artikel hilfreich. Hier eine Zusammenfassung des Inhalts:

  • Manchmal lohnt es sich, einen beim Scrollen wechselnden Header einzusetzen
  • Dies kann man mit Elementor Pro und dem Theme Builder erreichen
  • In einem Header-Template werden zwei Abschnitte angelegt und die Header wie gewünscht designt
  • Mit dem Elementor Sticky-Effekt und ein wenig Custom CSS werden die Header so gestylt, dass der zweite Header beim Scrollen angezeigt wird

Falls etwas unklar ist, Du Fragen hast oder einfach Deine Erfahrungen teilen möchtest, freue ich mich über Deinen Kommentar und lass mich gerne wissen, falls es ein ähnliches oder anderes Thema gibt, zu dem Du gerne mehr erfahren würdest.


Dir hat der Artikel geholfen und du möchtest mit unseren WordPress Tipps, Tricks und Anleitungen auf dem Laufenden bleiben? Dann trag dich einfach in unseren kostenlosen Newsletter ein ...


Über den Autor

Aykut Askeri

Ich bin Webunternehmer und Gründer von LIONCAT. Ich liebe das Internet und insbesondere Menschen auf ihrem Weg beratend und tatkräftig zu unterstützen. Mein Spezialgebiet ist dabei die Konzeption und das Controlling von Webpräsenzen.


Diese Beiträge könnten dir auch gefallen

Welchen WordPress Webhoster wählen?

Welchen WordPress Webhoster wählen?

WordPress: Vorteile und Nachteile

WordPress: Vorteile und Nachteile
  • Lieber Aykut, danke für Dein Tip mit dem Sticky Header in Elementor Pro, das hat super bei mir funktioniert.
    Allerdings habe ich eine Frage zu den Submenü, da dieser bei mir seitdem nicht mehr auftaucht, d.h. wenn ich mit der Maus drüber gehe, sieht man das nicht, obwohl z-index des menus auf 100 steht.

    Könntest Du mir da weiterhelfen bitte, da ich jetzt einiges ausprobiert habe und es funktioniert nicht. Übrigens ist das der Redesign für mein Kunde und die Seite ist nicht online.

    Danke und lg

  • Hallo, das ist genau das was ich gesucht habe. Vielen Dank! Allerdings funktioniert der Effekt unter Chrome nicht, bei anderen Browsern schon. Unter Chrome erscheint und bleibt nur der 1. Header.
    Woran könnte das liegen?

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >