Egal, ob du ein angehender Webentwickler oder ein E-Commerce-Unternehmer bist, eure Webseiten haben wahrscheinlich einige wesentliche Elemente gemeinsam. Zum Beispiel braucht jede Webseite eine klare Kopfzeile, damit die Besucher/innen zwischen den einzelnen Seiten navigieren können. Wenn du jedoch einen Page Builder wie Elementor verwendest, um Code zu sparen, fragst du dich vielleicht, ob es möglich ist, einen anspruchsvollen und dennoch benutzerfreundlichen Elementor-Header zu erstellen.
Mit einem Elementor-Header kannst du deinen Nutzern eine einfache Möglichkeit bieten, deine Webseite zu erkunden. Mit diesem beliebten Page Builder kannst du eine Vielzahl von Kopfzeilen erstellen, die nicht verschwinden, wenn die Nutzer/innen auf der Seite nach unten scrollen. Diese Funktion macht sie „klebrig“.
In diesem Beitrag erklären wir, wie ein Sticky Header funktioniert und welche Vorteile er hat. Dann zeigen wir dir, wie du mit der kostenlosen und der Pro-Version von Elementor einen Sticky Header erstellen kannst. Zum Schluss zeigen wir dir zusätzliche Anpassungsmöglichkeiten für deine Sticky Header mit CSS. Los geht’s!
Eine Einführung in Elementor Sticky Headers
Keine zwei Webseiten sind gleich. Es gibt jedoch ein paar Merkmale, die gute Webseiten gemeinsam haben.
Wenn du eine mehrseitige Webseite betreibst, ist eines dieser Elemente die Kopfzeile. Das ist die horizontale Leiste oben auf jeder Seite, die nützliche Informationen enthält.
Normalerweise enthält eine Kopfzeile dein Navigationsmenü mit Seiten wie Über uns oder Kontakt:
Wenn Besucher deine Seite erkunden, erwarten sie wahrscheinlich eine übersichtliche Kopfzeile, die sie durch deine Seite führt. Da die Benutzerfreundlichkeit (User Experience, UX) der Schlüssel zum Erfolg einer Webseite ist, solltest du einen Header erstellen, der intuitiv und übersichtlich ist. Hier kann ein mit Elementor gestalteter Sticky Header einen großen Unterschied machen.
Wie ein Sticky Header funktioniert
Bevor wir lernen, wie ein Elementor Sticky Header funktioniert, schauen wir uns an, wie sich eine Standard-Kopfzeile verhält, wenn du auf einer Seite nach unten scrollst:
Wie du im obigen Beispiel sehen kannst, enthält diese Kopfzeile eine komplexe Navigationsleiste mit Kategorien wie Verkauf, Kleidung, Schuhe und mehr. Diese Registerkarten helfen den Kunden zweifellos, das zu finden, wonach sie suchen. Wenn du jedoch auf der Seite nach unten scrollst, verschwindet die Kopfzeile.
Das kann für die Nutzer/innen frustrierend sein, weil sie dann wieder an den Anfang der Seite scrollen müssen, um das Navigationsmenü aufzurufen. Zum Glück bietet ein Sticky Header eine einfache Lösung.
Indem sie oben auf der Seite „kleben“ bleibt, kann sie die Benutzerfreundlichkeit deiner Webseite drastisch verbessern:
Wenn dein Webseiten-Design einen Sticky Header enthält, können deine Nutzer/innen schnell zu neuen Seiten springen, ohne Zeit mit Scrollen zu verschwenden.
Außerdem kannst du mit diesem festen Element dein Logo immer in den Vordergrund stellen. So können sich die Nutzer/innen leichter an deine Marke erinnern und länger auf deiner Webseite bleiben.
Wann du einen Sticky Header verwenden solltest
Mit einem Sticky Header ist die Wahrscheinlichkeit geringer, dass sich Besucher/innen bei der Erkundung größerer Webseiten verirren. Deshalb solltest du diese Funktion nutzen, wenn deine Webseite viele Seiten hat. Deshalb findest du Sticky Header oft auf E-Commerce-Seiten.kopfzeile
Ein Sticky Header kann besonders nützlich sein, wenn du eine Suchfunktion in deine einbauen willst. Wenn die Nutzer/innen beim Scrollen feststellen, dass sie nicht finden, was sie suchen, können sie schnell eine Suchanfrage in die Suchleiste eingeben.
Außerdem kann ein Sticky Header ein entscheidender Faktor sein, wenn du einen monetären Blog betreibst, der alle deine Beiträge auf der Startseite anzeigt. Generell kann diese Kopfzeile sicherstellen, dass deine Webseite wartungsfähig und skalierbar ist.
Wenn deine Webseite jedoch nur aus einer einzigen Seite besteht, macht es nicht viel Sinn, deinen Header auf diese Weise umzugestalten. Wenn du viele Seiten auf deiner Webseite hast, aber jede einzelne relativ kurz ist, brauchst du wahrscheinlich auch keinen Sticky Header.
Insgesamt verkürzt ein Sticky Header die Scrollzeit und erhöht die Benutzerfreundlichkeit und die Navigation auf deiner Webseite. Wenn du dir nicht sicher bist, ob diese Funktion für deine Webseite von Vorteil ist, solltest du eine kurze deine Seitenlängen überprüfen und dann entscheiden.
So erstellst du einen Elementor Sticky Header
In diesem Tutorial zeigen wir dir, wie du einen Elementor Sticky Header erstellen kannst. Voraussetzung ist, dass du das Elementor Plugin bereits installiert und auf deiner Webseite aktiviert hast.
Wir zeigen dir, wie du diese Kopfzeile sowohl mit der kostenlosen Version als auch mit Elementor Pro erstellen kannst. Es wird dich freuen zu hören, dass du dafür weder HTML lernen noch viel Code bearbeiten musst!
So erstellst du einen Sticky Header mit Elementor (kostenlos)
Die kostenlose Version von Elementor bietet einige leistungsstarke Funktionen für die Seitenerstellung. Wenn du jedoch Änderungen an deinen Kopf- und Fußzeilen vornehmen willst, brauchst du zusätzliche (ebenfalls kostenlose) Tools.
Sehen wir uns also an, wie du mit Elementor einen Sticky Header erstellen kannst!
Schritt 1: Installiere und aktiviere deine wichtigsten Plugins
Zum Glück gibt es ein paar verlässliche Tools, mit denen du die Funktionalität der kostenlosen Version von Elementor ganz einfach erweitern kannst.
Navigiere zu deinem WordPress-Dashboard, um dein erstes Tool zu finden. Gehe zu Plugins > Neu hinzufügen und suche über die Suchfunktion nach ElementsKit Elementor Addons:
Installiere und aktiviere das Plugin wie gewohnt. Wenn du diesen Vorgang abgeschlossen hast, gelangst du zu deiner Hauptseite für Plugins:
Klicke nun erneut auf Neu hinzufügen und suche das Sticky Header Effects for Elementor Plugin in der Suchleiste:
Wiederhole den Installations- und Aktivierungsprozess für dieses Tool, und du bist bereit für den nächsten Schritt!
Schritt 2: Erstelle dein Menü
Bevor du irgendeine Art von Kopfzeile erstellen kannst, brauchst du ein Navigationsmenü. Wir werden ein einfaches Menü mit den gängigsten Elementen erstellen. Es enthält ein Logo, Seiten und eine Handlungsaufforderung (Call To Action, CTA).
Um dein eigenes Menü in deinem WordPress-Dashboard zu erstellen, gehe zu Darstellung > Menüs. Gib deinem Menü neben dem Feld Menüname einen beschreibenden Namen. Wir werden unser Menü „Sticky Header Menu“ nennen:
Achte darauf, dass du Kopfzeile als Anzeigeort auswählst. Du kannst auch das Kästchen aktivieren, um neue Seiten automatisch zu deinem Menü hinzuzufügen.
Als Nächstes musst du einige Seiten zu deinem Menü hinzufügen. Aktiviere im Abschnitt Seiten auf der linken Seite die Kästchen der Seiten, die du hinzufügen möchtest, und klicke dann auf Zum Menü hinzufügen:
Dann siehst du, wie deine Seiten in dein Menü auf der rechten Seite übertragen werden. Klicke unten rechts auf deinem Bildschirm auf Menü speichern:
Wie du sehen kannst, haben wir einige grundlegende Seiten hinzugefügt, darunter Kontakt, Über und Musterseite. Vielleicht möchtest du deine Seiten neu anordnen, damit die Reihenfolge für die Besucher intuitiv ist.
Schritt 3: Erstelle deine Kopfzeile
Dein Navigationsmenü ist nun vorhanden, aber du kannst es nirgends aufrufen. Das liegt daran, dass du eine Kopfzeile dafür erstellen musst.
Dazu gehst du in deinem linken Menü auf den Reiter ElementsKit . Wenn du das noch nicht getan hast, musst du dich an dieser Stelle durch ein paar Seiten „Erste Schritte“ klicken.
Jeder wird wahrscheinlich andere Vorlieben haben, also nimm dir Zeit, um die Funktionen auszuwählen, die du aktivieren möchtest. Vergewissere dich jedoch, dass das Modul Kopfzeile/Fußzeile eingeschaltet ist:
Gehe nun zu ElementsKit > Header Footer:
Diese Seite wird leer sein, da du noch keine Kopf- oder Fußzeilenvorlagen hast. Klicke oben im Bildschirm auf Neu hinzufügen, um deine erste Kopfzeilenvorlage zu erstellen:
Gib auf dem obigen Bildschirm einen beschreibenden Namen ein und vergewissere dich, dass als Typ“ Kopfzeile“ ausgewählt ist. Da du die kostenlose Version verwendest, wird diese Kopfzeile auf der gesamten Webseite erscheinen.
Stelle sicher, dass du den Schalter Aktivieren/Deaktivieren auf EIN stellst und klicke auf ÄNDERUNGEN SPEICHERN. Jetzt gelangst du wieder zu deiner Vorlagenseite, auf der du deine neue Kopfzeilenvorlage sehen kannst:
Vielleicht bemerkst du auch ein grünes Aktiv-Symbol neben dieser Kopfzeile. Allerdings ist sie noch nicht live.
Um deine Kopfzeile zu vervollständigen, fahre mit dem Mauszeiger über sie in der Vorlagenliste und klicke auf Bearbeiten in Elementor, direkt unter ihrem Namen. Dadurch gelangst du zum Elementor Builder Bildschirm.
Hier klickst du auf das ElementsKit-Symbol:
Auf dem folgenden Bildschirm wählst du die Registerkarte Abschnitte:
Scrolle ein wenig nach unten, um einen Kopfzeilenabschnitt zu finden, der dir gefällt, und klicke dann auf Einfügen. Wir haben Kopfzeile – Abschnitt 5 gewählt:
Wie du wahrscheinlich erkennen kannst, ist unser Navigationsmenü nicht sichtbar. Fügen wir es also zu unserer Kopfzeilenvorlage hinzu. Bewege dazu den Mauszeiger über den Abschnitt des Navigationsmenüs in deiner Kopfzeile. In diesem Fall befindet es sich genau in der Mitte:
Klicke auf diesen Bereich und deine Menüeinstellungen sollten im linken Bereich erscheinen. Suche jetzt das Feld Menü auswählen. Wähle im Dropdown-Menü das Menü aus, das du zuvor erstellt hast:
Jetzt solltest du sehen, dass das Menü in deiner Kopfzeilenvorlage angezeigt wird. Klicke auf UPDATE in der unteren linken Ecke des Bildschirms und deine Standardkopfzeile ist fertig.
Schauen wir uns an, wie es in der Praxis funktioniert:
Wie du sehen kannst, sieht unsere Kopfzeile toll aus. Allerdings verschwindet sie, wenn wir nach unten scrollen. Schauen wir uns an, wie wir sie sticky bekommen.
Schritt 4: Mach deine Kopfzeile sticky
Für unseren letzten Schritt navigierst du zu ElementsKit > Kopfzeile Fußzeile > Mit Elementor bearbeiten. Wähle dann deine Kopfzeile aus und klicke auf das mittlere Symbol mit den sechs Punkten:
Wenn du den Mauszeiger darüber bewegst, siehst du, dass du damit den Abschnitt bearbeiten kannst. Wenn du darauf klickst, werden deine Bearbeitungsoptionen im linken Bereich angezeigt.
Klicke auf die Registerkarte Erweitert und scrolle nach unten zu Sticky Header Effects. Es wird eine Warnmeldung angezeigt, die besagt, dass das Plugin die Sticky Header nicht kontrolliert, aber das kannst du ignorieren. Da wir auch das Sticky Header Effects for Elementor Plugin hinzugefügt haben, wird es problemlos funktionieren.
Aktiviere nun den Elementor Sticky Header, indem du den Schalter auf ON stellst:
Je nach deinem Theme kann es sein, dass dein Sticky Header transparent aussieht. Wenn das der Fall ist, solltest du vielleicht ein anderen Stil nehmen.
Gehe in deinem Bereich “ Abschnitt bearbeiten “ unter “ Stil“ zu „Hintergrund“ > „Farbe “ und stelle sicher, dass du einen Farbton ausgewählt hast, der sich von deinem normalen Hintergrund abhebt:
Klicke dann auf UPDATE. Jetzt kannst du deine Seite in der Vorschau ansehen, um das Endergebnis zu überprüfen:
Das war’s! Dies ist ein einfacher Elementor Sticky Header, aber er kann deine Seite ganz leicht auf die nächste Stufe bringen.
So erstellst du einen Sticky Header mit Elementor Pro
Wenn du Elementor Pro verwendest, ist es etwas einfacher, einen Sticky Header zu erstellen. Du kannst diese Funktion in nur drei einfachen Schritten zu deiner Webseite hinzufügen.
Schritt 1: Erstelle dein Menü
Um dein Menü zu erstellen, gehst du in deinem WordPress-Dashboard zu Erscheinungsbild > Menüs:
Gib deinem Menü einen beschreibenden Namen, wähle Primäres Menü neben Anzeigeort und klicke auf Menü erstellen:
Zu diesem Zeitpunkt solltest du schon ein paar Seiten auf deiner Webseite haben. Wähle im linken Bereich die Seiten aus, die du in dein Menü aufnehmen möchtest.
Klicke dann auf Zum Menü hinzufügen und anschließend auf Menü speichern:
Jetzt sollten deine Seiten auf der rechten Seite unter Menüstruktur angezeigt werden.
Schritt 2: Erstelle deine Kopfzeile
Als nächstes müssen wir unser Fundament erstellen. Lass uns eine klassische Kopfzeile erstellen.
Beginne damit, indem du in der linken Seitenleiste auf die Registerkarte Elementor klickst. Direkt darunter gehst du auf Vorlagen > Theme Builder. Die folgende Seite sieht dann so aus:
Wie du erkennen kannst, kannst du mit Elementor Pro jedes Element deiner Webseite ganz einfach gestalten.
Klicke auf das Plus-Symbol (+) auf dem Element Header. Jetzt solltest du ein Pop-up-Fenster sehen, in dem mehrere Kopfzeilenblöcke angezeigt werden, aus denen du auswählen kannst:
Wenn du eine bereits existierende Kopfzeilenvorlage hast, kannst du sie unter dem Reiter Meine Vorlagen auswählen. Ansonsten kannst du auch einen der Abschnittsblöcke verwenden, die in Elementor Pro enthalten sind.
Wenn du deine Auswahl getroffen hast, fahre einfach mit dem Mauszeiger über den gewünschten Block und klicke auf Einfügen:
Hier siehst du, dass dieser Block mit einem eigenen Logo versehen ist, aber unser Navigationsmenü hat sich automatisch ausgefüllt. Jetzt klickst du auf VERÖFFENTLICHEN:
Auf dem folgenden Bildschirm wirst du aufgefordert, deine VERÖFFENTLICHUNGSEINSTELLUNGEN festzulegen. Hier wählst du die Option BEDINGUNG HINZUFÜGEN, um zu entscheiden, wo du deine Überschrift anzeigen möchtest:
Wahrscheinlich wirst du neben INCLUDE die Option Entire Site auswählen wollen. Du kannst auch bestimmte Bereiche der Webseite ausschließen, indem du auf den Pfeil neben INCLUDE klickst und die Alternative auswählst. Wenn du mit deiner Auswahl zufrieden bist, klicke auf SPEICHERN & SCHLIESSEN.
Jetzt erscheint eine Pop-up-Meldung in der unteren rechten Ecke deines Bildschirms. Wenn sie nicht verschwindet, bevor du sie anklicken kannst, wähle die Option, um deine Live-Site zu sehen.
Alternativ kannst du auch zu deinem WordPress-Dashboard zurückkehren und eine Vorschau deiner Webseite anzeigen lassen, indem du auf das Haus-Symbol in der oberen linken Ecke klickst und dann Webseite besuchen auswählst:
Wie du sehen kannst, funktioniert unsere Kopfzeile jetzt, aber wenn wir auf der Seite nach unten scrollen, verschwindet sie. Schauen wir mal, was wir dagegen tun können!
Schritt 3: Mach deine Kopfzeile sticky
Jetzt sehen wir uns an, wie du mit dem Profi-Tool einen Elementor-Header erstellen kannst!
Gehe zu Vorlagen > Theme Builder und wähle die Kopfzeile aus, die du gerade erstellt hast. Dann klickst du auf dem folgenden Bildschirm auf Bearbeiten neben dem Bleistiftsymbol. So gelangst du zurück zum Elementor-Editor.
Bewege den Mauszeiger über deine Kopfzeilenvorlage und klicke dann auf das Symbol mit den sechs Punkten in der Mitte. Dadurch öffnet sich auf der linken Seite das Fenster Abschnitt bearbeiten:
Gehe nun zum Reiter Erweitert und suche den Abschnitt Bewegungseffekte. Hier aktivierst du die Bildlaufeffekte, indem du den Schalter auf EIN stellst:
Scrolle dann im Bereich Bewegungseffekte nach unten, um das Feld “ Sticky“ zu finden. Wähle im Dropdown-Menü “ Oben“:
Klicke jetzt auf UPDATE. Je nach Farbschema deines Themes kann es sein, dass dein Elementor Sticky Header transparent aussieht:
Wenn das der Fall ist und dir das Aussehen nicht gefällt, kannst du die Hintergrundfarbe ändern. Gehe in deinem Bereich “ Abschnitt bearbeiten “ zu Stil > Hintergrund und wähle „Klassisch“ als Hintergrundtyp.
Wähle nun eine neue Hintergrundfarbe für deine Kopfzeilenvorlage. Du solltest einen Farbton wählen, der zum Rest der Seite passt, aber auch einen schönen Kontrast bildet:
Da dies nur ein Beispiel ist, wählen wir einfach eine graue Farbe, um unsere Kopfzeile weniger transparent zu machen.
Klicke jetzt auf UPDATE, um deine Änderungen zu speichern. Sieh dir nun dein Endergebnis in der Vorschau an:
Das war’s! Du wirst wahrscheinlich den Stil und die Farben an deine Marke anpassen wollen. Achte nur darauf, dass du deine Änderungen immer speicherst, wenn du fertig bist.
Wie du mit CSS deinen Elementor Sticky Header verbesserst
Wenn du einen Elementor Sticky Header auf deiner Webseite implementierst, kann sich das wie ein großes Facelifting für dein Webseiten-Design anfühlen. Vielleicht bist du aber auch an weiteren Anpassungen oder dynamischeren Funktionen interessiert.
Nachdem du nun weißt, wie du einen einfachen Sticky Header erstellst, wollen wir sehen, wie du dein Design auf die nächste Stufe bringen kannst. Dies kannst du mit Hilfe von Cascading Style Sheets (CSS) in WordPress erreichen.
Wenn du damit noch nicht vertraut bist oder keine Erfahrung im Programmieren hast, mach dir keine Sorgen. Mit Elementor ist das Verbessern deiner Designs ein Kinderspiel.
Gehe dazu zu Vorlagen > Theme Builder > Kopfzeile:
Unter Abschnitt bearbeiten > Erweitert > Benutzerdefiniertes CSS kannst du ein kleines CSS-Snippet hinzufügen, um stilistische Änderungen vorzunehmen.
Arten von Elementor Sticky Headers
Hier sind ein paar beliebte Erweiterungen, die du für deinen Elementor Sticky Header in Betracht ziehen solltest!
Transparenter Sticky Header
Manche Themes setzen Sticky Header automatisch auf transparent. Wenn du dies jedoch mit CSS erreichen willst, kannst du einen Codeschnipsel wie den folgenden verwenden:
selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }
selector{ transition: background-color 4s ease !important; }
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }Kopiere einfach diesen Code und füge ihn in das Feld Custom CSS ein und passe die Felder nach deinen Wünschen an. Dieses Snippet ändert die Hintergrundfarbe, die Transparenz und die Höhe deiner Kopfzeile mit einem Animationseffekt:
Die Möglichkeiten allein für diesen Typ sind endlos.
Schrumpfende, sticky Kopfzeile
Eine weitere beliebte Wahl ist eine Kopfzeile, die größer und kleiner wird, wenn die Besucher/innen scrollen. Hier ist der Code, den du für diese Art von Elementor Sticky Header brauchst:
header.sticky-header {
--header-height: 90px;
--opacity: 0.90;
--shrink-me: 0.80;
--sticky-background-color: #0e41e5;
--transition: .3s ease-in-out;
transition: background-color var(--transition),
background-image var(--transition),
backdrop-filter var(--transition),
opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
background-color: var(--sticky-background-color) !important;
background-image: none !important;
opacity: var(--opacity) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
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;
height: 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));
}
Wenn du dich mit einem so umfangreichen Code nicht wohl fühlst, solltest du dir die Anleitung von Elementor für einen schrumpfenden Sticky Header ansehen.
Mit diesem Design erhältst du diesen Effekt:
Obwohl dieser Header einen subtilen Touch hat, kann seine Raffinesse deinem Design eine professionellere Note verleihen.
Einblenden / Ausblenden
Zusätzlich zu diesen trendigen Optionen gibt es auch noch die Ein- und Ausblendfunktion (auch „reveal“ genannt). Sie sieht in etwa so aus:
Für diesen Effekt musst du überhaupt keinen Code anfassen. Navigiere einfach zu deiner Kopfzeile in deinem Theme Builder. Gehe dann zu Abschnitt bearbeiten > Erweitert > Bewegungseffekte > Scrolling Effects:
Hier klickst du auf das Stiftsymbol neben dem Feld “ Transparenz“ und änderst die Richtung auf „Einblenden “ oder “ Ausblenden„. Passe dann dein Design nach deinen Wünschen an.
Es gibt viele Optionen für diese Transparenzeffekte, daher empfehlen wir dir, einen Blick in die Dokumentation von Elementor zu werfen. So kannst du genau das Aussehen erreichen, das du willst.
Zusammenfassung
Die Zusammenarbeit mit einem vertrauenswürdigen Webseiten-Builder ist eine hervorragende Alternative zur Bezahlung eines erfahrenen Webentwicklers für die Erstellung deiner Webseite. Mit der besten Webseiten-Designsoftware kannst du ganz einfach die wichtigsten Elemente für jede Webseite erstellen. Dazu gehören praktische, schöne Sticky Header.
Ein Sticky Header kann ein angenehmeres Erlebnis für deine Nutzer schaffen. Du kannst aus verschiedenen dynamischen Kopfzeilenstilen wählen, z. B. transparent und schrumpfend. Noch besser: Du kannst diese atemberaubenden Header-Designs sowohl mit Elementor Pro als auch mit der kostenlosen Version erstellen.
Die Gestaltung deiner Webseite ist einer der ersten Schritte, um sie zu starten. Zunächst brauchst du jedoch ein zuverlässiges Hosting. Schau dir die Managed-Hosting-Angebote von Kinsta an und finde heraus, wie wir die Leistung deiner Webseite optimieren können!
Schreibe einen Kommentar