Components

Was sind Components?

Components sind funktionale UI-Elemente, die Navigation und Interaktion auf deiner Website vereinfachen. Sie sind die kleinen, aber wichtigen Bausteine, die Besucher durch deine Inhalte führen, die User Experience verbessern und deiner Seite einen professionellen Look geben.

Während Page Building Templates die Hauptbereiche deiner Seiten aufbauen und Blogging Templates deine Blog-Inhalte strukturieren, kümmern sich Components um alles davor, dazwischen und danach – Buttons, die zu Aktionen einladen, Navigation, die Leser orientiert hält, und Footer, die jede Seite sauber abschließen.

Für wen sind Components gedacht?

Jede Kadence-Website profitiert von Components. Egal, ob du eine einfache Business-Seite oder ein komplexes Multi-Page-Projekt erstellst: Du brauchst Buttons, die Besucher aktivieren, Navigation, mit der sie schnell finden, was sie suchen, und einen Footer, der alles professionell abrundet.

Components sind besonders hilfreich, wenn du interaktive Elemente wie animierte Buttons oder ein Inhaltsverzeichnis nutzen möchtest, ohne eigenes CSS oder JavaScript zu schreiben.

So verwendest du Components

Components funktionieren wie alle anderen Block Templates: Durchsuche die Bibliothek, füge eine Component ein und passe sie an. Du kannst sie in jedem Seitenbereich platzieren oder auch eigenständig nutzen.

Typische Einsatzszenarien:

• Standard-Kadence-Buttons ersetzen durch gestaltete Buttons mit Hover-Effekten, 3D-Press-Animationen oder Verlaufsrahmen – für deutlich attraktivere CTAs
• Ein Inhaltsverzeichnis hinzufügen für lange Blogartikel oder Dokumentationsseiten, damit Besucher direkt zum benötigten Abschnitt springen können
• Einen vorgefertigten Footer einfügen, statt im Kadence Header/Footer Builder einen eigenen von Grund auf zu bauen

Verfügbare Component-Typen

Buttons

Gestaltete Button-Designs, die weit über die Standardoptionen von Kadence hinausgehen. In der Bibliothek findest du verschiedene interaktive Effekte:

• Grow – Button vergrößert sich leicht beim Hover
• Move-up – Button hebt sich beim Hover nach oben
• Shine – Lichtreflex-Animation, die bei Hover über den Button gleitet
• 3D press – realistische Schatten- und Eindrück-Animation beim Klicken
• Glossy mirror – glänzende, spiegelnde Oberfläche mit sanftem Hover-Scaling
• Rotating gradient border – auffälliger, rotierender Verlaufsrahmen, ideal für primäre CTAs
• Dropdown – blendet bei Hover zusätzliche Optionen ein

Füge diese Designs in deine Sektionen ein, um deine Calls to Action aufzuwerten. Jeder Button ist vollständig anpassbar – ändere Farben, Texte, Links und Größen, damit alles zu deinem Design passt.

Table of Contents

Ein Navigationsblock, der automatisch die Abschnitte deiner Seite oder deines Beitrags auflistet. Besucher können klicken, um direkt zum gewünschten Inhalt zu springen – ganz ohne Scrollen.

Gerade auf längeren Seiten ist das besonders wertvoll: Es verbessert die User Experience, hilft Lesern, Inhalte schneller zu finden, und unterstützt SEO, weil Suchmaschinen eine klarere Struktur deiner Seite erkennen.

Ein Live-Beispiel für die Table of Contents Component findest du auf der Block Templates Übersicht – sie steuert die Sidebar "Navigate through this page".

Footer

Vorgefertigte Footer-Sektionen, die deinen Seiten einen einheitlichen, professionellen Abschluss geben. Klare Layouts mit Platz für Branding, Navigationslinks, Kontaktdaten und Social Media. Ein gut gestalteter Footer rundet jede Seite ab und zeigt Besuchern klar, was ihr nächster Schritt sein kann.

Unterstützung für globales Styling

Wie alle Block Templates sind Components für den Einsatz mit globalen CSS-Variablen optimiert – insbesondere in Kombination mit KickStarter. Button-Randradien, Farben und Abstände respektieren deine globalen Einstellungen. Ändere sie einmal und alle Components deiner Website aktualisieren sich automatisch.

Free, Pro und Special

• Free – Enthalten in jedem Plan, inklusive der kostenlosen Free Fallin' Kollektion.
• Pro – In allen kostenpflichtigen Plänen enthalten.
• Special – Ebenfalls in allen kostenpflichtigen Plänen enthalten. Bieten oft fortgeschrittenere Designs mit Animationen oder speziellen CSS-Effekten.