WP Grid Builder Review: Das kann der WordPress-Raster-Baukasten

Baue atemberaubende Kacheln mit dem WP Grid Builder. Je nachdem, welchen Baukasten bzw. welches WordPress-Plugin ihr für eure Website nutzt, habt ihr schon einiges gesehen. Allen Plugins gemein ist jedoch, dass die mit ihnen erstellten Seiten in „Rastern“ aufgebaut sind und ihr – je nach Flexibilität des Baukastens – so mehr oder weniger eingeschränkt seid. Der WP Grid Builder setzt hier an und bietet viele Funktionen, die eine individuelle Gestaltung der Content-Kacheln selbst ermöglichen.

WP Grid Builder ist ein echter Mehrwert für eure Website. Besonders die einfache Erstellung und Implementierung der Karten und das Zusammenspiel mit Tools wie Gutenberg, Kadence und WooCommerce machen einen Test fast schon obligatorisch.

Wir zeigen euch in diesem Beitrag anhand einiger Screenshots, wie das Plugin aufgebaut ist, warum es sich so gut auch für Einsteiger eignet und welche besonderen Features es bietet. Bleibt dran und erfahrt mehr über den WP GridBuilder!

Allgemeines zum Grid Builder Plugin

Die Raster („Grids“), die ihr mit dem WP Grid Builder erstellt, könnt ihr entweder direkt oder über ein Tool wie Elementor auf eurer Website implementieren. Klar, dass euch durch die Kombination mit weiteren Plugins wesentlich mehr Features – außerhalb der Karten, auf die der Grid Builder spezialisiert ist – zur Verfügung stehen.

Unser Tipp: Probiert es einfach mal aus! Lest gerne auch unser Elementor Review, um mehr über das Allrounder-WP-Plugin zu erfahren!

Was kostet WP Grid Builder?

Beim Grid Builder für WordPress handelt es sich um ein kostenpflichtiges Premium-Plugin, das pro Jahr mit einer Gebühr zwischen 49 und 249 Dollar, je nach Menge der benötigten Seiten (eine, drei oder unbeschränkt viele), zu Buche schlägt. Dafür ist der Baukasten aber auch mit verschiedensten Zusatzplugins wie WooCommerce, Divi und Gutenberg kompatibel bzw. verfügt sogar über eine standardmäßig eingebaute Schnittstelle. Kompatibel ist der WP Grid Builder mit deutlich mehr externen Diensten.

Allerdings müsst ihr natürlich nicht ins kalte Wasser springen, wenn ihr Gridbuilderᵂᴾ mal testen wollt. Zum einen gibt es kostenfreie Demos für die einzelnen Funktionen des Plugins und zum anderen könnt ihr euren Kauf innerhalb von 14 Tagen rückabwickeln, solltet ihr doch nicht so zufrieden wie anfangs gedacht sein.

Der Aufbau des Plugins: Unsere Klicks durch die Menüs

Los geht’s mit einer kleinen Tour durch die einzelnen Menüs von WP Grid Builder. Zunächst muss das Plugin – wie jedes andere auch – installiert werden (So installierst du ein WordPress-Plugin):

1. Kauft das Plugin auf der offiziellen Website von Grid Builder.
2. Ihr erhaltet sowohl eine Nachricht in eurem Konto als auch an eure Mail-Adresse. Öffnet nun die Zip-Datei, die euch zugesendet wurde. Legt sie irgendwohin, wo ihr sie gleich wieder findet – etwa auf den Desktop.
3. In der WordPress-Oberfläche angekommen, wählt ihr links „Plugins“ und „Installieren“ bzw. „Neues hinzufügen“. Mit einem Klick auf „Plugin hochladen“ könnt ihr die Zip-Datei hochladen und installieren.
4. Nun müsst ihr den Grid Builder noch aktivieren. Die Daten hierzu findet ihr ebenfalls in der Mail, die ihr nach dem Kauf erhalten habt. Wählt also links das Plugin aus und klickt auf „Plugin aktivieren“.
5. Grid Builder taucht jetzt als eigenes Plugin in der linken Menüleiste auf. Hier gebt ihr jetzt eure Daten, also die E-Mail-Adresse und das Passwort, ein. Auf die grüne Schaltfläche klicken, fertig!
6. WP Grid Builder ist installiert und aktiviert. Jetzt kann es mit der eigentlichen Einrichtung losgehen.

