GenerateBlocks im Test: Meine Erfahrungen mit dem besten Block Plugin

Suchst du eine neue Möglichkeit, deine WordPress Seite ganz ohne Page Builder individuell und pixelgenau zu gestalten? Dann ist dieser Artikel wie für dich geschaffen. 

Denn so ging es mir auch, bis ich das Plugin GenerateBlocks entdeckt habe.

In diesem Artikel erfährst du, was du alles mit GenerateBlocks machen kannst und welche Erfahrungen ich damit gemacht habe.

Was ist GenerateBlocks?

GenerateBlocks* ist ein WordPress-Block-Plugin, das die Merkmale eines Page-Builders aufweist und mit dem du beeindruckende Designs erstellen kannst. 

Es beinhaltet eine kleine Sammlung von leichtgewichtigen WordPress-Blöcken, mit denen du in der Lage bist, fast alles umzusetzen.

So zum Beispiel: 

• Page Heros
• Footer
• Query Loops
• Testimonials
• diverse Content-Elemente
• Info-Boxen
• Mitarbeiter und Team-Übersichten
• Buttons
• Überschriften
• Call To Action Elemente
• Tabellen
• Preis-Tabellen
• Hover-Boxen 
• Wireframes 
• Social Medi Icons
• Produkt Boxen
• Affiliate Boxen
• Pro & Con Boxen
• und vieles mehr

Wenn du nicht selbst mit den Basis-Blocks arbeiten möchtest, um deine eigenen Designs zu erstellen, dann kannst du auch einfach vorgefertigte Pattern aus der Pattern-Library per Copy-and-paste in deinen Gutenberg-Editor einfügen. 

Auch diese Pattern kannst du selbstverständlich beliebig nach deinen Vorstellungen anpassen. 

Gefällt dir zum Beispiel ein Footer aus der Patten-Library? Dann kannst du ihn einfach per Klick oder Copy & Paste in deine Seite kopieren, und schon hast du einen neuen und perfekt gestalteten Footer. 

GenerateBlocks kann mit jedem WordPress-Theme verwendet werden, arbeitet aber ganz besonders gut mit dem GeneratePress WordPress-Theme zusammen, das von denselben Entwicklern stammt.

Von GenerateBlocks gibt es eine kostenlose und eine kostenpflichtige Pro-Version. Starte einfach ohne Risiko mit der kostenlosen Version. 

Wenn dir das Plugin gefällt und du noch mehr Möglichkeiten haben möchtest, dann kannst du später immer noch auf die GeneratePress Pro Version upgraden. 

GenerateBlocks installieren

Die kostenlose Version von GenerateBlocks kannst du einfach, wie jedes andere WordPress-Plugin auch, direkt in deinem Backend installieren.

Das geht so:

• Gehe in dein WP-Dashboard
• Gehe zu Plugins > Neues Plugin  hinzufügen
• Suche nach GenerateBlocks
• Klicke auf Installieren und Aktivieren.
• Jetzt kannst du GenerateBlocks mit deinem installierten Theme verwenden

GenerateBlocks Pro installieren

Wenn du die sehr empfehlenswerte GenerateBlocks Pro Version* nutzen möchtest, dann muss du dir zunächst eine entsprechende Lizenz auf der GenerateBlocks Webseite kaufen.

Wenn du dich dann in deinem Account anmeldest, erhältst du eine Datei zum Download und deinen Lizenzkey.

Die Installation geht dann wie folgt:

• Installiere und aktiviere zuerst die kostenlose Version, wie bereits beschrieben
• Gehe dann im Dashboard auf Plugins > Neues Plugin hinzufügen
• Auf Schaltfläche “Plugin hochladen” klicken
• Auf “Datei auswählen” klicken und die heruntergeladene Zip-Datei von GenerateBlocks Pro auswählen
• Installieren und Aktivieren.
• Lizenzkey im GenerateBlocks Pro Admin Bereich eingeben

Nun kannst du GenerateBlocks Pro auf deiner Website verwenden.

GenerateBlocks in der Übersicht: Diese Blocks bietet das Plugin

Es gibt so einige Block-Plugins für den Gutenberg Editor, die Dutzende Blocks zur Auswahl haben. 

Im Gegensatz dazu gibt es bei GenerateBlocks zunächst nur ganze 6 Blocks. Doch davon solltest du dich nicht täuschen lassen, denn mit diesen sechs Core-Blöcken kannst du so gut wie alles umsetzen.

Dieser intelligente und minimalistische Ansatz ist unter anderem auch der Grund dafür, dass es sich bei GenerateBlocks um ein extrem schlankes und pfeilschnelles Plugin handelt, das sich nicht negativ auf deine Seitengeschwindigkeit auswirkt. 

Das kann leider nicht jedes Block-Plugin von sich behaupten.

Diese Blöcke bringt GB mit:

• Container: sämtliche Inhalte werden in Containern organisiert.
• Raster (Grid): Erstelle fortgeschrittene Layouts mit flexiblen Rastern
• Query Loop: Erstelle eine Liste von Beiträgen jeglichen Beitragstyps
• Button: Steigere deine Konversionen mit schönen Buttons
• Überschrift: Mit dem Überschriften-Block erstellst du textreiche statische oder dynamischen Inhalte
• Bild: Füge statische oder dynamische Bilder zu deinen Inhalten hinzu

In der GenerateBlocks Pro Version kommen noch die folgenden Blöcke hinzu:

• Tabs: Der Tabs-Block kann verwendet werden, um Inhalte mit Registerkarten zu erstellen
• Akkordeon: Der Akkordeon-Block kann verwendet werden, um eine Akkordeon-artige Anzeige von ein- und ausklappbaren Inhalten zu erstellen
• Pattern Library: Der Pattern Library Block ermöglicht es dir, vorgefertigte Blöcke direkt in deine Inhalte einzufügen
• FAQ: Erstelle schöne FAQ Abschnitte
• Gallery: Praktische Bildergalerien
• Testimonials
• CTA: Erstelle wirkungsvolle Call to Action Boxen
• Preistabellen
• Teams: Teams mit Bild und Bio abbilden

Die Blöcke im Detail:

Container Block

Der Container-Block ist der Kernblock im GenerateBlocks Plugin. In fast allen Fällen ist der Container-Block die Grundlage aller weiteren Inhalte und Designs, weshalb du stets mit diesem Block beginnen solltest.

Er kann für sich allein verwendet werden, aber er wird zum Beispiel auch innerhalb des Grid-Blocks für jedes hinzugefügte Raster-Element verwendet.

Er ermöglicht dir unter anderem, die Containerbreite, den Innenabstand und den Außenabstand festzulegen, wodurch du pixelgenaue Kontrolle über deine Designs hast.

Außerdem kannst du die integrierten Komponenten wie Typografie, Abstände, Farben, Rahmen, Verläufe, Formen und Hintergrund nutzen, um den Container-Block vollständig zu steuern.

Ein ganz besonderes Feature ist obendrein die Möglichkeit, dynamische Daten in einem Container zu verwenden, die mit deinen Beiträgen, Seiten, Benutzern und Custom Post Types assoziiert sind.

Grid Block (Raster)

Neben den Containern zählt der Grid-Block zu den wichtigsten und flexibelsten Blöcken.

Mit dem Grid-Block kannst du erweiterte Spalten in deinen Inhalten erstellen. Zudem verwendet der Grid-Block Flexbox, wodurch es dir ermöglicht wird, Spalten auf mehreren Linien umzubrechen. Dadurch kannst du unendlich viele Spalten hinzufügen, und mehrzeilige Raster erstellen.

Query Loop Block

Der Query Loop Block ist ein sehr mächtiger Block, mit dem du an beliebiger Stelle Beiträge basierend auf bestimmten Parametern anzeigen kannst.

Die einzelnen Beiträge können in Kombination mit dem Grid-Block in Spalten angezeigt werden, während die Daten wie Titel, Datum und Auszüge mit dem Überschriften- und Button-Block dargestellt werden können

Der Query Loop Block ist die erweiterte Version des Standard Query Loops des WordPress Block-Editors, da er deutlich leistungsfähiger und vielseitiger ist. 

Button Block

Der Button-Block ermöglicht es dir, perfekt designte Buttons an jeder beliebigen Stelle hinzuzufügen. Jeder Button hat eine Vielzahl an Eigenschaften, um ihn individuell zu gestalten.

Überschrift Block

Mit dem Überschriften-Block kannst du das Design deiner Inhalte vollständig steuern und individuell designen. Auch außergewöhnliche Designs sind damit möglich. 

Der Überschriften Block ist ideal für Überschriften, Call-to-Actions oder einzeilige Features. Ganze Absätze sollten damit jedoch lieber nicht gesteuert werden, obwohl auch das möglich wäre.

Bild Block

Der Bild-Block ermöglicht es dir, Bilder in deinen Content einzufügen. Im Vergleich zum WordPress-eigenen Bildblock bietet der Bild-Block von GenerateBlocks dynamische Optionen und weitere Anpassungsmöglichkeiten.

Was bietet GenerateBlocks Pro?

Wie du bereits erfahren hast, ist das kostenlose GenerateBlocks Plugin ein sehr mächtiges Tool, mit dem du fast alles erreichen kannst.

So richtig interessant wird es jedoch mit der Pro-Version, nämlich GenerateBlocks Pro*.

Denn damit hast du noch sehr viel mehr Option und Möglichkeiten an der Hand, die Elemente deiner Webseite bis ins kleinste Detail zu designen. 

Folgende zusätzliche Blocks und Optionen machen GenerateBlocks Pro lohnenswert:

Pattern Library Block

Der Pattern Library-Block ermöglicht es dir, bereits vorgefertigte Blöcke direkt aus dem Editor in deine Inhalte einzufügen. 

Diese vorgefertigten Designs kannst du so hinzufügen, als würdest du jeden anderen Block hinzufügen. Mit wenigen Klicks hast du somit perfekt gestaltete Elemente in deinem Editor.

Mit GenerateBlocks Pro bekommst du über 200 professionell gestaltete Pattern zusätzlich direkt in den Editor. Mit nur ein paar Klicks sparst du dir stundenlanges Designen. 

Allein diese zusätzliche Design-Pattern sind es bereits wert, auf GBP zu wechseln.

In der Pattern Library auf der GenerateBlocks Webseite, kannst du dir anschauen, welche zusätzlichen Pattern in der Pro Version verfügbar sind. Und es kommen ständig neue hinzu.

Accordions Block

Der Akkordeon-Block kann verwendet werden, um eine Akkordeon-Stil-Anzeige von ein- und ausklappbarem Inhalt zu erstellen. 

Ein Akkordeon ermöglicht es den Benutzern, zwischen dem Verbergen und Anzeigen von Inhalten zu wechseln. Jeder Akkordeon-Inhalt ist ein Abschnitt, der durch Klicken auf den Akkordeon-Titel erweitert oder zusammengeklappt werden kann. 

Der Akkordeon-Block kann nützlich sein, um Inhalte zu organisieren und die Navigation zu erleichtern.

Tabs Block

Der Tabs-Block kann verwendet werden, um Inhalte mit Registerkarten zu erstellen. Er ermöglicht dir, Inhalte in mehrere Tabs zu unterteilen, um die Organisation und Präsentation von Informationen für den Leser zu erleichtern.

Der Tabs-Block bietet eine Möglichkeit, Inhalte auf eine visuell ansprechende und leicht zugängliche Weise anzuordnen, was ihn zu einem nützlichen Werkzeug für die Erstellung von ansprechenden und interaktiven Inhalten macht.

Akkordion Tabs sind wichtige und beliebte Designelemente vieler Webseiten, insbesondere dann, wenn viele oder komplexe Inhalte präsentiert werden müssen.

Global Styles

Globale Stile sind eine großartige Möglichkeit, wiederverwendbare Stile zu erstellen, die du auf deiner gesamten Website nutzen kannst. 

