Wie Du Kadence Element Hooks für fast unbegrenzte Anpassungen deiner Webseite nutzt – Tutorial

Wenn du dich fragen solltest, wie du Kadence Element Hooks verwenden kannst, um deine Website optimal anzupassen und die Vorteile einer extrem leistungsstarken Funktion voll auszuschöpfen, dann bist du hier richtig.

In diesem Kadence Element Hooks Tutorial werde ich die Einrichtung, die Konfigurationseinstellungen und alles was du darüber wissen musst, um zu lernen, wie man Element Hooks wie ein Profi benutzt, erklären.

Mit Kadence-Hooks kannst du benutzerdefinierten Code erstellen und ihn überall dort in deine Webseite einbinden, wo eine entsprechende “Hook-Position“ existiert. Die Hooks können dann entweder auf all deinen Seiten oder nur auf einigen von dir ausgewählten Seiten ausgeführt werden.

Das Beste an der Verwendung von Kadence Element Hooks ist, dass du Gutenberg-Blöcke, Kadence-Blöcke oder deinen Page-Builder verwenden kannst, um die gewünschten Elemente zu erstellen.

Übrigens, wenn das Kadence Theme oder die Kadence Blocks neu für dich sind und du mehr über das Kadence-Theme erfahren möchtest, dann empfehle ich Dir meinen Beitrag, der dir einen vollständigen Überblick über das Theme gibt.

Wenn du noch nicht genau weißt, was Kadence Element Hooks sind, stell dir vor, du könntest

• Social-Sharing-Symbole am Anfang aller deiner Posts platzieren,
• einen „Über mich“-Abschnitt am Anfang deiner WordPress-Seitenleiste einblenden,
• einen Countdown-Timer in einer Leiste über dem Header deiner Website anzeigen, der automatisch endet, sobald das Geschäft abgeschlossen ist,
• einen benutzerdefinierten „Abonniere unseren Newsletter“-Abschnitt nach bestimmten Blog-Posts einfügen,

und vieles mehr einfach und unkompliziert auf deiner Webseite darstellen.

Wolltest du schon einmal eine benutzerdefiniertes Anmeldeformular zu deiner Website hinzufügen, das jedoch nur auf bestimmten Seiten ausgeführt werden soll, damit es nicht deine komplette Website verlangsamt?

Nun, hier kommt die bedingte Ausführung der Hooks ins Spiel. Du kannst genau definieren, auf welchen Seiten der benutzerdefinierte Code ausgeführt werden soll, oder ihn nach bestimmten Kategorien oder Tags gruppieren.

Kadence Element Hooks einrichten

Zuallererst zeige ich dir, wie du Kadence Element Hooks auf deiner Website einrichten kannst.

Um die Element Hooks-Funktion nutzen zu können, benötigst du das Kadence Pro-Theme. Die Hooked Elements sind eine Premium-Funktion des Kadence-Themes.

Sobald das Kadence Pro Plugin aktiviert ist, wechsele zu Design → Kadence.

Falls noch nicht geschehen, trage bitte deinen Lizenzschlüssel und deine Lizenz-E-Mail in das obere rechte Feld ein und klicke auf Aktivieren, um Kadence Pro vollständig zu aktivieren und alle freigegebenen Updates zu erhalten.

Im untereren Teil siehst du alle Pro-Addons, die mit Kadence Pro geliefert werden. Klicke auf den Regler, um die Hooked Elements zu aktivieren.

Sobald du die Hooked Elements aktiviert hast, aktualisiere deine Seite. Klicke nun unter Design → Kadence auf die Option ↳ Elemente.

Kadence Element Hooks- Elementinhalte erstellen

Jetzt befindest du dich auf der Seite Elemente. Mit einem Klick auf die Schaltfläche „Add New“ fügst du ein neues Element hinzu.

Auf der Elements-Seite kannst Du die verschiedenen Typen konfigurieren. Es erscheint eine Auswahl für Inhaltsbereich, fester Bereich, Vorlage oder HTML-Editor.

Kadence-Element Content Section