Nun musst du deine Installation noch mit dem Account beim Hersteller verbinden, damit du das neu installierte Plugin auch nutzen kannst.

Los geht’s!

So erstellt ihr euer erstes Raster: Die Grundeinstellungen

Darüber, wie „Grid“ jetzt richtig ins Deutsche übersetzt wird – ob mit Netz, Raster oder Gitter – darüber scheiden sich die Geister. Daher kommen wir direkt zum Wesentlichen und zeigen euch anhand einiger Screenshots, wie ihr mit wenigen Klicks euer erstes Blog-Raster im WP Grid Builder erstellen könnt. Los geht’s auch hier wieder im WordPress-Menü auf der linken Seite, in dem ihr zunächst das Gridbuilder WP Plugin auswählt.

Mit einem Klick auf „All Grids“ kommt ihr zur Erstellungsseite. Hier könnt ihr eure Raster erstellen, anpassen und auf Demo-Seiten testen, wie sie final in eurem Blog oder Shop aussehen werden.

Klickt nun oben rechts auf „Create a Grid“, um zum eigentlichen Builder weitergeleitet zu werden. Hier geht ihr dann in diesen Schritten vor:

1. Es geht simpel los (und auch weiter). Zunächst benennt ihr euer Raster und fügt, falls notwendig, benutzerdefinierte CSS-Klassen hinzu. Legt außerdem Fehlermeldungen fest, die Userinnen und Usern angezeigt werden, wenn sie keinen Beitrag finden.
2. Nun geht es an das Hinzufügen von Bildern. Die zweite Zeile, „Content Query“, klickt ihr dazu zunächst an. Nun wählt ihr aus, aus welcher Art der Quelle ihr eure Inhalte beziehen wollt. Zur Auswahl stehen eure Beiträge und Seiten, Kategorien und Tag und Benutzer. Wir wählen „Post Types“, also den Klassiker.
3. Legt außerdem fest, wie viele Artikel pro Seite angezeigt werden. Standardmäßig steht dieser Zähler auf 10, gebt ihr eine negative Eins (-1) ein, zeigt WP alle Beiträge an. Tragt ihr eine positive Zahl ein, wird diese Anzahl auch angezeigt.
4. Nun stellt ihr ein (wir befinden uns noch immer im „Source“-Menü), um welche Beitragsart es sich handelt, ob der Post veröffentlicht oder auch einen anderen Status haben kann und welche Autoren zulässig sind.
5. Anschließend machen wir uns daran, das Medienformat festzulegen. Wählt dazu zunächst den gleichnamigen Menüpunkt auf der linken Seite des Grid-Builder-Editors aus. Unterstützt werden alle Formate von Audiodateien, Bildern und Videos.

Soweit zu den Grundeinstellungen zu unserem Raster was Audio-, Bild- und Videodateien angeht.

Die Grid-Erstellung: So geht es weiter

Wie bereits im vorherigen Absatz beschrieben, ändert sich an unserer Oberfläche zunächst nichts. Wir bleiben im Plugin-Einstellungsmenü und gehen, um unser erstes Raster zu erstellen, wie folgt vor:

