Erstellen Sie einen Sticky Header in Elementor (einfachste Methode)

In diesem Artikel wird eine einfache Möglichkeit vorgestellt, einen Sticky-Header in Elementor hinzuzufügen, ohne Add-Ons von Drittanbietern und mit unglaublich einfachem CSS.

Elementor hat keine großartige Sticky-Header-Funktionalität eingebaut, also müssen wir Plugins von Drittanbietern oder CSS und JavaScript verwenden.

Wie wir einen Sticky Header in Elementor hinzufügen

Unsere Agentur verwendet 4 einfache Zeilen benutzerdefinierten CSS , um unsere Sticky-Header hinzuzufügen, und wollte unsere Methode mit Ihnen teilen. Am Ende dieses Artikels werden auch erweiterte Ergänzungen zu Ihrem Sticky Header und Elementor enthalten sein, die Ihnen helfen, die Bildgröße beim Scrollen zu ändern, die Hintergrundfarbe Ihres Sticky Headers beim Scrollen zu ändern und vieles mehr

Denken Sie daran, dass sich dieser Leitfaden an diejenigen richtet, die Elementor Pro verwenden. Das liegt daran, dass Elementor Pro den Theme Builder enthält, mit dem Sie Ihre eigenen Kopf- und Fußzeilen einrichten können. Wenn Sie dieses Plugin noch nicht besitzen, ist es seinen Preis von 49,00 $ wert, da es Ihnen im Wesentlichen ermöglicht, eine Website von Grund auf zu erstellen.

Wenn Sie es über diesen Affiliate-Link abrufen, unterstützen Sie unsere Agentur ohne zusätzliche Kosten für Sie.

Schritt 1: Erstellen Sie den grundlegenden Header

Zuerst bauen wir unseren grundlegenden Header aus und wenden ihn auf alle Seiten auf Elementor an. Um auf den Header-Builder zuzugreifen, navigieren Sie zu den Vorlagen im Admin-Back-End-Komma und klicken Sie dann auf Theme Builder.

Fügen Sie eine neue Vorlage hinzu und ändern Sie den Typ in Kopfzeile. Nachdem Sie die Vorlage benannt haben, klicken Sie auf die grüne Schaltfläche „Vorlage erstellen“.

Bauen Sie jetzt Ihren Header aus. Dazu erstellen die Leute normalerweise einen neuen Abschnitt, teilen ihn in zwei Spalten und fügen dann ein Website-Logo und ein Navigationsmenü hinzu.

Normalerweise ist das Website-Logo direkt links vom Abschnitt ausgerichtet (und in der linken Spalte enthalten), während sich das Elementor-Menü in der rechten Spalte befindet und rechts ausgerichtet ist.

Sie können auch nur eine Spalte verwenden und die Positionierung unter erweiterten Einstellungen für jedes Element innerhalb des Menüs auf Inline festlegen .

Sie können die horizontale Ausrichtung „ Zwischenraum “ verwenden, um den gleichen Effekt wie bei zwei Spalten zu erzielen. Dies ist unsere empfohlene Methode, da sie die Anzahl der Dom-Elemente reduziert und zu einer (geringfügig) schneller ladenden Website führt.

Unter der Registerkarte „Styling“ in Elementor können Sie Ihren Kopfzeilenhintergrund so manipulieren, dass er transparent oder farbig ist. In diesem Beispiel möchten wir, dass unsere Kopfzeile unseren anfänglichen Heldenabschnitt überlagert, was bedeutet, dass wir den Hintergrund transparent halten werden. Dazu setzen wir die Hintergrundfarbe des Abschnitts auf rgb(0,0,0) .

Stellen Sie sicher, dass Sie das HTML-Tag von der Standardeinstellung auf „Header“ ändern.

Geben Sie Ihrem Header schließlich eine benutzerdefinierte CSS-ID, z. B.: #my-cool-header. (Wir werden auch eine benutzerdefinierte CSS-Klasse hinzufügen)

Nachdem Sie Ihren Header erstellt haben, veröffentlichen Sie ihn und legen Sie die Anzeigebedingungen entsprechend fest. In diesem Beispiel zeigen wir diesen Header in allen Bereichen unserer Website an. Die bedingten Sichtbarkeitswerkzeuge von Elementor sind jedoch eines der besten in der Branche, und Sie können dies auch verwenden, um Ihren Sticky-Header überall dort anzuzeigen, wo Sie es benötigen.

