So erstellen Sie einen klebrigen Header in WordPress
Bevor wir uns damit befassen, wie wir einen Sticky-Header in WordPress erstellen können, lassen Sie uns zunächst verstehen, was sie sind und warum wir sie möglicherweise verwenden möchten. Sticky-Elemente oder fixierte Elemente sind spezielle Arten von Elementen, die immer sichtbar bleiben und ihre Position nicht ändern, wenn der Benutzer nach oben oder unten scrollt. Diese Elemente sind durch ihre Positionierung jederzeit erreichbar und somit sehr nützlich für Menüs oder andere Navigationsmöglichkeiten.
Sie möchten Ihren Benutzern so viele bequeme Optionen wie möglich bieten, um Ihre Inhalte leicht zugänglich zu machen und die Frustration der Benutzer zu verringern. Mithilfe der Sticky-Elemente können die Benutzer schnell von einer Seite Ihrer Website zur nächsten wechseln und genau das finden, was sie brauchen. All dieser Komfort und die Benutzerfreundlichkeit bedeuten, dass Ihre Benutzererfahrung viel besser wird und Sie eine höhere Benutzerbindung haben werden.
Jetzt werden wir uns mit einer der Hauptarten von Sticky-Elementen befassen, dem Sticky-Header, und einem großartigen Tool, mit dem wir diese Elemente einfach erstellen und anpassen können. Das betreffende Tool heißt WP Sticky.
Neben WP Sticky gibt es viele andere Möglichkeiten, Sticky-Header zu erstellen. Sie können diese Sticky-Elemente sogar mit reinem HTML- und CSS-Code erstellen, aber das erfordert einige technische Kenntnisse und ist ein zeitaufwändiger Prozess. Dieses Plugin ist eine viel einfachere Lösung für das Problem und ist äußerst anfängerfreundlich.
Bevor wir WP Sticky verwenden können, müssen wir es zuerst herunterladen und das Plugin installieren. Da dies ein sehr einfacher Prozess ist, werden wir keine Zeit damit verschwenden. Lassen Sie uns stattdessen direkt mit der Erstellung unseres allerersten Sticky-Headers beginnen.
Das erste, was wir tun müssen, ist, den Plugin-Bereich in unserem WordPress-Admin-Panel aufzurufen; Wählen Sie dort WP Sticky Pro und klicken Sie dann auf Einstellungen.
Wir werden mit diesen Optionen begrüßt, bei denen wir Add New Sticky Element auswählen müssen.
Danach sehen wir einen neuen Eintrag auf der Registerkarte Your Sticky Elements mit dem Namen Sticky Element #1. Herzlichen Glückwunsch, Sie haben Ihr erstes Sticky-Element erstellt, aber es gibt noch viel mehr zu tun, bevor wir einen funktionierenden Sticky-Header haben. Wie Sie sehen können, gibt es einige verschiedene Einstellungskategorien für unser Sticky-Element.
Schauen wir sie uns genauer an.
Hier benennen wir unser Element und wählen aus, was genau wir sticky machen wollen.
Zuerst müssen wir unserem Sticky-Element einen Namen geben; in diesem Fall ist es Sticky Header.
Als nächstes müssen wir ein Element finden und auswählen, das wir sticky machen möchten. Es gibt zwei Möglichkeiten, wie wir dies erreichen können.
Visuelle Auswahl
Dies ist die bequemere und einfachere Option. Gehen Sie einfach in den Bereich Basic und wählen Sie die Option Element auswählen.
Sobald Sie dies getan haben, öffnet sich Ihre Website zusammen mit dem WP Sticky-Menü oben und signalisiert, dass Sie den visuellen Picker aufgerufen haben. Wenn Sie den Mauszeiger über einige der Elemente bewegen, sehen Sie ein gelbliches Rechteck mit unterbrochener Linie, das den ausgewählten Bereich visualisiert. Klicken Sie mit der linken Maustaste darauf, um es auszuwählen.
Dadurch gelangen Sie zurück zur WP Sticky-Einstellungsseite, wo Sie die eindeutige Kennung des ausgewählten Elements sehen. In unserem Fall sieht es etwa so aus.
Klicken Sie anschließend oben rechts auf die Schaltfläche Änderungen speichern, und wir sind fertig.
Schreiben der eindeutigen Kennung
Wenn Sie es vorziehen und mit der eindeutigen ID des Elements, das Sie sticky machen möchten, vertraut sind, können Sie, anstatt es visuell auszuwählen, einfach seine eindeutige ID aufschreiben.
Visuelle Optionen
Nachdem wir unser Element benannt und ausgewählt haben, ist es an der Zeit, es zu einer Kopfzeile zu machen und es anzupassen. WP Sticky gibt uns dazu ziemlich viele Möglichkeiten.
Da wir einen Header erstellen möchten, belassen wir diese Option in ihrem Standardzustand, der Top ist. Falls Sie Ihre Meinung ändern oder sich die Anforderungen ändern, können Sie auch die Option Unten auswählen.
Abstand zwischen dem oberen Rand der Seite und dem klebrigen Element
Manchmal können unsere klebrigen Elemente zu nah an den oberen Rand der Seite gelangen. Wir können dies manuell korrigieren, indem wir die Anzahl der Pixel zwischen dem oberen Rand der Seite und unserem designierten Sticky-Element eingeben.
Standardmäßig ist diese Option nicht gesetzt, da die meisten Elemente automatisch korrekt platziert werden.
Suchen Sie nach der Admin-Symbolleiste
Wenn Ihre Website über eine spezialisierte Admin-Symbolleiste verfügt, kann dies Ihren Sticky-Header blockieren. Wenn dies der Fall ist, müssen Sie nur diese Option aktivieren, und das Problem wird behoben. WP Sticky erkennt automatisch die Größe der Symbolleiste und reagiert entsprechend.
Manchmal möchten Sie je nach Gerät, das Ihre Besucher zum Anzeigen Ihrer Website verwenden, unterschiedliche Verhaltensweisen haben. Möglicherweise möchten Sie auf Mobilgeräten keinen Sticky-Header haben. WP Sticky gibt Ihnen die Möglichkeit auszuwählen, welche Gerätekategorien das Sticky-Verhalten haben sollen. In unserem Fall lehnen wir kleine und mittlere Geräte ab.
Ein weiterer Fall, der möglicherweise eine manuelle Anpassung erfordert, ist, wenn Elemente über Ihrer klebrigen Kopfzeile angezeigt werden. Um dies zu verhindern, müssen Sie den Z-Index Ihres Sticky-Headers erhöhen.
Wenn Sie sich bezüglich der Z-Index-Werte der Elemente, die sich mit Ihrer Kopfzeile überschneiden, nicht sicher sind, geben Sie den Höchstwert 99999 ein, und dies wird das Problem beheben.
Es gibt zwei Effekteinstellungen, die Sie verwenden können. Einblenden und nach unten gleiten. Welche Sie nun letztendlich verwenden, hängt ganz von Ihren persönlichen Vorlieben und dem gewünschten Aussehen der Website ab. Experimentieren Sie, bis Sie sich entschieden haben.
Eine weitere visuelle Anpassung des klebrigen Elements. Abhängig vom Rest der Website können wir das Sticky-Element mit dem Schieberegler mehr oder weniger transparent machen.
Was passiert, wenn Sie nicht möchten, dass bestimmte Teile Ihrer Website den Sticky-Header haben? Nun, mit diesem Schieberegler können Sie den Start- und Endpunkt anpassen, an dem Ihr Sticky-Header auf Ihrer Website angezeigt wird, während Sie weiter scrollen.
Hintergrundfarbe
Was ist, wenn unser klebriges Element nicht so deutlich sichtbar ist? Das Plugin bietet die Option, es durch eine Hintergrundfarbe hervorzuheben. Klicken Sie dazu auf die unten gezeigte Schaltfläche und wählen Sie die gewünschte Hintergrundfarbe aus. So einfach ist das.
Wenn Sie noch mehr Änderungen an Ihrem Sticky-Element vornehmen möchten, die nicht von den oben genannten Optionen abgedeckt werden, gibt es ein Feld, in dem Sie Anpassungen über CSS hinzufügen können. Eine wichtige Sache, die Sie in diesem Fall beachten sollten, ist, dass Sie Stile nicht in Selektoren einschließen müssen. Sie brauchen nicht .classname{color:#FFF;} zu schreiben, sondern alles, was Sie schreiben müssen, ist color:#FFF;
Wir lassen dies leer, da unser Sticky-Demo-Header nicht mehr angepasst werden muss.
Nachdem Sie alle gewünschten Einstellungen geändert haben, vergessen Sie nicht, die Änderungen zu speichern. Nachdem wir dies getan haben, können wir fortfahren und auf die Schaltfläche Preview Sticky in der oberen rechten Ecke klicken, um eine Vorschau der bisher vorgenommenen Änderungen anzuzeigen.
Abschließend
WP Sticky ist eine hervorragende Ergänzung für jede Website und erleichtert die Arbeit des Entwicklers erheblich. Dieses Plugin ist so einfach zu bedienen und bietet dennoch sehr detaillierte und tiefgreifende Anpassungsoptionen. Es hilft Ihnen garantiert, den perfekten Sticky Header für Ihre Website zu erstellen. Das sind großartige Neuigkeiten, da ein Sticky Header die Website-Conversions erheblich steigern kann .
WP Sticky hat eine Pro-Version, die alle oben genannten Optionen enthält und 5,99 $ pro Monat oder 39 $ für eine lebenslange Lizenz kostet. Für Teams und Agenturen werden auch verschiedene Preispläne angeboten.
Vallery Hennings
Vallery Henings ist Texterin und Content-Autorin, die sich auf Ghost-Blogging, E-Mail-Marketingkampagnen und Verkaufsseiten spezialisiert hat. Sie ist auch eine Liebhaberin von Roadtrips, Erdnussbutterkeksen und einem Hundenamen Mimy.