Cool: Mehrspaltige Layouts mit dem Spalten-Block

Es gibt zwei Wege zum Spalten-Layout

In diesem Beitrag geht es um einfaches Spalten-Layout, bei dem drei farbige Kästen nebeneinanderstehen:

Zum Erstellen eines solchen Layouts mit dem Spalten-Block gibt es zwei Möglichkeiten:

1. Spalten zuerst. Sie erstellen zunächst das Spalten-Layout und fügen dann die Inhalte in die Spalten ein. Einsteiger tendieren zu dieser Methode, aber dabei muss man den Inhalt immer innerhalb einer Spalte bearbeiten, und das ist oft ziemlich fummelig.
2. Inhalt 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 Spalten-Layout um.

Die zweite Methode ist weniger intuitiv und vielleicht weniger, in vielen Fällen aber deutlich einfacher, und daher erstellen Sie beim Beispiel in diesem Beitrag zunächst die Inhalte und stellen diese dann per Klick nebeneinander.

Schritt 1: Inhalt zuerst – drei Gruppen mit Überschrift und Text

In diesem Schritt erstellen Sie die drei Kästen, die jeweils aus einem Gruppe-Block mit farbigem Hintergrund, einer Überschrift und einem Textabsatz bestehen.

Die folgende Liste führt Sie Schritt für Schritt zu den drei Gruppen aus Abbildung 1. Zunächst erstellen Sie die erste Gruppe, dann duplizieren Sie diese und passen die Kopien an:

1. Erstellen Sie einen Block mit einer H2-Überschrift, fügen Sie den Text »Der Blog« ein, und zentrieren Sie die Überschrift.
2. Erstellen Sie mit Enter einen neuen Absatz, schreiben Sie etwas Text, und zentrieren Sie den Absatz.
3. Blenden Sie die Listenansicht ein, und klicken Sie auf den Block mit der H2-Überschrift.
4. Halten Sie die Umschalt-Taste gedrückt, und klicken Sie auf den Absatz-Block, sodass beide Blöcke markiert sind.
5. Gruppieren Sie die markierten Blöcke. Den Befehl Gruppieren gibt es mehrfach:
   • per Maus z. B. als Gruppe-Symbol in der Block-Werkzeugleiste
   • per Tastatur mit Strg+G bzw. cmd+G.
6. Weisen Sie dem Gruppe-Block in der rechten Seiteleiste im Block-Inspektor Farben für Hintergrund und Text zu. Wählen Sie dazu Farben, die in Ihrem Theme angeboten werden.
7. Definieren Sie rundherum einen Innenabstand und setzen Sie die Mindesthöhe auf 100%, damit die Kästen später nebeneinander alle gleich hoch sind.
8. Duplizieren Sie den Block Gruppe, indem Sie in der Listenansicht im 3-Punkte-Menü neben dem Block auf den Befehl Duplizieren klicken.
9. Ändern Sie in der Kopie den Inhalt (»Das Buch«) und die farbliche Gestaltung, und wiederholen Sie diesen Vorgang für den dritten Kasten (»Das Lexikon«).
10. Geben Sie den Gruppen in der Listenansicht mit der Option Umbenennen im 3-Punkte-Menü für den jeweiligen Block einen individuellen Namen.
11. Speichern Sie den Beitrag, und betrachten Sie ihn im Frontend. Das spätere Spalten-Layout sollte momentan etwa so aussehen wie in Abbildung 1.

Schritt 2: Die drei Kästen per Klick in ein mehrspaltiges Layout umwandeln

In diesem Schritt markieren Sie die drei Gruppen-Blöcke und wandeln Sie per Klick in eine Spalten-Layout um, sodass die drei farbigen Kästen nebeneinanderstehen.

Die folgenden Schritte führen Sie zum in Abbildung 2 dargestellten Ergebnis:

1. Markieren Sie in der Listenansicht die drei Kästen, indem Sie mit gedrückter Umschalt-Taste nacheinander auf die drei Gruppe-Blöcke klicken.
2. Klicken Sie in der Blockwerkzeugleiste auf das Gruppe-Symbol am Anfang der Leiste.
3. Wählen Sie im Dropdown-Menü ganz oben im Bereich Umwandeln in den Befehl Spalten. Nach diesem Klick stehen die drei Kästen im Editor nebeneinander.
4. Markieren Sie in der Listenansicht den Block Spalten, und wählen Sie in der Block-Werkzeugleiste beim Symbol Ausrichten die Option Erweiterte Breite.
5. Prüfen Sie, ob in der rechten Seitenleiste im Block-Inspektor die Option Auf Mobilgeräten stapeln aktiviert ist. Dadurch stehen die drei Spalten auf schmalen Bildschirmen untereinander.
6. Speichern Sie den Beitrag, und betrachten Sie ihn im Frontend.

Zum Testen versuchen Sie mal, das Browserfenster in der Breite zu verändern. Unterhalb von 768px sollten die drei Kästen untereinander stehen.