Ein Produktraster in WooCommerce, das auf Mobilgeräten ruckelt. Ein Portfolio, das sich nicht nach Kategorie filtern lässt. Ein Katalog, bei dem die Suche über „Strg+F" statt über Filter funktioniert. Vertrauter Schmerz für jeden, der eine inhaltsstarke Website mit WordPress betreibt.

Bis vor Kurzem waren Rasterlayouts mit Facettensuche reine Entwicklerdomäne: benutzerdefinierte WP_Query, manuelles CSS-Grid-Markup, endlose Anpassungen für jeden Inhaltstyp. Das Plugin WP Grid Builder (GridBuilderWP) ändert die Spielregeln grundlegend, indem es einen visuellen Raster- und Filter-Builder bereitstellt, der ohne Code-Eingriff sofort funktioniert.

Nachfolgend eine detaillierte Aufschlüsselung: was das Plugin kann, wie Sie es installieren, wie Sie Ihr erstes Raster einrichten und welche Szenarien es am besten abdeckt.

💡 Kurzer Überblick:

• Laden Sie WP Grid Builder herunter und installieren Sie es wie jedes Premium-WordPress-Plugin
• Erstellen Sie Ihr erstes Raster: Wählen Sie den Inhaltstyp (Beiträge, Mediendateien, Produkte), konfigurieren Sie den Stil (Masonry, Metro, Justified) und fügen Sie Karten hinzu
• Richten Sie Facetten (Filter, Suche, Sortierung) über einen Drag-and-Drop-Builder ein, ohne eine einzige Codezeile zu schreiben
• Veröffentlichen Sie das Raster per Shortcode oder Gutenberg-Block auf einer beliebigen Seite
• Erweitern Sie bei Bedarf die Funktionalität mit Add-ons: Karten, Caching, mehrsprachige Unterstützung

Was ist WP Grid Builder

WP Grid Builder ist ein Premium-WordPress-Plugin zur Erstellung anpassbarer Raster mit Facettenfilterung. Vereinfacht gesagt: Sie wählen aus, welche Inhalte angezeigt werden sollen (Blogbeiträge, WooCommerce-Produkte, Mediendateien, Benutzer), definieren das Erscheinungsbild der Karten und fügen Filter hinzu. Das Plugin setzt alles zu einem responsiven Raster zusammen, das sich auf jeder Seite einbetten lässt.

Der Entwickler, Loïc Blascos, ist ein französischer WordPress-Ingenieur, der auch für das Unblock-Plugin bekannt ist. Das Produkt wird seit 2019 aktiv weiterentwickelt. Stand Juni 2026 ist die aktuelle Version v2.3.3.

Das Plugin funktioniert mit jedem Theme, das den WordPress-Standards folgt, und integriert sich über Shortcodes oder Blöcke mit Gutenberg, Elementor, Oxygen, Beaver Builder und Bricks. Separate Add-ons decken die Integration mit WooCommerce, Easy Digital Downloads, ACF, Meta Box, Pods, WPML, Polylang, SearchWP, Relevanssi und LearnDash ab.

E-Commerce-Szenario: Produktkarten mit Preis, Bewertung und „In den Warenkorb"-Button, dazu Filter nach Preis, Kategorie und Lagerbestand.

Portfolio-Szenario: Mediendateien aus der WordPress-Mediathek, die sich in einer Lightbox öffnen, mit tagbasierter Filterung.

Kernfunktionen

Das Plugin bietet viele Möglichkeiten. Gruppieren wir sie nach Kategorien, um nicht in einer Auflistung unterzugehen.

Inhalte und Abfragen. WP Grid Builder kann Inhalte aus benutzerdefinierten Beitragstypen, Taxonomien und WordPress-Benutzern beziehen. Die Konfiguration der Quelle erfordert wenige Klicks: Wählen Sie den Beitragstyp, den Veröffentlichungsstatus, Autoren und schließen Sie bestimmte Beiträge ein oder aus. Unter der Haube sorgen benutzerdefinierte AJAX-Endpunkte und eine Indextabelle für schnelle Filterung auch bei großen Inhaltsmengen.