Wenn Sie an dieser Stelle zum Frontend Ihrer Website navigieren, sehen Sie die Kopfzeile deutlich sichtbar. Aber wie Sie sehen werden, ist es weder klebrig noch überlagert es den ursprünglichen Inhalt.

Um unseren Elementor-Header klebrig zu machen (dh den Inhalt zu überlagern, wenn Sie den Bildschirm nach unten scrollen), ist es an der Zeit, benutzerdefiniertes CSS hinzuzufügen.

Navigieren Sie zurück zu Ihrem Header-Builder und wählen Sie die Gesamtspalte aus. Gehen Sie zur Registerkarte „Erweiterte Einstellungen“ dieses Abschnitts und öffnen Sie die benutzerdefinierte CSS-Eingabe.

?? Dies ist der Teil des Artikels, in dem wir Ihnen die unglaublich einfache Möglichkeit zeigen, Ihren Header in Elementor klebrig zu machen.

Fügen Sie in der benutzerdefinierten CSS-Eingabe den folgenden Code hinzu:

#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; }
 Codesprache: CSS ( css )

Wenn Sie es in die Eingabe eingeben (anstatt zu kopieren und einzufügen), können Sie sehen, was jede Zeile tut. Zuerst wendet Selektor dieses benutzerdefinierte CSS auf das Ziel-Wrapper-Element an, das in diesem Fall der Header-Abschnitt ist.

Zweitens stellt die position:fixed sicher, dass die Kopfzeile beim Herunterscrollen der Seite klebrig bleibt.

Drittens sorgt top:0 dafür, dass die Kopfzeile am oberen Rand Ihres Browser-Ansichtsfensters fixiert bleibt.

Viertens sorgt der z-index:9999 dafür, dass der Header vor allem der Inhalt auf der Seite bleibt.

Wenn Sie zurück zum Frontend Ihrer Website navigieren, sehen Sie, dass die Kopfzeile jetzt den Inhalt überlagert. Wenn Sie die Seite nach unten scrollen, bleibt ihre Position am oberen Rand des Bildschirms fixiert.

Im Wesentlichen ist es der einfachste Sticky-Header, den Sie jemals in eine Elementor-Website integrieren werden. Alles, was Sie brauchen, sind vier CSS-Zeilen.

An diesem Punkt können Sie anhalten und die Kopfzeile so belassen, wie sie ist. Oft möchten wir jedoch einige erweiterte Effekte hinzufügen.

Für uns sind die beiden wichtigsten Effekte für jeden Sticky Header in Elementor die folgenden:

• Ändern des Hintergrunds von transparent zu einer Farbe, wenn Ihr Benutzer auf dem Bildschirm nach unten scrollt

Dies ist wichtig, da es sicherstellt, dass die Menüelemente beim Herunterscrollen des Bildschirms sichtbar sind. Typischerweise besteht ein Held aus einem dunklen Foto, was bedeutet, dass Ihr Besucher einen ausreichenden Kontrast hat, um Ihre Navigation anzuzeigen und darauf zu klicken. Wenn Sie jedoch auf dem Bildschirm nach unten scrollen, macht das Ändern der Hintergrundfarbe auf einem klebrigen Elementor-Header das Lesen und Verwenden viel einfacher.

• Ändern des Bildes auf der Schriftrolle

In vielen Fällen enthält das Startmenü das Firmenlogo, das den Namen darin anzeigt. Dies macht es zu einem breiten Verhältnis, etwa 16 zu 9, das reduziert werden kann, wenn der Besucher den Bildschirm nach unten scrollt.

Durch die Reduzierung der Größe des Firmenlogos wird auch die Gesamthöhe des Sticky-Headers in Elementor reduziert, wodurch die Größe des Darstellungsbereichs maximiert wird, den der Benutzer zum Anzeigen von Inhalten verwenden kann.

Zum Beispiel können wir unser Logo wie das rechte oben auf der Seite haben.

Aber das Logo ändert sich dann nach links (und schrumpft), wenn der Benutzer nach unten scrollt, wodurch die Höhe von allem minimiert wird.

Erweiterte Ergänzungen

Ändern Sie die Hintergrundfarbe beim Scrollen

Die erste erweiterte Ergänzung, die wir an unserem klebrigen Elementor-Header vornehmen möchten, ist das Ändern der Hintergrundfarbe des allgemeinen Abschnitts beim Scrollen.

Dazu verwenden wir grundlegendes JavaScript und CSS. Wenn Ihnen das Angst macht, machen Sie sich keine Sorgen, alles, was Sie tun müssen, ist Kopieren und Einfügen in einen HTML-Block.

