Unterschiedliche Header mit dem Kadence Theme erstellen - Conditional Headers
Mรถchtest du mehr zum Thema Kadence Conditional Headers erfahren?
Kรผrzlich erschien ein neues Update fรผr das Kadence Theme und das Pro Addon Plugin. Die wichtigste Verbesserung fรผr Pro User ist das brandneue Feature „Conditional Header“. Mit diesem hebst du deine Website auf ein ganz neues Level: Deine Besucher bleiben fokussiert und genieรen ein einzigartiges Nutzungserlebnis.
Kadence Conditional Headers sind bedingte Kopfzeilen, die du frei nach deinen Bedรผrfnissen erstellen kannst. So erstellst du einen bestimmten Header, fรผr einen besonderen Bereich deiner Website, z. B. fรผr alle Online-Kurse einen blauen Hintergrund und den Schriftzug Academy im Logo.
Bedingte Header sind da!
Mit den Kadence Conditional Headers kannst du:
- auf Blogseiten je nach Kategorie unterschiedliche Header zeigen,
- auf Membership Sites nach dem Log-In einen unterschiedlichen Header zeigen,
- auf deiner WooCommerce-Seite einen simplifizierten Header wรคhrend des Check-Out-Prozesses zeigen.
Im folgenden Artikel lernst du, wie du die unterschiedlichen Header mit Kadence in deine Website einbauen kannst.
Wie du bedingte Header aktivierst und hinzufรผgst
Klicke zunรคchst auf Design > Kadence, um dort eine รbersicht aller aktivierbaren Pro-AddOns zu sehen. Suche nach „Conditional Headers“ und klicke auf den Kippschalter, um die Funktion zu aktivieren.
Als Nรคchstes gehe รผber „Design“ in den WordPress Customizer. Dort รถffne die Optionen zum Anpassen des Headers. Wenn du bis zum unteren Ende des Header-Abschnitts scrollst, siehst du dort nun „Conditional Header“.
Dort befindet sich aktuell ein Label mit der Aufschrift „Current Previewing Header“ bzw. „Aktueller Header in der Vorschau“. Daneben ist ein kleines Dropdown-Feld, in dem „Default“ bzw. „Standard“ angezeigt wird. Das bedeutet, dass derzeit der Standard-Header angezeigt wird, den du ursprรผnglich fรผr deine gesamte Website eingerichtet hast. Um einen weiteren Header hinzuzufรผgen, klicke auf „Add Header“.
Dadurch รถffnet sich ein Popup-Fenster mit den folgenden Optionen:
- Start Basic: Diese Option ermรถglicht es dir, mit einem einfachen Header und einem einfachen Design zu beginnen. Sie ist dann empfehlenswert, wenn du einen Header erstellen mรถchtest, der sich von deinem bestehenden Standard-Header stark unterscheidet.
- Standard kopieren / Copy Default: Mit dieser Option kannst du deinen Standard-Header kopieren und als Vorlage fรผr deinen neuen Header verwenden. Das ist dann sinnvoll, wenn der neue Header dem Standard-Header รคhneln soll, du aber einige Anpassungen vornehmen mรถchtest.
- Importieren: รber die Import-Funktion kannst du einen neuen Header ganz einfach importieren. Verwende sie dann, wenn du bereits einen Header entworfen hast und ihn nun deiner Website hinzufรผgen mรถchtest.
Fรผr unser Tutorial nutze zunรคchst die โStandard kopierenโ-Funktion.
Header umbenennen und Anzeigeeinstellungen konfigurieren
Sobald du einen neuen Conditional Header erstellt hast, benenne diesen in einen benutzerfreundlicheren Namen um. Erweitere dazu zunรคchst die Auswahlliste und รคndere dort die Bezeichnung des Headers. Der Name sollte zu deiner Website passen.
Wenn du die Funktion Kadence Elements verwendet hast, solltest du mit den nรคchsten Einstellungen keine Probleme haben.
Der nรคchste Schritt ist die Konfiguration der Anzeigeeinstellungen. Hier kannst du genau festlegen, auf welchen Unterseiten deiner Website der neue Header angezeigt werden soll.
Klicke auf den Dropdown-Pfeil rechts neben den Display Settings und erweitere so das Dropdown-Menรผ. Unter der Option โShow Onโ kannst du nun all die bekannten Optionen finden, mit denen du bereits vertraut bist. Fรผr unseren Zweck wรคhle โEinzelne Seitenโ und โSeiten individuell auswรคhlenโ. So erhรคltst du die Mรถglichkeit, eine oder mehrere Seiten auszuwรคhlen, auf denen der neue Header angezeigt wird. Wรคhle deine Seiten und klicke dann auf โAuswรคhlenโ.
Stark, oder? Mit dieser Funktion kannst du ganz individuell bestimmen, auf welchen Seiten oder Beitrรคgen welcher Header angezeigt wird.
Benutzereinstellungen konfigurieren
Als Nรคchstes legen wir fest, welche Benutzer deinen neu erstellten Header sehen kรถnnen. Wenn du das Dropdown-Menรผ „Visible to“ รถffnest, siehst du eine Reihe von Benutzern und Rollen, denen du den bedingten Header zeigen kannst.
1. Basic: Alle Benutzer, Abgemeldete Benutzer, Angemeldete Benutzer
2. Spezifische Rolle – Administrator, Redakteur, Autor, Mitwirkende, Abonnenten (dies ist eine hervorragende Funktion, wenn du eine Website mit Mitgliedschaft hast).
Darรผber hinaus kannst du die „Ablaufeinstellungen“ festlegen. Das bedeutet, dass du ein Datum und eine Uhrzeit bestimmen kannst, wann der bedingte Header ablaufen soll. Zu diesem Zeitpunkt wird der Header auf den Standard-Header deiner Website zurรผckgesetzt.
Erstellen des bedingten Headers
Nachdem du nun alle Einstellungen konfiguriert hast, ist es an der Zeit, deinen Header so zu gestalten, wie du es dir wรผnschst. Zuerst scrollst du nach oben und klappst dort alle Optionen aus. Als Nรคchstes lรคsst du dir eine Vorschau deines Headers anzeigen. Dort, wo „Aktuelle Vorschau des Headers“ steht, wรคhlst du den soeben erstellten Header aus.
Sobald du einen anderen als den aktuellen Header in der Vorschau anzeigen mรถchtest, erhรคltst du die folgende Meldung:
„Die Vorschau eines anderen Headers erfordert ein erneutes Laden des Customizers im Vorschaumodus. Klicken Sie unten auf Bestรคtigen, um Ihre Einstellungen zu speichern und in den Vorschaumodus zu wechseln.“
Klicke dann auf die entsprechende Schaltflรคche (Bestรคtigen und Einstellungen speichern).
Du siehst nun deinen neuen Header in der Vorschau und kannst ihn so gestalten, wie du es mรถchtest. Im Customizer siehst du alle Header-Elemente, die dir zur Verfรผgung stehen. Mit der Kadence-Headererstellung kannst du die einzelnen Elemente per Drag & Drop auf deinen Header ziehen und so deinen Conditional Header ganz nach deinen Wรผnschen kreieren.
Denk daran, dass es jeweils eine Registerkarte fรผr die Erstellung der Desktop-Version und eine Registerkarte fรผr Tablet/Mobile gibt.
Nachdem du den Header nach deinen Vorstellungen gestaltet hast, klicke auf die Schaltflรคche „Verรถffentlichen“ in der oberen rechten Ecke des Customizers, um deine รnderungen zu speichern. Gehe dann zurรผck zu den Optionen fรผr bedingte Header, um den Header zu aktivieren. Schalte die entsprechende Funktion ein und der Header ist erstellt.
Wenn du also auf „Verรถffentlichen“ klickst und so den Customizer verlรคsst, gelangst du auf die Startseite. Klicke nun auf die Seite, die du fรผr den neuen Header verwendet hast. Dort siehst du jetzt die unterschiedlichen Header, die du gerade erstellt hast. Nachfolgend kannst du mit dieser Funktion โConditional Headerโ auf verschiedenen Teilen deiner Website weitere unterschiedliche Erlebnisse schaffen.
Eine weitere groรartige Anwendung fรผr diese Funktion ist beispielsweise die Nutzung in einem WooCommerce-Shop. Du kannst die Konzentration deiner Kunden beeinflussen und sie im Kaufprozess halten, indem du die Navigation sinnvoll anpasst.
Wie du einen erstellten Header lรถschen kannst
Um einen Header zu lรถschen, gehe zurรผck zum Customizer und klicke auf Header. Wie du sehen kannst, wird der letzte Header, den du in der Vorschau angezeigt hast, gespeichert, so dass du vielleicht zum Standard-Header zurรผckkehren mรถchtest.
Scrolle dazu nach unten zu „Conditional Header“ und wรคhle diese Option. Klicke fรผr den aktuellen Vorschau-Header auf Standard-Header und bestรคtige dies dann. Daraufhin wird die Ansicht neu geladen und du bist wieder bei dem Header angelangt.
Gehe nun zu dem erstellten bedingten Header. Dort hast du einen zusรคtzlichen Header, der standardmรครig erstellt wurde. Erweitere das Menรผ. Jetzt kannst du den Header ganz einfach entfernen, indem du auf „Delete“ klickst.
Hinweis: Dadurch werden alle mit diesem bedingten Header verbundenen Einstellungen dauerhaft entfernt.
Einen Kadence Conditional Header importieren und exportieren
Du erhรคltst die Importoption, wenn du einen neuen Header erstellen mรถchtest und auf „Header hinzufรผgen“ klickst. Dort erhรคltst du die drei oben genannten Optionen (Start Basic, Copy Default, Import). Wรคhle im Popup-Fenster „Importieren“, lade deine Datei hoch und klicke anschlieรend auf „Importieren und Neu erstellen“. Schon hast du einen neuen Header.
Import
Hier findest du die einzelnen Schritte nochmals Schritt-fรผr-Schritt aufgelistet:
- Gehe zum Abschnitt „Conditional Header“ in deinem Kadence Customizer
- Klicke auf die Schaltflรคche „Header hinzufรผgen“
- Wรคhle die Option „Importieren“
- Verwende den Dateiuploader, um deine Kadence-Headerdatei auszuwรคhlen
- Klicke auf „Importieren und Neu erstellen“
Der Name des Headers und deine Anzeigeeinstellungen werden dabei nicht รผbernommen, da du diese vielleicht anders haben mรถchtest. Aber mit dieser Funktion werden deine Header portabel gemacht. So kannst du Header vielfรคltig nutzen, teilen und von einer Website auf eine andere exportieren. Eine sehr hilfreiche Funktion, die du kennen solltest.
Export
Um einen bedingten Header von Kadence zu exportieren, navigiere zum Abschnitt „Conditional Header“ in deinem Kadence Customizer. Erweitere die Einstellungen fรผr den Header, den du exportieren mรถchtest, und klicke dann auf die Schaltflรคche „Export Header“.
Auf diese Weise wird eine Datei auf deinen Computer heruntergeladen. Diese Datei kannst du anschlieรend in eine andere Website importieren oder sie an eine andere Person senden, damit diese sie auf ihrer eigenen Website einfรผgen kann.
Ideen und Sichtbarkeit
Lass uns nun einige verschiedene Anwendungsfรคlle durchgehen und schauen, welche „Display Settings“ und „User Settings“ in diesen Fรคllen sinnvoll sind.
- Abgemeldete Benutzer: Anzeigeeinstellungen – Gesamte Website. Benutzereinstellungen – Abgemeldete Benutzer.
- Angemeldete Benutzer: Anzeigeeinstellungen – Gesamte Website. Benutzereinstellungen – Abgemeldete Benutzer.
- Blogbeitrรคge mit Kategorie: Anzeigeeinstellungen – Einzelne Beitrรคge / Gruppe / Kategorien. Benutzereinstellungen – Alle Benutzer.
- Seiten mit Tags: Anzeigeeinstellungen – Einzelne Seiten / Gruppe / Tags. Benutzereinstellungen – Alle Benutzer.
- Bedingter Header nur auf der ersten Seite deiner Website: Anzeigeeinstellungen โ Titelseite. Benutzereinstellungen – Alle Benutzer.
Ich hoffe, dass du dadurch besser verstehst, wie du diese Einstellungen verwenden kannst, um deinen Header auf den richtigen Seiten deiner Website anzuzeigen.
Und was ist, wenn du zwei oder mehr benutzerdefinierte Header hast, die die gleichen Anzeigeeinstellungen haben? Du kannst die Header jederzeit neu anordnen, wobei die oberste immer Vorrang hat. Vergiss nicht, auf „Verรถffentlichen“ zu klicken, wenn du fertig bist.
Zusammenfassung
Das Kadence Feature Conditional Header ist eine erstklassige Mรถglichkeit, deine Website individuell zu gestalten und deine Websitebesucher mit einer einzigartigen Navigation und Bildsprache zu begeistern. Unterschiedliche Header erhรถhen die Aufmerksamkeit deiner Nutzer und tragen zu einer lรคngeren Besuchsdauer auf deiner Website bei.
Das Feature ist benutzerfreundlich und intuitiv in der Anwendung. Es ist ab sofort verfรผgbar im Kadence Theme Pro. Wenn du noch kein Pro Mitglied bist, besuche Kadencewp.com, um eine Lizenz zu erwerben.
Offenlegung Werbelinks: Mit einem Stern (*) gekennzeichnete Links und Buttons sind sogenannte Affiliate-Links. BloggerPilot bekommt bei einem Kauf eine Provision, die sich jedoch nicht auf den Endpreis auswirkt. Es ist uns wichtig zu betonen, dass dies keinen Einfluss auf unsere Bewertung oder Meinung hat.