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

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

Möchtest du mehr zum Thema Wp Grid Builder erfahren?

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.

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?

WP Grid Builder Preistabelle
WP Grid Builder Preistabelle

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.

BasicPremiumUltimate
Websites13unbegrenzt
Alle Addons enthaltenjajaja
VerÀngerungsnachlass20 %30 %40 %
$ 49,00 / Jahr$ 99,00 / Jahr$ 249,00 / Jahr
14 Tage Geld-zurĂŒck-Garantie

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.
Das WP Grid Builder LizenzmenĂŒ in WordPress.
Das WP Grid Builder LizenzmenĂŒ in WordPress.

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.

Alle Grids findest du auf diesem Bildschirm.
Alle Grids findest du auf diesem Bildschirm.

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:

Grid Builder Content Query MenĂŒ
Grid Builder Content Query MenĂŒ
  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

Die Einstellungen zum Grid Layout
Die Einstellungen zum Grid Layout

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.
    WP Grid Builder ZonenDarauf 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.
    Möchtest du einen Spinner, oder einen anderen Platzhalter nutzen?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.
Siehe auch
BloggerPilot Title Search
Grid Builder - Grid-ErstellungsmenĂŒ
So sieht das grundlegende WP Grid Builder EinstellungsmenĂŒ aus.

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!

Das MenĂŒ All Cards
Das MenĂŒ All Cards

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

Der Card Editor (Startseite).
Der Card Editor (Startseite).

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!

WP Grid Builder Card Editor
Der WP Grid Builder Card Editor (BlockmenĂŒ).
  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!

WĂ€hle im Gutenberg-Block dein Grid aus.
WĂ€hle im Gutenberg-Block dein Grid aus.

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.
Die Vorschau des Grids im Editor.
Die Vorschau des Grids im Editor.

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!

WP Grind Builder Review

Leistungsumfang
Benutzerfreundlichkeit
Preis

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.

Zum Produkt

Offenlegung Werbelinks: Mit einem Stern (*) gekennzeichnete Links und Buttons sind sogenannte Affiliate-Links. BloggerPilot bekommt bei einem Kauf eine Provision, die sich jedoch nicht auf den Endpreis auswirkt. Es ist uns wichtig zu betonen, dass dies keinen Einfluss auf unsere Bewertung oder Meinung hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert