So verwenden Sie Sticky-Header- und Scrolling-Effekte mit Elementor

Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht, und dient als Grundlage dafür, wie sie diese erkundet.

Egal, ob Sie eine E-Commerce-Website, eine persönliche Website, eine Website für Bildung, ein Community-Forum oder eine Website für die Medien haben, der Header macht das Durchsuchen einfach und macht die Nutzung angenehm.

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.

Mit Sticky-Headern können Benutzer die Kopfzeile und den Menübereich der Seite anzeigen, unabhängig davon, wie weit sie nach unten scrollen.

• Schritt 1: So erstellen Sie ein Menü
• Schritt 2: Erstellen Sie Ihren Header in Elementor
• Schritt 3: Mit Elementor eine Header-Vorlage erstellen
• SCHRITT 4: So machen Sie Ihren Elementor-Header klebrig
• Schritt 5: Passen Sie unser CSS an
• Abschluss

Schritt 1: So erstellen Sie ein Menü

Um einen Sticky-Header zu Ihrer Website hinzuzufügen, gehen Sie zu wp-admin > Erscheinungsbild > Menüs und erstellen Sie 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-Vorlagen > Theme Builder, wenn Sie mit der Erstellung des Hauptmenüs fertig sind. Wählen Sie den Header-Bereich auf der Theme-Builder-Seite aus und klicken Sie auf „ Neuen Header hinzufügen “.

Geben Sie der Header-Vorlage einen Namen und klicken Sie im Popup-Bildschirm auf Vorlage erstellen

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

In diesem Tutorial beginnen wir mit unserem Elementor-Sticky-Header ganz von vorne.

Bevor wir mit dem Entwurf einer Vorlage beginnen, können Sie im Elementor-Editor verschiedene Header-Widgets sehen. Mithilfe dieser Abschnitte können wir schnell und einfach einen Header entwerfen.

Schritt 3: Mit Elementor eine Header-Vorlage erstellen

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 Breite der ersten Spalte unter der Spalte „ Bearbeiten “ auf 20 % 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ü rechts aus.

Wir werden den Header 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 nun unseren grundlegenden Elementor-Header erstellt haben, ist es an der Zeit, ihn in einen Sticky-Header umzuwandeln.

Gehen Sie dazu in den Abschnitt „Bearbeiten“ (Abschnitt „Gesamte Kopfzeile“). Wählen Sie im Dropdown-Menü Erweitert > Bewegungseffekte

Wählen Sie unter „Bewegungseffekte“ „ An der Oberseite kleben Geräte “ dort aus, wo der Sticky-Header angezeigt werden soll.

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

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 an einer beliebigen Stelle auf der Website 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 Website in die Auswahl einbezogen und die 404-Seite weggelassen.

Wie Sie sehen, ist die Erstellung Ihres personalisierten Sticky-Headers mit Elementor einfach und schmerzlos!

Lassen Sie Ihren Elementor-Sticky-Header mithilfe von benutzerdefiniertem CSS viel besser aussehen. Mit Elementor können Sie einen Sticky-Header anpassen, indem Sie eine CSS-Klasse hinzufügen, um ihn stilvoller zu gestalten.

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

Kehren Sie zum Bearbeitungsbereich zurück, um Ihren Sticky-Header stilvoller zu gestalten (Gesamter Header-Bereich). Wählen Sie im Dropdown-Menü Erweitert > Bewegungseffekte

Stellen Sie in diesem Fall den „ Effekt-Offset “ auf 100 ein. Wenn ein Besucher Ihre Website nutzt, ist dies die Scrollstrecke, bei der der Scrolleffekt auftritt.

Stellen Sie den Bewegungsoffset auf 100 ein.

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 optional Bedingungen zum letzten Sticky-Header hinzufügen. Ein Beispiel amp eine Sticky-Header-Bedingung ist die Stelle, an der der Sticky-Header angezeigt werden soll. Als Beispiel amp Sie das Kriterium „ Gesamte Website “ wählen.

Sie möchten nun benutzerdefiniertes CSS in Ihre Website einbinden. Benutzerdefiniertes CSS ist sehr flexibel und Sie können alles einbinden, was Sie möchten, wenn Sie mit der Funktionsweise vertraut sind.

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

