Content Creation mit Row- und Stack-Blöcken
Einführung in die Blocktypen
Der Einsatz von Row- und Stack-Blöcken ist ein essenzieller Bestandteil, um Designanforderungen in WordPress zu erfüllen. Der Group-Block bietet verschiedene Variationen: der Standard-Group-Block fasst Blöcke in einem Container zusammen, der Row-Block ordnet Blöcke horizontal an, der Stack-Block vertikal und der Grid-Block in einem Raster. Im Folgenden werden die Anwendungsmöglichkeiten von Row- und Stack-Blöcken näher erläutert.
Verwendung des Row-Blocks
Der Row-Block ist besonders nützlich, um Inhalte horizontal anzuordnen. Um den Row-Block zu verwenden, füge ihn zunächst über den Befehl /row ein. Anschließend können Überschriften und Texte hinzugefügt werden, indem du beispielsweise eine Überschrift mit dem Titel „Green House“ erstellst und darunter einen Text wie „Make your home a sanctuary“ einfügst. Diese Elemente können im List View zusammengefasst werden, um den Abstand zwischen ihnen zu minimieren. Über die Sidebar-Einstellungen unter Styles und Dimensions kann der Blockabstand auf null gesetzt werden, um die Elemente näher zusammenzubringen.
Durch das Hinzufügen eines Buttons über den Inserter kann die Funktionalität des Row-Blocks weiter demonstriert werden. Der Button kann beispielsweise mit dem Text „Explore“ versehen und durch die Auswahl von Space between items im Block-Toolbar nach rechts verschoben werden. Die vertikale Ausrichtung des Buttons kann durch die Option Align bottom angepasst werden, um ihn am unteren Rand zu platzieren.
Erstellung eines Headers
Der Row-Block eignet sich hervorragend zur Erstellung von Headers. Über den Site Editor unter Appearance kann ein neuer Header-Template-Teil erstellt werden. Dazu wird ein Row-Block hinzugefügt, in den beispielsweise ein Site-Logo und ein Site-Tagline-Block integriert werden. Diese können in einem Stack-Block zusammengefasst und der Abstand zwischen ihnen durch die Einstellung des Blockabstands auf null minimiert werden.
Der Hintergrund des Row-Blocks kann über die Styles-Einstellungen angepasst werden, um beispielsweise eine Farbe wie Lachs zu wählen. Ein Navigationsblock kann hinzugefügt werden, um eine Liste der Seiten anzuzeigen. Durch die Auswahl von Space between items in den Layout-Einstellungen wird das Menü nach rechts verschoben, um eine ausgewogene Header-Struktur zu schaffen.
Verwendung des Stack-Blocks
Der Stack-Block ist ideal, um Inhalte vertikal zu organisieren. In einem Beispiel mit drei Spalten kann der Stack-Block verwendet werden, um Inhalte innerhalb einer Spalte zu stapeln und den Hintergrund sowie die Buttons so auszurichten, dass sie mit den anderen Spalten übereinstimmen. Der Haupt-Stack-Block kann durch Anpassung der Mindesthöhe auf 100% erweitert werden, um eine gleichmäßige Ausrichtung zu gewährleisten.
Um die Buttons in der linken Spalte mit denen in den anderen Spalten auszurichten, kann die vertikale Ausrichtung durch die Option Space between in der Block-Toolbar angepasst werden. Dadurch wird der Button nach unten verschoben und mit den anderen Spalten in Einklang gebracht.