Wenn du die „Content Section“ auswählst, kannst du Gutenberg-Blöcke, Kadence-Blöcke oder deinen Page-Builder verwenden, um jeden beliebigen Inhalt zu entwerfen und zu erstellen, den du benötigst.

In diesem Tutorial zeige ich dir, wie du ein einfaches Affiliate-Disclosure-Element erstellst, welches du an beliebiger Position in deinen Beiträgen einblenden kannst.

Wenn du schon einmal Affiliate-Links in deine Blogbeiträge eingefügt hast, weißt du, dass du eine Angabe zu den Affiliate-Links einfügen musst. In dieser informierst du deine Leser darüber, dass du möglicherweise eine Provision erhältst, wenn sie ein Produkt über deine Webseite kaufen. Am Ende weißt du auf deine Offenlegungsrichtlinien hin.

Meinen Affiliate Disclosure findest du am Ende meiner Beiträge. Aktuell blende ich ihn über eine Funktion des Plugins ThirstyAffiliates ein.

Vorgehensweise

Füge an der Stelle „Titel hinzufügen“ den Begriff „Kennzeichnung von Werbung/Affiliate-Links:“ ein.

Anschließend gibst du als Inhalt deines Elements Folgendes ein:

„Meine Seite/Beiträge können Werbung und Affiliate-Links enthalten. Bei einem Kauf erhalte ich gegebenenfalls eine Provision. Weitere Informationen gibt es hier: Kennzeichnung von Werbung/Affiliate Links.”

Solltest du keine Verlinkung zu einer separaten Seite wünschen, lasse den letzten Satz weg.

Persönlich bin ich ein Fan von Start Blogging Blocks. Dahinter verbirgt sich eine von Jake Pfohl designte Block-Sammlung mit über 200 hervorragend gestalteten Blöcken für das Kadence Theme. Auf die Sammlung kann über den Design Library Button zugegriffen werden.

Für unser Beispiel könnten wir auf einen der Alert Blöcke zugreifen und damit unserem Element ein noch ansprechenderes Aussehen geben.

Nun können wir mit Schritt 3 – Platzierung der Elemente – fortfahren. Davor möchte ich noch kurz auf die verbleibenden drei Elementtypen – Fixed Section, Template und HTML-Editor – eingehen.

Fixed Section Kadence-Element

Wenn Du die Option „Fixed Section“ auswählst, siehst du denselben Bildschirm wie bei der Auswahl der „Content Section“, nur dass deine Platzierungsoptionen in den Elementeinstellungen (siehe Punkt 3) anders aussehen.

Kadence Fixed Section Elemente sind eine leistungsstarke Ergänzung zu den Kadence Hooked Elements. Analog zu den regulären Kadence-Elementen ermöglichen Fixed Section Elemente es dir, jeden beliebigen Abschnitt mit Gutenberg-Blöcken, Kadence-Blöcken oder deinem Page-Builder zu erstellen. Der Unterschied besteht darin, dass du jetzt in der Lage bist, dieses Element auf deiner Website zu fixieren, sodass es beim Scrollen des Benutzers stehen bleibt.

Nachfolgend findest du eine Liste aller festen Platzierungsoptionen, die du für ein Fixed Section Kadence-Element nutzen kannst:

• Oben fixiert (Fixed On Top)
• Fixiert über der transparenten Kopfzeile (Fixed Above Transparent Header)
• Oben nach dem Scrollen fixiert (Fixed Top After Scroll)
• Unten nach dem Scrollen fixiert – kein Leerzeichen unter der Fußzeile (Fixed Bottom After Scroll – no space below footer)
• Fixiert unten nach Scrollen (Fixed Bottom After Scroll)
• Unten fixiert (Fixed On Bottom)
• Unten fixiert – kein Platz unter der Fußzeile (Fixed Bottom – no space below footer)

Template Kadence Element

Das Template Kadence Element ist eine Art “Theme Builder”, mit dem du unterschiedliche Vorlagen für deine Seiten erstellen kannst.

Mit diesen Vorlagenelementen kannst du das Erscheinungsbild deines Blogs und deiner Archivseiten ganz individuell gestalten.