Raster und Layouts. Drei Layout-Typen: Masonry (Ziegelstein-Stil), Justified (breitenbündig) und Metro (Raster mit variabel großen Zellen). Jedes lässt sich in ein responsives Karussell mit Touch-Gesten-Unterstützung einbetten. Spaltenanzahl und Zeilenhöhe sind für verschiedene Bildschirmbreiten anpassbar: Tablet, Smartphone und Desktop.

Karten. Ein Drag-and-Drop-Builder: Ziehen Sie Blöcke (Titel, Bild, Preis, Bewertung, benutzerdefinierte Felder, HTML) und setzen Sie die Karte zusammen. Enthalten sind über 20 fertige Vorlagen, über 900 Google Fonts und über 250 SVG-Icons. Karten lassen sich verschiedenen Inhaltstypen zuweisen: eine für Produkte, eine andere für Blogbeiträge.

Filter (Facetten). Über 20 Typen: Checkboxen, Radio-Buttons, Dropdowns, Buttons, hierarchische Filter, Bereiche (Preis, Bewertung), Schieberegler, Datumsauswahl, Suche, Sortierung, Zurücksetzen und ein „Mehr laden"-Button. Filter arbeiten per AJAX ohne Seitenneuladung. Jede Facettensuche erzeugt eine eindeutige URL, und die Vor-/Zurück-Buttons des Browsers funktionieren korrekt.

Lightbox und Medien. Eine integrierte Lightbox für Bilder, Video (YouTube, Vimeo, Wistia), Galerien und Audio. Lazy-Loading-Unterstützung: Bilder laden beim Scrollen, was Bandbreite spart und das Seiten-Rendering beschleunigt.

Animationen. Über 20 Ladeanimationen (Loader während der Filterung) und über 20 Einblendanimationen (Karten erscheinen beim Scrollen). Diese reduzieren die gefühlte Wartezeit: Der Nutzer sieht Bewegung statt eines leeren Bildschirms.

Weitere Funktionen. Import/Export von Rastern, Karten und Facetten im JSON-Format; Unterstützung für RTL-Sprachen; SEO-freundlich (W3C-kompatibel); grundlegende Anforderungen gemäß der Entwicklerdokumentation: PHP 7.0+ und WordPress 6.0+ (PHP 8.x empfohlen).

Preise und Tarife

WP Grid Builder wird ausschließlich als Jahresabonnement verkauft; eine kostenlose Version gibt es nicht. Drei Tarifstufen:

Bei Verlängerung gelten gestaffelte Rabatte: Je höher die Tarifstufe, desto größer der prozentuale Nachlass. Alle Tarife umfassen das vollständige Add-on-Paket, sodass keine weiteren Zukäufe erforderlich sind. Beim Kauf gilt eine 14-tägige Geld-zurück-Garantie.

Das Plugin hat positive Bewertungen von namhaften Persönlichkeiten der WordPress-Community erhalten. Jb Audras, WordPress-Core-Entwickler und CTO von Whodunit, hebt den Komfort für Anwender und Entwickler hervor:

Sowohl die Anwender- als auch die Entwicklererfahrung sind hervorragend. Ein großartiges Produkt und ein neues Paradigma für diese Art von Funktionalität. Gute Integration in den WordPress-Core, angenehme Admin-UX und blitzschnelles Frontend.

Chris Lema, ein bekannter WordPress-Experte und Berater, hat WP Grid Builder ebenfalls öffentlich gelobt; seine Rezension findet sich in den sozialen Medien.

WP Grid Builder installieren

Die Installation entspricht dem Standard für ein Premium-WordPress-Plugin. Nach dem Kauf erhalten Sie eine ZIP-Datei und einen Lizenzschlüssel per E-Mail oder in Ihrem Konto auf wpgridbuilder.com.

Schritt 1. Laden Sie das ZIP-Archiv herunter. Gehen Sie im WordPress-Adminbereich zu Plugins → Installieren:

Schritt 2. Klicken Sie auf „Plugin hochladen", wählen Sie die ZIP-Datei aus und klicken Sie auf „Jetzt installieren":

Schritt 3. Aktivieren Sie das Plugin:

Nach der Aktivierung erscheint der Menüpunkt Gridbuilder WP im Admin-Menü. Navigieren Sie zu Gridbuilder WP → Dashboard:

Schritt 4. Geben Sie die Lizenz-E-Mail und den Schlüssel ein und klicken Sie dann auf „Plugin aktivieren":

Durch die Aktivierung der Lizenz werden automatische Updates direkt aus der WordPress-Administration heraus freigeschaltet. Den Lizenzschlüssel selbst finden Sie nach dem Kauf in Ihrem Kunden-Dashboard:

Fertig. Das Plugin ist installiert, die Lizenz ist aktiviert, und Sie können Ihr erstes Grid erstellen.

Einrichtung Ihres ersten Grids

Die Einrichtung erfolgt über mehrere Abschnitte innerhalb eines einzigen Bildschirms. Gehen wir sie der Reihe nach durch.

Grid anlegen und benennen

Navigieren Sie zu Gridbuilder WP → Alle Grids und klicken Sie auf „Create A Grid":

Sie gelangen auf den Bildschirm „Alle Grids", der aktuell noch leer ist. Klicken Sie auf die Schaltfläche „Create A Grid":

Ein alternativer Weg ist der Import von Demo-Grids von der WP Grid Builder-Website. Demos legen das Layout und die Kartenstruktur fest, die Inhalte stammen jedoch stets von Ihnen: Ihre Beiträge, Mediendateien oder Produkte.

Legen Sie auf diesem Bildschirm Folgendes fest: den Grid-Namen (für den internen Gebrauch), eine benutzerdefinierte CSS-Klasse (optional, für eigene Styles) und den Meldungstext, den Benutzer sehen, wenn keine Ergebnisse vorliegen.

Auswahl der Inhaltsquelle

Abschnitt Grid-Einstellungen → Quellinhalt:

Drei Quelloptionen:

• Beitragstyp: Beiträge, Seiten, Mediendateien oder beliebige benutzerdefinierte Typen
• Begriff: Filterung nach Kategorien, Schlagwörtern oder benutzerdefinierten Taxonomien
• Benutzer: Inhalte bestimmter Benutzer

Legen Sie darunter die Anzahl der Elemente pro Seite fest. Der Wert „-1" zeigt alle an; 0 übernimmt die WordPress-Einstellungen.

Im Abschnitt „Angeforderte Beiträge" können Sie Feinabstimmungen vornehmen: Publikationstyp, Status (am besten auf „Veröffentlicht" setzen), Autoren, MIME-Typen für Medien sowie den Ein- und Ausschluss bestimmter Beiträge.

Tipp: Klicken Sie beim Durchgehen der Einstellungen immer wieder auf „Änderungen speichern". Die Grid-Konfiguration nimmt Zeit in Anspruch, und es ist frustrierend, den Fortschritt zwischendurch zu verlieren.

Medienformate

Abschnitt Grid-Einstellungen → Medienformate:

Wählen Sie Formate für die Karten: Bilder, Galerien, Video (YouTube/Vimeo/Wistia) und Audio. Hier legen Sie auch ein Standard-Thumbnail für Karten ohne eigenes Bild fest. Eine nützliche Option: das automatische Erfassen der ersten Mediendatei aus einem Beitrag, falls ein Beitragsbild fehlt.

Grid-Stil

Abschnitt Grid-Einstellungen → Grid-Stil:

Drei Stile zur Auswahl: Masonry, Metro und Justified. Für die meisten Szenarien ist Masonry eine sichere Wahl: Die Karten ordnen sich unabhängig von den Bildseitenverhältnissen optimal an. Grid-Verhalten, Überschreibungen der Kartengröße und Responsivität werden darunter konfiguriert, es besteht jedoch keine Notwendigkeit, diese ohne klare Anforderung zu ändern.

Grid-Layout

Zwei Optionen: standardmäßiges vertikales Scrollen oder Karussell. Die Option „Volle Breite" lässt das Grid über die gesamte Bildschirmbreite verlaufen.

Grid Composer