Befolgen Sie die unten beschriebenen Verfahren, um das benutzerdefinierte CSS einzubinden:

• 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 im Dropdown-Menü unter dem Abschnitt „Globaler Stil“ die Option „Designstile auswählen“ aus.
• Wählen Sie im Dropdown-Menü in diesem Abschnitt die Option „Benutzerdefiniertes CSS“ aus (die Farbe ändert sich von der vorherigen genetischen roten Farbe in Blau).

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

header.sticky-header { --header-height: 90px; --opacity: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --transition: .3s Easy-in-out; Übergang: Hintergrundfarbe var(--transition), Hintergrundbild var(--transition), Hintergrundfilter var(--transition), Deckkraft var(--transition); } header.sticky-header.elementor-sticky--effects { Hintergrundfarbe: var(--sticky-background-color) !important; Hintergrundbild: keines !important; Deckkraft: var(--opacity) !important; -webkit-Hintergrundfilter: Unschärfe (10 Pixel); Hintergrundfilter: Unschärfe (10 Pixel); } header.sticky-header > .elementor-container { Transition: 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 { Transition: Padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!important; } header.sticky-header > .elementor-container .logo img { Transition: 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 der Erstellung eines abnehmenden Sticky-Headers in Elementor. Wenn Sie weitere Einzelheiten zur weiteren 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. Abhängig von Ihren Anforderungen können Sie den Elementor-Sticky-Header personalisieren, indem Sie zahlreiche Einstellungen ändern und ihn mehr oder weniger klebrig 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 aus aufgerufen werden, darunter Windows, Mac OS X und Linux.

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.

Anpassungsmöglichkeiten für die abnehmende Kopfzeile stehen insgesamt auf fünf verschiedene Arten zur Verfügung. Es müssen nicht alle Variablen angepasst werden, aber Sie haben die Möglichkeit, dies zu tun, wenn Sie möchten. Sobald Sie entschieden haben, welche Variablen Sie ändern möchten, können Sie nur diese Variablen ändern und die restlichen Parameter unverändert lassen.

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

Die Hintergrundfarbe des Sticky ist #0e41e5 und die Höhe der Kopfzeile beträgt 90 Pixel. Zu den weiteren Styling-Optionen gehören: Deckkraft von 0,90, Schrumpfung von 0,80, Deckkraft von 0,90 und Ease-In/Ease-Out-Übergang von 300 ms.

Die benutzerdefinierten Eigenschaften sind die Elemente, die in unserem amp nach dem doppelten Bindestrich „–“ erscheinen. Sie finden sie oben in unserem amp aufgelistet. Es ist lediglich erforderlich, den Wert anzupassen, der nach dem Doppelpunkt und vor dem Semikolon im Satz erscheint.

Wenn Sie amp die Höhe des Headers auf 100 Pixel erhöhen möchten, sieht er vor und nach der Änderung der Höhe folgendermaßen aus:

Vorher betrug die Headerhöhe 90 Pixel; Danach betrug die Headerhöhe 100 Pixel.

Mit Elementor können Sie ein Sticky-Header-Menü auf verschiedene Arten entwerfen. Sie können nicht nur einen kostenlosen Elementor-Sticky-Header erstellen, sondern den Header auch personalisieren, indem Sie benutzerdefiniertes CSS hinzufügen. Mit dieser Schritt-für-Schritt-Anleitung erhalten Sie detaillierte Anweisungen zum Erstellen eines sinkenden Sticky-Elementor-Headers mit Elementor und zum Optimieren Ihres CSS.

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

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

Hier sind nur einige amp der zahlreichen Header-Designoptionen, die Elementor-Benutzern zur Verfügung stehen.

Abschluss

Das Einfügen eines Sticky-Headers in Ihre Website kann Besuchern das Durchsuchen Ihrer Website erleichtern und die Klicks auf alle Bereiche Ihrer Website erhöhen.

Mit Elementor entfällt die bisher erforderliche manuelle Generierung von Sticky Headern mit Javascript und CSS. Das Erstellen eines Sticky-Headers für Ihre Website war dank der Sticky-Header von Elementor noch nie so einfach wie jetzt.