Webdesign mit dem GenerateStack
Als WordPress-Entwickler oder in einer Agentur brauchst du klare Richtlinien für die Verwendung verschiedener Komponenten-Typen. Besonders wenn du mit GeneratePress und GenerateBlocks arbeitest, ist die richtige Wahl zwischen Elements, Patterns und Synced Patterns entscheidend für eine effiziente Website-Entwicklung.
Das Fundament: Customizer und Global Styles
WordPress Customizer
Der GeneratePress Customizer ist deine erste Anlaufstelle für grundlegende, site-weite Einstellungen:
- Globale Farbschemata
- Allgemeine Typografie-Einstellungen
- Grundlegende Layout-Einstellungen
- Container-Breiten und Abstände
- Header- und Footer-Konfiguration*
*Der Header und Footer einer Site lassen sich ggf. einfacher über Elements anpassen oder gestalten!
GenerateBlocks Pro Global Styles
Diese bauen auf den Customizer-Einstellungen auf und erweitern sie. Die Global Styles von GenerateBlocks Pro erlauben es dir, wiederkehrende Design-Anweisungen zentral zu definieren und zu verwalten.
- Wiederverwendbare CSS-Klassen für die gesamte Website
- Block-spezifische Stilanpassungen
- Zentrale Verwaltung von Design-Elementen
- Zentrale Verwaltung von Effekten, z.B. Schattierungen oder Animationen
- Reduzierung redundanter Styling-Angaben
Design-Hierarchie
Local Block Styles > Global Styles > Customizer
Das soll heißen:
- Die im Customizer definierten Farben und Schriften können von Global Styles überschrieben werden.
- Global Styles können von den lokalen Anweisungen in einem Block überschrieben werden.
GeneratePress Elements: Deine erste Wahl für Komponenten aller Art
Die Elements Funktion muss zunächst als GeneratePress Modul aktiviert werden. Anschließend können sie im Dashboard unter Design > Elements verwaltet werden.
Elements sind ideal für:
- Wiederkehrende oder dynamische Inhalte außerhalb des Contents
- Theme-Templates und Template-Parts
- Header- und Footer-Bereiche
- Seitenübergreifende Widgets
- Dynamische Inhaltsbereiche
Die Styling-Kontrolle behältst du durch Global Styles, während die Struktur und Funktionalität durch Elements definiert wird.
WordPress Patterns: Vorlagen für die effiziente Content-Erstellung
Pattern funktionieren ähnlich wie Elements, dienen aber primar dem Einsatz innerhalb des Contents.
Pattern gehören zu den Kernfunktionen von WordPress, sind also bereits auf jeder WP-Site aktiviert und können über Design > Vorlagen aufgerufen und verwaltet werden.
Wir unterscheiden 2 Arten von Pattern / Vorlagen:
Synced Patterns (Synchronisierte Vorlagen)
- Werden im Post-Content gespeichert werden
- Ideal für Content-Elemente, die garantiert identisch bleiben sollen
- Styling-Änderungen über Global Styles wirken sich auf alle Instanzen aus
- Perfekt für Authoren-Boxen, Preistabellen, Newsletter-Formular-Bereiche und andere statische Informationen
Nicht-synchronisierte Patterns
Diese bilden das Herzstück deines Workflows:
- Speichere häufig verwendete Designs als “un-synced” Pattern
- Passe jede Instanz individuell an
- Nutze Global Styles für einheitliches Grunddesign
- Behalte die Flexibilität für lokale Anpassungen
- Ideal für dynamische Informationen, zB. zur Darstellung von Kundenstimmen, Feature-Boxen, Mitarbeitern, Werbebannern und vielem mehr
Praktischer Entwicklungs-Guide
Schritt 1: Basis-Setup im Customizer
- Definiere das grundlegende Farbschema
- Lege die Standard-Typografie fest
- Konfiguriere Layout-Grundeinstellungen
Schritt 2: Global Styles Konfiguration
- Erstelle Block-spezifische Stilklassen
- Definiere wiederverwendbare Style-Presets
- Richte Design-System-Komponenten ein
Schritt 3: Komponenten-Entwicklung
- Elements für:
- Header und Footer
- Seitenübergreifende Widgets
- Dynamische Inhaltsbereiche
- Patterns (nicht synchronisiert) für:
- Häufig verwendete Content-Layouts
- Feature-Bereiche
- Call-to-Actions
- Team-Sektionen
- Synchronisierte Patterns für:
- Preistabellen
- Copyright-Hinweise
- Rechtliche Informationen
Schritt 4: Dokumentation
- Erstelle eine Pattern-Bibliothek
- Dokumentiere Global Styles Verwendung (Style Guide Page)
- Definiere Richtlinien für dein Team
Tipps:
- Mit dem PublishPress Blocks Plugin können Blöcke je User-Role ein/ausgeblendet werden
- Sehr guter Artikel über die Unterschiede zwischen “Reusable blocks vs Global styles vs Local pattern“
Entscheidungshilfe für Komponenten-Wahl
| Anforderung | Elements | Synced Patterns | Nicht-sync. Patterns |
|---|---|---|---|
| Außerhalb Content | ✓ | – | – |
| Im Content | – | ✓ | ✓ |
| Dynamische Inhalte | ✓ | – | – |
| Individuelle Anpassungen | – | – | ✓ |
| Zentrale Änderungen | ✓ | ✓ | nur via Global Styles |
Ausblick: WordPress 6.6 und Pattern-Overrides
Mit WordPress 6.6 wurde das Konzept der “Instance Overrides” eingeführt. Diese Funktion ist aktuell auf einige Core-Blocks beschränkt. GenerateBlocks wird die Integration dieser Funktion prüfen, sobald WordPress die API für Drittanbieter-Blocks öffnet.
FAQ
F: Kann ich Global Styles auch auf bestehende Elements und Synced Patterns anwenden?
A: Ja, Global Styles können jederzeit auf bestehende Komponenten angewendet werden. Die Änderungen wirken sich sofort site-weit aus.
F: Wie verhalten sich Customizer-Einstellungen zu Global Styles?
A: Customizer-Einstellungen bilden die Basis und werden von Global Styles ergänzt. Bei Konflikten haben spezifischere Styles Vorrang.
F: Wann sollte ich Elements statt Patterns verwenden?
A: Nutze Elements für Bereiche außerhalb des Post-Contents und wenn du dynamische Inhalte oder Hooks benötigst. Patterns sind besser für Content-Bereiche geeignet.
F: Kann ich Patterns in Elements verwenden?
A: Ja, du kannst nicht-synchronisierte Patterns innerhalb von Elements nutzen und dabei von Global Styles profitieren.
F: Wie gehe ich mit Design-Änderungen um?
A: Änderungen im Customizer und Global Styles wirken sich Site-weit aus. Bei nicht-synchronisierten Patterns solltest du zusätzlich lokale Anpassungen vornehmen, sofern diese (noch) keine Global Styles zugewiesen bekommen haben.
Diese strukturierte Herangehensweise, kombiniert mit der Macht der Global Styles und des Customizers, ermöglicht dir eine effiziente und wartbare Website-Entwicklung. Du behältst die Flexibilität für individuelle Anpassungen, während du gleichzeitig von einem konsistenten Grunddesign profitierst.