KickStarter FeaturesStyling Block
KickStarter Features

Der Styling Block

Nutze den vorinstallierten Styling Block in KickStarter, um deine Kadence Global Styles zu prüfen und zu verfeinern, bevor du echte Seiten erstellst.

Der Styling Block ist eine eigene Seite, die mit KickStarter ausgeliefert wird und als Live-Vorschau deines Stylesheets dient, damit du deine globalen Styles feinabstimmen kannst, bevor du echte Seiten gestaltest.

Was er zeigt

Der Styling Block bündelt deine zentralen Designelemente an einem Ort:

  • Farbpalette

  • Typografie (H1–H6 und Fließtext)

  • Links

  • Karten

  • Buttons

  • Abstände

So nutzt du ihn

Nutze den Styling Block als Design-Arbeitsfläche: Passe globale Styles in Kadence an und sieh dir direkt an, wie sie zusammenspielen, bevor du dich an komplette Seiten machst. Da er auf der Startseite liegt, kannst du ihn im Live-Vorschaubereich des Kadence Customizer geöffnet lassen und siehst Änderungen sofort.

Kadence Customizer öffnen

Öffne den Kadence Customizer deiner Website, damit du globale Styles ändern und diese Änderungen in der Live-Vorschau nachvollziehen kannst.

Globale Einstellungen anpassen

Justiere globale Einstellungen wie Farben, Button-Styles und Bild-Radien in den Customizer-Panels. Beobachte, wie sich diese Anpassungen auf die Elemente im Styling Block auswirken.

CSS-Variablen in Additional CSS bearbeiten

Verfeinere Details wie Schriftgrößen, Zeilenhöhen, Border-Radien und Karten-Styles, indem du deine CSS-Variablen im Bereich Additional CSS bearbeitest. Verwende konsistente Variablennamen, damit Änderungen auf der gesamten Seite zuverlässig greifen.

Styling Block überprüfen

Prüfe den Styling Block, um sicherzustellen, dass Farben, Typografie, Abstände, Links, Karten und Buttons wie gewünscht zusammenspielen. Wechsle iterativ zwischen Customizer und dieser Seite hin und her, bis das Design bereit für echte Inhaltsseiten ist.

Dein Stylesheet mit dem Styling Block konfigurieren

Nutze den Styling Block als visuelle Checkliste, während du die zentralen Styles deiner Website konfigurierst:

  • Kadence Farbpalette einrichten

  • Button-Styles abstimmen

  • Typografie feinjustieren

  • Abstände anpassen

  • Card-Designs testen

Nachdem du deine globalen Styles abgeschlossen hast, kannst du den Styling Block entweder löschen oder als Entwurf für spätere Referenz aufbewahren.

So speicherst du ihn als Entwurf:

  1. Öffne die Listenansicht.

  2. Wähle den Styling Block aus.

  3. Kopiere den Block.

  4. Erstelle eine neue Seite.

  5. Füge den Block in die neue Seite ein.

  6. Speichere die Seite als Entwurf.

So behältst du dein Styling-Setup als wiederverwendbare Referenz, ohne es auf deinen Live-Seiten aktiv zu lassen.