So verwenden Sie Sticky Header und Scroll-Effekte mit Elementor

Ein Header ist im Allgemeinen das Erste, was eine Person beim Besuch Ihrer Website sieht, und dient als Grundlage dafür, wie sie sie erkunden.

Unabhängig davon, ob Sie eine E-Commerce-Website, eine persönliche Website, eine Website für Bildungszwecke, ein Community-Forum oder eine Website für die Medien haben, der Header macht es einfach zu durchsuchen und angenehm zu verwenden.

Sticky Header werden bei Webdesignern immer beliebter, um eine Website für eine verbesserte Benutzerführung zu organisieren und zu strukturieren.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren Sticky-Header mit Elementor erstellen.

Sticky Header ermöglichen es Benutzern, die Kopfzeile und den Menüabschnitt der Seite anzuzeigen, unabhängig davon, wie weit sie nach unten scrollen.

• Schritt 1: um ein Menü zu erstellen
• Schritt 2: Erstellen Sie Ihren Header in Elementor
• Schritt 3: Verwenden von Elementor zum Erstellen einer Header-Vorlage
• SCHRITT 4: So machen Sie Ihren Elementor-Header klebrig
• Schritt 5: Passen Sie unser CSS an
• Fazit

Schritt 1: um ein Menü zu erstellen

Um deiner Website einen Sticky-Header hinzuzufügen, gehe zu wp-admin > Appearance > Menus und erstelle ein Hauptmenü. Geben Sie in der Kopfzeile den Abschnitt ein, den Sie anzeigen möchten.

Schritt 2: Erstellen Sie Ihren Header in Elementor

Gehen Sie zu Elementor Templates > Theme Builder , wenn Sie mit der Erstellung des Hauptmenüs fertig sind. Wählen Sie den Header-Bereich auf der Theme-Builder-Seite und klicken Sie auf „ Add New Header “.

Geben Sie der Kopfzeilenvorlage einen Namen und klicken im Popup-Fenster auf Vorlage erstellen

Danach werden Sie zur Elementor-Bearbeitungsseite weitergeleitet. Sie können entweder eine der vorgefertigten Header-Vorlagen verwenden oder Ihre eigenen von Grund auf neu gestalten.

Wir beginnen in diesem Tutorial mit unserem Elementor-Sticky-Header von vorne.

Sie können verschiedene Header-Widgets im Elementor-Editor sehen, bevor wir mit dem Entwerfen einer Vorlage beginnen. Mit diesen Abschnitten können wir schnell und einfach eine Kopfzeile gestalten.

Schritt 3: Verwenden von Elementor zum Erstellen einer Header-Vorlage

Erstellen Sie ein zweispaltiges Layout. Stellen Sie sicher, dass die Inhaltsbreite des Abschnitts auf „ Boxed “ eingestellt ist.

Stellen Sie in den Einstellungen für die Inhaltsbreite im Elementor-Bearbeitungsbereich die erste Spaltenbreite auf 20 % unter der Spalte „ Bearbeiten “ ein.

Platzieren Sie das Site-Logo Ihrer Website in der ersten Spalte und richten Sie es links aus.

Fügen Sie in der zweiten Spalte ein Navigationsmenü hinzu und wählen Sie das Hauptmenü aus, das Sie in Schritt 1 erstellt haben. Richten Sie das Navigationsmenü nach rechts aus.

Wir werden die Kopfzeile für dieses Tutorial einfach halten. Sie können Ihre Kopfzeile detaillierter gestalten, indem Sie eine Hintergrundfarbe, schwebende Animationseffekte, Schaltflächen und andere Elemente hinzufügen.

SCHRITT 4: So machen Sie Ihren Elementor-Header klebrig

Nachdem wir unseren grundlegenden Elementor-Header erstellt haben, ist es an der Zeit, ihn in einen Sticky-Header zu verwandeln.

Gehen Sie dazu in den Bereich Bearbeiten (Bereich Gesamter Kopf). Wählen Sie Erweitert > Bewegungseffekte aus dem Dropdown-Menü.

Wählen Sie unter Bewegungseffekten „ Sticky to the Top “ und dann „ Geräte “, wo die Sticky-Kopfzeile erscheinen soll.

Ein klebriger Header ist auf Geräten in Tablet-Größe fast immer unerwünscht und auf mobilen Bildschirmen fast immer unerwünscht. Klicken Sie daher unter Sticky On neben beiden Optionen auf das „x“ und lassen Sie nur „Desktop“ ausgewählt.

