Den Raster-Block (engl. grid block) gibt es bereits seit WordPress 6.6, aber erst in WordPress 7.0 bekam er die Möglichkeit, für die Layout-Spalten eine minimale Breite zu definieren.
Und erst diese kleine zusätzliche Option ermöglicht es, flexible mehrspaltige Layouts zu erstellen, bei denen die Anzahl der Spalten sich ohne festen Breakpoint automatisch der Breite des Browserfensters anpasst.
Warum das Layouten mit dem Raster-Block supercool ist
Die klassische Methode zum Erstellen eines mehrspaltigen Layouts in WordPress ist der Spalten-Block, und wie das geht, haben Sie im Beitrag Cool: Mehrspaltige Layouts mit dem Spalten-Block gesehen.
Noch ziemlich neu und daher weniger bekannt sind mehrspaltige Layouts mit dem Raster-Block. Zunächst kurz ein paar Worte zu den Vor- und Nachteilen der beiden Layout-Methoden.
Der Spalten-Block ist responsiv mit Breakpoint
Mehrspaltige Layouts mit dem Spalten-Block sind responsiv:
- Für breite Bildschirme definieren Sie die Anzahl der Spalten für das Layout.
- Auf mobilen Geräten ist das Layout einspaltig (wenn Auf Mobilgeräten stapeln aktiviert ist)
Der Spalten-Block hat einen fest definierten Umbruchpunkt (engl. Breakpoint) von 768px. Ein mit dem Spalten-Block erstelltes mehrspaltiges Layout hat also immer zwei Stufen:
- Bei einer Breite von 768px oder mehr ist das Layout mehrspaltig.
- Unterhalb einer Breite von 768px ist das Layout einspaltig.
Das ist cool, aber nicht sonderlich flexibel.
Der Raster-Block ist responsiv ohne Breakpoint
Ein mehrspaltiges Layout mit dem Raster-Block ist stufenlos flexibel, denn es benötigt keinen festen definierten Breakpoint:
- Man definiert einfache eine minimale Spaltenbreite für den Raster-Block.
- Der Browser berechnet, wie viele dieser Spalten nebeneinander passen.
Die folgende Galerie zeigt zur Veranschaulichung ein Raster-Layout mit sechs Kästen:
- Am Desktop stehen drei Spalten nebeneinander.
- Auf einem Tablet im Hochformat passen nur noch zwei Spalten.
- Auf einem Mobilgerät ist das Layout einspaltig.
Mit dem Spalten-Block geht so ein Layout nicht, mit dem Raster-Block ist es ganz einfach.
Es gibt zwei Wege zum Raster-Layout
Genau wie beim mehrspaltigen Layout mit dem Spalten-Block gibt es auch beim Layouten mit dem Raster-Block zwei grundsätzlich verschiedene Möglichkeiten:
- Raster-Block zuerst. Sie fügen Sie den Raster-Block ein und dann ergänzen Sie die Inhalte. Einsteiger tendieren zu dieser Methode, aber das ist oft ziemlich fummelig.
- Inhalte zuerst. Dabei erstellen Sie zunächst ganz normal den Inhalt im Editor. Danach markieren Sie die gestalteten Blöcke und wandeln sie per Klick in ein Raster-Layout um.
Und genau wie beim Spalten-Block ist die die zweite Methode meist deutlich einfacher. Daher erstellen Sie zunächst die Inhalte und stellen diese dann per Klick nebeneinander.
Schritt 1: Die Inhalte erstellen
Der Inhalt für das Layout besteht aus sechs Gruppe-Blöcken, die jeweils eine Überschrift und einen Absatz enthalten. Abbildung 4 zeigt das auf einen Blick.
Einzige Besonderheit an diesem Layout ist, das der farbige Hintergrund für die Überschrift links, oben und rechts bis ganz an den Rand reicht. Das erreichen Sie im Editor wie folgt:
- Der Innnenabstand für den Gruppe-Block wird rundherum auf 0 gesetzt.
- Die H3-Überschrift bekommt neben Hintergrund- und Textfarbe auch einen Innenabstand.
- Der Absatz darunter bekommt ebenfalls einen Innenabstand.
Falls der Inhalt aus mehreren Absätzen bestehen soll, können Sie diese gruppieren und dann den Innenabstand an die Gruppe vergeben.
Schritt 2: Das Raster-Layout erstellen
Im Beispiel stehen sechs Gruppen-Blöcke untereinander. Um diese sechs Gruppen-Blöcke in ein mehrspaltiges Layout zu verwandeln, markiert man sie in der Listenansicht und klickt dann in der Block-Werkzeugleiste auf das Symbol Raster.
Die folgenden Schritte führen Sie zum in Abbildung 5 dargestellten Ergebnis:
- Markieren Sie in der Listenansicht die sechs Gruppen-Blöcke, indem Sie z. B. mit gedrückter Strg– bzw. cmd-Taste nacheinander auf die Blöcke klicken.
- Klicken Sie in der Blockwerkzeugleiste auf das Raster-Symbol.
- Speichern Sie den Beitrag, und betrachten Sie ihn im Frontend.
Die Gruppen-Blöcke sollten bereits nebeneinander stehen.
Schritt 3: Das Raster-Layout gestalten
Raster-Block markiert und dazu den Block-Inspektor
Zum Abschluss noch folgende Hinweise:
- Auf sehr breiten Bildschirmen können durchaus mehr als drei Spalten nebeneinander passen.
- Falls Sie das nicht möchten, geben Sie im Block-Inspektor bei der Option Max. Spaltenanzahl z. B. eine 3 ein. Dann stehen nie mehr als 3 Spalten nebeneinander.
- Die Einheit
remist kurz für root em und basiert auf der Schriftgröße des Stammelements<html>. Sie ist ideal für Breitenangaben in einem flexiblen Layout, und 12rem ist ein guter Ausgangspunkt. Probieren Sie einfach, was bei Ihrem Layout am besten passt.
Das fertige Raster-Layout
Zum Abschluss sehen Sie hier eine Live-Version des in diesem Beitrag erstellen Raster-Layouts. Probieren Sie auf einem Desktop einmal, die Breite des Browserfensters zu verändern und beachten Sie dabei das Verhalten der sechs Kästen im Layout.
WP installieren
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis elit sed nisi lobortis vestibulum non et orci.
Inhalte erstellen
Donec molestie, orci et tristique lacinia, nisl dolor volutpat urna, at euismod eros orci ut massa.
Themes
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nunc neque, ullamcorper quis mi non.
Plugins
Duis cursus, quam id elementum blandit, turpis nisi consectetur velit, dignissim dapibus lectus nunc nec libero.
Wartung
Sed purus quam, molestie eu tortor sagittis, ultricies semper tortor. Vivamus venenatis imperdiet mauris nec rutrum.
Tipps & Tricks
Cras vel nibh varius, molestie est ac, iaculis erat. Suspendisse convallis massa eget erat porttitor, eu dictum nibh vestibulum.
Know-how: HTML und CSS für den Raster-Block
Der Raster-Block basiert auf ganz normalem HTML und CSS:
- Im HTML fungieren alle vier Blöcke als Container-Element, und im Block-Inspektor können Sie im Abschnitt Erweitert • HTML-Element festlegen, welches HTML-Element im Quelltext erzeugt werden soll (div, section, article etc.).
- Im CSS nutzt der Raster-Block eine Layout-Technik namens CSS-Grid.
Mehr zu diesen Themen und modernen Einheiten wie rem finden Sie bei Bedarf in meinem Buch Einstieg in HTML und CSS.
