{"id":49458,"date":"2022-04-22T07:27:11","date_gmt":"2022-04-22T06:27:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=49458&preview=true&preview_id=49458"},"modified":"2023-08-23T15:58:59","modified_gmt":"2023-08-23T14:58:59","slug":"elementor-sticky-header","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/","title":{"rendered":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers"},"content":{"rendered":"

Egal, ob du ein angehender Webentwickler<\/a> 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\u00f6nnen. Wenn du jedoch einen Page Builder<\/a> wie Elementor verwendest, um Code zu sparen, fragst du dich vielleicht, ob es m\u00f6glich ist, einen anspruchsvollen und dennoch benutzerfreundlichen Elementor-Header zu erstellen.<\/p>\n

Mit einem Elementor-Header<\/a> kannst du deinen Nutzern eine einfache M\u00f6glichkeit bieten, deine Webseite zu erkunden. Mit diesem beliebten Page Builder<\/a> 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“.<\/p>\n

In diesem Beitrag erkl\u00e4ren 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\u00e4tzliche Anpassungsm\u00f6glichkeiten f\u00fcr deine Sticky Header mit CSS. Los geht’s!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Eine Einf\u00fchrung in Elementor Sticky Headers<\/h2>\n

Keine zwei Webseiten sind gleich. Es gibt jedoch ein paar Merkmale, die gute Webseiten gemeinsam haben.<\/p>\n

Wenn du eine mehrseitige Webseite betreibst, ist eines dieser Elemente die Kopfzeile. Das ist die horizontale Leiste oben auf jeder Seite, die n\u00fctzliche Informationen enth\u00e4lt.<\/p>\n

Normalerweise enth\u00e4lt eine Kopfzeile dein Navigationsmen\u00fc mit Seiten wie \u00dcber uns<\/strong> oder Kontakt<\/strong>:<\/p>\n

\"Kopfzeile
Kopfzeile auf Kinstas Webseite<\/figcaption><\/figure>\n

Wenn Besucher deine Seite erkunden, erwarten sie wahrscheinlich eine \u00fcbersichtliche Kopfzeile, die sie durch deine Seite f\u00fchrt. Da die Benutzerfreundlichkeit (User Experience, UX) der Schl\u00fcssel zum Erfolg einer Webseite ist, solltest du einen Header erstellen, der intuitiv und \u00fcbersichtlich ist. Hier kann ein mit Elementor gestalteter Sticky Header einen gro\u00dfen Unterschied machen.<\/p>\n\n

Wie ein Sticky Header funktioniert<\/h3>\n

Bevor wir lernen, wie ein Elementor Sticky Header funktioniert, schauen wir uns an, wie sich eine Standard-Kopfzeile verh\u00e4lt, wenn du auf einer Seite nach unten scrollst:<\/p>\n

\"Beispiel
Beispiel einer Standard-Kopfzeile<\/figcaption><\/figure>\n

Wie du im obigen Beispiel sehen kannst, enth\u00e4lt diese Kopfzeile eine komplexe Navigationsleiste mit Kategorien wie Verkauf<\/strong>, Kleidung<\/strong>, Schuhe<\/strong> 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.<\/p>\n

Das kann f\u00fcr die Nutzer\/innen frustrierend sein, weil sie dann wieder an den Anfang der Seite scrollen m\u00fcssen, um das Navigationsmen\u00fc aufzurufen. Zum Gl\u00fcck bietet ein Sticky Header eine einfache L\u00f6sung.<\/p>\n

Indem sie oben auf der Seite „kleben“ bleibt, kann sie die Benutzerfreundlichkeit deiner Webseite drastisch verbessern:<\/p>\n

\"Sticky
Sticky Header Beispiel<\/figcaption><\/figure>\n

Wenn dein Webseiten-Design einen Sticky Header enth\u00e4lt, k\u00f6nnen deine Nutzer\/innen schnell zu neuen Seiten springen, ohne Zeit mit Scrollen zu verschwenden.<\/p>\n

Au\u00dferdem kannst du mit diesem festen Element dein Logo immer in den Vordergrund stellen. So k\u00f6nnen sich die Nutzer\/innen leichter an deine Marke erinnern und l\u00e4nger auf deiner Webseite bleiben.<\/p>\n

Wann du einen Sticky Header verwenden solltest<\/h3>\n

Mit einem Sticky Header ist die Wahrscheinlichkeit geringer, dass sich Besucher\/innen bei der Erkundung gr\u00f6\u00dferer Webseiten verirren. Deshalb solltest du diese Funktion nutzen, wenn deine Webseite viele Seiten hat. Deshalb findest du Sticky Header oft auf E-Commerce-Seiten<\/a>.kopfzeile<\/p>\n

Ein Sticky Header kann besonders n\u00fctzlich sein, wenn du eine Suchfunktion in deine\u00a0 einbauen willst. Wenn die Nutzer\/innen beim Scrollen feststellen, dass sie nicht finden, was sie suchen, k\u00f6nnen sie schnell eine Suchanfrage in die Suchleiste eingeben.<\/p>\n

Au\u00dferdem kann ein Sticky Header ein entscheidender Faktor sein, wenn du einen monet\u00e4ren Blog<\/a> betreibst, der alle deine Beitr\u00e4ge auf der Startseite anzeigt. Generell kann diese Kopfzeile sicherstellen, dass deine Webseite wartungsf\u00e4hig und skalierbar<\/a> ist.<\/p>\n

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.<\/p>\n

Insgesamt verk\u00fcrzt ein Sticky Header die Scrollzeit und erh\u00f6ht die Benutzerfreundlichkeit und die Navigation auf deiner Webseite. Wenn du dir nicht sicher bist, ob diese Funktion f\u00fcr deine Webseite von Vorteil ist, solltest du eine kurze deine Seitenl\u00e4ngen \u00fcberpr\u00fcfen und dann entscheiden.<\/p>\n

So erstellst du einen Elementor Sticky Header<\/h2>\n

In diesem Tutorial zeigen wir dir, wie du einen Elementor Sticky Header erstellen kannst. Voraussetzung ist, dass du das Elementor Plugin<\/a> bereits installiert und auf deiner Webseite aktiviert hast.<\/p>\n

Wir zeigen dir, wie du diese Kopfzeile sowohl mit der kostenlosen Version als auch mit Elementor Pro<\/a> erstellen kannst. Es wird dich freuen zu h\u00f6ren, dass du daf\u00fcr weder HTML lernen<\/a> noch viel Code bearbeiten<\/a> musst!<\/p>\n

So erstellst du einen Sticky Header mit Elementor (kostenlos)<\/h3>\n

Die kostenlose Version von Elementor bietet einige leistungsstarke Funktionen f\u00fcr die Seitenerstellung. Wenn du jedoch \u00c4nderungen an deinen Kopf- und Fu\u00dfzeilen vornehmen willst, brauchst du zus\u00e4tzliche (ebenfalls kostenlose) Tools.<\/p>\n

Sehen wir uns also an, wie du mit Elementor einen Sticky Header erstellen kannst!<\/p>\n

Schritt 1: Installiere und aktiviere deine wichtigsten Plugins<\/h4>\n

Zum Gl\u00fcck gibt es ein paar verl\u00e4ssliche Tools, mit denen du die Funktionalit\u00e4t der kostenlosen Version von Elementor ganz einfach erweitern kannst.<\/p>\n

Navigiere zu deinem WordPress-Dashboard, um dein erstes Tool zu finden. Gehe zu Plugins > Neu hinzuf\u00fcgen<\/strong> und suche \u00fcber die Suchfunktion nach ElementsKit Elementor Addons<\/a>:<\/p>\n

\"ElementsKit
ElementsKit installieren und aktivieren<\/figcaption><\/figure>\n

Installiere und aktiviere<\/a> das Plugin wie gewohnt. Wenn du diesen Vorgang abgeschlossen hast, gelangst du zu deiner Hauptseite f\u00fcr Plugins:<\/p>\n

\"Du
installierte Plugins<\/figcaption><\/figure>\n

Klicke nun erneut auf Neu hinzuf\u00fcgen<\/strong> und suche das Sticky Header Effects for Elementor<\/a> Plugin in der Suchleiste:<\/p>\n

\"Sticky
Sticky Header Effekte f\u00fcr Elementor<\/figcaption><\/figure>\n

Wiederhole den Installations- und Aktivierungsprozess f\u00fcr dieses Tool, und du bist bereit f\u00fcr den n\u00e4chsten Schritt!<\/p>\n

Schritt 2: Erstelle dein Men\u00fc<\/h4>\n

Bevor du irgendeine Art von Kopfzeile erstellen kannst, brauchst du ein Navigationsmen\u00fc. Wir werden ein einfaches Men\u00fc mit den g\u00e4ngigsten Elementen erstellen. Es enth\u00e4lt ein Logo, Seiten und eine Handlungsaufforderung (Call To Action, CTA).<\/p>\n

Um dein eigenes Men\u00fc in deinem WordPress-Dashboard zu erstellen, gehe zu Darstellung > Men\u00fcs<\/strong>. Gib deinem Men\u00fc neben dem Feld Men\u00fcname<\/strong> einen beschreibenden Namen. Wir werden unser Men\u00fc „Sticky Header Menu“ nennen:<\/p>\n

\"Gib
Gib deinem Sticky Header Men\u00fc einen Namen<\/figcaption><\/figure>\n

Achte darauf, dass du Kopfzeile<\/strong> als Anzeigeort<\/strong> ausw\u00e4hlst. Du kannst auch das K\u00e4stchen aktivieren, um neue Seiten automatisch zu deinem Men\u00fc hinzuzuf\u00fcgen.<\/p>\n

Als N\u00e4chstes musst du einige Seiten zu deinem Men\u00fc hinzuf\u00fcgen. Aktiviere im Abschnitt Seiten<\/strong> auf der linken Seite die K\u00e4stchen der Seiten, die du hinzuf\u00fcgen m\u00f6chtest, und klicke dann auf Zum Men\u00fc hinzuf\u00fcgen<\/strong>:<\/p>\n

\"F\u00fcge
F\u00fcge Seiten zu deinem Sticky Header Men\u00fc hinzu<\/figcaption><\/figure>\n

Dann siehst du, wie deine Seiten in dein Men\u00fc auf der rechten Seite \u00fcbertragen werden. Klicke unten rechts auf deinem Bildschirm auf Men\u00fc speichern<\/strong>:<\/p>\n

\"Speichere
Speichere dein Sticky Header Men\u00fc<\/figcaption><\/figure>\n

Wie du sehen kannst, haben wir einige grundlegende Seiten hinzugef\u00fcgt, darunter Kontakt<\/strong>, \u00dcber<\/strong><\/a> und Musterseite<\/strong>. Vielleicht m\u00f6chtest du deine Seiten neu anordnen, damit die Reihenfolge f\u00fcr die Besucher intuitiv ist.<\/p>\n

Schritt 3: Erstelle deine Kopfzeile<\/h4>\n

Dein Navigationsmen\u00fc ist nun vorhanden, aber du kannst es nirgends aufrufen. Das liegt daran, dass du eine Kopfzeile daf\u00fcr erstellen musst.<\/p>\n

Dazu gehst du in deinem linken Men\u00fc auf den Reiter ElementsKit <\/strong>. Wenn du das noch nicht getan hast, musst du dich an dieser Stelle durch ein paar Seiten „Erste Schritte“ klicken.<\/p>\n

Jeder wird wahrscheinlich andere Vorlieben haben, also nimm dir Zeit, um die Funktionen auszuw\u00e4hlen, die du aktivieren m\u00f6chtest. Vergewissere dich jedoch, dass das Modul Kopfzeile\/Fu\u00dfzeile<\/strong> eingeschaltet<\/strong> ist:<\/p>\n

\"Aktivieren
Kopfzeilen\/Fu\u00dfzeilen-Option in Elements Kit aktivieren<\/figcaption><\/figure>\n

Gehe nun zu ElementsKit > Header Footer<\/strong>:<\/p>\n

\"Neue
Neue Vorlage hinzuf\u00fcgen<\/figcaption><\/figure>\n

Diese Seite wird leer sein, da du noch keine Kopf- oder Fu\u00dfzeilenvorlagen hast. Klicke oben im Bildschirm auf Neu hinzuf\u00fcgen<\/strong>, um deine erste Kopfzeilenvorlage zu erstellen:<\/p>\n

\"Vorlageneinstellungen
Vorlageneinstellungen ausf\u00fcllen<\/figcaption><\/figure>\n

Gib auf dem obigen Bildschirm einen beschreibenden Namen ein und vergewissere dich, dass als Typ<\/strong>“ Kopfzeile“<\/strong> ausgew\u00e4hlt ist. Da du die kostenlose Version verwendest, wird diese Kopfzeile auf der gesamten Webseite<\/strong> erscheinen.<\/p>\n

Stelle sicher, dass du den Schalter Aktivieren\/Deaktivieren<\/strong> auf EIN<\/strong> stellst und klicke auf \u00c4NDERUNGEN SPEICHERN<\/strong>. Jetzt gelangst du wieder zu deiner Vorlagenseite, auf der du deine neue Kopfzeilenvorlage sehen kannst:<\/p>\n

\"Jetzt
Neue Kopfzeilenvorlage kann jetzt verwendet werden<\/figcaption><\/figure>\n

Vielleicht bemerkst du auch ein gr\u00fcnes Aktiv-Symbol<\/strong> neben dieser Kopfzeile. Allerdings ist sie noch nicht live.<\/p>\n

Um deine Kopfzeile zu vervollst\u00e4ndigen, fahre mit dem Mauszeiger \u00fcber sie in der Vorlagenliste und klicke auf Bearbeiten in Elementor<\/strong>, direkt unter ihrem Namen. Dadurch gelangst du zum Elementor Builder Bildschirm.<\/p>\n

Hier klickst du auf das ElementsKit-Symbol<\/strong>:<\/p>\n

\"Klicke
Klicke auf das ElementsKit-Symbol<\/figcaption><\/figure>\n

Auf dem folgenden Bildschirm w\u00e4hlst du die Registerkarte Abschnitte<\/strong>:<\/p>\n

\"W\u00e4hle
W\u00e4hle die Registerkarte „Abschnitte“<\/figcaption><\/figure>\n

Scrolle ein wenig nach unten, um einen Kopfzeilenabschnitt zu finden, der dir gef\u00e4llt, und klicke dann auf Einf\u00fcgen<\/strong>. Wir haben Kopfzeile – Abschnitt 5<\/strong> gew\u00e4hlt:<\/p>\n

\"F\u00fcge
F\u00fcge die Kopfzeile an der gew\u00fcnschten Stelle ein<\/figcaption><\/figure>\n

Wie du wahrscheinlich erkennen kannst, ist unser Navigationsmen\u00fc nicht sichtbar. F\u00fcgen wir es also zu unserer Kopfzeilenvorlage hinzu. Bewege dazu den Mauszeiger \u00fcber den Abschnitt des Navigationsmen\u00fcs in deiner Kopfzeile. In diesem Fall befindet es sich genau in der Mitte:<\/p>\n

\"Fahre
Fahre mit dem Mauszeiger \u00fcber den Abschnitt des Navigationsmen\u00fcs in der Kopfzeile<\/figcaption><\/figure>\n

Klicke auf diesen Bereich und deine Men\u00fceinstellungen<\/strong> sollten im linken Bereich erscheinen. Suche jetzt das Feld Men\u00fc ausw\u00e4hlen<\/strong>. W\u00e4hle im Dropdown-Men\u00fc das Men\u00fc aus, das du zuvor erstellt hast:<\/p>\n

\"W\u00e4hle
W\u00e4hle das Men\u00fc, das du zuvor erstellt hast<\/figcaption><\/figure>\n

Jetzt solltest du sehen, dass das Men\u00fc in deiner Kopfzeilenvorlage angezeigt wird. Klicke auf UPDATE<\/strong> in der unteren linken Ecke des Bildschirms und deine Standardkopfzeile ist fertig.<\/p>\n

Schauen wir uns an, wie es in der Praxis funktioniert:<\/p>\n

\"Neue
Neue Kopfzeile<\/figcaption><\/figure>\n

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.<\/p>\n

Schritt 4: Mach deine Kopfzeile sticky<\/h4>\n

F\u00fcr unseren letzten Schritt navigierst du zu ElementsKit > Kopfzeile Fu\u00dfzeile > Mit Elementor bearbeiten<\/strong>. W\u00e4hle dann deine Kopfzeile aus und klicke auf das mittlere Symbol mit den sechs Punkten:<\/p>\n

\"Klick
Klick auf das gepunktete Symbol<\/figcaption><\/figure>\n

Wenn du den Mauszeiger dar\u00fcber bewegst, siehst du, dass du damit den Abschnitt bearbeiten<\/strong> kannst. Wenn du darauf klickst, werden deine Bearbeitungsoptionen im linken Bereich angezeigt.<\/p>\n

Klicke auf die Registerkarte Erweitert<\/strong> und scrolle nach unten zu Sticky Header Effects<\/strong>. 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\u00fcgt haben, wird es problemlos funktionieren.<\/p>\n

Aktiviere nun den Elementor Sticky Header, indem du den Schalter auf ON<\/strong> stellst:<\/p>\n

\"Aktiviere
Aktiviere den Elementor Sticky Header<\/figcaption><\/figure>\n

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.<\/p>\n

Gehe in deinem Bereich “ Abschnitt bearbeiten<\/strong> “ unter “ Stil“<\/strong> zu „Hintergrund“ > „Farbe<\/strong> “ und stelle sicher, dass du einen Farbton ausgew\u00e4hlt hast, der sich von deinem normalen Hintergrund abhebt:<\/p>\n

\"Nimm
Nimm bei Bedarf eine stilistische \u00c4nderung vor<\/figcaption><\/figure>\n

Klicke dann auf UPDATE<\/strong>. Jetzt kannst du deine Seite in der Vorschau ansehen, um das Endergebnis zu \u00fcberpr\u00fcfen:<\/p>\n

\"Sticky
Sticky Header in Aktion<\/figcaption><\/figure>\n

Das war’s! Dies ist ein einfacher Elementor Sticky Header, aber er kann deine Seite ganz leicht auf die n\u00e4chste Stufe bringen.<\/p>\n

So erstellst du einen Sticky Header mit Elementor Pro<\/h3>\n

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\u00fcgen.<\/p>\n

Schritt 1: Erstelle dein Men\u00fc<\/h4>\n

Um dein Men\u00fc zu erstellen, gehst du in deinem WordPress-Dashboard zu Erscheinungsbild > Men\u00fcs<\/strong>:<\/p>\n

\"Ein
Ein Men\u00fc erstellen<\/figcaption><\/figure>\n

Gib deinem Men\u00fc einen beschreibenden Namen, w\u00e4hle Prim\u00e4res Men\u00fc<\/strong> neben Anzeigeort<\/strong> und klicke auf Men\u00fc erstellen<\/strong>:<\/p>\n

\"Benenne
Benenne dein Men\u00fc und w\u00e4hle einen Ort<\/figcaption><\/figure>\n

Zu diesem Zeitpunkt solltest du schon ein paar Seiten auf deiner Webseite haben. W\u00e4hle im linken Bereich die Seiten aus, die du in dein Men\u00fc aufnehmen m\u00f6chtest.<\/p>\n

Klicke dann auf Zum Men\u00fc hinzuf\u00fcgen<\/strong> und anschlie\u00dfend auf Men\u00fc speichern<\/strong>:<\/p>\n

\"W\u00e4hle
W\u00e4hle die Seiten aus, die in das Men\u00fc aufgenommen werden sollen<\/figcaption><\/figure>\n

Jetzt sollten deine Seiten auf der rechten Seite unter Men\u00fcstruktur<\/strong> angezeigt werden.<\/p>\n

Schritt 2: Erstelle deine Kopfzeile<\/h4>\n

Als n\u00e4chstes m\u00fcssen wir unser Fundament erstellen. Lass uns eine klassische Kopfzeile erstellen.<\/p>\n

Beginne damit, indem du in der linken Seitenleiste auf die Registerkarte Elementor<\/strong> klickst. Direkt darunter gehst du auf Vorlagen > Theme Builder<\/strong>. Die folgende Seite sieht dann so aus:<\/p>\n

\"Finde
Finde „Templates“ im „Theme Builder“<\/figcaption><\/figure>\n

Wie du erkennen kannst, kannst du mit Elementor Pro jedes Element deiner Webseite ganz einfach gestalten.<\/p>\n

Klicke auf das Plus-Symbol (+<\/strong>) auf dem Element Header<\/strong>. Jetzt solltest du ein Pop-up-Fenster sehen, in dem mehrere Kopfzeilenbl\u00f6cke angezeigt werden, aus denen du ausw\u00e4hlen kannst:<\/p>\n

\"W\u00e4hle
W\u00e4hle aus mehreren Kopfzeilenbl\u00f6cken<\/figcaption><\/figure>\n

Wenn du eine bereits existierende Kopfzeilenvorlage hast, kannst du sie unter dem Reiter Meine Vorlagen<\/strong> ausw\u00e4hlen. Ansonsten kannst du auch einen der Abschnittsbl\u00f6cke verwenden, die in Elementor Pro enthalten sind.<\/p>\n

Wenn du deine Auswahl getroffen hast, fahre einfach mit dem Mauszeiger \u00fcber den gew\u00fcnschten Block und klicke auf Einf\u00fcgen<\/strong>:<\/p>\n

\"Den
Den gew\u00fcnschten Block einf\u00fcgen<\/figcaption><\/figure>\n

Hier siehst du, dass dieser Block mit einem eigenen Logo versehen ist, aber unser Navigationsmen\u00fc hat sich automatisch ausgef\u00fcllt. Jetzt klickst du auf VER\u00d6FFENTLICHEN<\/strong>:<\/p>\n

\"Klicke
Klicke auf „Bedingung hinzuf\u00fcgen“ in den Ver\u00f6ffentlichungseinstellungen<\/figcaption><\/figure>\n

Auf dem folgenden Bildschirm wirst du aufgefordert, deine VER\u00d6FFENTLICHUNGSEINSTELLUNGEN<\/strong> festzulegen. Hier w\u00e4hlst du die Option BEDINGUNG HINZUF\u00dcGEN<\/strong>, um zu entscheiden, wo du deine \u00dcberschrift anzeigen m\u00f6chtest:<\/p>\n

\"W\u00e4hle
W\u00e4hle aus, wo du die Vorlage anzeigen m\u00f6chtest<\/figcaption><\/figure>\n

Wahrscheinlich wirst du neben INCLUDE<\/strong> die Option Entire Site<\/strong> ausw\u00e4hlen wollen. Du kannst auch bestimmte Bereiche der Webseite ausschlie\u00dfen, indem du auf den Pfeil neben INCLUDE<\/strong> klickst und die Alternative ausw\u00e4hlst. Wenn du mit deiner Auswahl zufrieden bist, klicke auf SPEICHERN & SCHLIESSEN<\/strong>.<\/p>\n

Jetzt erscheint eine Pop-up-Meldung in der unteren rechten Ecke deines Bildschirms. Wenn sie nicht verschwindet, bevor du sie anklicken kannst, w\u00e4hle die Option, um deine Live-Site zu sehen.<\/p>\n

Alternativ kannst du auch zu deinem WordPress-Dashboard<\/a> zur\u00fcckkehren und eine Vorschau deiner Webseite anzeigen lassen, indem du auf das Haus-Symbol in der oberen linken Ecke klickst und dann Webseite besuchen<\/strong> ausw\u00e4hlst:<\/p>\n

\"Header
Header ist jetzt verf\u00fcgbar<\/figcaption><\/figure>\n

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\u00f6nnen!<\/p>\n

Schritt 3: Mach deine Kopfzeile sticky<\/h4>\n

Jetzt sehen wir uns an, wie du mit dem Profi-Tool einen Elementor-Header erstellen kannst!<\/p>\n

Gehe zu Vorlagen > Theme Builder<\/strong> und w\u00e4hle die Kopfzeile aus, die du gerade erstellt hast. Dann klickst du auf dem folgenden Bildschirm auf Bearbeiten<\/strong> neben dem Bleistiftsymbol. So gelangst du zur\u00fcck zum Elementor-Editor.<\/p>\n

Bewege den Mauszeiger \u00fcber deine Kopfzeilenvorlage und klicke dann auf das Symbol mit den sechs Punkten in der Mitte. Dadurch \u00f6ffnet sich auf der linken Seite das Fenster Abschnitt bearbeiten<\/strong>:<\/p>\n

\"Klicke
Klicke auf die gepunktete Option zum Bearbeiten<\/figcaption><\/figure>\n

Gehe nun zum Reiter Erweitert <\/strong>und suche den Abschnitt Bewegungseffekte<\/strong>. Hier aktivierst du die Bildlaufeffekte<\/strong>, indem du den Schalter auf EIN<\/strong> stellst:<\/p>\n

\"Schalte
Schalte die Option „Scrolling effects“ auf „Ein“<\/figcaption><\/figure>\n

Scrolle dann im Bereich Bewegungseffekte<\/strong> nach unten, um das Feld “ Sticky“<\/strong> zu finden. W\u00e4hle im Dropdown-Men\u00fc “ Oben“<\/strong>:<\/p>\n

\"W\u00e4hle
W\u00e4hle „Oben“ im Dropdown-Men\u00fc der Option „Sticky“<\/figcaption><\/figure>\n

Klicke jetzt auf UPDATE<\/strong>. Je nach Farbschema deines Themes kann es sein, dass dein Elementor Sticky Header transparent aussieht:<\/p>\n

\"Sticky
Sticky Header funktioniert jetzt richtig<\/figcaption><\/figure>\n

Wenn das der Fall ist und dir das Aussehen nicht gef\u00e4llt, kannst du die Hintergrundfarbe \u00e4ndern. Gehe in deinem Bereich “ Abschnitt bearbeiten<\/strong> “ zu Stil > Hintergrund<\/strong> und w\u00e4hle „Klassisch“ <\/strong>als Hintergrundtyp.<\/p>\n

W\u00e4hle nun eine neue Hintergrundfarbe f\u00fcr deine Kopfzeilenvorlage. Du solltest einen Farbton w\u00e4hlen, der zum Rest der Seite passt, aber auch einen sch\u00f6nen Kontrast bildet:<\/p>\n

\"Bearbeite
Bearbeite die Farben der Sticky Kopfzeile<\/figcaption><\/figure>\n

Da dies nur ein Beispiel ist, w\u00e4hlen wir einfach eine graue Farbe, um unsere Kopfzeile weniger transparent zu machen.<\/p>\n

Klicke jetzt auf UPDATE<\/strong>, um deine \u00c4nderungen zu speichern. Sieh dir nun dein Endergebnis in der Vorschau an:<\/p>\n

\"Alle
Alle vorgenommenen \u00c4nderungen anzeigen<\/figcaption><\/figure>\n

Das war’s! Du wirst wahrscheinlich den Stil und die Farben an deine Marke anpassen wollen. Achte nur darauf, dass du deine \u00c4nderungen immer speicherst, wenn du fertig bist.<\/p>\n

Wie du mit CSS deinen Elementor Sticky Header verbesserst<\/h2>\n

Wenn du einen Elementor Sticky Header auf deiner Webseite implementierst, kann sich das wie ein gro\u00dfes Facelifting f\u00fcr dein Webseiten-Design anf\u00fchlen. Vielleicht bist du aber auch an weiteren Anpassungen oder dynamischeren Funktionen interessiert.<\/p>\n

Nachdem du nun wei\u00dft, wie du einen einfachen Sticky Header erstellst, wollen wir sehen, wie du dein Design auf die n\u00e4chste Stufe bringen kannst. Dies kannst du mit Hilfe von Cascading Style Sheets (CSS)<\/a> in WordPress erreichen.<\/p>\n

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.<\/p>\n

Gehe dazu zu Vorlagen > Theme Builder > Kopfzeile<\/strong>:<\/p>\n

\"Hinzuf\u00fcgen
Hinzuf\u00fcgen von benutzerdefiniertem CSS, um Kopfzeilen\u00e4nderungen vorzunehmen<\/figcaption><\/figure>\n

Unter Abschnitt bearbeiten > Erweitert > Benutzerdefiniertes CSS <\/strong>kannst du<\/em> ein kleines CSS-Snippet hinzuf\u00fcgen, um stilistische \u00c4nderungen vorzunehmen.<\/p>\n

Arten von Elementor Sticky Headers<\/h2>\n

Hier sind ein paar beliebte Erweiterungen, die du f\u00fcr deinen Elementor Sticky Header in Betracht ziehen solltest!<\/p>\n

Transparenter Sticky Header<\/h3>\n

Manche Themes setzen Sticky Header automatisch auf transparent. Wenn du dies jedoch mit CSS<\/a> erreichen willst, kannst du einen Codeschnipsel<\/a> wie den folgenden verwenden:<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Kopiere einfach diesen Code und f\u00fcge ihn in das Feld Custom CSS<\/strong> ein und passe die Felder nach deinen W\u00fcnschen an. Dieses Snippet \u00e4ndert die Hintergrundfarbe, die Transparenz und die H\u00f6he deiner Kopfzeile mit einem Animationseffekt:<\/p>\n
\"CSS
CSS f\u00fcr die Anpassung des Kopfzeilenhintergrunds<\/figcaption><\/figure>\n
Die M\u00f6glichkeiten allein f\u00fcr diesen Typ sind endlos.<\/p>\n
Schrumpfende, sticky Kopfzeile<\/h3>\n
Eine weitere beliebte Wahl ist eine Kopfzeile, die gr\u00f6\u00dfer und kleiner wird, wenn die Besucher\/innen scrollen. Hier ist der Code, den du f\u00fcr diese Art von Elementor Sticky Header brauchst:<\/p>\n
header.sticky-header {\n    --header-height: 90px;\n    --opacity: 0.90;\n    --shrink-me: 0.80;\n    --sticky-background-color: #0e41e5;\n    --transition: .3s ease-in-out;\n\n    transition: background-color var(--transition),\n                background-image var(--transition),\n                backdrop-filter var(--transition),\n                opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n    background-color: var(--sticky-background-color) !important;\n    background-image: none !important;\n    opacity: var(--opacity) !important;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n    transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n    min-height: calc(var(--header-height) * var(--shrink-me))!important;\n    height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n    transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n    padding-bottom: 10px !important;\n    padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n    transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n    max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Wenn du dich mit einem so umfangreichen Code nicht wohl f\u00fchlst, solltest du dir die Anleitung von Elementor f\u00fcr einen schrumpfenden Sticky Header<\/a> ansehen.<\/p>\n
Mit diesem Design erh\u00e4ltst du diesen Effekt:<\/p>\n
\"Neuer
Neuer Header-Effekt<\/figcaption><\/figure>\n
Obwohl dieser Header einen subtilen Touch hat, kann seine Raffinesse deinem Design eine professionellere Note verleihen.<\/p>\n
Einblenden \/ Ausblenden<\/h3>\n
Zus\u00e4tzlich zu diesen trendigen Optionen gibt es auch noch die Ein- und Ausblendfunktion (auch „reveal“ genannt). Sie sieht in etwa so aus:<\/p>\n
\"Einblend\/Ausblendfunktion\"
Einblend\/Ausblendfunktion<\/figcaption><\/figure>\n
F\u00fcr diesen Effekt musst du \u00fcberhaupt keinen Code anfassen. Navigiere einfach zu deiner Kopfzeile in deinem Theme Builder. Gehe dann zu Abschnitt bearbeiten > Erweitert > Bewegungseffekte > Scrolling Effects<\/strong>:<\/p>\n
\"Bearbeite
Bearbeite die Option „Transparenz“<\/figcaption><\/figure>\n
Hier klickst du auf das Stiftsymbol neben dem Feld “ Transparenz“<\/strong> und \u00e4nderst die Richtung<\/strong> auf „Einblenden<\/strong> “ oder “ Ausblenden<\/strong>„. Passe dann dein Design nach deinen W\u00fcnschen an.<\/p>\n
Es gibt viele Optionen f\u00fcr diese Transparenzeffekte, daher empfehlen wir dir, einen Blick in die Dokumentation von Elementor<\/a> zu werfen. So kannst du genau das Aussehen erreichen, das du willst.<\/p>\n\n
Zusammenfassung<\/h2>\n
Die Zusammenarbeit mit einem vertrauensw\u00fcrdigen Webseiten-Builder ist eine hervorragende Alternative zur Bezahlung eines erfahrenen Webentwicklers<\/a> f\u00fcr die Erstellung deiner Webseite. Mit der besten Webseiten-Designsoftware<\/a> kannst du ganz einfach die wichtigsten Elemente f\u00fcr jede Webseite erstellen. Dazu geh\u00f6ren praktische, sch\u00f6ne Sticky Header.<\/p>\n
Ein Sticky Header kann ein angenehmeres Erlebnis f\u00fcr deine Nutzer schaffen. Du kannst aus verschiedenen dynamischen Kopfzeilenstilen w\u00e4hlen, z. B. transparent und schrumpfend. Noch besser: Du kannst diese atemberaubenden Header-Designs sowohl mit Elementor Pro<\/a> als auch mit der kostenlosen Version erstellen.<\/p>\n
Die Gestaltung deiner Webseite ist einer der ersten Schritte, um sie zu starten. Zun\u00e4chst brauchst du jedoch ein zuverl\u00e4ssiges Hosting. Schau dir die Managed-Hosting-Angebote<\/a> von Kinsta an und finde heraus, wie wir die Leistung deiner Webseite optimieren k\u00f6nnen!<\/p>\n","protected":false},"excerpt":{"rendered":"
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, …<\/p>\n","protected":false},"author":117,"featured_media":49459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[434,676],"topic":[999],"class_list":["post-49458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-wordpress-entwicklung"],"yoast_head":"\nDer ultimative Leitfaden f\u00fcr Elementor Sticky Headers<\/title>\n<meta name=\"description\" content=\"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers\" \/>\n<meta property=\"og:description\" content=\"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T06:27:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T14:58:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers\",\"datePublished\":\"2022-04-22T06:27:11+00:00\",\"dateModified\":\"2023-08-23T14:58:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\"},\"wordCount\":3639,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\",\"name\":\"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\",\"datePublished\":\"2022-04-22T06:27:11+00:00\",\"dateModified\":\"2023-08-23T14:58:59+00:00\",\"description\":\"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers","description":"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/","og_locale":"de_DE","og_type":"article","og_title":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers","og_description":"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.","og_url":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-04-22T06:27:11+00:00","article_modified_time":"2023-08-23T14:58:59+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Salman Ravoof","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers","datePublished":"2022-04-22T06:27:11+00:00","dateModified":"2023-08-23T14:58:59+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/"},"wordCount":3639,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","keywords":["Elementor","page builder"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/","url":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/","name":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","datePublished":"2022-04-22T06:27:11+00:00","dateModified":"2023-08-23T14:58:59+00:00","description":"Ein Sticky Header h\u00e4lt wichtige Informationen im Blick. Erfahre wie du ganz einfach einen Elementor Sticky Header erstellen kannst, um dein Publikum zu begeistern.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/04\/elementor-sticky-header.jpg","width":1460,"height":730,"caption":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/elementor-sticky-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Der ultimative Leitfaden f\u00fcr Elementor Sticky Headers"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=49458"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49458\/revisions"}],"predecessor-version":[{"id":49676,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/49458\/revisions\/49676"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/translations\/nl"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/49458\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/49459"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=49458"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=49458"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=49458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}