Wenn Sie mit Ihrer Arbeit zufrieden sind, klicken Sie auf „ Veröffentlichen “. Dadurch wird der Sticky-Header aktiviert, aber Ihr aktueller Theme-Header wird zu diesem Zeitpunkt nicht ersetzt.

Elementor fordert Sie auf, eine Bedingung für Ihren Header hinzuzufügen, nachdem Sie ihn veröffentlicht haben. Sie können die Kopfzeile überall auf der Site anzeigen, indem Sie Bedingungen hinzufügen.

Wir wollten, dass dieser Header auf der gesamten Website angezeigt wird und die 404-Seite weggelassen wird. Aus diesem Grund haben wir die gesamte Site in die Auswahl einbezogen und die 404-Seite weggelassen.

Wie Sie sehen, ist die Verwendung von Elementor zum Erstellen Ihres personalisierten Sticky-Headers einfach und schmerzlos!

Machen Sie Ihren Elementor Sticky Header viel besser mit benutzerdefiniertem CSS Elementor ermöglicht es Ihnen, einen Sticky Header anzupassen, indem Sie eine CSS-Klasse hinzufügen, um ihn stilvoller zu machen.

Hier können Sie die Höhe, die Hintergrundfarbe, den Übergang und die Sticky-Effekte der Sticky-Kopfzeile anpassen.

Kehren Sie zum Bearbeitungsbereich zurück, um Ihre klebrige Kopfzeile stilvoller zu gestalten (Bereich „Gesamte Kopfzeile“). Wählen Sie Erweitert > Bewegungseffekte aus dem Dropdown-Menü.

Stellen Sie den „ Effects Offset “ in diesem Fall auf 100 ein. Wenn ein Besucher Ihre Website verwendet, ist dies die Scrolldistanz, bei der der Scrolleffekt auftritt.

Setzen Sie den Bewegungsoffset auf 100.

Bitte beachten Sie, dass die Optionen für Offset-Effekte nur funktionieren, wenn benutzerdefiniertes CSS verwendet wird. Wenn Sie also kein eigenes benutzerdefiniertes CSS hinzufügen, können Sie die letzte Option überspringen.

Bevor Sie den endgültigen Sticky-Header veröffentlichen, können Sie dem letzten Sticky-Header optional Bedingungen hinzufügen. Ein amp -Header-Bedingung ist, wo Sie möchten, dass der Sticky-Header angezeigt wird. Als amp Seite wählen .

Sie möchten nun benutzerdefiniertes CSS in Ihre Website einbinden. Benutzerdefiniertes CSS ist ziemlich flexibel, und Sie können alles einfügen, was Sie möchten, wenn Sie mit der Bedienung vertraut sind.

Wir haben die Reinigung abgeschlossen; Wir gehen nun zu den Feinheiten der Website über, einschließlich des Hinzufügens des benutzerdefinierten CSS-Codes. Wir werden sowohl die Grundlagen als auch fortgeschrittene Techniken demonstrieren, um kostenlose Sticky-Header-Effekte für Elementor zu erhalten. Wenn Sie Elementor 2.9 oder höher verwenden, können Sie die globalen Stilregeln verwenden, um dieses CSS in Ihre Site zu integrieren.

Befolgen Sie die unten beschriebenen Verfahren, um das benutzerdefinierte CSS einzuschließen:

• Um auf das Hamburger-Menü zuzugreifen, suchen Sie es in der oberen linken Ecke des Elementor-Menüs und wählen Sie es aus.
• Wählen Sie Designstile auswählen aus dem Dropdown-Menü unter dem Abschnitt Globaler Stil.
• Wählen Sie Benutzerdefiniertes CSS aus dem Dropdown-Menü in diesem Abschnitt (die Farbe ändert sich von der vorherigen genetischen roten Farbe in Blau).

Fügen Sie anschließend den unten stehenden CSS-Code ein.