Das hat eine Reihe von Vorteilen: Mit Global Styles wird das CSS für ein Element nur einmal geschrieben.

Wenn du zum Beispiel eine Seite mit 10 Containern hast, die alle den gleichen Stil haben (zum Beispiel Padding), wird der Globale Stil das CSS für diesen Block nur einmal schreiben und es für jeden Container verwenden, der diesen Stil nutzt. 

Anstatt also das gleiche CSS 10 Mal zu schreiben, wird es nur einmal geschrieben. Das hat natürlich einen positiven Einfluss auf die Geschwindigkeit deiner Seite, da sie somit maximal schlank bleibt.

Ein weiterer Vorteil: Wenn du einen Stil ändern musst, wie zum Beispiel einen Button-Stil, musst du dies nur an einer Stelle tun und der Stil wird sofort auf der gesamten Website aktualisiert.

Effects

Effects bietet die Kraft der CSS-Effekte direkt im Editor. Mit einer leistungsstarken Benutzeroberfläche, die endlose Konfiguration und fortgeschrittene Designeffekte bietet. 

Effekte wie Box-Schatten, Text-Schatten, Verläufe, Transparenz und viele weitere kannst du zum Beispiel auf Container, Buttons und Überschriften anwenden, um sie perfekt zu gestalten.

Advanced Backgrounds

Erweiterte Hintergründe sind ähnlich wie die Effekte-Funktion, aber sie behandeln Hintergrundbilder und -verläufe für den Container-Block. 

Es gibt ein paar Vorteile bei der Verwendung von erweiterten Hintergründen gegenüber den standardmäßigen Hintergrundbild-/Verlaufsfunktionen. So können zum Beispiel verschiedene Hintergrundbilder/-verläufe für unterschiedliche Geräte definiert werden.

Außerdem kannst du bei den erweiterten Hintergründen zwischen normalen und Mouseover-Zuständen unterscheiden.

Und es können mehrere Hintergrundbilder/-verläufe zum selben Element hinzugefügt werden, wenn sie unterschiedliche Ziele haben (Selbst und Pseudo-Element).

Container Links

Verwandle deine Container-Blöcke in schöne Links im Kartenstil und gestalte mit den Designoptionen das Hover-Verhalten (Mouseover Effekt). 

Asset Library

Fügen deine eigenen SVG-Symbole und Formen in die GBP Bibliothek ein, um sie wie gewohnt in deinem Editor zu verwenden. Somit musst du dir häufig verwendete SVG-Icons nicht jedes Mal mühevoll zusammensuchen, sondern hast sie sofort parat.

Copy+Paste Styles

Sparen jede Menge Zeit, indem du deine Blockstile auf der gesamten Seite kopieren und einfügen kannst.

Device Visibility

Damit kannst du Blöcke ganz einfach individuell auf Desktop, Tablet und Mobilgeräten ausblenden oder anzeigen lassen. Damit kannst du deine Seite für jedes Gerät perfekt gestalten.

Custom Attributes

Wende alle benutzerdefinierten data-* Attribute der GBP Elemente mit einer einfachen Benutzeroberfläche an.

Wie du siehst, gibt es viele gute Gründe auf GenerateBlogs Pro zu wechseln!

Komponenten

Aber es geht noch weiter. Mit den Komponenten kannst du jedes Element pixelgenau gestalten. Einige Komponenten, die nur in der Pro-Version zur Verfügung stehen, wie etwa die CSS-Effekte, hast du bereits kennengelernt. 

Weitere Komponenten sind zum Beispiel:

Borders

Die Border-Optionen bieten dir präzise Kontrolle über die individuellen Ränder eines Blocks, einschließlich Attribute wie Rahmenbreite, Rahmenfarbe, Rahmenstil und Rahmeneckenradius. 

Mit diesen Optionen kannst du das Aussehen jedes Randes einfach an deine Designanforderungen anpassen.

Spacing

Die Abstandsoptionen ermöglichen es dir, den Abstand (Pading, Margin) eines HTML-Elements zu allen Seiten und für alle Geräte zu definieren.

Typografie

Mit den Typografie Optionen kannst du deine Texte perfekt formatieren. Du kannst den Text ausrichten, die Schriftstärke auswählen und den Text transformieren.

Farben

Im Komponentenbereich Farben kannst du Farben für den Container, das Raster, die Überschrift, Icons und die Buttons festlegen. Außerdem kannst du die Rahmenfarbe, die Farbe des Link-Hover-Effekts, die Textfarbe usw. einstellen.

Hintergründe (Backgrounds)

Die Optionen für Hintergründe ermöglichen es dir, ein Bild oder einen Farbverlauf als Hintergrund eines Containerblocks oder eines Buttons einzurichten.

Neben JPG- und PNG-Formaten kannst du sogar SVG-Bilder als Hintergrundbilder festlegen. 

Hinweis: Standardmäßig erlaubt WordPress aus Sicherheitsgründen nicht das Hochladen von SVG-Dateien. Wenn du SVG-Dateien in die Mediathek hochladen möchtest, musst du dir daher vorher ein entsprechendes Plugin installieren, um diese Restriktion aufzuheben.

SVG Icons

Für Buttons und Überschriften kannst du mit der Icons-Funktion beliebige SVG-Icons auswählen. 

Hierbei bist du nicht nur auf die Icons beschränkt, die GenerateBlocks von sich aus anbietet, sondern kannst jedes SVG-Icon verwenden, das dir gefällt, indem du den SVG-Inline-Code von jeder beliebigen Icon-Webseite kopierst.

Shapes (Formen)

Mit dem Shapes-Panel kannst du, eine unbegrenzte Anzahl von SVG-Formen zu deinen Container hinzuzufügen, um deine Designs einzigartig zu gestalten.

Dynamic Data

Die Dynamic Data Option ist eine besonders interessante Möglichkeit, die es dir erlaubt, die mit deinen Beiträgen, Seiten, Benutzern und benutzerdefinierten Beitragstypen usw. verknüpften Daten dynamisch aufzurufen.

GenerateBlocks Performance

Wer heutzutage WordPress Plugins oder gar Page Builder auf seiner Seite installiert, sollte ganz besonders gründlich auf die Performance achten. 

Insbesondere Page Builder können die gesamte Seite leider erheblich verlangsamen und somit zu vielfältigen Problemen führen. Das wirkt sich dann negativ auf die Benutzerzufriedenheit und auch auf Google aus. Denn die Seitengeschwindigkeit ist auch ein Rankingfaktor von Google.

Bei GenerateBlocks muss man sich darüber jedoch keinerlei Sorgen machen, denn dieses Plugin ist hauptsächlich auf Leistung ausgerichtet. 

GenerateBlocks fügt pro Seite nur eine CSS-Datei hinzu und verzichtet auf Inline-CSS-Code und JavaScript, wodurch das durch das Plugin generierte HTML minimal und leichtgewichtig ist.

Extrem robust und maximal kompatibel

GenerateBlocks wird nach höchsten Code-Standards für Sicherheit, Stabilität und zukünftige Kompatibilität entwickelt. Das Plugin ist extrem robust und nicht fehleranfällig.

Ich setze GenerateBlocks seit dem Start des Plugins auf über 20 Seiten ein und habe damit noch nie ein Problem festgestellt. Weder im laufenden Betrieb noch nach Updates.

Diese Eigenschaft kann man gar nicht hoch genug bewerten. Wer mal ein WordPress Theme, einen Page Builder oder ein Plugin upgedatet hat, und sich dadurch seine Webseite zerstört hat, weiß, wovon ich spreche. 

Solche Probleme gab es mit GenerateBlocks noch nie. Übrigens auch nicht mit GeneratePress.

Meine Erfahrungen mit GenerateBlocks sind durchgängig hervorragend.

GenerateBlocks Dokumentation

Wie bereits beim GeneratePress WordPress Theme, bietet das Team von GenerateBlocks eine umfassende Dokumentation für das Plugin an. 