Es würde diesen Beitrag sprengen, wenn ich auf das Template-Element in diesem Tutorial ausführlich eingehen würde, sodass ich es in einem anderen Artikel behandelt werde. Ich wollte jedoch zumindest auf dieses Element hinweisen und erklären, wofür es verwendet wird.

HTML-Editor Kadence-Element

Wenn du die Option HTML-Editor auswählst, wird dir ein Bildschirm angezeigt, in den du Code eingeben kannst. In diesen Editor kannst du jede Art von HTML-Code eingeben, den du zu deiner Webseite hinzufügen möchtest.

Kadence Element Hooks – Platzierung der Element-Hooks festlegen

Nach der Erstellung eines Titels und des Inhalts deines Kadence-Elements musst du es in einen Bereich deiner Website einbinden. Hierfür legst du einen Platz für dein Element fest.

Klicke dazu in der oberen rechten Ecke auf das Symbol für deine Elementeinstellungen.

Dadurch werden alle spezifischen Einstellungen für das Element angezeigt, und ich werde sie im Detail erläutern.

Die erste Einstellung ist die Platzierung. Wenn du auf das Dropdown-Menü klickst, siehst du eine lange Liste mit allen Bereichen, die Kadence anbietet. Jeder dieser Bereiche ist ein Platz, an dem du dein Element einbinden kannst.

Im Folgenden sind sämtliche Platzierungsoptionen aufgelistet:

Du wirst schnell erkennen, dass Kadence Pro eine Fülle von Hook-Optionen bietet, einschließlich der Möglichkeit, das Element in bestimmte Bereiche einzuhängen, z. B. in das mobile Menü außerhalb des Arbeitsbereichs.

Die Fülle an Platzierungsmöglichkeiten verschaffen dem Kadence-Theme einen klaren Vorteil gegenüber anderen WordPress-Themes.

Ein weiterer großer Vorteil von Kadence ist, dass es auch Hooks zum Ersetzen von Inhalten gibt. Es gibt Hooks,

• zum Ersetzen des Headers,
• der Seitenleiste,
• der Fußzeile,
• des 404-Seiteninhalts und
• des Anmeldeformulars.

Dies eröffnet eine völlig neue Dimension an Möglichkeiten: Du kannst benutzerdefinierte Kopfzeilen, Seitenleisten, Fußzeilen und vieles mehr mit Gutenberg-Blöcken erstellen und den benutzerdefinierten Abschnitt dann als Element bedingt einer beliebigen Seite zuweisen.

Das bedeutet, dass du verschiedenste Kopfzeilen, Fußzeilen oder Seitenleisten auf jeder Seite oder Beitrag haben kannst, ganz, wie du möchtest.

In unserem Beispiel möchten wir, dass die Offenlegung der Werbepartner vor dem Inhalt eines Blogbeitrags, aber nach dem Beitragstitel angezeigt wird. Dafür wählen wir als Hook (Platzierungsoption) „Before Entry Content“, wie in der vorherigen Abbildung der Elementeinstellungen zu sehen ist, aus. Die Priorität sollte auf dem Standardwert von 10 belassen werden.

Wenn du dein eigenes benutzerdefiniertes Element hinzufügst, sieh dir alle angebotenen Optionen an und wähle die Option aus, die zu dem Bereich auf deiner Website passt.

Kadence Element Hooks – Anzeige-Einstellungen konfigurieren

Bis zu diesem Punkt hast du dein Affiliate-Anzeigeelement erstellt und den Ort gewählt, an dem dein Element angezeigt werden soll.

Jetzt kommt der spannende Teil – die Anzeige-Einstellungen. Die Anzeige-Einstellungen ermöglichen es dir, deinen Abschnitt auf den von dir gewählten Seiten zu veröffentlichen.

Dies macht die Kadence Element Hooks sehr leistungsfähig, da deine Webseite dadurch dynamischer wirken kann und zahlreiche Anpassungen möglich sind.

Wenn du das Dropdown-Menü Anzeigen auf öffnest, siehst du alle verschiedenen Ebenen deiner Webseite, wo du dein Element anzeigen kannst.

Im Folgenden ist eine Liste aller Seitentypen aufgeführt, auf denen ein Element angezeigt werden kann:

Wenn dein Element auf der gesamten Webseite angezeigt werden soll, kannst du einfach “Entire Site” wählen.

Du kannst dein Element nur auf allen Blogbeiträgen anzeigen lassen, indem du “Single Beiträge” wählst, oder auf ausgewählten Seiten, indem du “Single Seiten” wählst, sowie auf verschiedenen Archivseiten, deiner 404-Seite und vieles mehr.

Zusätzliche Anzeige-Einstellungen stehen dir zur Verfügung, wenn du WooCommerce auf deiner Webseite installiert hast.

Für unser Affiliate-Offenlegungselement möchten wir, dass es nur in unseren Blogbeiträgen angezeigt wird, also wählen wir “Single Beiträge” aus.

Wir haben also unser Element zur Offenlegung von Werbepartnern so eingerichtet, dass es in allen Blog-Beiträgen vor dem Text angezeigt wird. Jedoch möchten wir nicht, dass die Offenlegung von Werbepartnern in allen unseren Blogbeiträgen angezeigt wird, denn was ist, wenn wir in bestimmten Beiträgen keine Affiliate-Links haben?

Hier können wir sehr spezifisch vorgehen und bestimmte Gruppen oder einzelne Beiträge auswählen, in denen das Element angezeigt werden soll.

Um dieses Problem zu lösen, zeige ich den Disclosure nur in allen Blogbeiträgen an, die ein Affiliate-Tag haben.

Du kannst auch jedes andere Tag verwenden, es muss für dich Sinn machen.

Wähle dazu in der Dropdown-Liste die Option Gruppe. Dann lege fest, nach welcher Taxonomie du deine Beiträge gruppieren möchtest. Entweder nach Kategorien oder nach Tags (Schlagwörter). Wähle „Schlagwörter“ aus, da wir Blogbeiträge mit einem bestimmten Schlagwort anzeigen möchten.

Hinweis: Es werden nur die Tags angezeigt, die du derzeit schon vergeben hast.

Kadence Element Hooks – Benutzereinstellungen konfigurieren

Nun können wir festlegen, welche Besucher das neu erstellte Element sehen können.

Dies geschieht im Abschnitt “User Settings”. Im Dropdown-Menü “Visible to:” sind alle Optionen für Benutzer und Rollen auswählbar.

Folgende Benutzer und Rollen können ausgewählt werden:

• Basis
• Alle Benutzer
• Abgemeldete Benutzer
• Angemeldete Benutzer
• Spezifische Rolle
• Verwalter
• Redakteur
• Autor
• Mitwirkender
• Abonnent

**Hinweis: Wenn du noch keinen Benutzer ausgewählt hast, wird neben den Benutzereinstellungen [UNSET] angezeigt, was bedeutet, dass du eine Option auswählen musst, bevor dein Element funktioniert. Nachdem du eine Auswahl getroffen hast, verschwindet die Anzeige [UNSET].

Weiterhin kannst du festlegen, dass bestimmte Elemente nur für bestimmte Rollen auf deiner Website angezeigt werden, z. B. für Administratoren, Redakteure, Autoren, Mitwirkende oder Abonnenten.

Dies ist eine fantastische Funktion, primär dann, wenn es sich um eine Mitgliederseite handelt, bei der sich die Besucher auf deiner Seite anmelden müssen.

Du könntest unter anderem ein WordPress-Mitgliedschafts-Plugin verwenden und eine Gold-Mitgliedschaft, eine Platin-Mitgliedschaft und eine Diamant-Mitgliedschaft einrichten und jedem Mitglied verschiedene Bereiche zeigen.

Ein perfektes Beispiel hierfür wäre, bestimmte „Werbe“-Elemente auf deiner Webpage zu haben, bei denen Anzeigen in der Seitenleiste, über der Kopfzeile und im Inhalt angezeigt werden.

Angenommen, ein Benutzer meldet sich auf deiner Seite an und ist eingeloggt. Dann könntest du alle Anzeigen für die angemeldeten Benutzer ausblenden, um denjenigen, die eine Mitgliedschaft erworben haben, ein werbefreies Erlebnis zu bieten.

