Was ein Sticky Header ist<\/h2>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/header-section.png\")
Ein Header-Bereich auf der Website von Kotaku.<\/figcaption><\/figure>\nDer Kopfbereich deiner Webseite ist so etwas wie der Informationstisch deiner Webseite. Er wird von den meisten Nutzern zuerst gesehen und ist immer der Ort, an dem sie einige wichtige Informationen finden und bestimmte Aktionen ausf\u00fchren:<\/p>\n
\n- Hier befindet sich zum Beispiel dein Logo oder der Name deiner Webseite, der als Orientierungspunkt f\u00fcr deine Nutzer dient. In den meisten F\u00e4llen k\u00f6nnen sie durch einen Klick auf das Logo zur\u00fcck zur Startseite gelangen.<\/li>\n
- Wenn du auf deiner Webseite Benutzerkonten einrichtest<\/a>, enth\u00e4lt die Kopfzeile normalerweise einen Link, \u00fcber den man sich auf den Konto- und Profilseiten einloggen kann.<\/li>\n
- M\u00f6glicherweise gibt es hier auch eine Suchfunktion<\/a>, besonders wenn du eine gro\u00dfe Webseite mit vielen Inhalten in verschiedenen Bereichen hast.<\/li>\n
- Nat\u00fcrlich ist auch die Navigation deiner Webseite<\/a> ein wesentlicher Bestandteil der Kopfzeile.<\/li>\n<\/ul>\n
Im Gro\u00dfen und Ganzen ist deine Kopfzeile ein Ber\u00fchrungspunkt f\u00fcr die Nutzer. Sie ist oft die „Messlatte“ f\u00fcr F-f\u00f6rmige Lesemuster<\/a> und erfordert daher die Aufmerksamkeit deiner Nutzer\/innen auf einer intuitiven Ebene.<\/p>\nDu wei\u00dft wahrscheinlich schon, was ein Sticky Header ist, auch wenn er intuitiv ist. Der Kopfbereich deiner Webseite „klebt“ am oberen Bildschirmrand, wenn du weiter scrollst. Im Gegensatz zu einem statischen Header, der an seinem Platz bleibt und beim Scrollen wieder verschwindet, ist der Sticky Header ein immer sichtbares Element.<\/p>\n
Der typische Ansatz f\u00fcr einen Sticky Header ist es, eine statische Version am oberen Rand des Bildschirms anzubringen. Im Folgenden sehen wir uns einige Beispiele aus der Praxis an.<\/p>\n\n
Beispiele f\u00fcr Sticky Header im Web<\/h2>\n
Sticky Header findest du \u00fcberall im Web und es ist eine gute Idee, sich ein paar davon anzuschauen, um zu sehen, was du damit alles erreichen kannst. Eines der einfachsten Beispiele stammt von Hammerhead<\/a>. Diese Webseite verwendet ein „Flyout-Men\u00fc“ und einen Sticky Header und ist sehr einfach gehalten: Sie bleibt in ihrem statischen Layout ganz oben auf der Seite stehen:<\/p>\n![\"Hammerheads](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/hammerhead-site-gif.gif\")
Der Sticky Header auf der Hammerhead-Website.<\/figcaption><\/figure>\nEine weitere einfache Umsetzung stammt von Kin<\/a>. Hier wird ein typischer Sticky Header verwendet, aber diesmal mit ein paar coolen Designelementen.<\/p>\nDu wirst feststellen, dass sich der Kontrast \u00e4ndert, je nachdem, durch welchen Teil der Webseite du scrollst, und es gibt auch einige sch\u00f6ne \u00dcbergangseffekte:<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kin-site-gif.gif\")
Der Sticky Header auf der Kin-Webseite.<\/figcaption><\/figure>\nWir k\u00f6nnen diesen Abschnitt nicht beenden, ohne den Kinsta-Sticky-Header<\/a> zu erw\u00e4hnen. Auch hier sind die Elemente des Headers einfach gehalten, aber sie bieten den Besucherinnen und Besuchern einen praktischen Nutzen:<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kinsta-site-gif.gif\")
Der Sticky Header auf der Kinsta-Website.<\/figcaption><\/figure>\nDieses Mal verschwindet die Kopfzeile, wenn du auf der Seite nach unten scrollst. Sie taucht aber wieder auf, wenn du wieder nach oben scrollst – man kann sie als „teilweise persistente Kopfzeile“ bezeichnen<\/p>\n
Wenn du nach unten scrollst, bedeutet das, dass du deine Zeit in die Seite selbst investierst und wahrscheinlich keine Navigation, keine Anmeldeseiten oder eine andere Seite brauchst. Wenn du jedoch nach oben scrollst, ist es wahrscheinlicher, dass du zu einer anderen Seite auf der Webseite wechseln m\u00f6chtest. In diesem Fall ist der Sticky Header die Rettung.<\/p>\n
Es sind diese kleinen Verbesserungen der Benutzerfreundlichkeit (UX), die daf\u00fcr sorgen, dass Besucherinnen und Besucher gerne auf die Seite zur\u00fcckkehren. Bei der Gestaltung deines eigenen Sticky Headers solltest du \u00fcberlegen, was du tun kannst, um eine UX und UI zu schaffen, die sich an den Bed\u00fcrfnissen der Besucher\/innen orientiert.<\/p>\n
Warum du einen Sticky Header f\u00fcr deine Webseite verwenden solltest<\/h2>\n
Viele Webseiten verwenden Sticky Header, und es gibt viele gute Gr\u00fcnde daf\u00fcr. Sie k\u00f6nnen ein wichtiger Bestandteil deiner Webseite sein und haben einen gro\u00dfen Einfluss auf deine UX und UI.<\/p>\n
Da die Elemente, die du in einer Kopfzeile einf\u00fcgst, die sind, auf die der Nutzer immer zugreifen will, ist es sinnvoll, sie immer anzuzeigen. Das gilt besonders f\u00fcr Ger\u00e4te mit kleineren Bildschirmen und Formaten<\/a>.<\/p>\nAuch wenn es kontraintuitiv erscheinen mag, einen Header zu haben, der immer angezeigt wird, wenn der Platz im Viewport knapp ist, ist das nur ein kleines Opfer. Der eigentliche Vorteil besteht darin, dass der mobile Nutzer weniger Grund hat, zu scrollen – eine Notwendigkeit auf kleineren Ger\u00e4ten. Wenn du die Navigation deiner Webseite ohne Scrollen zur Verf\u00fcgung stellen kannst, kann sich der Nutzer leichter auf deiner Webseite bewegen.<\/p>\n
Die Vor- und Nachteile von Sticky Headers<\/h3>\n
Wir haben schon ein paar Pluspunkte f\u00fcr Sticky Headers genannt, also fassen wir sie kurz zusammen:<\/p>\n
\n- Du kannst eine Navigation anbieten, auf die der Nutzer immer zugreifen kann, was dazu beitr\u00e4gt, das nat\u00fcrliche Lesemuster auf deiner Seite zu erhalten.<\/li>\n
- Du kannst die Kopfzeile an verschiedene Bed\u00fcrfnisse anpassen<\/a>, z. B. an Kontraste, Farbschemata oder sogar an die Absicht der Nutzer.<\/li>\n
- Du hast die M\u00f6glichkeit, dem Nutzer einen Mehrwert zu bieten, sowohl f\u00fcr den Desktop als auch f\u00fcr kleinere Bildschirme.<\/li>\n<\/ul>\n
Ein Sticky Header ist jedoch kein Allheilmittel zur Verbesserung der Benutzerfreundlichkeit, und es gibt auch einige Nachteile:<\/p>\n
\n- Wir gehen kurz darauf ein, aber f\u00fcr Bildschirme aller Gr\u00f6\u00dfen musst du Platz f\u00fcr deine Kopfzeile einplanen.<\/li>\n
- Ein Sticky Header lenkt nat\u00fcrlich vom Rest deines Inhalts ab, weil ihre eigenen Elemente den Blick vom Hauptteil der Seite ablenken.<\/li>\n
- Ein guter Sticky Header ist mit mehr Entwicklungsarbeit verbunden, denn du musst ihn implementieren, sicherstellen, dass er in verschiedenen Browsern funktioniert, und ihn auf kleineren Bildschirmen auf Fehler \u00fcberpr\u00fcfen.<\/li>\n<\/ul>\n
Wenn du jedoch \u00fcber deine Designentscheidungen, die Bed\u00fcrfnisse der Nutzer\/innen und die Ziele deiner Webseite nachdenkst, kannst du all diese Nachteile abmildern oder beseitigen, w\u00e4hrend du die positiven Punkte beibeh\u00e4ltst. Eine M\u00f6glichkeit, dies zu tun, sind WordPress-Plugins.<\/p>\n
3 Plugins zur Erstellung von Sticky Headers<\/h2>\n
In den n\u00e4chsten Abschnitten stellen wir dir einige der f\u00fchrenden Sticky Header Plugins f\u00fcr WordPress vor. Sp\u00e4ter werden wir dar\u00fcber sprechen, ob diese Art von L\u00f6sung die richtige f\u00fcr dich ist. In jedem Fall kann ein Plugin dir helfen, Funktionen zu implementieren, ohne dass du Code brauchst, was besonders wertvoll ist, wenn dein Theme<\/a> dies nicht vorsieht.<\/p>\nAu\u00dferdem kannst du mit einem Plugin die Design- und Entwicklungserfahrung eines Experten nutzen. Die Entwickler treffen einige der wichtigsten technischen Entscheidungen f\u00fcr dich und verpacken sie in eine intuitive und einfach zu bedienende Benutzeroberfl\u00e4che.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
Das Plugin Sticky Menu & Sticky Header<\/a> von Webfactory ist aufgrund seiner zahlreichen Funktionen, seiner hilfreichen Flexibilit\u00e4t und seines g\u00fcnstigen Preises eine gute erste Wahl.<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-sticky-header-plugin.png\")
Das Sticky Menu & Sticky Header Plugin.<\/figcaption><\/figure>\nDer Clou dabei ist, dass du jedes Element auf deiner Webseite am Bildschirm „festkleben“ kannst. Das kann in vielerlei Hinsicht hilfreich sein, aber es bedeutet, dass die Implementierung eines Sticky Headers ein Kinderspiel ist.<\/p>\n
Das Plugin enth\u00e4lt au\u00dferdem eine Reihe von leistungsstarken Optionen, die dir bei der Implementierung eines Sticky Headers helfen:<\/p>\n
\n- Du kannst den gew\u00fcnschten Grad der Positionierung oben festlegen. Das bedeutet, dass du dem Bereich \u00fcber der Kopfzeile mehr Platz geben kannst, um ihn an deine Designziele anzupassen.<\/li>\n
- Es gibt auch andere Positionierungsoptionen, wie z. B. die Verwendung der CSS-Eigenschaft z-index<\/a>, um deine Seite „von vorne nach hinten“ zu gestalten<\/li>\n
- Du kannst den Sticky Header nur auf den von dir ausgew\u00e4hlten Seiten aktivieren, was n\u00fctzlich sein kann, wenn du Landing Pages<\/a> oder andere ungeeignete Inhalte hast.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header enth\u00e4lt auch einen Debug-Modus, der dir dabei hilft, „nicht haftende“ Elemente zu korrigieren. Der dynamische Modus hilft dir auch, Probleme mit responsiven Designs zu l\u00f6sen.<\/p>\n
Die beste Nachricht ist, dass du Sticky Menu & Sticky Header kostenlos herunterladen und nutzen kannst. Au\u00dferdem gibt es eine Premium-Version<\/a>, die dir mehr technisches Know-how abverlangt.<\/p>\nIn der kostenlosen Version des Plugins musst du den Selektor des Elements kennen, um es in den Optionen angeben zu k\u00f6nnen. Die Premium-Version (49-199 $ pro Jahr) bietet jedoch einen visuellen Elementselektor, um dies zu umgehen.<\/p>\n
2. Optionen f\u00fcr Twenty Twenty-One<\/h3>\n
Obwohl wir das WordPress Standard-Theme f\u00fcr die meisten kundenorientierten Webseiten nicht empfehlen w\u00fcrden, hat es f\u00fcr Blogs und \u00e4hnliche Arten von Webseiten genug zu bieten.<\/p>\n
Twenty Twenty-One<\/a> ist unserer Meinung nach eines der herausragenden Standard-Themes, aber es fehlt die Funktion des Sticky Headers. Wenn du diese Funktion hinzuf\u00fcgen m\u00f6chtest, k\u00f6nnte das Plugin Options for Twenty Twenty-One<\/a> das leisten, was du brauchst.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/options-twenty-twenty-one.png\")
Das Options for Twenty Twenty-One Plugin.<\/figcaption><\/figure>\nDiese Ausgabe des Plugins ist eine von vielen. Jedes aktuelle Standardtheme hat eine Version, aber f\u00fcr Twenty Twenty-Two<\/a> gibt es noch keine. Unabh\u00e4ngig davon bietet die Kernfunktion des Plugins eine Menge Extras:<\/p>\n\n- Es gibt ein Full Site Editing (FSE)<\/a> Tool, das f\u00fcr die vollst\u00e4ndige Einf\u00fchrung bereit ist.<\/li>\n
- Du kannst die Schriftgr\u00f6\u00dfe f\u00fcr den Textk\u00f6rper \u00e4ndern, Hyperlink-Unterstreichungen entfernen und andere einfache Anpassungen vornehmen.<\/li>\n
- Du kannst mit den maximalen Breiten von Containern und Elementen arbeiten, ohne dass du daf\u00fcr Code ben\u00f6tigst.<\/li>\n<\/ul>\n
Es gibt viele weitere Optionen f\u00fcr deine Navigation, den Inhalt, die Fu\u00dfzeile und die Kopfzeile. Letztere kannst du ausblenden, in voller Breite anzeigen lassen, ein Hintergrundbild<\/a> und eine Farbe hinzuf\u00fcgen und viele andere \u00c4nderungen vornehmen.<\/p>\nW\u00e4hrend das Basis-Plugin kostenlos ist<\/a>, brauchst du ein Premium-Upgrade ($25-50)<\/a>, um auf die Optionen f\u00fcr den Sticky Header zuzugreifen. Damit kannst du die Einstellungen f\u00fcr mobile und Desktop-Kopfzeilen \u00fcber den WordPress Customizer anpassen:<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-header-customizer.png\")
Der WordPress Customizer zeigt die Sticky-Header-Optionen.<\/figcaption><\/figure>\nWie der Name schon sagt, solltest du nicht erwarten, dass dieses Plugin mit einem anderen Theme als Twenty Twenty-One (oder was auch immer du w\u00e4hlst) funktioniert. Wenn du jedoch dieses Standard-Theme verwendest und nicht programmieren willst, ist es ideal, um deiner Seite einen Sticky Header hinzuzuf\u00fcgen.<\/p>\n
3. Schwebende Benachrichtigungsleiste, Sticky Menu beim Scrollen und Sticky Header f\u00fcr jedes Theme – myStickymenu<\/h3>\n
Hier ist ein Plugin, das seine Karten offen auf den Tisch legt. Das myStickymenu-Plugin<\/a> von Premio bietet fast alles, was du dir f\u00fcr deinen Sticky Header w\u00fcnschst, und verf\u00fcgt \u00fcber eine gro\u00dfe Anzahl an Funktionen.<\/p>\n![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mystickymenu-plugin.png\")
Das myStickymenu-Plugin.<\/figcaption><\/figure>\nEs hat eine erstaunliche Anzahl positiver Bewertungen im WordPress Plugin Directory<\/a> – 799 F\u00fcnf-Sterne-Bewertungen mit einem Durchschnitt von 4,9. Das liegt zum Teil an den umfangreichen Funktionen, die dir zur Verf\u00fcgung stehen:<\/p>\n\n- Es bietet Flexibilit\u00e4t bei der Nutzung. Du kannst zum Beispiel eine Willkommensleiste, ein Sticky-Men\u00fc und eine Kopfzeile erstellen.<\/li>\n
- Das Plugin passt sich an die Responsivit\u00e4t deiner Webseite an. Das bedeutet, dass du keine weiteren Funktionen mit Code implementieren musst.<\/li>\n
- Um das Plugin in vollem Umfang nutzen zu k\u00f6nnen, musst du keine Programmierkenntnisse haben.<\/li>\n
- Das myStickymenu Plugin ist mit einer Reihe von f\u00fchrenden Page Builder Plugins kompatibel, z. B. Elementor<\/a>, Beaver Builder<\/a>, dem nativen Block Editor<\/a>, dem Divi Builder<\/a> und vielen anderen.<\/li>\n<\/ul>\n
Du hast auch eine Reihe von Anpassungsm\u00f6glichkeiten, um deinen Sticky Header so zu gestalten, wie du es m\u00f6chtest. Du kannst z. B. eine teilweise persistente Kopfzeile erstellen, einfache Aspekte wie Hintergrundfarben und Typografie \u00e4ndern und vieles mehr.<\/p>\n
Au\u00dferdem kannst du aufgrund der verschiedenen M\u00f6glichkeiten, wie du deinen Sticky Header pr\u00e4sentieren kannst (z. B. das Men\u00fc und die Willkommensleiste), w\u00e4hlen, wie und wo sie auf deiner Webseite angezeigt werden.<\/p>\n
Auch wenn die kostenlose Version von myStickymenu f\u00fcr deine Bed\u00fcrfnisse ausreichen k\u00f6nnte, gibt es auch eine Premium-Version ($25-99 pro Jahr). Diese bietet mehr M\u00f6glichkeiten, deinen Sticky Header unter bestimmten Bedingungen zu deaktivieren, Countdown-Timer, die M\u00f6glichkeit, mehrere Willkommensleisten hinzuzuf\u00fcgen und einige weitere Anpassungsm\u00f6glichkeiten.<\/p>\n
Wie man einen Sticky Header in WordPress erstellt<\/h2>\n
Im weiteren Verlauf dieses Tutorials zeigen wir dir, wie du einen Sticky Header in WordPress erstellen kannst. Daf\u00fcr gibt es mehrere M\u00f6glichkeiten, die wir beide behandeln werden. Unser erster Schritt wird dir jedoch helfen, eine Entscheidung zu treffen.<\/p>\n
Danach arbeitest du mit deiner bevorzugten Methode an deinem eigenen Sticky Header und wendest dann einige unserer Tipps an, um deinen Header in Zukunft noch effizienter und benutzerfreundlicher zu gestalten.<\/p>\n
1. Entscheide, wie du deinen Sticky Header erstellen willst<\/h3>\n
Ein Grund, warum WordPress so flexibel ist<\/a>, liegt in seinem Plugin-\u00d6kosystem und seiner Open-Source-Erweiterbarkeit. Du kannst also entweder eine L\u00f6sung von der Stange w\u00e4hlen oder deine eigene erstellen<\/p>\nAls erstes musst du dich entscheiden, ob du ein Plugin verwenden oder in den Code eingreifen willst, um deinen Sticky Header zu implementieren. Schauen wir uns die beiden L\u00f6sungen an:<\/p>\n
\n- Plugins.<\/strong> Dies ist eine von WordPress anerkannte Methode<\/a>, vor allem, wenn du nicht \u00fcber das technische Wissen verf\u00fcgst. Sie bietet Flexibilit\u00e4t, aber du bist den Vorstellungen des Entwicklers und seinen Programmierf\u00e4higkeiten ausgeliefert.<\/li>\n
- Coding.<\/strong> Wenn du eine klare Vision im Kopf hast, m\u00f6chtest du vielleicht einen Sticky Header f\u00fcr deine Webseite programmieren. Nat\u00fcrlich brauchst du daf\u00fcr technisches Know-how<\/a>(vor allem CSS<\/a>), aber das Ergebnis wird genau das sein, was du willst. Allerdings musst du dann mehr Wartungsarbeiten durchf\u00fchren, und der Erfolg h\u00e4ngt von deinen eigenen F\u00e4higkeiten als Programmierer ab.<\/li>\n<\/ul>\n
F\u00fcr die meisten WordPress-Nutzer ist ein Plugin die ideale L\u00f6sung, um einen Sticky Header zu erstellen. Es funktioniert gut mit der Plattform und ist einfacher zu beheben, wenn du Probleme hast. In den n\u00e4chsten Schritten werden wir jedoch neben der Plugin-Option auch eine Programmierungsl\u00f6sung vorstellen.<\/p>\n
2. Entscheide dich, ob du dein aktuelles Theme modifizieren oder ein eigenes Theme ausw\u00e4hlen willst<\/h3>\n
Als N\u00e4chstes solltest du dir \u00fcberlegen, ob du dein aktuelles Theme modifizieren<\/a> willst oder ob du ein Theme w\u00e4hlst, das die Sticky-Header-Funktionalit\u00e4t bereits in sich tr\u00e4gt. Das ist wichtig, wenn dein Theme nicht \u00fcber die Funktionen f\u00fcr einen Sticky Header verf\u00fcgt.<\/p>\nViele Themes und Page-Builder-Plugins enthalten eine Sticky-Header-Option, um dir mehr Flexibilit\u00e4t bei der Gestaltung zu bieten. Einige der gr\u00f6\u00dferen, universell einsetzbaren Themes und Plugins wie Elementor<\/a>, Astra<\/a>, Divi, Avada und viele andere bieten diese Funktion standardm\u00e4\u00dfig an.<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/wordpress-theme-sticky.png\")
Die Sticky-Header-Option in Elementor.<\/figcaption><\/figure>\nUm diese Entscheidung zu treffen, solltest du ein paar Dinge \u00fcber dein aktuelles Theme und deine Webseite bedenken:<\/p>\n
\n- Sieht deine Webseite bereits so aus, wie du sie haben willst, oder braucht sie eine Auffrischung?<\/em><\/li>\n
- L\u00e4sst sich dein aktuelles Theme unter der Haube leicht anpassen?<\/em> Die Entwicklerdokumentation sollte dir das verraten.<\/li>\n
- Willst du eine komplexe Implementierung des Sticky Headers oder eine einfachere?<\/em><\/li>\n<\/ul>\n
Anhand der Antworten, die du hier gibst, wirst du dich f\u00fcr das eine oder das andere entscheiden. Wenn du ein neues Theme brauchst, kannst du auch eines w\u00e4hlen, das eine Sticky-Header-Implementierung bietet. Wenn du jedoch dein aktuelles Theme beibehalten willst und es noch keine Sticky Header-Funktion hat, solltest du die \u00c4rmel hochkrempeln und einen der folgenden Teilschritte ausf\u00fchren.<\/p>\n
2a. Verwende ein Plugin mit einem bestimmten Theme<\/h4>\n
Wenn du keine Erfahrung in der Entwicklung hast, empfehlen wir dir, ein Plugin zu verwenden, um die Sticky Header-Funktionalit\u00e4t auf deiner Webseite einzurichten. Es gibt zu viele Variablen, die du ber\u00fccksichtigen, erstellen und pflegen musst. Im Gegensatz dazu verf\u00fcgt ein Plugin bereits \u00fcber eine Codebasis, die diese Elemente ber\u00fccksichtigt, so dass es in den meisten F\u00e4llen eine nahezu ideale Option darstellt.<\/p>\n
In diesem Teil des Tutorials werden wir das myStickymenu-Plugin verwenden, da es f\u00fcr die meisten Anwendungsf\u00e4lle eine gut abgerundete und reichhaltige Funktionspalette bietet. Die allgemeine Verwendung ist jedoch bei den meisten Plugins, die du verwenden wirst, gleich.<\/p>\n
Sobald du dein Plugin installiert und aktiviert<\/a> hast, musst du zu den Theme-Optionen gehen. Bei einigen Plugins findest du sie im WordPress Customizer, bei anderen in einem speziellen Admin-Panel. In diesem Fall verwendest du ein eigenes Admin-Panel unter myStickymenu > Dashboard<\/strong> in WordPress:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/plugin-admin-panel.png\")
Das myStickymenu-Adminpanel in WordPress.<\/figcaption><\/figure>\nDer Standardbildschirm zeigt jedoch die Einstellungen f\u00fcr die Willkommensleiste, die wir in diesem Tutorial nicht brauchen. Klicke daher auf den Kippschalter, um die Leiste zu deaktivieren, und klicke dich zum Bildschirm mit den Einstellungen f\u00fcr das Sticky-Men\u00fc<\/strong> durch:<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-settings.png\")
Der Einstellungsbildschirm f\u00fcr das Sticky-Men\u00fc.<\/figcaption><\/figure>\nObwohl es hier viele Optionen gibt, brauchst du nur das Panel f\u00fcr die Sticky-Klasse<\/strong>. Sobald du den Sticky Header auf „Ein“ gestellt hast, gibst du das entsprechende HTML-Tag f\u00fcr deine Kopfzeile in das entsprechende Feld ein, das mit dem Dropdown-Men\u00fc Andere Klasse oder ID<\/strong> \u00fcbereinstimmt:<\/p>\n![\"Eine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-class-dropdown.png\")
\u00c4ndern des HTML-Selektor-Tags im myStickymenu-Plugin.<\/figcaption><\/figure>\nSobald du deine \u00c4nderungen gespeichert hast, werden sie f\u00fcr deine Webseite \u00fcbernommen. Von dort aus kannst du dir einige der Styling-Funktionen ansehen. Du kannst zum Beispiel einen Fade- oder Slide-\u00dcbergangseffekt einstellen, den Z-Index<\/strong> festlegen, mit Deckkraft, Farben und \u00dcbergangszeiten arbeiten – neben einer ganzen Reihe anderer Optionen.<\/p>\n2b. Code schreiben, um deine Sticky Header zu erstellen<\/h4>\n
Es versteht sich fast von selbst, dass dieser Abschnitt f\u00fcr diejenigen gedacht ist, die bereits Erfahrung in der Entwicklung haben. Du wirst sp\u00e4ter sehen, dass der Code selbst so einfach ist, dass man es kaum glauben kann. Angesichts des zus\u00e4tzlichen Aufwands, den die Erstellung einer benutzerdefinierten Kopfzeile mit sich bringt, musst du auch auf andere Aspekte deiner Erfahrung zur\u00fcckgreifen.<\/p>\n
Bevor du jedoch beginnst, brauchst du Folgendes:<\/p>\n
\n- Einen guten Code-Editor<\/a>, obwohl du in diesem Fall (und je nach Implementierung) auch einen Standard-Texteditor des Betriebssystems verwenden k\u00f6nntest.<\/li>\n
- Du brauchst Zugriff auf die Dateien deiner Webseite<\/a>, die du sichern<\/a> und dann in eine lokale WordPress-Entwicklungsumgebung<\/a> herunterladen solltest.<\/li>\n<\/ul>\n
Es ist wichtig zu betonen, dass du nicht an den Dateien deiner Live-Seite arbeiten willst. Arbeite stattdessen in einer Staging-Umgebung<\/a> oder einem lokalen Setup<\/a> und lade die Dateien nach dem Testen wieder auf deinen Live-Server hoch.<\/p>\nAu\u00dferdem solltest du ein Child-Theme verwenden<\/a>, da du \u00c4nderungen an deinem Parent-Theme vornimmst. So kannst du deinen Code besser organisieren und sicherstellen, dass alle \u00c4nderungen (im wahrsten Sinne des Wortes) erhalten bleiben, wenn das Theme ein Update erh\u00e4lt.<\/p>\nSticky Header mit Code implementieren: Die richtigen Header-Tags finden<\/h4>\n
Wenn du das alles bedacht hast, kannst du beginnen. Die erste Aufgabe besteht darin, die richtigen HTML-Tags f\u00fcr deine Navigation zu finden. Das Ergebnis h\u00e4ngt davon ab, welches Theme du verwendest, obwohl der Header-Tag<\/strong> in den meisten F\u00e4llen eine sichere Sache ist. Am besten findest du das heraus, indem du die Entwicklungswerkzeuge deines Browsers<\/a> verwendest und die Kopfzeile ausw\u00e4hlst:<\/p>\n![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/inspect-element.png\")
Das Inspect Element Tool zeigt die Kinsta Seite und den Tag.<\/figcaption><\/figure>\nWahrscheinlich wirst du feststellen, dass es nicht so einfach ist wie ein einziges Tag. Deshalb empfehlen wir dir, einen Blick in die Dokumentation deines Themes zu werfen (oder direkt mit dem Entwickler zu sprechen), um herauszufinden, welche Tags<\/a> du brauchst, wenn du Schwierigkeiten hast.<\/p>\nEinen Sticky Header mit Code implementieren: Arbeiten mit deinen Style Sheets<\/h4>\n
Als N\u00e4chstes solltest du eine style.css-Datei<\/strong> im Verzeichnis deines Child-Themes erstellen oder \u00f6ffnen. Dadurch wird dein CSS an das der Hauptinstallation angeh\u00e4ngt und dort, wo sich Tags wiederholen, \u00fcberschrieben.<\/p>\nIn dieser Datei f\u00fcgst du die typischen Metadaten hinzu<\/a>, die du f\u00fcr die Registrierung des Child-Themes ben\u00f6tigst:<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/style-css-child.png\")
Erstellen eines Child-Themes mit Onivim2.<\/figcaption><\/figure>\nAls N\u00e4chstes f\u00fcgst du den Code hinzu, um deinen Sticky Header zu aktivieren. Dazu brauchst du einige Kenntnisse \u00fcber die CSS-Vererbung, und je nachdem, welches Theme du verwendest, kann das eine nervenaufreibende Erfahrung sein.<\/p>\n
Das Twenty Twenty-Two-Theme zum Beispiel verwendet zwei Header-Tags, und es kann schwierig sein, die richtige Mischung aus CSS zu finden, damit dein Code auf dem richtigen Element funktioniert. Das gilt auch f\u00fcr den Vorlagenklassen-Dialog im Block-Editor (wenn du die FSE-Funktionalit\u00e4t<\/a> nutzt):<\/p>\n![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/supersticky.png\")
Der Brave Inspector zeigt mehrere Header-Tags f\u00fcr das Twenty Twenty-Two-Theme.<\/figcaption><\/figure>\nUnabh\u00e4ngig davon ist der Code, den du brauchst, der gleiche:<\/p>\n
Akhil Arjun<\/a> bietet daf\u00fcr eine zweizeilige L\u00f6sung an:<\/p>\n\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nDu kannst aber auch die Eigenschaft position: fixed<\/strong> verwenden, die ein paar Zeilen mehr Code ben\u00f6tigt:<\/p>\n\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nHier wird z-index<\/strong> verwendet, um die Kopfzeile an den Anfang des Stapels zu bringen, und dann ein festes Attribut, damit sie am oberen Rand des Bildschirms bleibt.<\/p>\nEs kann sein, dass du hier eine neue Klasse hinzuf\u00fcgen musst, um den Sticky Header anzuwenden. So oder so, dies sollte die Grundlagen f\u00fcr deinen Sticky Header darstellen. Wenn du das geschafft hast, kannst du weiter am Design arbeiten, damit es zum Rest deiner Webseite passt.<\/p>\n
Tipps, um deine Sticky Header effektiver zu machen<\/h2>\n
Sobald du eine Methode zur Erstellung eines Sticky Headers gefunden hast, solltest du herausfinden, wie du ihn perfektionieren kannst. Es gibt viele M\u00f6glichkeiten, das Grunddesign zu verbessern und daf\u00fcr zu sorgen, dass es den Bed\u00fcrfnissen der Besucher deiner Webseite entspricht.<\/p>\n
Eine gute Analogie f\u00fcr deinen eigenen Sticky Header ist, dass er wie ein guter Sportschiedsrichter ist. Die meiste Zeit wirst du nicht wissen, dass es ihn gibt. Aber wenn ein Spieler oder ein Trainer ihn braucht, wird er angerufen und ist da.<\/p>\n
Dein Sticky Header sollte dasselbe tun – er sollte im Schatten bleiben oder aus dem Ged\u00e4chtnis verschwinden, bis der Nutzer ihn braucht. Das kannst du mit ein paar Faustregeln erreichen, die du (wie immer) brechen kannst, wenn das Design es erfordert:<\/p>\n
\n- Halte es kompakt. <\/strong>Der Platz auf dem Bildschirm wird knapp, deshalb solltest du den Header klein halten. Du k\u00f6nntest eine L\u00f6sung implementieren, bei der dein Header dynamisch skaliert, je nachdem, in welchem Bereich der Webseite er angezeigt wird.<\/li>\n
- Verwende versteckte Kopfzeilen und Men\u00fcs auf kleinen Bildschirmen.<\/strong> Du k\u00f6nntest auch ein Men\u00fc ausblenden, \u00e4hnlich wie in dem Beispiel von Hammerhead. Das hilft, die Kopfzeile kompakt zu halten, und kn\u00fcpft an den n\u00e4chsten Punkt an.<\/li>\n
- Achte darauf, dass du keine Ablenkungen einf\u00fchrst.<\/strong> Je mehr Elemente auf dem Bildschirm zu sehen sind, desto mehr konkurrieren sie um die Aufmerksamkeit. Wenn der Sticky Header ein Element nicht zeigen muss, entferne es – dein Inhalt wird es zu sch\u00e4tzen wissen, ebenso wie deine Messwerte.<\/li>\n
- Biete Kontrast. <\/strong>Dies ist ein Trick aus dem Call-to-Action (CTA) Spielbuch. Wenn du den Kontrast f\u00fcr den Sticky Header als Ganzes und f\u00fcr die einzelnen Elemente verwendest, kannst du den Blick dorthin lenken, wo du ihn brauchst – oder ihn woanders hinlenken.<\/li>\n<\/ul>\n
Im Gro\u00dfen und Ganzen wird dein Sticky Header nur das tun, was du brauchst, und nicht mehr. Manchmal musst du dich auf das N\u00f6tigste beschr\u00e4nken, ein anderes Mal wirst du ihn mit Links, Logos und Anmeldeformularen<\/a> vollpacken. Wie auch immer, wenn du die UX und UI im Auge beh\u00e4ltst, wirst du immer eine nutzerorientierte Entscheidung treffen.<\/p>\n\nZusammenfassung<\/h2>\n
Die Benutzerfreundlichkeit und die UX deiner Webseite sind so wichtig, dass sie die ersten, zweiten und dritten Punkte sein sollten, die du bei der Gestaltung und Erstellung deiner Webseite festlegst. Die Navigation deiner Webseite ist nur ein Aspekt davon, aber du musst herausfinden, wie du die Nutzer\/innen am besten dazu bringst, sich ohne viel Aufhebens auf deiner Webseite zu bewegen. Ein Sticky Header ist eine gute M\u00f6glichkeit, das zu erreichen.<\/p>\n
Der Kopfbereich deiner Webseite ist so etwas wie der Informationstisch deiner Webseite. Er wird von den meisten Nutzern zuerst gesehen und ist immer der Ort, an dem sie einige wichtige Informationen finden und bestimmte Aktionen ausf\u00fchren:<\/p>\n
- \n
- Hier befindet sich zum Beispiel dein Logo oder der Name deiner Webseite, der als Orientierungspunkt f\u00fcr deine Nutzer dient. In den meisten F\u00e4llen k\u00f6nnen sie durch einen Klick auf das Logo zur\u00fcck zur Startseite gelangen.<\/li>\n
- Wenn du auf deiner Webseite Benutzerkonten einrichtest<\/a>, enth\u00e4lt die Kopfzeile normalerweise einen Link, \u00fcber den man sich auf den Konto- und Profilseiten einloggen kann.<\/li>\n
- M\u00f6glicherweise gibt es hier auch eine Suchfunktion<\/a>, besonders wenn du eine gro\u00dfe Webseite mit vielen Inhalten in verschiedenen Bereichen hast.<\/li>\n
- Nat\u00fcrlich ist auch die Navigation deiner Webseite<\/a> ein wesentlicher Bestandteil der Kopfzeile.<\/li>\n<\/ul>\n
Im Gro\u00dfen und Ganzen ist deine Kopfzeile ein Ber\u00fchrungspunkt f\u00fcr die Nutzer. Sie ist oft die „Messlatte“ f\u00fcr F-f\u00f6rmige Lesemuster<\/a> und erfordert daher die Aufmerksamkeit deiner Nutzer\/innen auf einer intuitiven Ebene.<\/p>\n
Du wei\u00dft wahrscheinlich schon, was ein Sticky Header ist, auch wenn er intuitiv ist. Der Kopfbereich deiner Webseite „klebt“ am oberen Bildschirmrand, wenn du weiter scrollst. Im Gegensatz zu einem statischen Header, der an seinem Platz bleibt und beim Scrollen wieder verschwindet, ist der Sticky Header ein immer sichtbares Element.<\/p>\n
Der typische Ansatz f\u00fcr einen Sticky Header ist es, eine statische Version am oberen Rand des Bildschirms anzubringen. Im Folgenden sehen wir uns einige Beispiele aus der Praxis an.<\/p>\n\n
Beispiele f\u00fcr Sticky Header im Web<\/h2>\n
Sticky Header findest du \u00fcberall im Web und es ist eine gute Idee, sich ein paar davon anzuschauen, um zu sehen, was du damit alles erreichen kannst. Eines der einfachsten Beispiele stammt von Hammerhead<\/a>. Diese Webseite verwendet ein „Flyout-Men\u00fc“ und einen Sticky Header und ist sehr einfach gehalten: Sie bleibt in ihrem statischen Layout ganz oben auf der Seite stehen:<\/p>\n
Der Sticky Header auf der Hammerhead-Website.<\/figcaption><\/figure>\n Eine weitere einfache Umsetzung stammt von Kin<\/a>. Hier wird ein typischer Sticky Header verwendet, aber diesmal mit ein paar coolen Designelementen.<\/p>\n
Du wirst feststellen, dass sich der Kontrast \u00e4ndert, je nachdem, durch welchen Teil der Webseite du scrollst, und es gibt auch einige sch\u00f6ne \u00dcbergangseffekte:<\/p>\n
Der Sticky Header auf der Kin-Webseite.<\/figcaption><\/figure>\n Wir k\u00f6nnen diesen Abschnitt nicht beenden, ohne den Kinsta-Sticky-Header<\/a> zu erw\u00e4hnen. Auch hier sind die Elemente des Headers einfach gehalten, aber sie bieten den Besucherinnen und Besuchern einen praktischen Nutzen:<\/p>\n
Der Sticky Header auf der Kinsta-Website.<\/figcaption><\/figure>\n Dieses Mal verschwindet die Kopfzeile, wenn du auf der Seite nach unten scrollst. Sie taucht aber wieder auf, wenn du wieder nach oben scrollst – man kann sie als „teilweise persistente Kopfzeile“ bezeichnen<\/p>\n
Wenn du nach unten scrollst, bedeutet das, dass du deine Zeit in die Seite selbst investierst und wahrscheinlich keine Navigation, keine Anmeldeseiten oder eine andere Seite brauchst. Wenn du jedoch nach oben scrollst, ist es wahrscheinlicher, dass du zu einer anderen Seite auf der Webseite wechseln m\u00f6chtest. In diesem Fall ist der Sticky Header die Rettung.<\/p>\n
Es sind diese kleinen Verbesserungen der Benutzerfreundlichkeit (UX), die daf\u00fcr sorgen, dass Besucherinnen und Besucher gerne auf die Seite zur\u00fcckkehren. Bei der Gestaltung deines eigenen Sticky Headers solltest du \u00fcberlegen, was du tun kannst, um eine UX und UI zu schaffen, die sich an den Bed\u00fcrfnissen der Besucher\/innen orientiert.<\/p>\n
Warum du einen Sticky Header f\u00fcr deine Webseite verwenden solltest<\/h2>\n
Viele Webseiten verwenden Sticky Header, und es gibt viele gute Gr\u00fcnde daf\u00fcr. Sie k\u00f6nnen ein wichtiger Bestandteil deiner Webseite sein und haben einen gro\u00dfen Einfluss auf deine UX und UI.<\/p>\n
Da die Elemente, die du in einer Kopfzeile einf\u00fcgst, die sind, auf die der Nutzer immer zugreifen will, ist es sinnvoll, sie immer anzuzeigen. Das gilt besonders f\u00fcr Ger\u00e4te mit kleineren Bildschirmen und Formaten<\/a>.<\/p>\n
Auch wenn es kontraintuitiv erscheinen mag, einen Header zu haben, der immer angezeigt wird, wenn der Platz im Viewport knapp ist, ist das nur ein kleines Opfer. Der eigentliche Vorteil besteht darin, dass der mobile Nutzer weniger Grund hat, zu scrollen – eine Notwendigkeit auf kleineren Ger\u00e4ten. Wenn du die Navigation deiner Webseite ohne Scrollen zur Verf\u00fcgung stellen kannst, kann sich der Nutzer leichter auf deiner Webseite bewegen.<\/p>\n
Die Vor- und Nachteile von Sticky Headers<\/h3>\n
Wir haben schon ein paar Pluspunkte f\u00fcr Sticky Headers genannt, also fassen wir sie kurz zusammen:<\/p>\n
- \n
- Du kannst eine Navigation anbieten, auf die der Nutzer immer zugreifen kann, was dazu beitr\u00e4gt, das nat\u00fcrliche Lesemuster auf deiner Seite zu erhalten.<\/li>\n
- Du kannst die Kopfzeile an verschiedene Bed\u00fcrfnisse anpassen<\/a>, z. B. an Kontraste, Farbschemata oder sogar an die Absicht der Nutzer.<\/li>\n
- Du hast die M\u00f6glichkeit, dem Nutzer einen Mehrwert zu bieten, sowohl f\u00fcr den Desktop als auch f\u00fcr kleinere Bildschirme.<\/li>\n<\/ul>\n
Ein Sticky Header ist jedoch kein Allheilmittel zur Verbesserung der Benutzerfreundlichkeit, und es gibt auch einige Nachteile:<\/p>\n
- \n
- Wir gehen kurz darauf ein, aber f\u00fcr Bildschirme aller Gr\u00f6\u00dfen musst du Platz f\u00fcr deine Kopfzeile einplanen.<\/li>\n
- Ein Sticky Header lenkt nat\u00fcrlich vom Rest deines Inhalts ab, weil ihre eigenen Elemente den Blick vom Hauptteil der Seite ablenken.<\/li>\n
- Ein guter Sticky Header ist mit mehr Entwicklungsarbeit verbunden, denn du musst ihn implementieren, sicherstellen, dass er in verschiedenen Browsern funktioniert, und ihn auf kleineren Bildschirmen auf Fehler \u00fcberpr\u00fcfen.<\/li>\n<\/ul>\n
Wenn du jedoch \u00fcber deine Designentscheidungen, die Bed\u00fcrfnisse der Nutzer\/innen und die Ziele deiner Webseite nachdenkst, kannst du all diese Nachteile abmildern oder beseitigen, w\u00e4hrend du die positiven Punkte beibeh\u00e4ltst. Eine M\u00f6glichkeit, dies zu tun, sind WordPress-Plugins.<\/p>\n
3 Plugins zur Erstellung von Sticky Headers<\/h2>\n
In den n\u00e4chsten Abschnitten stellen wir dir einige der f\u00fchrenden Sticky Header Plugins f\u00fcr WordPress vor. Sp\u00e4ter werden wir dar\u00fcber sprechen, ob diese Art von L\u00f6sung die richtige f\u00fcr dich ist. In jedem Fall kann ein Plugin dir helfen, Funktionen zu implementieren, ohne dass du Code brauchst, was besonders wertvoll ist, wenn dein Theme<\/a> dies nicht vorsieht.<\/p>\n
Au\u00dferdem kannst du mit einem Plugin die Design- und Entwicklungserfahrung eines Experten nutzen. Die Entwickler treffen einige der wichtigsten technischen Entscheidungen f\u00fcr dich und verpacken sie in eine intuitive und einfach zu bedienende Benutzeroberfl\u00e4che.<\/p>\n
1. Sticky Menu & Sticky Header<\/h3>\n
Das Plugin Sticky Menu & Sticky Header<\/a> von Webfactory ist aufgrund seiner zahlreichen Funktionen, seiner hilfreichen Flexibilit\u00e4t und seines g\u00fcnstigen Preises eine gute erste Wahl.<\/p>\n
Das Sticky Menu & Sticky Header Plugin.<\/figcaption><\/figure>\n Der Clou dabei ist, dass du jedes Element auf deiner Webseite am Bildschirm „festkleben“ kannst. Das kann in vielerlei Hinsicht hilfreich sein, aber es bedeutet, dass die Implementierung eines Sticky Headers ein Kinderspiel ist.<\/p>\n
Das Plugin enth\u00e4lt au\u00dferdem eine Reihe von leistungsstarken Optionen, die dir bei der Implementierung eines Sticky Headers helfen:<\/p>\n
- \n
- Du kannst den gew\u00fcnschten Grad der Positionierung oben festlegen. Das bedeutet, dass du dem Bereich \u00fcber der Kopfzeile mehr Platz geben kannst, um ihn an deine Designziele anzupassen.<\/li>\n
- Es gibt auch andere Positionierungsoptionen, wie z. B. die Verwendung der CSS-Eigenschaft z-index<\/a>, um deine Seite „von vorne nach hinten“ zu gestalten<\/li>\n
- Du kannst den Sticky Header nur auf den von dir ausgew\u00e4hlten Seiten aktivieren, was n\u00fctzlich sein kann, wenn du Landing Pages<\/a> oder andere ungeeignete Inhalte hast.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header enth\u00e4lt auch einen Debug-Modus, der dir dabei hilft, „nicht haftende“ Elemente zu korrigieren. Der dynamische Modus hilft dir auch, Probleme mit responsiven Designs zu l\u00f6sen.<\/p>\n
Die beste Nachricht ist, dass du Sticky Menu & Sticky Header kostenlos herunterladen und nutzen kannst. Au\u00dferdem gibt es eine Premium-Version<\/a>, die dir mehr technisches Know-how abverlangt.<\/p>\n
In der kostenlosen Version des Plugins musst du den Selektor des Elements kennen, um es in den Optionen angeben zu k\u00f6nnen. Die Premium-Version (49-199 $ pro Jahr) bietet jedoch einen visuellen Elementselektor, um dies zu umgehen.<\/p>\n
2. Optionen f\u00fcr Twenty Twenty-One<\/h3>\n
Obwohl wir das WordPress Standard-Theme f\u00fcr die meisten kundenorientierten Webseiten nicht empfehlen w\u00fcrden, hat es f\u00fcr Blogs und \u00e4hnliche Arten von Webseiten genug zu bieten.<\/p>\n
Twenty Twenty-One<\/a> ist unserer Meinung nach eines der herausragenden Standard-Themes, aber es fehlt die Funktion des Sticky Headers. Wenn du diese Funktion hinzuf\u00fcgen m\u00f6chtest, k\u00f6nnte das Plugin Options for Twenty Twenty-One<\/a> das leisten, was du brauchst.<\/p>\n
Das Options for Twenty Twenty-One Plugin.<\/figcaption><\/figure>\n Diese Ausgabe des Plugins ist eine von vielen. Jedes aktuelle Standardtheme hat eine Version, aber f\u00fcr Twenty Twenty-Two<\/a> gibt es noch keine. Unabh\u00e4ngig davon bietet die Kernfunktion des Plugins eine Menge Extras:<\/p>\n
- \n
- Es gibt ein Full Site Editing (FSE)<\/a> Tool, das f\u00fcr die vollst\u00e4ndige Einf\u00fchrung bereit ist.<\/li>\n
- Du kannst die Schriftgr\u00f6\u00dfe f\u00fcr den Textk\u00f6rper \u00e4ndern, Hyperlink-Unterstreichungen entfernen und andere einfache Anpassungen vornehmen.<\/li>\n
- Du kannst mit den maximalen Breiten von Containern und Elementen arbeiten, ohne dass du daf\u00fcr Code ben\u00f6tigst.<\/li>\n<\/ul>\n
Es gibt viele weitere Optionen f\u00fcr deine Navigation, den Inhalt, die Fu\u00dfzeile und die Kopfzeile. Letztere kannst du ausblenden, in voller Breite anzeigen lassen, ein Hintergrundbild<\/a> und eine Farbe hinzuf\u00fcgen und viele andere \u00c4nderungen vornehmen.<\/p>\n
W\u00e4hrend das Basis-Plugin kostenlos ist<\/a>, brauchst du ein Premium-Upgrade ($25-50)<\/a>, um auf die Optionen f\u00fcr den Sticky Header zuzugreifen. Damit kannst du die Einstellungen f\u00fcr mobile und Desktop-Kopfzeilen \u00fcber den WordPress Customizer anpassen:<\/p>\n
Der WordPress Customizer zeigt die Sticky-Header-Optionen.<\/figcaption><\/figure>\n Wie der Name schon sagt, solltest du nicht erwarten, dass dieses Plugin mit einem anderen Theme als Twenty Twenty-One (oder was auch immer du w\u00e4hlst) funktioniert. Wenn du jedoch dieses Standard-Theme verwendest und nicht programmieren willst, ist es ideal, um deiner Seite einen Sticky Header hinzuzuf\u00fcgen.<\/p>\n
3. Schwebende Benachrichtigungsleiste, Sticky Menu beim Scrollen und Sticky Header f\u00fcr jedes Theme – myStickymenu<\/h3>\n
Hier ist ein Plugin, das seine Karten offen auf den Tisch legt. Das myStickymenu-Plugin<\/a> von Premio bietet fast alles, was du dir f\u00fcr deinen Sticky Header w\u00fcnschst, und verf\u00fcgt \u00fcber eine gro\u00dfe Anzahl an Funktionen.<\/p>\n
Das myStickymenu-Plugin.<\/figcaption><\/figure>\n Es hat eine erstaunliche Anzahl positiver Bewertungen im WordPress Plugin Directory<\/a> – 799 F\u00fcnf-Sterne-Bewertungen mit einem Durchschnitt von 4,9. Das liegt zum Teil an den umfangreichen Funktionen, die dir zur Verf\u00fcgung stehen:<\/p>\n
- \n
- Es bietet Flexibilit\u00e4t bei der Nutzung. Du kannst zum Beispiel eine Willkommensleiste, ein Sticky-Men\u00fc und eine Kopfzeile erstellen.<\/li>\n
- Das Plugin passt sich an die Responsivit\u00e4t deiner Webseite an. Das bedeutet, dass du keine weiteren Funktionen mit Code implementieren musst.<\/li>\n
- Um das Plugin in vollem Umfang nutzen zu k\u00f6nnen, musst du keine Programmierkenntnisse haben.<\/li>\n
- Das myStickymenu Plugin ist mit einer Reihe von f\u00fchrenden Page Builder Plugins kompatibel, z. B. Elementor<\/a>, Beaver Builder<\/a>, dem nativen Block Editor<\/a>, dem Divi Builder<\/a> und vielen anderen.<\/li>\n<\/ul>\n
Du hast auch eine Reihe von Anpassungsm\u00f6glichkeiten, um deinen Sticky Header so zu gestalten, wie du es m\u00f6chtest. Du kannst z. B. eine teilweise persistente Kopfzeile erstellen, einfache Aspekte wie Hintergrundfarben und Typografie \u00e4ndern und vieles mehr.<\/p>\n
Au\u00dferdem kannst du aufgrund der verschiedenen M\u00f6glichkeiten, wie du deinen Sticky Header pr\u00e4sentieren kannst (z. B. das Men\u00fc und die Willkommensleiste), w\u00e4hlen, wie und wo sie auf deiner Webseite angezeigt werden.<\/p>\n
Auch wenn die kostenlose Version von myStickymenu f\u00fcr deine Bed\u00fcrfnisse ausreichen k\u00f6nnte, gibt es auch eine Premium-Version ($25-99 pro Jahr). Diese bietet mehr M\u00f6glichkeiten, deinen Sticky Header unter bestimmten Bedingungen zu deaktivieren, Countdown-Timer, die M\u00f6glichkeit, mehrere Willkommensleisten hinzuzuf\u00fcgen und einige weitere Anpassungsm\u00f6glichkeiten.<\/p>\n
Wie man einen Sticky Header in WordPress erstellt<\/h2>\n
Im weiteren Verlauf dieses Tutorials zeigen wir dir, wie du einen Sticky Header in WordPress erstellen kannst. Daf\u00fcr gibt es mehrere M\u00f6glichkeiten, die wir beide behandeln werden. Unser erster Schritt wird dir jedoch helfen, eine Entscheidung zu treffen.<\/p>\n
Danach arbeitest du mit deiner bevorzugten Methode an deinem eigenen Sticky Header und wendest dann einige unserer Tipps an, um deinen Header in Zukunft noch effizienter und benutzerfreundlicher zu gestalten.<\/p>\n
1. Entscheide, wie du deinen Sticky Header erstellen willst<\/h3>\n
Ein Grund, warum WordPress so flexibel ist<\/a>, liegt in seinem Plugin-\u00d6kosystem und seiner Open-Source-Erweiterbarkeit. Du kannst also entweder eine L\u00f6sung von der Stange w\u00e4hlen oder deine eigene erstellen<\/p>\n
Als erstes musst du dich entscheiden, ob du ein Plugin verwenden oder in den Code eingreifen willst, um deinen Sticky Header zu implementieren. Schauen wir uns die beiden L\u00f6sungen an:<\/p>\n
- \n
- Plugins.<\/strong> Dies ist eine von WordPress anerkannte Methode<\/a>, vor allem, wenn du nicht \u00fcber das technische Wissen verf\u00fcgst. Sie bietet Flexibilit\u00e4t, aber du bist den Vorstellungen des Entwicklers und seinen Programmierf\u00e4higkeiten ausgeliefert.<\/li>\n
- Coding.<\/strong> Wenn du eine klare Vision im Kopf hast, m\u00f6chtest du vielleicht einen Sticky Header f\u00fcr deine Webseite programmieren. Nat\u00fcrlich brauchst du daf\u00fcr technisches Know-how<\/a>(vor allem CSS<\/a>), aber das Ergebnis wird genau das sein, was du willst. Allerdings musst du dann mehr Wartungsarbeiten durchf\u00fchren, und der Erfolg h\u00e4ngt von deinen eigenen F\u00e4higkeiten als Programmierer ab.<\/li>\n<\/ul>\n
F\u00fcr die meisten WordPress-Nutzer ist ein Plugin die ideale L\u00f6sung, um einen Sticky Header zu erstellen. Es funktioniert gut mit der Plattform und ist einfacher zu beheben, wenn du Probleme hast. In den n\u00e4chsten Schritten werden wir jedoch neben der Plugin-Option auch eine Programmierungsl\u00f6sung vorstellen.<\/p>\n
2. Entscheide dich, ob du dein aktuelles Theme modifizieren oder ein eigenes Theme ausw\u00e4hlen willst<\/h3>\n
Als N\u00e4chstes solltest du dir \u00fcberlegen, ob du dein aktuelles Theme modifizieren<\/a> willst oder ob du ein Theme w\u00e4hlst, das die Sticky-Header-Funktionalit\u00e4t bereits in sich tr\u00e4gt. Das ist wichtig, wenn dein Theme nicht \u00fcber die Funktionen f\u00fcr einen Sticky Header verf\u00fcgt.<\/p>\n
Viele Themes und Page-Builder-Plugins enthalten eine Sticky-Header-Option, um dir mehr Flexibilit\u00e4t bei der Gestaltung zu bieten. Einige der gr\u00f6\u00dferen, universell einsetzbaren Themes und Plugins wie Elementor<\/a>, Astra<\/a>, Divi, Avada und viele andere bieten diese Funktion standardm\u00e4\u00dfig an.<\/p>\n
Die Sticky-Header-Option in Elementor.<\/figcaption><\/figure>\n Um diese Entscheidung zu treffen, solltest du ein paar Dinge \u00fcber dein aktuelles Theme und deine Webseite bedenken:<\/p>\n
- \n
- Sieht deine Webseite bereits so aus, wie du sie haben willst, oder braucht sie eine Auffrischung?<\/em><\/li>\n
- L\u00e4sst sich dein aktuelles Theme unter der Haube leicht anpassen?<\/em> Die Entwicklerdokumentation sollte dir das verraten.<\/li>\n
- Willst du eine komplexe Implementierung des Sticky Headers oder eine einfachere?<\/em><\/li>\n<\/ul>\n
Anhand der Antworten, die du hier gibst, wirst du dich f\u00fcr das eine oder das andere entscheiden. Wenn du ein neues Theme brauchst, kannst du auch eines w\u00e4hlen, das eine Sticky-Header-Implementierung bietet. Wenn du jedoch dein aktuelles Theme beibehalten willst und es noch keine Sticky Header-Funktion hat, solltest du die \u00c4rmel hochkrempeln und einen der folgenden Teilschritte ausf\u00fchren.<\/p>\n
2a. Verwende ein Plugin mit einem bestimmten Theme<\/h4>\n
Wenn du keine Erfahrung in der Entwicklung hast, empfehlen wir dir, ein Plugin zu verwenden, um die Sticky Header-Funktionalit\u00e4t auf deiner Webseite einzurichten. Es gibt zu viele Variablen, die du ber\u00fccksichtigen, erstellen und pflegen musst. Im Gegensatz dazu verf\u00fcgt ein Plugin bereits \u00fcber eine Codebasis, die diese Elemente ber\u00fccksichtigt, so dass es in den meisten F\u00e4llen eine nahezu ideale Option darstellt.<\/p>\n
In diesem Teil des Tutorials werden wir das myStickymenu-Plugin verwenden, da es f\u00fcr die meisten Anwendungsf\u00e4lle eine gut abgerundete und reichhaltige Funktionspalette bietet. Die allgemeine Verwendung ist jedoch bei den meisten Plugins, die du verwenden wirst, gleich.<\/p>\n
Sobald du dein Plugin installiert und aktiviert<\/a> hast, musst du zu den Theme-Optionen gehen. Bei einigen Plugins findest du sie im WordPress Customizer, bei anderen in einem speziellen Admin-Panel. In diesem Fall verwendest du ein eigenes Admin-Panel unter myStickymenu > Dashboard<\/strong> in WordPress:<\/p>\n
Das myStickymenu-Adminpanel in WordPress.<\/figcaption><\/figure>\n Der Standardbildschirm zeigt jedoch die Einstellungen f\u00fcr die Willkommensleiste, die wir in diesem Tutorial nicht brauchen. Klicke daher auf den Kippschalter, um die Leiste zu deaktivieren, und klicke dich zum Bildschirm mit den Einstellungen f\u00fcr das Sticky-Men\u00fc<\/strong> durch:<\/p>\n
Der Einstellungsbildschirm f\u00fcr das Sticky-Men\u00fc.<\/figcaption><\/figure>\n Obwohl es hier viele Optionen gibt, brauchst du nur das Panel f\u00fcr die Sticky-Klasse<\/strong>. Sobald du den Sticky Header auf „Ein“ gestellt hast, gibst du das entsprechende HTML-Tag f\u00fcr deine Kopfzeile in das entsprechende Feld ein, das mit dem Dropdown-Men\u00fc Andere Klasse oder ID<\/strong> \u00fcbereinstimmt:<\/p>\n
\u00c4ndern des HTML-Selektor-Tags im myStickymenu-Plugin.<\/figcaption><\/figure>\n Sobald du deine \u00c4nderungen gespeichert hast, werden sie f\u00fcr deine Webseite \u00fcbernommen. Von dort aus kannst du dir einige der Styling-Funktionen ansehen. Du kannst zum Beispiel einen Fade- oder Slide-\u00dcbergangseffekt einstellen, den Z-Index<\/strong> festlegen, mit Deckkraft, Farben und \u00dcbergangszeiten arbeiten – neben einer ganzen Reihe anderer Optionen.<\/p>\n
2b. Code schreiben, um deine Sticky Header zu erstellen<\/h4>\n
Es versteht sich fast von selbst, dass dieser Abschnitt f\u00fcr diejenigen gedacht ist, die bereits Erfahrung in der Entwicklung haben. Du wirst sp\u00e4ter sehen, dass der Code selbst so einfach ist, dass man es kaum glauben kann. Angesichts des zus\u00e4tzlichen Aufwands, den die Erstellung einer benutzerdefinierten Kopfzeile mit sich bringt, musst du auch auf andere Aspekte deiner Erfahrung zur\u00fcckgreifen.<\/p>\n
Bevor du jedoch beginnst, brauchst du Folgendes:<\/p>\n
- \n
- Einen guten Code-Editor<\/a>, obwohl du in diesem Fall (und je nach Implementierung) auch einen Standard-Texteditor des Betriebssystems verwenden k\u00f6nntest.<\/li>\n
- Du brauchst Zugriff auf die Dateien deiner Webseite<\/a>, die du sichern<\/a> und dann in eine lokale WordPress-Entwicklungsumgebung<\/a> herunterladen solltest.<\/li>\n<\/ul>\n
Es ist wichtig zu betonen, dass du nicht an den Dateien deiner Live-Seite arbeiten willst. Arbeite stattdessen in einer Staging-Umgebung<\/a> oder einem lokalen Setup<\/a> und lade die Dateien nach dem Testen wieder auf deinen Live-Server hoch.<\/p>\n
Au\u00dferdem solltest du ein Child-Theme verwenden<\/a>, da du \u00c4nderungen an deinem Parent-Theme vornimmst. So kannst du deinen Code besser organisieren und sicherstellen, dass alle \u00c4nderungen (im wahrsten Sinne des Wortes) erhalten bleiben, wenn das Theme ein Update erh\u00e4lt.<\/p>\n
Sticky Header mit Code implementieren: Die richtigen Header-Tags finden<\/h4>\n
Wenn du das alles bedacht hast, kannst du beginnen. Die erste Aufgabe besteht darin, die richtigen HTML-Tags f\u00fcr deine Navigation zu finden. Das Ergebnis h\u00e4ngt davon ab, welches Theme du verwendest, obwohl der Header-Tag<\/strong> in den meisten F\u00e4llen eine sichere Sache ist. Am besten findest du das heraus, indem du die Entwicklungswerkzeuge deines Browsers<\/a> verwendest und die Kopfzeile ausw\u00e4hlst:<\/p>\n
Das Inspect Element Tool zeigt die Kinsta Seite und den Tag.<\/figcaption><\/figure>\n Wahrscheinlich wirst du feststellen, dass es nicht so einfach ist wie ein einziges Tag. Deshalb empfehlen wir dir, einen Blick in die Dokumentation deines Themes zu werfen (oder direkt mit dem Entwickler zu sprechen), um herauszufinden, welche Tags<\/a> du brauchst, wenn du Schwierigkeiten hast.<\/p>\n
Einen Sticky Header mit Code implementieren: Arbeiten mit deinen Style Sheets<\/h4>\n
Als N\u00e4chstes solltest du eine style.css-Datei<\/strong> im Verzeichnis deines Child-Themes erstellen oder \u00f6ffnen. Dadurch wird dein CSS an das der Hauptinstallation angeh\u00e4ngt und dort, wo sich Tags wiederholen, \u00fcberschrieben.<\/p>\n
In dieser Datei f\u00fcgst du die typischen Metadaten hinzu<\/a>, die du f\u00fcr die Registrierung des Child-Themes ben\u00f6tigst:<\/p>\n
Erstellen eines Child-Themes mit Onivim2.<\/figcaption><\/figure>\n Als N\u00e4chstes f\u00fcgst du den Code hinzu, um deinen Sticky Header zu aktivieren. Dazu brauchst du einige Kenntnisse \u00fcber die CSS-Vererbung, und je nachdem, welches Theme du verwendest, kann das eine nervenaufreibende Erfahrung sein.<\/p>\n
Das Twenty Twenty-Two-Theme zum Beispiel verwendet zwei Header-Tags, und es kann schwierig sein, die richtige Mischung aus CSS zu finden, damit dein Code auf dem richtigen Element funktioniert. Das gilt auch f\u00fcr den Vorlagenklassen-Dialog im Block-Editor (wenn du die FSE-Funktionalit\u00e4t<\/a> nutzt):<\/p>\n
Der Brave Inspector zeigt mehrere Header-Tags f\u00fcr das Twenty Twenty-Two-Theme.<\/figcaption><\/figure>\n Unabh\u00e4ngig davon ist der Code, den du brauchst, der gleiche:<\/p>\n
Akhil Arjun<\/a> bietet daf\u00fcr eine zweizeilige L\u00f6sung an:<\/p>\n
\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nDu kannst aber auch die Eigenschaft position: fixed<\/strong> verwenden, die ein paar Zeilen mehr Code ben\u00f6tigt:<\/p>\n
\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nHier wird z-index<\/strong> verwendet, um die Kopfzeile an den Anfang des Stapels zu bringen, und dann ein festes Attribut, damit sie am oberen Rand des Bildschirms bleibt.<\/p>\n
Es kann sein, dass du hier eine neue Klasse hinzuf\u00fcgen musst, um den Sticky Header anzuwenden. So oder so, dies sollte die Grundlagen f\u00fcr deinen Sticky Header darstellen. Wenn du das geschafft hast, kannst du weiter am Design arbeiten, damit es zum Rest deiner Webseite passt.<\/p>\n
Tipps, um deine Sticky Header effektiver zu machen<\/h2>\n
Sobald du eine Methode zur Erstellung eines Sticky Headers gefunden hast, solltest du herausfinden, wie du ihn perfektionieren kannst. Es gibt viele M\u00f6glichkeiten, das Grunddesign zu verbessern und daf\u00fcr zu sorgen, dass es den Bed\u00fcrfnissen der Besucher deiner Webseite entspricht.<\/p>\n
Eine gute Analogie f\u00fcr deinen eigenen Sticky Header ist, dass er wie ein guter Sportschiedsrichter ist. Die meiste Zeit wirst du nicht wissen, dass es ihn gibt. Aber wenn ein Spieler oder ein Trainer ihn braucht, wird er angerufen und ist da.<\/p>\n
Dein Sticky Header sollte dasselbe tun – er sollte im Schatten bleiben oder aus dem Ged\u00e4chtnis verschwinden, bis der Nutzer ihn braucht. Das kannst du mit ein paar Faustregeln erreichen, die du (wie immer) brechen kannst, wenn das Design es erfordert:<\/p>\n
- \n
- Halte es kompakt. <\/strong>Der Platz auf dem Bildschirm wird knapp, deshalb solltest du den Header klein halten. Du k\u00f6nntest eine L\u00f6sung implementieren, bei der dein Header dynamisch skaliert, je nachdem, in welchem Bereich der Webseite er angezeigt wird.<\/li>\n
- Verwende versteckte Kopfzeilen und Men\u00fcs auf kleinen Bildschirmen.<\/strong> Du k\u00f6nntest auch ein Men\u00fc ausblenden, \u00e4hnlich wie in dem Beispiel von Hammerhead. Das hilft, die Kopfzeile kompakt zu halten, und kn\u00fcpft an den n\u00e4chsten Punkt an.<\/li>\n
- Achte darauf, dass du keine Ablenkungen einf\u00fchrst.<\/strong> Je mehr Elemente auf dem Bildschirm zu sehen sind, desto mehr konkurrieren sie um die Aufmerksamkeit. Wenn der Sticky Header ein Element nicht zeigen muss, entferne es – dein Inhalt wird es zu sch\u00e4tzen wissen, ebenso wie deine Messwerte.<\/li>\n
- Biete Kontrast. <\/strong>Dies ist ein Trick aus dem Call-to-Action (CTA) Spielbuch. Wenn du den Kontrast f\u00fcr den Sticky Header als Ganzes und f\u00fcr die einzelnen Elemente verwendest, kannst du den Blick dorthin lenken, wo du ihn brauchst – oder ihn woanders hinlenken.<\/li>\n<\/ul>\n
Im Gro\u00dfen und Ganzen wird dein Sticky Header nur das tun, was du brauchst, und nicht mehr. Manchmal musst du dich auf das N\u00f6tigste beschr\u00e4nken, ein anderes Mal wirst du ihn mit Links, Logos und Anmeldeformularen<\/a> vollpacken. Wie auch immer, wenn du die UX und UI im Auge beh\u00e4ltst, wirst du immer eine nutzerorientierte Entscheidung treffen.<\/p>\n\n
Zusammenfassung<\/h2>\n
Die Benutzerfreundlichkeit und die UX deiner Webseite sind so wichtig, dass sie die ersten, zweiten und dritten Punkte sein sollten, die du bei der Gestaltung und Erstellung deiner Webseite festlegst. Die Navigation deiner Webseite ist nur ein Aspekt davon, aber du musst herausfinden, wie du die Nutzer\/innen am besten dazu bringst, sich ohne viel Aufhebens auf deiner Webseite zu bewegen. Ein Sticky Header ist eine gute M\u00f6glichkeit, das zu erreichen.<\/p>\n
- Verwende versteckte Kopfzeilen und Men\u00fcs auf kleinen Bildschirmen.<\/strong> Du k\u00f6nntest auch ein Men\u00fc ausblenden, \u00e4hnlich wie in dem Beispiel von Hammerhead. Das hilft, die Kopfzeile kompakt zu halten, und kn\u00fcpft an den n\u00e4chsten Punkt an.<\/li>\n
- Du brauchst Zugriff auf die Dateien deiner Webseite<\/a>, die du sichern<\/a> und dann in eine lokale WordPress-Entwicklungsumgebung<\/a> herunterladen solltest.<\/li>\n<\/ul>\n
- L\u00e4sst sich dein aktuelles Theme unter der Haube leicht anpassen?<\/em> Die Entwicklerdokumentation sollte dir das verraten.<\/li>\n
- Coding.<\/strong> Wenn du eine klare Vision im Kopf hast, m\u00f6chtest du vielleicht einen Sticky Header f\u00fcr deine Webseite programmieren. Nat\u00fcrlich brauchst du daf\u00fcr technisches Know-how<\/a>(vor allem CSS<\/a>), aber das Ergebnis wird genau das sein, was du willst. Allerdings musst du dann mehr Wartungsarbeiten durchf\u00fchren, und der Erfolg h\u00e4ngt von deinen eigenen F\u00e4higkeiten als Programmierer ab.<\/li>\n<\/ul>\n
- Plugins.<\/strong> Dies ist eine von WordPress anerkannte Methode<\/a>, vor allem, wenn du nicht \u00fcber das technische Wissen verf\u00fcgst. Sie bietet Flexibilit\u00e4t, aber du bist den Vorstellungen des Entwicklers und seinen Programmierf\u00e4higkeiten ausgeliefert.<\/li>\n
- Du kannst den Sticky Header nur auf den von dir ausgew\u00e4hlten Seiten aktivieren, was n\u00fctzlich sein kann, wenn du Landing Pages<\/a> oder andere ungeeignete Inhalte hast.<\/li>\n<\/ul>\n
- Du hast die M\u00f6glichkeit, dem Nutzer einen Mehrwert zu bieten, sowohl f\u00fcr den Desktop als auch f\u00fcr kleinere Bildschirme.<\/li>\n<\/ul>\n
- M\u00f6glicherweise gibt es hier auch eine Suchfunktion<\/a>, besonders wenn du eine gro\u00dfe Webseite mit vielen Inhalten in verschiedenen Bereichen hast.<\/li>\n