Grid Composer ist ein Drag-and-Drop-Bereich, in dem Sie Facetten anordnen. Zum Beispiel: ein Datumsfilter, eine Suche und eine Schaltfläche „Mehr laden":

Nach der Veröffentlichung erzeugt diese Konfiguration ein Raster mit drei funktionierenden Filtern:

Kartenstil

Der Bereich „Kartenstil" ist der Builder für das Karten-Erscheinungsbild. Sie können fertige Karten aus dem Demo-Set importieren (über 20 Vorlagen) oder von Grund auf neu erstellen. Jeder Inhaltstyp erhält seine eigene Karte: eine für Produkte, eine andere für Beiträge. Ein fertiges Raster mit der Beryl-Karte sieht so aus:

Animationen

Zwei Animationstypen: Einblenden der Karten beim Scrollen und Effekte beim Klicken auf „Mehr laden". Einfach zu konfigurieren, bieten sie eine spürbare visuelle Aufwertung mit minimalem Aufwand.

Laden

Aktivieren Sie Lazy Loading, damit Bilder erst geladen werden, wenn sie in den sichtbaren Bereich gelangen. Dies ist entscheidend für Raster mit Dutzenden von Karten auf einer Seite. Die Ladeanzeige (Loader) erscheint beim Filtern oder beim Laden des nächsten Inhaltsblocks und gibt dem Nutzer visuelles Feedback.

CSS-Anpassung

Das Fenster Rastereinstellungen → Anpassung ermöglicht es Ihnen, eigene CSS-Regeln über die bei der Rastererstellung vergebene Klasse hinzuzufügen. Wenn CSS nicht Ihre Stärke ist, ziehen Sie einen Frontend-Entwickler hinzu oder belassen Sie es bei den Standardstilen.

Add-ons

Add-ons erweitern die Basisfunktionalität. Alle sind in jeder Lizenzstufe enthalten. Mit Stand Juni 2026 sind die folgenden verfügbar:

• Karten-Facette: Google Maps-, Mapbox- oder Leaflet-Karten mit Markern und Geo-Tag-Filterung
• Caching: Inhalts- und Facetten-Caching zur Beschleunigung wiederholter Anfragen
• LearnDash: Anzeige von LearnDash-Kursdaten in Rasterkarten
• Mehrsprachigkeit: Integration mit Polylang und WPML für mehrsprachige Websites
• Elementor: native Integration mit dem Elementor Builder
• Oxygen: Integration mit Oxygen Builder
• Bricks: Integration mit Bricks Builder
• Beaver Builder: Integration mit Beaver Builder
• Meta Box: Meta-Box-Felder in Karten und Filtern
• Pods: Pods-Felder in Karten und Filtern

Add-ons installieren Sie mit wenigen Klicks über Gridbuilder WP → Add-Ons.

Weitere Einstellungen

Gridbuilder WP → Einstellungen enthält die globalen Parameter:

• Aktivierung der WP Grid Builder-Blöcke in Gutenberg
• Unterstützung für Beitragsformate (Bild, Video, Audio, Galerie)
• Anzeige von Taxonomie- und Beitragsformat-Farben
• Cache-Leerung und Stylesheet-Reset
• Globale Karten- und Facettenfarben
• Zusätzliche Bildgrößen
• Einstellungen für die integrierte Lightbox
• Vollständiger Reset der globalen Plugin-Einstellungen

Die meisten dieser Parameter konfigurieren Sie einmalig und müssen sie danach nicht erneut aufrufen.

Sehen Sie sich das Plugin in Aktion an. In diesem Video zeigt WPTuts, wie Sie mit WP Grid Builder von Grund auf mehrstufige Filter bis hin zu einem funktionsfähigen Grid einrichten:

⁉️🤔 Häufig gestellte Fragen

Muss ich programmieren können, um mit WP Grid Builder zu arbeiten?

Nein. Grids, Karten und Facetten werden vollständig über die visuelle Administrationsoberfläche konfiguriert. Das Plugin setzt PHP 7.0+ und WordPress 6.0+ voraus, aber Sie müssen keinen Code schreiben. Entwickler haben Zugriff auf PHP-Hooks und -Filter für individuelle Anpassungen, dies ist jedoch ein optionaler Zusatznutzen, keine Voraussetzung.