1. Öffnet den Punkt „Grid Layout“. Hier könnt ihr den grundlegenden Stil eurer Raster bestimmen, etwa „alle gleich groß“, „versetzt“ oder „quer“. Selbstverständlich könnt ihr das finale Design im Laufe der Erstellung noch nach Belieben ändern, dieses etwas reduzierte Menü dient nur einem schnellen Start in die Raster-Bearbeitung!
2. Neben dem Layout Typ trefft ihr hier Einstellungen wie die automatische (parallele) Ausrichtung mehrerer Raster oder die Anordnung dieser in einer Reihe.
3. Wichtig: Aus Sicherheitsgründen immer mal wieder auf „Speichern“ klicken!
4. Nun geht es an das Layout, also an die Struktur eurer Raster im „Grid Carousel“ Menü. Hier habt ihr nur zwei Optionen, die „Standard“- und die „Karussell“-Anordnung. Wir empfehlen die Standardvariante, da sie etwas mehr Möglichkeiten bietet, die Alternative ist aber ebenfalls cool. Testet am besten beide und schaut, welche am besten zu eurem Blog oder Shop passt.
5. Der nächste Menüpunkt, „Grid Builder“, ermöglicht die Anpassung eures Rasters mit Bildern, Filtern und vielem mehr.
   Darauf kommen wir weiter unten im Text, bei der Demo-Erstellung unseres ersten Grids, noch näher zu sprechen.
6. Im nächsten Unterpunkt finden wir Einstellungen zum Stil unserer Karten. Darunter versteht Grid Builder WP einfach die einzelnen Kacheln bzw. Felder, aus denen sich das gesamte Raster zusammensetzt. Habt ihr bereits Karten erstellt, könnt ihr sie hier importieren – sonst verwendet ihr vorerst die Demos des Plugins, zu Testzwecken sind diese sehr gut geeignet.
7. Einen Punkt weiter, in den Animationen, stellt ihr ebendiese ein. Ihr könnt eure Karten etwa „einfliegen“ lassen oder so gestalten, dass sie mehr und weniger mit dem Hintergrund eurer Website verschmelzen.
8. Nun geht es an die Ladeeinstellungen. Ja, richtig gehört, der Grid Builder WP verfügt über ein vollwertiges Menü, in dem ihr das Ladeverhalten eurer Grids einstellen könnt.
   Hier wählt ihr unter anderem aus, ob Bilder und Videos langsamer bzw. schneller als der Rest eurer Seite laden sollen (Lazy Load). Außerdem stellt ihr die Hintergrundfarbe ein und gestaltet das „Laden…“-Logo, also den klassischen Kreis. Festlegen lassen sich Farbe, Größe und das grundlegende Vorhandensein des Symbols.

Geschafft? Glückwunsch! Seid ihr bis hierher gekommen, habt ihr alle relevanten Grundeinstellungen zu euren Grids getroffen und könnt euch nun an die eigentliche Gestaltung der Karten machen. Denn bisher haben wir nur festgelegt, wie sich diese verhalten sollen, welche Medienquellen es gibt und wie das Layout grundsätzlich aussieht.

Unsere erste Karte in WP Grid Builder: So geht ihr vor!

Wir haben uns entschieden, neben dem „Grid“-Menü auch noch die Karten etwas genauer vorzustellen. Insgesamt ist der Grid Builder WP sehr logisch aufgebaut, die zahlreichen Untermenüs können aber selbst erfahrene Userinnen und User schnell verwirren. Wir empfehlen euch daher, einfach mal ein oder zwei Tage zu üben, um schneller reinzukommen – danach solltet ihr zumindest in den Grundfunktionen des Plugins mehr als nur fit sein!

Im Menü „All Cards“ klicken wir nun auf „Create a Card“, um mit der Erstellung der ersten Karte zu beginnen.

Es öffnet sich das Menü zur Kartenbearbeitung, wobei sich hier einige Einstellungsmöglichkeiten mit den bereits vorgestellten überschneiden. Wir geben euch einen kurzen Überblick über den Aufbau des Menüs und zeigen, wie ihr hier eure Raster erstellt und anpasst!

1. Untermenü „General“: Zunächst wählt ihr links das Layout aus. Entscheidet euch außerdem für eine horizontale oder vertikale Ausrichtung eurer Kartenblöcke und wählt aus, wo der Content platziert werden soll (oben, unten, oben und unten, nirgends). Masonry oder Metro.
2. Untermenü „Blocks“: Hier baut ihr eure Karte aus den namensgebenden Blöcken zusammen. Ihr wählt also aus, wo sich der Content befinden soll und ob Bilder, Videos, ein Kalender oder eine Kommentarbox auf der Karte platziert werden. So erstellt ihr Schritt für Schritt die einzelnen Karten, wobei die Oberfläche nach einer kurzen Eingewöhnung wirklich spielend leicht zu bedienen ist.
3. Wir bleiben im Untermenü „Blocks“. Nun müsst ihr noch entscheiden, was passiert, wenn Besucherinnen und Besucher eurer Seite auf die einzelnen Blöcke klicken. Ihr könnt etwa Verlinkungen und Animationen einfügen. Das Block-Bearbeitungs-Menü öffnet sich, wenn ihr auf den bereits eingefügten Block klickt.

Habt ihr etwas herumexperimentiert oder sogar eure erste Karte erstellt? Super – dann können wir uns noch kurz damit beschäftigen, wie ihr eure Designs im WordPress-Editor implementiert und so auf eurer neuen oder bestehenden Website auch sichtbar macht!

Grids im WordPress Editor nutzen: So geht ihr am besten vor!

Das Komplizierte am WP Grid Builder ist das Erstellen der Layouts und die Anpassung der Karten. Habt ihr diese Schritte erst einmal hinter euch gebracht, geht es nur noch darum, die erstellten Designs richtig auf eurer Website einzupflegen. Wir gehen hier mal vom Gutenberg-Editor aus, da es immerhin das meistgenutzte Tool ist, und schauen, wie wir unsere erstellten Karten auf unserer Seite implementieren.

1. Öffnet den WP-Editor. Denkt euch einen beliebigen Titel, etwa „Probeseite“ oder etwas Kreativeres, aus.
2. Wählt „Block hinzufügen“ durch einen Klick auf das schwarze Plus. Wurde das Plugin richtig installiert, könnt ihr hier jetzt „Grid“ auswählen.
3. Es öffnet sich das Grid Builder Menü, in dem ihr eure erstellten Grids bzw. bei einem Klick auf Karten die erstellten Cards seht und auswählen könnt. Tut ihr das, werden die erstellten Karten im Editor und in der Vorschau so angezeigt, wie ihr sie euch im Grid Builder Plugin zusammengestellt habt.

Grundsätzlich war es das noch lange nicht – der Grid Builder für WP bietet zahllose Funktionen, in die man sich durchaus nächtelang hineinfuchsen kann. Unser Ziel mit diesem Artikel war es jedoch, einen kurzen und abschließenden Überblick über die relevanten Features für Blog- und Shop-Betreiber und möglicherweise auch WordPress-Neueinsteiger zu geben. Wir hoffen, dass uns das gelungen ist!

Cool finden wir auch, dass Grid Builder selbst viele informative Inhalte in Form von Videos und Artikeln auf seiner Website bereitstellt. Schaut gerne auch hier mal vorbei und erfahrt mehr!

Fazit: Der WP Grid Builder ist ein echter Mehrwert!

In unserem ersten Test konnte der Grid Builder für WP auf ganzer Linie überzeugen. Er ermöglicht ein sehr simpel gestaltetes und dadurch einfaches Webdesign, wodurch sich das Tool auch für Einsteiger eignet.

Wer möchte, kann hier aber auch sehr viel anspruchsvollere Designs erstellen und einfügen. Hinzu kommen das faire Preismodell und zahlreiche Video-Tutorials auf der offiziellen Seite des Grid Builders.

Daher: Unsere volle Empfehlung, nutzt in jedem Fall die kostenfreie Testphase und die Möglichkeit, euren Vertrag bei Nichtgefallen innerhalb von 14 Tagen zu widerrufen!