Kadence Element Hooks – Geräteeinstellungen konfigurieren (optional)

Der Punkt „Geräteeinstellungen konfigurieren“ ist schnell erledigt. Wichtig ist nur, dass dies die Anpassungsmöglichkeiten der Kadence Element Hooks noch weiter flexibilisiert.

Bitte beachte, dass die Auswahl der Geräteeinstellungen völlig optional ist.

Falls du willst, dass dein Element nur auf einem bestimmten Gerät (Desktop, Tablet oder Handy) angezeigt wird, kannst du das hier auswählen.

Kadence Element Hooks – Ablaufeinstellungen festlegen (optional)

Der Abschnitt „Expires Settings“ ist ebenfalls optional, eröffnet aber eine Automatisierungsebene, die dir das Leben noch mehr vereinfacht.

Schauen wir uns einige Beispiele dazu an.

• Angenommen, du hast einen Countdown-Timer über deiner Kopfzeile für ein bestimmtes Werbeangebot, das zu einem bestimmten Datum und einer bestimmten Uhrzeit abläuft.
• Oder der Black Friday steht vor der Tür und du hast einige Affiliate-Banner in deiner Sidebar oder über deinem Header, die nur für einen bestimmten Zeitraum gültig sind.
• Oder du nutzt ShareASale, CJ Affiliate oder ein anderes Affiliate-Netzwerk und du wirbst für Angebote mit einem Ablaufdatum.

Hierfür bieten die Kadence Element Hooks ebenfalls eine Lösung.

Aktiviere einfach den Punkt „Enable Expires“ aktivieren“ und es wird ein Datums-/Zeitfeld mit einem Kalender angezeigt.

Wähle das genaue Datum und die genaue Uhrzeit aus, zu der das Element ablaufen soll.

Du brauchst nur die Uhrzeit und den Tag einzugeben, an dem dein Angebot abläuft und Kadence Element Hooks erledigt den Rest.

Nach Ablauf der Frist wird das Element automatisch auslaufen und von der Webseite entfernt.

Das spart Zeit und Nerven. Wer will schon ständig alle Angebote überprüfen und Banner, Countdown-Timer und anderes Werbematerial jedes Mal manuell entfernen, wenn etwas abläuft? Niemand möchte das tun. Überlasse die Arbeit einfach Element Hooks.

Kadence-Element veröffentlichen

Nachdem du,

• den Inhalt für dein Element erstellt hast,
• die Platzierung desselben gewählt,
• die Anzeige-Einstellungen für die Seiten, auf denen es angezeigt werden soll, konfiguriert hast,
• entschieden hast, welche Benutzer dein Element sehen sollen und
• optionale Geräte- oder Ablaufeinstellungen gewählt hast,

bist du endlich bereit, dein Element zu veröffentlichen.

Kontrolliere deine Einstellungen noch einmal und vergewissere dich, dass sie gut aussehen, und klicke dann auf die Schaltfläche Veröffentlichen auf deinem Element.

Nachdem dein Element erfolgreich veröffentlicht wurde, wirst du etwas Ähnliches wie das folgende Bild sehen.

Herzlichen Glückwunsch! Du hast dein Kadence-Element offiziell veröffentlicht.

Hier ist das Endprodukt des Kadence-Element-Tutorials.

Wenn du es nicht von all den verschiedenen Möglichkeiten, die ich in diesem Tutorial besprochen habe, erahnst, ermöglichen Kadence Element Hooks dir eine nahezu unbegrenzte Anpassung deiner Webseite. Lasse deiner Kreativität freien Lauf und ich würde mich freuen zu hören, was du kreiert hast!

Hoffentlich hat dir dieses Kadence Element Hooks-Tutorial gefallen!

Die Kadence Element Hooks sind ein unglaublich leistungsfähiges Feature, und sie sind nur eines der vielen unglaublichen Features, die das Kadence Pro-Theme mitbringt.

Wenn du eine Zusammenfassung aller kostenlosen und professionellen Funktionen des Kadence-Themes haben möchtest, schau dir meinen detaillierten Überblick über das Kadence-Theme an.