Mit GenerateBlocks lassen sich flexible, moderne WordPress-Seitenlayouts erstellen – ganz ohne CSS-Kenntnisse. Das leichtgewichtige Plugin ergänzt den Gutenberg-Editor um einige wenige, aber äusserst vielseitige Blöcke und harmoniert perfekt mit dem Theme GeneratePress.
Was ist GenerateBlocks?
GenerateBlocks wurde vom selben Entwickler wie GeneratePress (Tom Usborne) entwickelt. Das Plugin fügt dem Block-Editor nur vier Kernblöcke hinzu – und genau das ist seine Stärke: schlanker Code, schnelle Ladezeiten und maximale Flexibilität.
Die wichtigsten Blöcke im Überblick
- Container: Das Herzstück. Damit werden Sektionen, Spalten und Wrapper erstellt. Hintergrundfarben, Abstände (Padding/Margin) und maximale Breiten lassen sich bequem im Inspektor einstellen – kein CSS nötig.
- Grid: Mit dem Grid-Block entstehen mehrspaltige Layouts auf Knopfdruck. Spaltenanzahl, Abstände und das Verhalten auf mobilen Geräten lassen sich visuell konfigurieren.
- Headline: Mehr als eine einfache Überschrift. Typografie, Farbe, Schriftgrösse und Zeilenabstand sind direkt einstellbar – ideal für konsistente Gestaltung.
- Button: Vollständig anpassbare Call-to-Action-Buttons mit Hover-Effekten, Farben und Abstands-Kontrolle.
- Bild (Image): Bilder mit Container-Eigenschaften kombinieren – zum Beispiel als Hintergrundbild mit überlagerndem Text.
- Query Loop: Dynamische Inhalte wie Blog-Beiträge oder Portfolio-Elemente automatisch ausgeben lassen.
Zusammenspiel mit GeneratePress
GenerateBlocks und GeneratePress sind aufeinander abgestimmt. Das Theme liefert die globale Struktur (Header, Footer, Typografie, Farben), während GenerateBlocks den Seiteninhalt flexibel gestaltet. Globale Stilvorgaben aus GeneratePress (z. B. Primärfarbe, Schriftart) werden automatisch in GenerateBlocks übernommen – das sorgt für ein einheitliches Erscheinungsbild ohne manuelle Anpassungen.
Praxisbeispiel: Hero-Bereich in 3 Schritten
- Container einfügen – Hintergrundfarbe oder -bild wählen, Padding grosszügig einstellen (z. B. 80px oben/unten).
- Grid-Block innerhalb des Containers – zwei Spalten anlegen: links Headline + Text + Button, rechts ein Bild.
- Responsive prüfen – Im Grid-Block einfach auf «Mobil» umschalten und Spaltenanzahl auf 1 reduzieren.
Fertig ist ein professioneller Hero-Bereich – ohne eine einzige Zeile CSS.
SEO-Vorteile durch sauberen Code
Im Gegensatz zu schwerfälligen Page-Buildern wie Elementor oder Divi erzeugt GenerateBlocks minimalen, semantisch korrekten HTML-Code. Das verbessert die Ladegeschwindigkeit und damit auch das Google-Ranking. Für SEO-bewusste Websitebetreiber ist das ein entscheidender Vorteil.
Mehr Funktionen in Free Versionen
Generateblocks hat out of the box in der Gratisversion mehr Funktionen als andere Builder.
| Funktion | GenerateBlocks (gratis) | Elementor (gratis) |
|---|---|---|
| Typografie-Kontrolle pro Block | ✅ Ja | ⚠️ Eingeschränkt |
| SVG-Icons in Überschriften/Buttons | ✅ Ja | ❌ Nur Pro |
| Hover-Farbanpassung | ✅ Ja | ❌ Nur Pro |
| Query Loop (dynamische Inhalte) | ✅ Ja | ❌ Nur Pro |
| Responsive-Kontrolle | ✅ Ja | ✅ Ja |
| Shape Divider | ✅ Einfache Formen | ✅ Mehr Varianten |
| Template-Bibliothek | ❌ Nur Pro | ⚠️ Begrenzt |
| Formular-Widget | ❌ Dritt-Plugin nötig | ❌ Nur Pro |
| Ladegeschwindigkeit | ⚡ Sehr schnell | 🐢 Langsamer |
Fazit
GenerateBlocks ist die ideale Lösung für alle, die professionelle WordPress-Layouts bauen möchten, ohne tief in CSS einzutauchen. In Kombination mit GeneratePress entsteht ein schlankes, schnelles und flexibles Webdesign-System – perfekt für Einsteiger und Profis gleichermassen.
