Gruppe-Block: der Basis-Baustein für viele Layouts

Der Block »Gruppe« gruppiert andere Blöcke zur gemeinsamen Gestaltung

Der Block Gruppe ist der wohl wichtigsten Bausteine zum Erstellen von Layouts im Editor von WordPress. Vereinfacht gesagt ist er ein Container, der andere Blöcke gruppiert, um sie anschließend gemeinsam gestalten zu können.

Die farbigen Abschnitte in diesem Beitrag? Gruppe-Block. Die farbigen Hinweiskästen innerhalb dieser Abschnitte? Gruppe-Block.

Zum Kennenlernen sehen Sie in diesem Abschnitt, wie Sie eine Überschrift und einen Absatz-Block gruppieren und dann mit einer gemeinsamen Gestaltung versehen können. Das Beitragsbild oben am Anfang dieser Seite zeigt das Ergebnis im Frontend.

Schritt 1: Blöcke gruppieren

Im ersten Schritt gruppieren Sie die zu gestaltenden Blöcke, sodass die Überschrift und der Absatz von einem Gruppe-Block umschlossen werden:

1. Erstellen Sie einen neuen Beitrag mit einem Titel wie »Der Gruppe-Block«.
2. Fügen Sie einen einführenden Absatz und einen Mehr-Block ein (siehe Abbildung 2).
3. Geben Sie darunter eine H2-Überschrift und einen Textabsatz ein.
4. Blenden Sie links die Seitenleiste mit der Listenansicht ein.
5. Klicken Sie in der Listenansicht auf den H2-Block mit der Überschrift.
6. Halten Sie die Umschalt-Taste gedrückt, und klicken Sie auf den Absatz-Block unterhalb der Überschrift, sodass beide Blöcke markiert sind.
7. Gruppieren Sie die markierten Blöcke. Den Befehl Gruppieren gibt es mehrfach:
   • mit einem Klick auf das 3-Punkte-Menü in der Listenansicht
   • per Rechtsklick auf die Markierung in der Listenansicht
   • als Gruppe-Symbol in der Block-Werkzeugleiste
   • per Tastaturkürzel Strg+G bzw. cmd+G.
8. Wenn alles okay ist, klicken Sie auf Veröffentlichen bzw. Speichern.

Schritt 2: Gruppe-Block farblich gestalten

Der Gruppe-Block enthält jetzt jeweils einen Block Überschrift und einen Block Absatz. Mit dem umgebenden Gruppe-Block können Sie Überschrift und Absatz darin gemeinsam gestalten, und in diesem Schritt weisen Sie der Gruppe eine farbliche Gestaltung zu.

In Twenty Twenty-Five gibt es im Block-Inspektor im Bereich Stile in für den Gruppe-Block insgesamt sechs vorgefertigte Stil-Varianten, die man der Gruppe per Klick zuweisen kann:

• Standard ist ohne Farbzuweisungen und als Standardeinstellung aktiviert.
• Stil 1 bis Stil 5 sind vordefinierte Farbkombinationen, die auf den Farben der Theme-Palette basieren.

Als Beispiel weisen Sie dem Gruppe-Block den Stil 5 zu:

1. Markieren Sie den Gruppe-Block.
2. Öffnen Sie den Block-Inspektor, und blenden Sie den Abschnitt Stile ein.
3. Probieren Sie per Klick die verschiedenen Stil-Varianten aus.
4. Klicken Sie auf die Schaltfläche Speichern.

Danach sehen Sie den Gruppe-Block mit Hintergrund- und Schriftfarbe. Dabei wird kein automatischer Innenabstand erzeugt, sodass der Text dicht am Rand sitzt. Das wird gleich in Schritt 3 behoben.

Wenn Ihnen keine der fünf Stil-Varianten zusagt, können Sie im Design-Werkzeug Farbe eine eigene Kombination für Text und Hintergrund erstellen. Im Sinne einer konsistenten Gestaltung der gesamten Website sollten sie sich dabei auf die Farben der Theme-Palette beschränken. Im Website-Editor können Sie andere Farb-Paletten aktivieren oder die Farben der Theme-Palette anpassen.

Schritt 3: Die Abstände gestalten

Unterhalb der Optionen zur Gestaltung von Farbe und Typografie gibt es das Design-Werkzeug Maße, mit dem Sie verschiedene Abstände und eine minimale Höhe definieren können.

Die Bedienelemente darin sind anfangs etwas gewöhnungsbedürftig, bieten aber praktische Voreinstellungen und flexible Einstellmöglichkeiten. Im Alltag ist das richtig gut:

• Der erste Schieberegler bestimmt den vertikalen Abstand, und zwar für oben und unten.
• Der zweite Regler ist für den horizontalen Abstand und definiert links und rechts.
• Mit einem Klick auf das Link-Symbol können Sie die Verkettung aufheben und die Abstände für alle vier Seiten einzeln definieren.

Schritt für Schritt sieht das zum Beispiel für den Innenabstand so aus:

1. Markieren Sie den Gruppe-Block.
2. Scrollen Sie im Block-Inspektor zum Design-Werkzeug Maße.
3. Wählen Sie einen vertikalen und horizontalen Innenabstand aus, z. B. Stufe Normal.
4. Klicken Sie auf die Schaltfläche Speichern.

Der Innenabstand erweitert die Hintergrundfarbe des Gruppe-Blocks, aber solange der Mauszeiger auf einem der Schieberegler weilt, wird der Innenabstand im Inhaltsbereich mit einer etwas anderen Farbe angedeutet.

Sie sollten beim Zuweisen der Abstände möglichst die vorgegebenen Stufen nutzen, denn damit wird der Innenabstand responsiv, sodass er sowohl auf kleinen als auch auf großen Bildschirmen gut aussieht.

Die Option Außenabstand regelt die Abstände zu den anderen Blöcken ober- bzw. unterhalb des markierten Gruppe-Blocks.

Die Block-Abstände definieren den vertikalen Abstand zwischen den einzelnen Blöcken im Gruppe-Block.

Schritt 4: Ränder, Radius und Schatten

Hintergrundfarbe und Innenabstand sind zugewiesen, jetzt fehlen für das Beispiel aus dem Beitragsbild nur noch zwei abgerundete Ecken und ein Schlagschatten.

Die Einstellungen dazu finden Sie ganz unten im Block-Inspektor im Design-Werkzeug Ränder und Schatten:

• Ränder sind Rahmenlinien um den Block. WordPress erlaubt Ihnen, Farbe und Stil sowie die Breite der Linien zu definieren. Standardmäßig geschieht das für alle vier Seiten gleichzeitig, aber nach einem Klick auf das Link-Symbol können Sie alle vier Seiten auch einzeln gestalten.
• Radius definiert die Abrundung der Ecken. Ein Klick auf das Link-Symbol Verknüpfung der vier Ecken auf, sodass Sie alle Ecken einzeln definieren können.

Schatten dient zur Definition eines Schattens um den Block, ist aber standardmäßig ausgeblendet und muss erst mit dem 3-Punkte-Menü Optionen für Ränder und Schatten eingeblendet werden. Die Voreinstellungen für Schlagschatten können Sie bei Bedarf im Website-Editor im Bereich für globale Stile ändern.

Drei Gruppe-Block hat drei Varianten: Zeile, Stapel und Raster

In Abbildung 6 sieht man, dass der Gruppe-Block drei Varianten namens Zeile, Stapel und Raster, die man z. B. im Block-Inspektor in der rechten Seitenleiste auswählen kann.

Alle vier Varianten dienen dazu, mehrere Blöcke zum Zwecke der Gestaltung zu gruppieren, aber Zeile, Stapel und Raster haben gegenüber dem normalen Gruppe-Block zusätzliche Möglichkeiten zur Ausrichtung:

• Zeile (engl. row) ist eine einfache Möglichkeit, die darin enthaltenen Blöcke in einer Zeile zu platzieren, also nebeneinander. Zeile ist eine Art horizontaler Gruppe-Block und hat besondere Ausrichtungsmöglichkeiten wie Abstand zwischen Elementen. Damit kann man z. B. ganz einfach einen einzeiligen Header gestalten: Links der Website-Titel, rechts die Navigation.
• Stapel (engl. stack) richtet wie der Gruppe-Block enthaltene Blöcke vertikal aus, hat aber zusätzliche Ausrichtungsmöglichkeiten wie Zwischenraum oder Elemente strecken.
• Raster (engl. grid) ist in WordPress 6.6 als new kid on the group block hinzugekommen. Diese Variante ermöglicht Raster-Layouts, bei denen man die Blöcke in Zeilen und Spalten arrangieren kann. Durch die Option einer minimalen Breite für Spalten kann man mit dem Raster-Block sehr einfach responsive Layouts für mehrspaltige Inhalte.