Blog

Teil 5: Strukturelle und komplexe Blöcke im WordPress-Block-Editor

In einer Serie von Anleitungen führen wir Sie in den neuen Standardeditor von WordPress ein. Dies ist Teil 5 unseres Block-Editor-Tutorials, in dem wir tiefer in die Blöcke eintauchen und uns mit strukturellen und komplexen Blöcken beschäftigen.

Teil 1: Eine Einführung in den Block-Editor
Teil 2: Dokument-Einstellungen der Beiträge und Seiten
Teil 3: Die wichtigsten Grundfunktionen und Einstellungen
Teil 4: Grundlegende Blöcke
Teil 5: Strukturelle und komplexe Blöcke (dieses Tutorial)
Teil 6: Überblick über Struktur und Inhalt
Teil 7: Wiederverwendbare Blöcke
Teil 8: Widgets

Nun wird’s knifflig! Ärmel hochkrempeln und Streichhölzer zwischen die Augen.

Wir stellen Ihnen Folgendes im Detail vor:

  • Gruppe-Block (Layout-Elemente)
  • Block-Map
  • Spalten-Block (Layout-Elemente)
  • Medien und Text-Block (Layout-Elemente)
  • Cover-Block (Allgemeine-Blöcke)

Gruppe-Block

Sie können eine Gruppe nutzen, um Blöcke zusammenzufassen und somit (thematische) Abschnitte/Bereiche zu erzeugen. Das hat u.a. den Vorteil, dass Sie den gesamten Bereich einheitlich gestalten können. So lässt sich zum Beispiel eine einheitliche Hintergrundfarbe über die Block-Einstellungen des Gruppe-Blocks vergeben. Ebenso können Sie über die Block-Werkzeugleiste die Ausrichtung ändern und somit das Layout Ihren Vorstellungen anpassen.
Bei der Gestaltung und Organisation einer Seite oder eines Beitrags ergibt sich der Vorteil, dass gruppierte Blöcke als Ganzes verschoben werden können. Ein Verschieben innerhalb der Gruppe ist weiterhin möglich.
Innerhalb des Gruppe-Blocks verfahren Sie wie bisher, um Blöcke einzufügen: Sie Klicken auf das „+“ und setzen den ersten Block in die Gruppe. Weitere Blöcke können über die Enter-Taste oder die Block-Werkzeugleiste folgen.
Sie können auch im Nachhinein mehrere Blöcke zu einer Gruppe zusammenführen. Dazu markieren Sie die entsprechenden Blöcke, und nutzen das Mehr-Optionen-Bedienelement der Block-Werkzeugleiste, um die Blöcke zu Gruppieren (Abbildung 1).

Nachträgliches gruppieren über die Block-Werkzeugleiste des Block Editors

Abbildung 1 – Nachträgliches gruppieren über die Block-Werkzeugleiste des Block Editors

 

Exkurs: Block-Map

An dieser Stelle ein Hinweis zur Arbeitserleichterung: Durch die Block-Map am unteren Rand des Block-Editor-Fensters erkennen Sie die Ebenen Ihrer Blöcke (Abbildung 2). Jeder Eintrag ist klickbar und navigiert direkt zu dem jeweiligen Block mitsamt seinen Einstellungen.
Als Beispiel zeigen wir Ihnen in Abbildung 2 zwei Gruppen mit dazugehöriger Block-Map. Die eine Gruppe (roter Bereich) umfasst die zweite Gruppe (schwarzer Bereich). Achten Sie auf die sich verändernde Block-Map, die Ihnen die Ebenen und Verschachtelung anzeigt.

Ebenen und Verschachtelung der Blöcke durch die Block-Map des WordPress-Block-Editors erkennen

Abbildung 2 – Ebenen und Verschachtelung der Blöcke durch die Block-Map des WordPress-Block-Editors erkennen

Tipp: Über die Block-Map lassen sich schwer anklickbare Blöcke gut erreichen.

Spalten-Block

Der Spalten-Block dient zur Strukturierung Ihrer Inhalte und ermöglicht komplexe Layouts.
Haben Sie den Spalten-Block ausgewählt, können Sie innerhalb des Elements bis zu drei Spalten wählen (Abbildung 3). Anschließend haben Sie die Möglichkeit, über die Block-Einstellungen die Anzahl auf bis zu sechs Spalten pro Spalten-Block zu erhöhen.

Spalten-Anzahl wählen innerhalb des Spalten-Blocks des WordPress-Block-Editors

Abbildung 3 – Spalten-Anzahl wählen innerhalb des Spalten-Blocks des WordPress-Block-Editors

Für unser Beispiel benötigen Sie zwei Spalten. Sobald Sie die Spaltenanzahl ausgewählt haben, legt der WordPress-Block-Editor den Spalten-Block wie eine Gruppe an, in der sich nun automatisch die einzelnen Spalten befinden. Gut zu erkennen anhand der Block-Map in Abbildung 4:
Ebenen des Spalten-Block durch die Block-Map des Block-Editors erkennen

Abbildung 4 – Ebenen des Spalten-Block durch die Block-Map des Block-Editors erkennen

Tipp: Mit einem Klick zwischen die Spalten öffnen Sie schnell die Einstellungen des Spalten-Blocks (Abbildung 5, Punkt 1).
Mit dem zweiten Bedienelement der Block-Werkzeugleiste in Abbildung 5, Punkt 2 ändern Sie die Ausrichtung des Spalten-Blocks. Nutzen Sie für dieses Beispiel die Gesamte Breite, damit den Spalten die komplette Fensterbreite zur Verfügung stehen.
Der Spalten-Block mit der Block-Werkzeugleiste des Block-Editors und zwei Spalten