header.sticky-header { --header-height: 90px; --opazität: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --Übergang: .3s Ease-in-out; Übergang: Hintergrundfarbe var(--Übergang), Hintergrundbild-Var(--Übergang), Hintergrund-Filter var(--Übergang), Deckkraft var(--Übergang); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; Hintergrundbild: keines !wichtig; Deckkraft: var(--opazität) !wichtig; -webkit-backdrop-filter: Unschärfe (10px); Hintergrundfilter: Unschärfe (10px); } header.sticky-header > .elementor-container { Übergang: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; Höhe: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { Übergang: Auffüllen var(--übergang); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; Polster-Oberseite: 10px!wichtig; } header.sticky-header > .elementor-container .logo img { Übergang: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Schritt 5: Passen Sie unser CSS an

Die oben aufgeführten Anweisungen führen Sie durch den Prozess zum Erstellen eines abnehmenden Sticky-Headers in Elementor. Wenn Sie mehr über die weitere Personalisierung des Headers erfahren möchten, können Sie sich den unten bereitgestellten CSS-Code ansehen, der es Ihnen ermöglicht, beim Header-Design kreativer zu sein. Je nach Bedarf können Sie den Elementor-Sticky-Header personalisieren, indem Sie zahlreiche Einstellungen ändern und ihn mehr oder weniger klebend machen. Wir empfehlen Ihnen, einen Code-Editor zu verwenden, um diese CSS-Änderung direkt in Elementor zu integrieren. Sie können Visual Studio Code oder Atom verwenden, die Ihnen dabei helfen, den Code schnell zusammenzustellen und die Vorteile zu nutzen. Diese Editoren können kostenlos verwendet werden und können von verschiedenen Systemen, einschließlich Windows, Mac OS X und Linux, aufgerufen werden.

In diesem Abschnitt wird gezeigt, wie Sie die Auswirkungen des verkleinernden Elementor-Headers mithilfe des CSS-Stylesheets anpassen können. Wenn Sie nur eine Änderung an der benutzerdefinierten Eigenschaft vornehmen, wird diese sofort an den Rest des CSS-Codes angepasst.

Anpassungsoptionen für die absteigende Kopfzeile stehen auf insgesamt fünf verschiedene Arten zur Verfügung. Nicht alle Variablen müssen angepasst werden, aber Sie haben die Möglichkeit, dies zu tun, wenn Sie dies wünschen. Sobald Sie sich entschieden haben, welche Variablen Sie ändern möchten, können Sie nur diese Variablen ändern und den Rest der Parameter unverändert lassen.

Hier sind die fünf CSS-Variablen, wobei die Standardwerte für jede Variable rot angezeigt werden.

Sticky-Hintergrundfarbe ist #0e41e5 und die Kopfzeilenhöhe beträgt 90px. Andere Styling-Optionen sind: Opazität 0,90, Shrink-Me von 0,80, Opazität 0,90 und Easy-In/Ease-Out-Übergang von 300ms.

Die benutzerdefinierten Eigenschaften sind die Elemente , die nach dem Doppelstrich erscheinen „-“ in unserem ex amp den Code, und Sie können sie aufgelistet an der Spitze unseres s finden amp den Code. Sie müssen lediglich den Wert anpassen, der im Satz nach dem Doppelpunkt und vor dem Semikolon angezeigt wird.

Für die Ex - amp - le, wenn Sie die Höhe des Kopfes 100px zu erhöhen, ist hier, wie es vor und nach der Änderung der Höhe aussehen würde:

Vorher betrug die Kopfzeilenhöhe 90 Pixel; danach betrug die Kopfzeilenhöhe 100 Pixel.

Mit Elementor können Sie ein Sticky-Header-Menü auf verschiedene Weise gestalten. Sie können nicht nur einen kostenlosen Elementor-Sticky-Header erstellen, sondern den Header auch personalisieren, indem Sie ihm benutzerdefiniertes CSS hinzufügen. Mit dieser Schritt-für-Schritt-Anleitung können Sie detaillierte Anweisungen zum Erstellen eines abnehmenden klebrigen Elementor-Headers mit Elementor erhalten und Ihr CSS optimieren.

Elementor enthält eine Vielzahl von Header-Vorlagen; jedes ist einzigartig und elegant und hilft Ihren Zuschauern bei der Navigation auf Ihrer Website.

Mit Elementor haben Sie die vollständige Kontrolle über den Stil Ihrer Website-Header. Für die Ex - amp - le, könnten Sie das Website - Logo in der Mitte der Seite und das Hauptmenü darunter platzieren. Sie können eine Kopfzeile über der Hauptkopfzeile hinzufügen, um die Telefonnummer, Links zu sozialen Medien und andere Informationen anzuzeigen.

Hier sind nur ein paar Ex - amp les der zahlreichen Kopfgestaltungsmöglichkeiten zur Verfügung Elementor Benutzer.

Fazit

Das Einfügen eines klebrigen Headers auf Ihrer Website kann es Besuchern erleichtern, Ihre Website zu durchsuchen und die Klicks auf alle Bereiche Ihrer Website zu erhöhen.

Elementor macht das manuelle Generieren von Sticky-Headern mit Javascript und CSS überflüssig, die bisher erforderlich waren. Das Erstellen eines Sticky-Headers für Ihre Website war dank der Sticky-Header von Elementor noch nie so einfach wie jetzt.