Funktioniert das Plugin mit meinem Theme?

Wenn das Theme den WordPress-Standards folgt, ja. In der Praxis sind Kompatibilitätsprobleme selten, sollten sie jedoch auftreten, gilt die 14-tägige Geld-zurück-Garantie. Das Plugin bietet zudem Integrationen mit Elementor, Oxygen, Bricks und Beaver Builder für alle, die mit visuellen Buildern arbeiten.

Worin unterscheidet sich WP Grid Builder von Wettbewerbern?

In drei Punkten: die Tiefe der Facettenfilterung (über 20 Facettentypen gegenüber 5-10 bei Alternativen), ein integrierter Karten-Builder (keine Bearbeitung von Theme-Templates nötig) und eine Indextabelle für schnelles Filtern bei großen Inhaltsmengen. Die meisten Grid-Plugins bieten entweder Layout ohne Filter oder Filter ohne eigene Karten; hier erhalten Sie alles aus einer Hand.

Gibt es eine kostenlose Version?

Nein, WP Grid Builder ist ausschließlich als Premium-Version erhältlich. Die kleinste Stufe beginnt bei 49 $ pro Jahr für eine Website mit dem vollständigen Add-on-Paket. Das ist vergleichbar mit dem Jahresabonnement vieler anderer Premium-WordPress-Plugins.

Wie wirkt sich das Plugin auf die Geschwindigkeit der Website aus?

Es verwendet benutzerdefinierte AJAX-Endpunkte und eine Indextabelle anstelle von standardmäßigem WP_Query, was die Datenbanklast reduziert. Lazy Loading verzögert das Laden von Bildern bis zum Scrollen. Für große Kataloge sollten Sie das Caching-Add-on aktivieren, das Filterergebnisse zusätzlich zwischenspeichert. In einem Test-Setup öffnet sich ein Grid mit 50 Produkten und Filtern ohne spürbare Verzögerung.

Kann ich das Plugin auf einer Testseite verwenden?

Ja. Domains mit den TLDs.dev,.test,.local, localhost und Staging-Subdomains zählen nicht als Aktivierungen. Sie können auf einer Staging-Umgebung entwickeln und testen, ohne Ihre Lizenz zu verbrauchen.

Welchen WP Grid Builder-Tarif Sie für Ihre Aufgabe wählen sollten

WP Grid Builder ist kein Werkzeug für jeden. Er ist überdimensioniert, wenn Sie ein einfaches Beitragsraster ohne Filter benötigen: kostenlose Plugins oder integrierte Theme-Blöcke können das leisten. Geht es jedoch um einen Katalog mit Facettensuche, ein filterbares Portfolio oder eine WooCommerce-Verkaufsfläche mit intelligenter Sortierung, gibt es im WordPress-Plugin-Markt wenige Alternativen mit vergleichbarer Tiefe.

• Sind Sie Online-Shop-Betreiber mit WooCommerce, holen Sie sich Basic für $49 pro Jahr. Das deckt eine Verkaufsfläche mit Preis-, Bewertungs- und Lagerbestandsfiltern ab. Ein Masonry-Raster mit Produktkarten ist in einer Stunde aufgebaut.
• Sind Sie Freelancer oder Agentur mit mehreren Projekten, ziehen Sie Premium ($99, bis zu 3 Websites) oder Ultimate ($249, unbegrenzt) in Betracht. Die Elementor- und Bricks-Add-ons sparen Zeit bei der Integration mit Kunden-Buildern.
• Benötigen Sie ein einfaches Blog-Raster ohne Filter, ist das Plugin für diese Aufgabe überdimensioniert. Probieren Sie die integrierten Query-Loop-Blöcke in Gutenberg oder kostenlose Alternativen.

Testen Sie das Plugin auf einer Testseite; die 14-tägige Geld-zurück-Garantie erlaubt Ihnen eine risikofreie Evaluierung. Und wenn Sie bereits mit WP Grid Builder gearbeitet haben, hinterlassen Sie einen Kommentar, in dem Sie beschreiben, für welches Szenario Sie ihn zugeschnitten haben.