Letztes Update: 19. Januar 2026
Standard-Button
Die Klasse .btn ist die Basisklasse, die jedem Button hinzugefügt werden sollte. Sie definiert Eigenschaften wie Rahmenbreite, Innenabstand, Schriftgröße usw. Zusätzlich kann eine zweite Klasse hinzugefügt werden, um die Farben zu modifizieren. Der Button-Radius wird in der style.css des Child-Themes über die Variable var(--button-radius) festgelegt.
Button-Varianten
- Standard:
.btn– Basis-Button-Styling - Sekundär:
.btn.btn-secondary– Alternative Farbgebung - Klein:
.btn.btn-small– Reduzierte Größe - Kombiniert:
.btn.btn-secondary.btn-small– Sekundärfarbe in kleiner Größe
Typography
Die Typografie-Hierarchie der Website verwendet sowohl HTML-Tags als auch CSS-Klassen für maximale Flexibilität.
H1 / .is-h1 Hauptüberschrift
Größte Überschrift für Seitentitel und wichtigste Inhalte
H2 / .is-h2 Abschnittsüberschrift
Für große Abschnitte und wichtige Unterteilungen
H3 / .is-h3 – Unterabschnittsüberschrift
Für mittlere Abschnitte und Kategorien
H4 / .is-h4 – Kleinere Überschrift
Für kleinere Abschnitte und Untergruppen
H5 / .is-h5 – Kleine Überschrift
Für feine Unterteilungen
H6 / .is-h6 – Kleinste Überschrift
Für die feinste Hierarchieebene
Spezielle Typografie-Klassen
.is-p – Paragraph-Styling für Überschriften. Verleiht einer Überschrift das Aussehen eines normalen Absatzes
Text-Größenklassen
Beispiel für .text-m – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beispiel für .text-l – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Beispiel für .text-xl – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Sections (für Vertikale Abstände)
Die Klasse .section sollte für <section>-Elemente verwendet werden und sorgt für einheitliche Abstände. Alle Sections haben den gleichen linken und rechten Innenabstand über var(--gutter), aber unterschiedliche obere und untere Abstände.
Tipp für aufeinanderfolgende Sections
Um doppelte Abstände zu vermeiden, kann der obere Abstand der nachfolgenden Section auf null gesetzt werden.
⚠️ Achtung: Vorsichtig verwenden, da diese Klasse alle Container-Beschränkungen aufhebt
Spacer (Vertikaler Abstand nach unten)
Spacer erzeugen ausschließlich Abstand nach unten und eignen sich ideal für Standard-Seiten, wo Inhalte direkt untereinander folgen. Im Gegensatz zu Sections haben Spacer keine seitlichen Abstände und können flexibel um beliebige Inhalte gelegt werden – auch innerhalb von Sections für zusätzliche Abstände.
.spacer-xs – Sehr kleiner Abstand
.spacer-s – Kleiner Abstand
.spacer-m – Mittlerer Abstand
.spacer-l – Großer Abstand
.spacer-xl – Sehr großer Abstand
Verwendung: Spacer sind die erste Wahl für normale Inhaltsseiten. Sie halten die Abstände konsistent ohne dass manuell korrigiert werden muss. Auch in Full-Width Sections einsetzbar, wenn zusätzlicher Abstand zwischen Elementen benötigt wird.
Containers (Inhaltsbegrenzung)
Container werden normalerweise innerhalb von Sections platziert, um den Inhalt zu begrenzen. Container sollten keinen linken und rechten Innenabstand haben.
CSS-Variablen
Für GenerateBlocks & Gutenberg
Diese CSS-Variablen bilden das Fundament für ein konsistentes und wartungsfreundliches Design-System. Sie wurden speziell für die Verwendung mit GenerateBlocks und dem Gutenberg-Editor entwickelt und sollten konsequent in allen Design-Entscheidungen verwendet werden, um eine einheitliche Benutzererfahrung zu gewährleisten.
Design-Grundlagen und Konsistenz
Das Variablen-System folgt dem Prinzip der zentralen Definition wiederkehrender Design-Werte. Anstatt feste Pixelwerte direkt in GenerateBlocks zu verwenden, greife auf diese vordefinierten Variablen zurück. Dies ermöglicht es, das gesamte Design der Website durch Änderung weniger zentraler Werte anzupassen und garantiert gleichzeitig visuelle Konsistenz über alle Seiten und Komponenten hinweg.
Abrundungen und Border-Radius
Standard-Radius
Die Variable --radius definiert die Grundabrundung für alle allgemeinen Design-Elemente. Sie wird verwendet, wenn keine spezifischere Radius-Variable verfügbar ist und sorgt für ein einheitliches Erscheinungsbild von Karten, Containern und anderen geometrischen Elementen.
Button-Radius
Für alle interaktiven Button-Elemente steht die Variable --button-radius zur Verfügung. Diese kann vom Standard-Radius abweichen, um Buttons eine besondere visuelle Behandlung zu geben oder sie konsistent zu anderen Interface-Elementen zu gestalten.
Input-Radius
Formularelement wie Eingabefelder, Textareas und Select-Boxen verwenden die Variable --input-radius. Diese spezielle Variable ermöglicht es, Formularelemente visuell von anderen Komponenten zu unterscheiden oder sie harmonisch in das Gesamtdesign einzufügen.
Abstände
Gutter-System
Das Gutter-System definiert die horizontalen Abstände der Website durch die Variable --gutter. Diese verwendet eine clamp-Funktion, um sich responsiv an verschiedene Bildschirmgrößen anzupassen. Gutter werden typischerweise für die seitlichen Innenabstände von Containern und Sections verwendet.
Abstände
Die Space-Variablen folgen einer logischen Hierarchie von --space-xs bis --space-xl. Jede Stufe verdoppelt oder vergrößert den Abstand proportional, um eine harmonische vertikale Rhythmik zu schaffen. Diese Abstände sind wissenschaftlich berechnet und getestet, um auf verschiedenen Bildschirmgrößen optimal zu funktionieren.
Gap-Variablen für Spaltenabstände
Das Gap-System stellt verschiedene Abstände für Grid- und Flex-Layouts zur Verfügung. Die Variable --gap definiert den Standard-Abstand zwischen Spalten und Elementen, während --gap-s und --gap-xs kleinere Varianten für kompaktere Layouts bieten. Diese Variablen eignen sich perfekt für Grid-Container und Flex-Layouts. Verwende sie in den Gap-Einstellungen von Grid-Blöcken oder als Margin-Werte zwischen verwandten Elementen.
Space-Hierarchie
Typographie
Die Schriftgrößen folgen einer typografischen Skala von --fontsize-xs bis --fontsize-5xl. Die größeren Schriftgrade (--fontsize-4xl und --fontsize-5xl) sind für Hero-Überschriften und zentrale Botschaften gedacht, während die mittleren Größen (--fontsize-xl bis --fontsize-2xl) für Standard-Überschriften verschiedener Hierarchieebenen verwendet werden.
Die Variable --fontsize-s eignet sich für größeren Fließtext oder Intro-Paragraphen, die sich vom Standard-Text abheben sollen. --fontsize-xs ist für kleine Texte wie Bildunterschriften, Fußnoten oder Footer-Informationen gedacht.
Verwende diese Variablen in den Typography-Einstellungen von Heading- und Paragraph-Blöcken. Anstatt feste Pixel- oder rem-Werte zu setzen, geben die entsprechende Variable ein, um von der automatischen responsiven Skalierung zu profitieren.
Integration mit GenerateBlocks
GenerateBlocks bietet vollständige Unterstützung für CSS-Variablen in allen Styling-Feldern. Jede Variable kann direkt in die entsprechenden Eingabefelder eintragen, ohne zusätzlichen CSS-Code schreiben zu müssen.
Das Variablen-System ermöglicht es, Design-Änderungen zentral zu verwalten. Eine Anpassung der Variable --fontsize-3xl wirkt sich automatisch auf alle H2-Überschriften der Website aus, ohne dass jeder einzelne Block manuell bearbeitet werden muss
Verwende die Variablen konsequent in allen Design-Entscheidungen und vermeide feste Werte, wo immer eine passende Variable verfügbar ist. Falls eine neue Anforderung entsteht, die nicht durch die vorhandenen Variablen abgedeckt wird, erwäge die Erweiterung des Variablen-Systems, anstatt Einzellösungen zu implementieren.