Ziehen Sie zuerst den HTML-Block per Drag & Drop direkt in die Kopfzeile. Machen Sie sich keine Sorgen, die Struktur zu verändern, da der HTML-Block nicht im Frontend angezeigt wird.

Fügen Sie den folgenden Code ein:

 < script > window .onscroll = () => { const nav = document .querySelector( '#my-cool-header' ); if ( this .scrollY <= 10 ) nav.className = '' ; else nav.className = 'scroll' ; }; </ script >
 Codesprache: HTML, XML ( xml )

Dieser Code wendet CSS-Styling an, sobald Sie über 10 Pixel hinaus scrollen.

Für unser benutzerdefiniertes CSS mit dem Header fügen wir zwei neue Zeilen hinzu. Die erste Zeile lässt den Übergang zwischen transparent und Hintergrundfarbe einblenden.

Die zweite stellt sicher, dass der ursprüngliche Hintergrund transparent ist.

#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; Übergang : 500 ms Leichtigkeit;
Hintergrund : transparent;
}
Codesprache: CSS ( css )

Dann fügen wir einen völlig neuen CSS-Selektor hinzu, der die Hintergrundfarbe anwendet, wenn der Benutzer auf Ihrer Seite nach unten scrollt:

#my-cool-header .scroll { background : #000 ; }
 Codesprache: CSS ( css )

Kopieren Sie einfach diese beiden CSS-Codes und fügen Sie sie direkt in das benutzerdefinierte CSS für Ihren Kopfzeilenabschnitt ein.

Speichern Sie nun die Seite und navigieren Sie zu Ihrer Kopfzeile im Frontend. Wenn Sie die Seite nach unten scrollen, wird der .scroll-Klasseneffekt angewendet. In diesem Beispiel haben wir nur den Hintergrund in Schwarz geändert, aber Sie können mit der Größe, den Schriftstilen und mehr herumspielen.

Bild beim Scrollen ändern

Ein weiterer fortschrittlicher Effekt, den wir gerne auf unsere klebrigen Elementor-Header anwenden, ist die Änderung der Größe des Logobilds oder sogar des gesamten Logobilds insgesamt.

Lassen Sie uns zunächst darüber sprechen, wie Sie die Größe des Bildes mithilfe des JavaScripts und der bereits vorhandenen Klassen von „Hintergrundfarbe beim Scrollen ändern“ ändern können.

Geben Sie einfach den Selektor Ihres Site-Logos hinter dem Original und .scroll css wie folgt an:

#my-cool-header img { width : 100px ; transition : 500ms ease; } #my-cool-header .scroll img { width : 50px ; }
 Codesprache: CSS ( css )

Dieser Code ändert die Breite unseres Header-Bildes um 50 Pixel, wenn Sie die Seite nach unten scrollen. In unserem Fall mussten wir eine Größenänderung des eigentlichen Headers hinzufügen, damit er besser zu unserem 50-Pixel-Logo passt.

Dies wurde auf den Selektor #my-cool-header.scroll angewendet.

Nehmen wir an, Sie wollten das Bild komplett ändern, wenn Sie auf der Seite nach unten gescrollt haben. Auch das ist möglich und ganz einfach mit CSS zu bewerkstelligen.

#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; transition : 500ms ease; background :transparent; } #my-cool-header .scroll { background : #000 ; height : auto; margin-top : - 20px !important ; } #my-cool-header img { width : 100px ; transition : 500ms ease; } #my-cool-header .scroll img { opacity : 0 ; transition : 500ms ease; } #my-cool-header .scroll .logo { background-image : url (https://img.freepik.com/free-vector/cute-pig-with-pink-skin-white_1308- 40061 .jpg?size= 626 &ext=jpg); background-size : cover; width : 50px ; transition : 500ms ease; }
 Codesprache: CSS ( css )

Dadurch wird das ursprüngliche Logobild ausgeblendet und an seiner Stelle ein Hintergrundbild angezeigt. In unserem Beispiel wäre dies ein weiteres Schweinefoto.

Sie können auch CSS-Medienabfragen in Elementor verwenden, um je nach Bildschirmbreite unterschiedliche Bildlaufeffekte anzuwenden.

Fazit

Wir hoffen, dass Ihnen eine einfache Möglichkeit gezeigt wurde, Sticky Header in Elementor hinzuzufügen, zusammen mit einigen erweiterten Effekten.

Wenn Sie Fragen dazu haben, können Sie sich gerne in den Kommentaren melden.