Site Logo

Style Guide · Kit Vorschau

Live-Vorschau der globalen Site-Settings (Farben, Schriften, Buttons, Formfelder, Spacing).

Typografie

H1 – The quick brown fox

H2 – The quick brown fox

H3 – The quick brown fox

H4 – The quick brown fox

H5 – The quick brown fox
H6 – The quick brown fox

Absatz & Inline

Dies ist ein Standardabsatz. Er zeigt die Body-Schrift, Größe, Zeilenhöhe und Farbe.

Fett, Kursiv, Unterstrichen, Link, Code.

Blockquote – „Design ist die Stille zwischen den Elementen.“

Listen

  • Unordered List Item
  • Noch eins
  • Und noch eins
  1. Ordered List Item
  2. Zweiter Punkt
  3. Dritter Punkt

Buttons

Primary Outline Ghost Small Large Text Link

Button-Beispiele im Fließtext

Beispiel: Inline Action

Formulare

Hinweis: Für 100%ige Stil-Übernahme nutze das Elementor Form Widget mit globalen Form-Einstellungen (Site Settings → Theme Style → Formularfelder / Buttons).

Farbpalette (Global Colors)

Primaryvar(--e-global-color-primary)
Secondaryvar(--e-global-color-secondary)
Accentvar(--e-global-color-accent)
Textvar(--e-global-color-text)
Backgroundvar(--e-global-color-background)

Abstände & Layout

Padding XS
Padding S
Padding M
Padding L
Padding XL

Komponenten

Badge

Card Title

Kurzbeschreibung für eine Card. Prüfe Typo, Abstände, Linkfarbe.

Action
Badge

Feature Block

  • Listenpunkt
  • Noch einer
Mehr
Badge

CTA Block

Kurzer Teasertext mit Call-to-Action.

Jetzt starten

Notizen

// Hinweise
// - Diese Seite zeigt die Wirkung deiner Site Settings.
// - Passe Global Colors & Fonts in Elementor > Website-Einstellungen an.
// - Buttons/Formfelder ziehen ideal aus: Theme Style > Buttons / Formularfelder.
// - Speichere diese Seite als Template "Styleguide Kit v1" für spätere Projekte.