👉 Hier findest du die Dokumentation zu GenerateBlocks.

GenerateBlocks Tutorials

Auch wenn die herstellereigene Dokumentation gut und ausführlich ist, kann sie dennoch etwas trocken anmuten. 

Außerdem bietet die Doku natürlich kaum Beispiele aus der Praxis und ist mehr als Nachschlagewerk zu verstehen.

Da mit GenerateBlocks jedoch nahezu jedes Design umgesetzt werden kann, ist es immer empfehlenswert, sich einige Tutorials aus der Praxis anzuschauen.

Diesbezüglich kann ich dir sehr den The Admin Bar YouTube Channel von Kyle Van Deusen empfehlen.

Hier veröffentlicht Kyle regelmäßig sehr gute Tutorials zu GeneratePress und GenerateBlocks, und zeigt, was man damit in der Praxis alles machen kann.

Wenn du dich ausschließlich für GenerateBlocks Tutorials interessierst, dann wirf einen Blick in Kyles GenerateBlocks Playlist bei YouTube.

Für mich ist das die Nr.1 Lernressource für GenerateBlocks. Das meiste Wissen zum praktischen Umgang mit diesem famosen Block-Plugin habe ich dort erlernt.

GenerateBlocks Support

Wer bereits GeneratePress Premium verwendet, der weiß, dass das Team von Tom Usborn, dem Chefentwickler hinter GeneratePress und GenerateBlocks, den besten Support für seine Produkte anbietet, den man im WordPress Umfeld finden kann. 

So ist es auch bei diesem Plugin.

Support für die kostenlose Version findest du hier im WordPress Forum.

Support für die kostenpflichtige Pro Version findest du im GenerateSupport Premium Forum.

Preise

In der folgenden Tabelle findest du die Preise für GeneratBlocks Pro, wie sie bei der Veröffentlichung dieses Artikels waren.

Du kannst zwischen einer Lizenz für 1 Webseite und für bis zu 500 Webseiten auswählen. Damit sind sowohl für Blogger als auch für Agenturen alle Bedarfe abgedeckt.

Da sich Preise jedoch auch ändern können, schaue für aktuelle Preise direkt auf der Webseite von GenerateBlocks* nach.

GenerateBlocks Pro und GeneratePress Premium im Bundle

Ein ganz besonders empfehlenswertes Angebot ist das seit Juni 2024 erhältliche Bundle aus GenerateBlocks Pro und GeneratePress Premium.

In diesem Pakt ist alles enthalten, was du benötigst, um richtig coole und schnelle Webseiten zu bauen.

Fazit

Zusammenfassend kann ich aufgrund meiner Erfahrungen mit diesem exzellenten Plugin sagen:

GenerateBlocks ist ein sehr leistungsstarkes WordPress-Plugin, das dir die Kontrolle über das Layout und Design deiner Website gibt. Du kannst damit eigene Seitenlayouts erstellen, ohne programmieren zu müssen. Einen Page Builder benötigst du dafür nicht.

Das Plugin ist benutzerfreundlich und sowohl für Anfänger als auch für Entwickler geeignet. GenerateBlocks bietet dir viele vorgefertigte Layout- und Designoptionen zur Auswahl an, damit deine Website genau so wird, wie du sie haben möchtest. 

GenerateBlocks ist extrem flexibel und eignet sich für alle Arten von Websites, von Blogs bis hin zu komplexen Firmenwebseiten. 

Das Plugin ist auf schnelle Ladezeiten ausgelegt, damit deine Website schnell und flüssig läuft. Außerdem ist es sehr robust und stabil.

GenerateBlocks wird stetig weiterentwickelt und aktualisiert, damit deine Seite immer auf dem neusten Stand bleibt. 

Und falls du Hilfe benötigst oder Fragen hast, steht dir ein exzellentes Kundensupport-Team zur Seite. 

Daher kann ich GenerateBlocks und GenerateBlocks Pro* uneingeschränkt empfehlen! Schau es dir ruhig einmal an. 

Schon bald wirst du darauf nicht mehr verzichten können.