Ein klebriger Header bleibt oben auf dem Bildschirm befestigt, während der Besucher scrollt. Ihr Logo, Ihr Menü und Ihre Call-to-Action-Taste bleiben erreichbar, egal wie weit jemand nach unten geht, weshalb fast jede SaaS- und Agenturseite eine ausliefert.
Diese Anleitung zeigt, wie Sie mit dem kostenlosen Header einen Sticky Header in Elementor erstellen Master Addons Theme Builder„Sie benötigen also kein Elementor Pro. Und während ich hier Master-Addons verwende, ist die Methode universell: Erstellen Sie den Header als Vorlage und stellen Sie dann seine Containerposition auf Fixed ein. Jeder Header-Builder, mit dem Sie den Header in Elementor bearbeiten können, folgt den gleichen drei Klicks.
In der Version 2020 dieses Beitrags wurde gesagt, dass man eine CSS-ID auf einem Abschnitt ablegen und in das Widget des Navigationsmenüs einfügen soll, das war die Ära Sections Elementor verwendet seit 3.6 Flexbox Container als Standardlayout, und die Positionsregelung sitzt nun genau im Panel, so dass der ganze CSS ID Dance weg ist.
Was ein klebriger Header eigentlich ist
Zwei verschiedene Verhaltensweisen werden mit demselben Namen bezeichnet, und sie zu verwechseln ist der Grund, warum Menschen schließlich auf der Suche nach einem Setting sind, das es nicht gibt.
A Fester Header Ab dem Zeitpunkt des Ladevorgangs der Seite auf dem Bildschirm ist und nie wieder geht Das ist position: fixed Tut, und das bauen wir hier.
A Sticky-on-scroll-header Ganz normal oben sitzt, wegscrollt, dann wieder reinrutscht, wenn der Besucher nach oben scrollt, da siehst du es Smart Scroll oder Hide-on-Scroll genannt Es braucht einen Scroll-Effekt, und Elementor behält die in Pro.
Bei den meisten Websites ist der feste Header der, den Sie tatsächlich haben möchten, und er ist der, den Sie kostenlos erstellen können.
Das Problem: Dein Header scrollt weg
Hier der Ausgangspunkt Ein normaler Elementor-Header sitzt wie jeder andere Container oben auf der Seite.
Scrollen Sie ein wenig nach unten und schon ist es weg Logo, Menü, Button Kostenlose Demo anfordern, das alles vom oberen Bildschirmrand entfernt Ein Besucher, der zu Ihrem Preisbereich gelangt und Kontakt anklicken möchte, muss also wieder nach oben scrollen, um das Menü wiederzufinden.
Das ist das ganze Problem, das ein Sticky Header löst.
Bevor Sie beginnen
Sie benötigen kostenlosen Elementor, Version 3.6 oder neuer, damit Container eingeschaltet sind.
Außerdem benötigt man eine Header-Vorlage, auf die man die Einstellung anwenden kann Elementors eigener Theme Builder ist Pro-only, also schnapp dir einen kostenlosen: Master Addons Enthält eine kostenlose Header-builder, und sein Theme Builder verarbeitet Footer, 404 s, Archive, und einzelne Vorlagen auch.
Bereits eine Header-Vorlage von einem anderen Plugin haben? zu Schritt 2 springen Die Positionseinstellung ist natives Elementor, verhält sich also überall dort gleich, wo Ihr Header herkam.
Schritt 1: Öffnen Sie Ihre Header-Vorlage in Elementor
Gehe zu Master-Addons > Theme Builder. Ihre Vorlagen sind nach Typ aufgelistet Meine hat einen Header und eine Footer, beide Active, beide auf die Anzeige über die gesamte Seite eingestellt.
Noch kein Header? klicken Neue Vorlage hinzufügenSetzen Sie den Typ auf Header, schalten Sie die Aktivierung ein und stellen Sie die Bedingung auf Gesamte Site. Die Header-Builder-Dokumente Decken Sie es ab und der Fluss ist derselbe, durch den ich gegangen bin Anleitung zur Bearbeitung der Fußzeile in Elementor.
Bewegen Sie die Mauszeile und drücken Sie Mit Elementor bearbeiten. Der Header öffnet sich auf einer eigenen Leinwand.
Schritt 2: Wählen Sie den Header-Container aus
Die Leute verstehen das ständig falsch, also seien Sie hier genau: Sie wollen das Außenbehälter Des Headers Nicht das Logo, nicht das Nav-Menü-Widget, und nicht ein verschachtelter Container darin versteckt.
Der zuverlässige Weg, um sicher zu sein, ist die Struktur Panel, das Ebenen-Symbol in der oberen Leiste Klicken Sie auf den Container der obersten Ebene in diesem Baum und der gesamte Header sollte hervorheben. Wenn nur das Logo oder das Menü aufleuchtet, haben Sie sich ein untergeordnetes Element geschnappt, und wenn Sie die Position darauf festlegen, wird dieses eine Widget anstelle Ihres Headers auf den Bildschirm gepinnt. Es sieht bizarr aus und es ist das erste, was überprüft, ob Ihr Ergebnis seltsam ist.
Schritt 3: Stellen Sie die Containerposition auf Fixed ein
Öffnen Sie bei ausgewähltem Header-Container die Fortgeschritten Tab und erweitern Sie die Layout Abschnitt. Die Position Dropdown hat drei Möglichkeiten.
Standard ist das, was du jetzt hast: der Header scrollt mit der Seite weg Absolut pins den Header an die Seite statt an den Bildschirm, also scrollt er trotzdem ab, was für Overlay-Header ist, nicht für klebrige Pins am Viewport behoben, und das ist der Wunsch.
Pick Festgelegt, und das Panel wird mit den Orientierungssteuerungen erweitert.
Stellen Sie die horizontale Ausrichtung nach links mit einem Versatz von ein 0und vertikale Ausrichtung nach oben mit einem Versatz von 0. Null auf beiden klebt den Header ganz oben links im Viewport an Heben Sie den vertikalen Versatz an, wenn der Header lieber etwas unter der Oberkante schweben würde.
Elementor wird auch eine Warnung auf Sie werfen: “Die individuelle Positionierung gilt nicht als Best Practice für responsives Webdesign und sollte nicht zu häufig eingesetzt werden” Ignorieren Das ist eine generelle Warnung davor, feste und absolute Elemente durch ein Layout zu streuen, und ein fester Header ist der Lehrbuchfall, wo es der richtige Aufruf ist Einfach mal die mobile Ansicht überprüfen, wenn du fertig bist, worauf ich noch zurückkomme.
Schritt 4: Erhöhen Sie den z-Index
Finden Sie noch im Layout-Bereich die Z-Index Feld und stellte es auf etwas bequem hohes Ich benutze 99.
Z-index entscheidet, welches Element oben sitzt, wenn sich zwei überlappen Ein fester Header überlappt garantiert Ihren Seiteninhalt, wenn der Besucher scrollt, und wenn sein Z-Index zu niedrig ist, scrollt der Inhalt direkt darüber Das ist der klassische Fehler, bei dem der Header technisch klebrig ist, aber Schieberegler, Popups und Bilder direkt hindurchpflügen.
Wenn immer noch etwas den Header abdeckt, erhöhen Sie die Zahl. Es muss nur das schlagen, wogegen es verliert, und viele Slider- und Popup-Plugins legen ihren eigenen Z-Index zu Tausenden fest.
Schritt 5: Veröffentlichen
Treffer Veröffentlichen.
Öffnen Sie die Live-Site und scrollen Sie. Der Header bleibt ganz unten am oberen Bildschirmrand gesperrt.
Wenn es am Frontend immer noch wegscrollt, aber genau im Editor aussieht, lösche deinen Cache, bevor du mit dem Debuggen beginnst Ein Caching-Plugin wird eine Zeit lang gerne das alte Header-CSS bedienen.
Drei Dinge, die einen festen Header und die Korrekturen brechen
Die Schritte oben bringen den Header zum Pinnen Was folgt, ist, was einen klebrigen Header, der den Kontakt mit einer echten Seite überlebt, von einem Header trennt, den Sie eine Woche später wieder herausreißen.
1. Der Header geht transparent und der Inhalt zeigt sich durch
Ein festes Element wird aus dem normalen Seitenfluss herausgehoben, es hört also auf, einen Hintergrund von irgendetwas zu erben Wenn Sie nie eine Hintergrundfarbe auf der Kopfzeile festlegen, scrollt Ihr Seiteninhalt Darunter Es und zeigt direkt durch, und Ihr Menütext verwandelt sich in dem Moment, in dem ein Bild dahinter vergeht, in eine unlesbare Suppe.
Wählen Sie den Header-Container aus, gehen Sie zu Stil > Hintergrund‘und geben Sie ihm eine einfarbige Wenn Sie wirklich einen transparenten Header wollen, ist das ein gültiger Look, aber entwerfen Sie dann den ersten Abschnitt, der dahinter arbeitet.
2. Der erste Abschnitt verbirgt sich hinter dem Kopf
Gleiche Grundursache Ein fester Header nimmt keinen Platz mehr im Layout ein, daher gleitet der erste Abschnitt nach oben, um die Lücke zu füllen, die er hinterlassen hat, und ein Teil davon bleibt schließlich hinter dem Header hängen.
Fügen Sie Ihrem ersten Abschnitt eine obere Polsterung hinzu, die ungefähr der Höhe des Headers entspricht. Wenn der Header 80 x groß ist, geben Sie dem Helden 80 px obere Polsterung. Wenn Sie nicht sicher sind, wie groß er ist, klicken Sie mit der rechten Maustaste auf die Kopfzeile am Frontend und prüfen Sie ihn; Die Höhe befindet sich genau dort in den Browser-Tools.
3. Es frisst den Bildschirm auf dem Handy
Telefonbildschirme sind kurz Ein Header, der sich auf einem Desktop-Monitor gut anfühlt, kann einen ernsthaften Teil des Viewports eines Telefons verschlucken und dem Besucher dann jede Seite hinunter folgen.
Wechseln Sie im Responsive-Modus von Elementor zur mobilen Ansicht und schneiden Sie die vertikale Polsterung des Headers ab. Die Positionsregler sind auch pro Gerät, sodass Sie Position zurücksetzen können Standard Nur auf Mobilgeräten und lassen Sie den Header dort wegscrollen Auf einer langen Artikelseite ist das normalerweise der bessere Anruf Wenn Sie benutzerdefinierte Haltepunkte ausführen, wird die Benutzerdefiniertes Breakpoints-Plugin Lassen Sie dies auf Ihre tatsächlichen Gerätebreiten abstimmen.
Funktioniert das mit anderen Header-Plugins?
Ja, und das ist der Teil, der es wert ist, verstanden zu werden. Position: Fixed ist eine native ElementorsteuerungNicht eine Master Addons Funktion Master Addons macht hier genau einen Job: Ihnen eine kostenlose Header-Vorlage zu geben, die sich in Elementor öffnet Sobald Sie im Editor sind, ist der Sticky-Teil einfach Elementor.
Wenn Sie also Header mit einem anderen Theme-Builder erstellen oder Ihr Theme einen eigenen Elementor-editierbaren Header liefert, gilt das gleiche Erweiterte > Layout > Position > Fester Pfad. Das Einzige, was sich ändert, ist, wo Sie den Header zum Bearbeiten öffnen.
Eine No-Jump-Alternative: Positionieren Sie Sticky mit kostenlosem Custom CSS
Durch die feste Positionierung wird der Header aus dem Seitenfluss gehoben, weshalb Sie den ersten Abschnitt ausfüllen müssen, damit sich dahinter nichts verbirgt. Wenn Sie diesen Schritt überspringen möchten, CSS position: sticky Alternative ist, hält er den Header im Flow und pinnt ihn erst, wenn er oben angekommen ist, es gibt also keinen Content Jump zu beheben.
Der Haken ist, wo Sie das CSS hinzufügen. Die benutzerdefinierte CSS-Box von Elementor pro Element ist eine Pro-Funktion, aber die kostenlosen Master-Addons Benutzerdefinierte CSS-Erweiterung Gibt Ihnen das gleiche Kästchen ohne Kosten Wählen Sie den Header-Container, öffnen Sie sein Custom CSS-Feld, und fügen Sie dies ein:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector Ist Elementor-Kurzschrift für das Element, das Sie bearbeiten, sodass Sie keine ID oder Klasse benötigen. Ein Gotcha: wenn ein übergeordneter Container vorhanden ist overflow: hidden, klebrig hört stillschweigend auf zu funktionieren, so deutlich, dass vom Vorfahren, wenn der Header sich weigert, festzustecken. Das vollständige Verhalten wird in der dokumentiert MDN-Referenz zur CSS-Position.
Kostenlose Sticky-Header-Methoden verglichen
Drei dieser Routen sind kostenlos, und jede passt zu einem anderen Bedürfnis Feste Leben in Elementors eigener Positionskontrolle Die Master Addons Positionierungsverlängerung Es gibt keine feste Option, aber es hilft im Header: Stupsen Sie ein Logo oder Abzeichen mit relativen oder absoluten Offsets an, mit separaten Werten pro Gerät.
| Methode | Benötigt Code | Kosten | Inhaltssprung | Am besten für |
|---|---|---|---|---|
| Position behoben (Registerkarte Elementor Erweitert) | Nein | Kostenlos | Braucht eine Polsterung | Immer sichtbarer Header |
| Position: klebrig (Custom CSS) | Ein Schnipsel | Kostenlos | Keine | Sauberes Layout, kein Sprung |
| Elementor Pro Sticky Scroll-Effekte | Nein | Bezahlt | Behandelt | Verstecken auf scrollen und schrumpfen |
| Dediziertes Sticky-Header-Plugin | Nein | Kostenlos | Behandelt | Vorgefertigte Scroll-Effekte |
Hinzufügen von Schrumpfung oder Farbänderung auf dem Bildlauf
Soll der Header schrumpfen oder die Farbe tauschen, sobald der Besucher scrollt? das liest Scrolldistanz, was CSS alleine nicht kann Ein paar Zeilen JavaScript durch die Benutzerdefinierte JS-Erweiterung In Master Addons Pro kann eine Klasse auf dem Header umgeschaltet werden, über einen Scroll-Schwellenwert hinaus, dann stylen Sie diese Klasse in benutzerdefiniertem CSS. Es ist mehr Arbeit als ein Plugin, das den Effekt liefert, also wiegen Sie den Aufwand ab, bevor Sie ihn von Hand erstellen.
Den Kopfball klebrig machen
Ist er erst einmal auf den Bildschirm geklebt, ist der Header zu 100% sichtbar, also ein zweiter Durchgang wert.
Schneiden Sie zuerst die Höhe ab. Ein hoher Header, der nie verschwindet, wird schnell nervig, und jedes Pixel, das Sie speichern, ist ein Pixel mit Inhalten, die der Besucher sehen kann. Dann schauen Sie sich an, was darin enthalten ist: Ein permanenter Slot auf dem Bildschirm ist ein gutes Zuhause für Ihren besten Link, egal ob es sich um eine Demo, Preise oder einen Kontaktbutton handelt.
Große Seite? Die Master Addons Widget für Navigationsmenüs Mega-Menüs baut, so kann man die ganze Struktur einen Klick entfernt halten, ohne dass der Header wächst Und Gewicht im Auge behalten, da der Header nun auf jeder Seite lädt und nie entlädt Die Elementor-Geschwindigkeitsführung Lohnt sich, wenn Ihre Ladezeit bereits knapp ist.
Wenn Sie lieber keinen Header von Grund auf neu bauen möchten, ist die Master Addons Template Library Fertige Header hat, die Sie importieren und dann mit den gleichen Schritten klebrig machen können, und die Vorlagenkits Versenden Sie passende Kopf- und Fußzeilen für einen ganzen Standort.
Häufig gestellte Fragen
Kann ich einen Sticky Header in Elementor kostenlos erstellen?
Ja. Die Position: Feste Steuerung ist Teil von free Elementor, Sie benötigen nur eine Header-Vorlage, um sie anzuwenden, und der Master Addons Theme Builder gibt Ihnen kostenlos einen Elementor eigenen Theme Builder und seine klebrigen Scroll-Effekte sind die Pro-only Teile.
Was ist der Unterschied zwischen einem festen und einem klebrigen Header?
Ein fester Header ist immer ab Seitenlast sichtbar und scrollt nie weg, ein Sticky-on-Scroll-Header scrollt ab, gleitet dann wieder hinein, wenn der Besucher nach oben scrollt Position: Fixed gibt dir den ersten Der zweite braucht die Scroll-Effekte von Elementor Pro.
Warum verstecken sich meine Inhalte hinter dem Sticky Header?
Ein fester Header wird aus dem normalen Seitenfluss entfernt, so dass der Abschnitt unten darunter nach oben gleitet Fügen Sie Ihrem ersten Abschnitt ein Top-Padding hinzu, das ungefähr der Höhe des Headers entspricht, und legen Sie eine solide Hintergrundfarbe auf dem Header-Container fest.
Warum scrollt mein Seiteninhalt über den oberen Rand meines Headers?
Der z-Index ist zu niedrig Im Reiter Erweitert unter Layout setzt man Z-Index auf dem Header-Container auf 99 (oder höher), damit er über alles andere auf der Seite stapelt.
Soll ich einen Sticky Header auf dem Handy verwenden?
Oft nicht. Ein fester Header frisst knappen vertikalen Platz auf einem Telefon. Die Positionsregler von Elementor sind pro Gerät, also wechseln Sie zur mobilen Ansicht und stellen Sie Position wieder auf Standard ein oder schneiden Sie zumindest die Polsterung des Headers herunter.
Einwickelnd
Einen Sticky Header in Elementor zu erstellen, ist drei Einstellungen auf einem Element Wählen Sie den Header-Container, stellen Sie Position auf Fixed with null Offsets, erhöhen Sie den z-Index Alles danach ist Bereinigung: Geben Sie dem Header einen soliden Hintergrund, pad den ersten Abschnitt, damit sich nichts dahinter verbirgt, und überprüfen Sie, wie es sich auf einem Telefon anfühlt, bevor Sie es fertig nennen.
Alles läuft auf freiem Elementor, das einzige was man braucht ist eine Headervorlage zum bearbeiten, was die kostenlose Theme Builder in Master Addons Stellt, zusammen mit Footer, 404, Archiv, und Einzelvorlagen, Wenn Sie später den Rest des Toolkits wollen, ist das, was die Pro Pläne Cover, aber nichts in diesem Tutorial braucht es.
Verwandte Lektüre: So bearbeiten Sie die Fußzeile in WordPress mit Elementor, So erstellen Sie einen verzerrten Hintergrund in Elementor, und So erstellen Sie eine einseitige Website mit Elementor.