Abbildung 5 – Der Spalten-Block mit der Block-Werkzeugleiste des Block-Editors und zwei Spalten

Mit Punkt 3 der Abbildung 5 können Sie die vertikale Ausrichtung in oben, mittig oder unten einstellen. Im Spalten-Block befindet sich jeweils ein + in jeder Spalte, über das Sie Blöcke nach Belieben hinzufügen können (Abbildung 5, Punkt 4).
Block-Map des BlockEditors - Ebenen bis zur Überschrift innerhalb eines Spalten-Blocks

Abbildung 6 – Block-Map des BlockEditors – Ebenen bis zur Überschrift innerhalb eines Spalten-Blocks

Auf der in Abbildung 6 gezeigten Block-Map, können Sie gut die Ebenen, einer innerhalb des Spalten-Blocks angelegten Überschrift, erkennen. Über das Klicken auf den Eintrag Spalte (nicht Spalten!), kann die Block-Einstellung „Prozentuale Breite“ verändert werden.

Medien und Text

Der Block-Aufbau des Blocks Medien und Text gleicht dem Spalten-Block. Auf der einen Seite kann ein Medium und auf der anderen Inhalte in Form von Überschriften, Absätzen und vielem mehr ausgewählt werden.
Der Vorteil dieses Blocks ist die schnelle (links oder rechts) Positionierung der Medien, über die Block-Werkzeugleiste (Abbildung 7, Punkt 1).

Block-Werkzeugleiste vom Medien-und-Text-Block des Block-Editors

Abbildung 7 – Block-Werkzeugleiste vom „Medien und Text“-Block des Block-Editor

In den Inhaltsbereich können sämtliche Blocks der Block-Bibliothek eingefügt werden.
In Abbildung 8 befinden wir uns im Inhaltsbereich des Medien und Text-Blocks – auch anhand der Block-Map erkennbar.
Medien-und-Text-Block des Block-Editors und dazugehöriger Block-Map

Abbildung 8 – „Medien-und-Text“-Block des Block-Editors und dazugehöriger Block-Map

Zur Regulierung der „Spalten“-Breiten hilft Ihnen ein blauer Punkt an dem Rand des Medien-Breichs, der an den Inhaltsbereich grenzt (Abbildung 9).
Regulierung der Aufteilung über den blauen Punkt im Medien-und-Text-Block des Block-Editors

Abbildung 9 – Regulierung der Aufteilung über den blauen Punkt im „Medien und Text“-Block des Block-Editors

In den Block-Einstellungen können Sie wählen, wie sich die Inhalte auf Mobilgeräten anzuordnen haben: nebeneinander oder untereinander. Zusätzlich lassen sich die Bilder zuschneiden, um somit die gesamte Spalte zu füllen.
Tipp: Vergessen Sie den Alt-Text für Ihre Medien nicht!
Hinweis: Achten Sie auf eine sinnvolle Auswahl Ihrer Blöcke! Wenn Sie zwei Bilder nebeneinander anzeigen wollen, verwenden Sie lieber die Galerie oder den Spalten-Block.

Cover-Block

Der Cover-Block ermöglicht ein spezielles Design: Nach der Auswahl des Cover-Blocks kann nicht nur eine Hintergrundfarbe, sondern eine Bild- oder Video-Datei als Hintergrund genutzt werden (Abbildung 10):

Cover-Block des Block-Editors

Abbildung 10 – Cover-Block des Block-Editors

Nach Auswahl einer dieser Hintergründe werden die individuellen Block-Einstellungen des Cover-Blocks sichtbar. Nachdem Sie einen Hintergrund ausgewählt haben, wird automatisch ein Absatzblock im Cover-Block angelegt.
Block-Einstellungen des Cover-Blocks bei Auswahl einer Bilddatei im Block-Editor

Abbildung 11 – Block-Einstellungen des Cover-Blocks bei Auswahl einer Bilddatei im Block-Editor

 
Die Block-Einstellungen einer Bilddatei bieten viele Möglichkeiten (Abbildung 11):

  • Ein fixierter Hintergrund ermöglicht einen Scroll-Effekt. Texte in diesem Block schieben sich über das Bild. Für die Einstellung Hintergrund fixiert, kann es sinnvoll sein, die Ausrichtung des Blocks auf Gesamte Breite zu ändern.
  • Eine weitere schöne Funktion bietet die Fokuspunkt-Auswahl. Mit ihrer Hilfe bestimmen Sie, welcher Teil des Bildes — unabhängig von der Bildschirmgröße — immer sichtbar ist. Diese Änderung können Sie über den Kreis oder die prozentuale Positions-Einstellung vornehmen (Abbildung 12):
Fokuspunkt-Auswahl im Cover-Block des WordPress-Block-Editors

Abbildung 12 – Fokuspunkt-Auswahl im Cover-Block des WordPress-Block-Editors

  • Eine Mindesthöhe des Cover-Blocks wird über die Block-Einstellungen oder über den blauen Punkt, innerhalb des Blocks am unteren Rand, festgelegt.
  • Um Texte lesbarer darzustellen, können Sie einen Hintergrund farblich überlagern. Die Overlay-Farbe mitsamt der Deckkraft gibt an, mit welcher Farbe und Durchscheinkraft das Bild eingefärbt werden soll.

Die Block-Einstellungen einer Videodatei ähneln denen der Bilddatei.
Auch diesem Block liegt die Funktionsweise des Gruppe-Blocks zugrunde: Sie können nun weitere Blöcke innerhalb des Cover-Blocks anlegen.
 

turned_in_not,

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.

Menü