{"id":366114,"date":"2022-11-19T16:13:00","date_gmt":"2022-11-19T13:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366114"},"modified":"2023-01-20T19:47:28","modified_gmt":"2023-01-20T16:47:28","slug":"so-erstellen-sie-einen-klebrigen-header-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-einen-klebrigen-header-in-wordpress\/","title":{"rendered":"So erstellen Sie einen klebrigen Header in WordPress"},"content":{"rendered":"\n

Bevor wir uns damit befassen, wie wir einen Sticky-Header in WordPress erstellen k\u00f6nnen, lassen Sie uns zun\u00e4chst verstehen, was sie sind und warum wir sie m\u00f6glicherweise verwenden m\u00f6chten. Sticky-Elemente oder fixierte Elemente sind spezielle Arten von Elementen, die immer sichtbar bleiben und ihre Position nicht \u00e4ndern, wenn der Benutzer nach oben oder unten scrollt<\/strong>. Diese Elemente sind durch ihre Positionierung jederzeit erreichbar und somit sehr n\u00fctzlich f\u00fcr Men\u00fcs oder andere Navigationsm\u00f6glichkeiten.<\/p>\n

Sie m\u00f6chten Ihren Benutzern so viele bequeme Optionen wie m\u00f6glich bieten, um Ihre Inhalte leicht zug\u00e4nglich zu machen und die Frustration der Benutzer zu verringern. Mithilfe der Sticky-Elemente k\u00f6nnen die Benutzer schnell von einer Seite Ihrer Website zur n\u00e4chsten wechseln und genau das finden, was sie brauchen<\/strong>. All dieser Komfort und die Benutzerfreundlichkeit bedeuten, dass Ihre Benutzererfahrung viel besser wird und Sie eine h\u00f6here Benutzerbindung haben werden.<\/p>\n

Jetzt werden wir uns mit einer der Hauptarten von Sticky-Elementen befassen, dem Sticky-Header, und einem gro\u00dfartigen Tool, mit dem wir diese Elemente einfach erstellen und anpassen k\u00f6nnen. Das betreffende Tool hei\u00dft WP Sticky<\/a>.<\/p>\n

Neben WP Sticky gibt es viele andere M\u00f6glichkeiten, Sticky-Header zu erstellen. Sie k\u00f6nnen diese Sticky-Elemente sogar mit reinem HTML- und CSS-Code erstellen<\/strong>, aber das erfordert einige technische Kenntnisse und ist ein zeitaufw\u00e4ndiger Prozess<\/strong>. Dieses Plugin ist eine viel einfachere L\u00f6sung f\u00fcr das Problem und ist \u00e4u\u00dferst anf\u00e4ngerfreundlich.<\/p>\n

Bevor wir WP Sticky verwenden k\u00f6nnen, m\u00fcssen wir es zuerst herunterladen und das Plugin installieren<\/a>. 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.<\/p>\n

Das erste, was wir tun m\u00fcssen, ist, den Plugin-Bereich in unserem WordPress-Admin-Panel aufzurufen; W\u00e4hlen Sie dort WP Sticky Pro und klicken Sie dann auf Einstellungen<\/strong>.<\/p>\n

Wir werden mit diesen Optionen begr\u00fc\u00dft, bei denen wir Add New Sticky Element ausw\u00e4hlen m\u00fcssen.<\/p>\n

\"So<\/a><\/p>\n

Danach sehen wir einen neuen Eintrag auf der Registerkarte Your Sticky Elements mit dem Namen Sticky Element #1<\/strong>. Herzlichen Gl\u00fcckwunsch, Sie haben Ihr erstes Sticky-Element erstellt<\/strong>, aber es gibt noch viel mehr zu tun, bevor wir einen funktionierenden Sticky-Header haben. Wie Sie sehen k\u00f6nnen, gibt es einige verschiedene Einstellungskategorien f\u00fcr unser Sticky-Element.<\/p>\n

\"So<\/a><\/p>\n

Schauen wir sie uns genauer an.<\/p>\n

Hier benennen wir unser Element und w\u00e4hlen aus, was genau wir sticky machen wollen<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Zuerst m\u00fcssen wir unserem Sticky-Element einen Namen geben; in diesem Fall ist es Sticky Header.<\/p>\n

Als n\u00e4chstes m\u00fcssen wir ein Element finden und ausw\u00e4hlen, das wir sticky machen m\u00f6chten<\/strong>. Es gibt zwei M\u00f6glichkeiten, wie wir dies erreichen k\u00f6nnen.<\/p>\n

Visuelle Auswahl<\/h3>\n

Dies ist die bequemere und einfachere Option. Gehen Sie einfach in den Bereich Basic und w\u00e4hlen Sie die Option Element ausw\u00e4hlen.<\/p>\n

\"So<\/a><\/p>\n

Sobald Sie dies getan haben, \u00f6ffnet sich Ihre Website zusammen mit dem WP Sticky-Men\u00fc oben<\/strong> und signalisiert, dass Sie den visuellen Picker aufgerufen haben. Wenn Sie den Mauszeiger \u00fcber einige der Elemente bewegen, sehen Sie ein gelbliches Rechteck mit unterbrochener Linie, das den ausgew\u00e4hlten Bereich visualisiert. Klicken Sie mit der linken Maustaste darauf, um es auszuw\u00e4hlen.<\/p>\n

\"So<\/a><\/p>\n

Dadurch gelangen Sie zur\u00fcck zur WP Sticky-Einstellungsseite<\/strong>, wo Sie die eindeutige Kennung des ausgew\u00e4hlten Elements<\/strong> sehen. In unserem Fall sieht es etwa so aus.<\/p>\n

\"So<\/a><\/p>\n

Klicken Sie anschlie\u00dfend oben rechts auf die Schaltfl\u00e4che \u00c4nderungen speichern, und wir sind fertig.<\/p>\n

Schreiben der eindeutigen Kennung<\/h3>\n

Wenn Sie es vorziehen und mit der eindeutigen ID des Elements, das Sie sticky machen m\u00f6chten, vertraut sind, k\u00f6nnen Sie, anstatt es visuell auszuw\u00e4hlen, einfach seine eindeutige ID aufschreiben<\/strong>.<\/p>\n

Visuelle Optionen<\/h2>\n

Nachdem wir unser Element benannt und ausgew\u00e4hlt haben, ist es an der Zeit, es zu einer Kopfzeile zu machen und es anzupassen. WP Sticky gibt uns dazu ziemlich viele M\u00f6glichkeiten.<\/p>\n

Da wir einen Header erstellen m\u00f6chten, belassen wir diese Option in ihrem Standardzustand, der Top ist. Falls Sie Ihre Meinung \u00e4ndern oder sich die Anforderungen \u00e4ndern, k\u00f6nnen Sie auch die Option Unten ausw\u00e4hlen<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Abstand zwischen dem oberen Rand der Seite und dem klebrigen Element<\/h3>\n

Manchmal k\u00f6nnen unsere klebrigen Elemente zu nah an den oberen Rand der Seite gelangen. Wir k\u00f6nnen dies manuell korrigieren, indem wir die Anzahl der Pixel zwischen dem oberen Rand der Seite und unserem designierten Sticky-Element eingeben<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Standardm\u00e4\u00dfig ist diese Option nicht gesetzt, da die meisten Elemente automatisch korrekt platziert werden.<\/p>\n

Suchen Sie nach der Admin-Symbolleiste<\/h3>\n

Wenn Ihre Website \u00fcber eine spezialisierte Admin-Symbolleiste verf\u00fcgt, kann dies Ihren Sticky-Header blockieren. Wenn dies der Fall ist, m\u00fcssen Sie nur diese Option aktivieren, und das Problem wird behoben<\/strong>. WP Sticky erkennt automatisch die Gr\u00f6\u00dfe der Symbolleiste und reagiert entsprechend.<\/p>\n

\"So<\/a><\/p>\n

Manchmal m\u00f6chten Sie je nach Ger\u00e4t, das Ihre Besucher zum Anzeigen Ihrer Website verwenden, unterschiedliche Verhaltensweisen haben. M\u00f6glicherweise m\u00f6chten Sie auf Mobilger\u00e4ten keinen Sticky-Header haben. WP Sticky gibt Ihnen die M\u00f6glichkeit auszuw\u00e4hlen, welche Ger\u00e4tekategorien das Sticky-Verhalten haben sollen. In unserem Fall lehnen wir kleine und mittlere Ger\u00e4te ab.<\/p>\n

\"So<\/a><\/p>\n

Ein weiterer Fall, der m\u00f6glicherweise eine manuelle Anpassung erfordert, ist, wenn Elemente \u00fcber Ihrer klebrigen Kopfzeile angezeigt werden. Um dies zu verhindern, m\u00fcssen Sie den Z-Index Ihres Sticky-Headers erh\u00f6hen.<\/p>\n

Wenn Sie sich bez\u00fcglich der Z-Index-Werte der Elemente, die sich mit Ihrer Kopfzeile \u00fcberschneiden, nicht sicher sind, geben Sie den H\u00f6chstwert 99999 ein, und dies wird das Problem beheben.<\/p>\n

\"So<\/a><\/p>\n

Es gibt zwei Effekteinstellungen, die Sie verwenden k\u00f6nnen. Einblenden und nach unten gleiten. Welche Sie nun letztendlich verwenden, h\u00e4ngt ganz von Ihren pers\u00f6nlichen Vorlieben und dem gew\u00fcnschten Aussehen der Website ab. Experimentieren Sie, bis Sie sich entschieden haben.<\/p>\n

\"So<\/a><\/p>\n

Eine weitere visuelle Anpassung des klebrigen Elements. Abh\u00e4ngig vom Rest der Website k\u00f6nnen wir das Sticky-Element mit dem Schieberegler mehr oder weniger transparent machen.<\/p>\n

\"So<\/a><\/p>\n

Was passiert, wenn Sie nicht m\u00f6chten, dass bestimmte Teile Ihrer Website den Sticky-Header haben? Nun, mit diesem Schieberegler k\u00f6nnen Sie den Start- und Endpunkt anpassen, an dem Ihr Sticky-Header auf Ihrer Website angezeigt wird, w\u00e4hrend Sie weiter scrollen.<\/p>\n

\"So<\/a><\/p>\n

Hintergrundfarbe<\/h3>\n

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\u00e4che und w\u00e4hlen Sie die gew\u00fcnschte Hintergrundfarbe aus. So einfach ist das.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie noch mehr \u00c4nderungen an Ihrem Sticky-Element vornehmen m\u00f6chten, die nicht von den oben genannten Optionen abgedeckt werden, gibt es ein Feld, in dem Sie Anpassungen \u00fcber CSS hinzuf\u00fcgen k\u00f6nnen. Eine wichtige Sache, die Sie in diesem Fall beachten sollten, ist, dass Sie Stile nicht in Selektoren einschlie\u00dfen m\u00fcssen. Sie brauchen nicht .classname{color:#FFF;} zu schreiben, sondern alles, was Sie schreiben m\u00fcssen, ist color:#FFF;<\/p>\n

\"So<\/a><\/p>\n

Wir lassen dies leer, da unser Sticky-Demo-Header nicht mehr angepasst werden muss.<\/p>\n

Nachdem Sie alle gew\u00fcnschten Einstellungen ge\u00e4ndert haben, vergessen Sie nicht, die \u00c4nderungen zu speichern. Nachdem wir dies getan haben, k\u00f6nnen wir fortfahren und auf die Schaltfl\u00e4che Preview Sticky in der oberen rechten Ecke klicken, um eine Vorschau der bisher vorgenommenen \u00c4nderungen anzuzeigen.<\/p>\n

Abschlie\u00dfend<\/h2>\n

WP Sticky ist eine hervorragende Erg\u00e4nzung f\u00fcr 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\u00fcr Ihre Website zu erstellen. Das sind gro\u00dfartige Neuigkeiten, da ein Sticky Header die Website-Conversions<\/a> erheblich steigern kann .<\/p>\n

WP Sticky hat eine Pro-Version, die alle oben genannten Optionen enth\u00e4lt und 5,99 $ pro Monat oder 39 $ f\u00fcr eine lebenslange Lizenz kostet. F\u00fcr Teams und Agenturen werden auch verschiedene Preispl\u00e4ne angeboten.<\/p>\n

Vallery Hennings<\/p>\n

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

Aufnahmequelle: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Erstellen Sie einen Sticky-Header in WordPress und verbessern Sie die Benutzererfahrung Ihrer Website.<\/p>\n","protected":false},"author":1,"featured_media":364361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-366114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=366114"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/366114\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/364361"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=366114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=366114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=366114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}