GenerateBlocks Tutorial 4 | Container, Buttons, Raster

GenerateBlocks Tutorial – Teil 4

In diesem Teil meines GenerateBlocks Tutorials werden die Basisblöcke Überschrift, Bild (Image), Buttons und Raster beschrieben. Erfahren Sie auch, inwieweit sie sich von den entsprechenden Gutenberg Blöcken unterscheiden bzw. welche zusätzlichen Möglichkeiten sie bieten.

Die Blöcke von GenerateBlocks

Wenn Sie die Block-Auswahl betrachten, drängt sich Ihnen vielleicht zunächst der Verdacht auf, dass es sich bei GenerateBlocks nur um Duplikate einiger schon bei Gutenberg enthaltener Blöcke (in der Liste unten in Klammern gesetzt) handelt.

• Container (Gruppe)
• Raster / Grid (Spalten)
• Überschrift / Headline (Überschrift H)
• Buttons (Button)
• Image (Bild)
• Query Loop (Neueste Beiträge)

Zwar erfüllen diese im Prinzip denselben Zweck, jedoch haben Sie bei Verwendung der GenerateBlocks-Variante wesentlich mehr Anpassungsmöglichkeiten, ohne dafür CSS- oder HTML-Codes schreiben zu müssen. Neben den in den vorhergehenden Teilen 2 und 3 beschrieben Grundeinstellungen, bringt jeder GenerateBlocks Block noch einige zusätzliche Block-spezifische Optionen mit.

GenerateBlocks Container

Ein Container ist in etwa vergleichbar mit einer Gruppe bei den Gutenberg Blöcken. Während Sie dort jedoch i. d. R. zuerst die Blöcke erstellen, die Sie dann zu einer Gruppe zusammenfassen, wählen Sie bei GenerateBlocks zuerst den Container Block aus. Einerseits können Sie direkt schon das Layout des Containers anpassen. Andererseits ist es oft einfacher, zunächst auf das Plus-Feld zu klicken, um den ersten Block, den der Container enthalten soll, einzufügen.

Um den (äußeren) Container zu gestalten, klicken Sie an den Rand des Containers und es öffnen sich zwei Bearbeitungsleisten. In der Leiste direkt über dem Container finden Sie folgende Optionen (von links nach rechts):

1. Umschalter zum Wechseln des Blocks^[1]
2. Feld zum freien Bewegen des Blocks im Editor mit dem Cursor
3. Pfeile: Verschieben des Containers über oder unter den vorherigen/folgenden Block
4. Breiten-Einstellung: Keine, weite (breiter als voreingestellte Inhaltsbereich der Seite) oder gesamte Breite der Website
5. Position des Inhalts/Textes: Linksbündig, zentriert oder rechtsbündig
6. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
7. Link: Den gesamten Container verlinken^[2]
8. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen.

[1] In diesem Fall dient der Umschalter nicht nur zum Ersetzen eines Blocks durch einen anderen, sondern auch, um zu einer nächsthöheren Instanz zu wechseln. Wenn Sie sich z. B. im Überschriften-Block innerhalb des GenerateBlocks Containers befinden, aber den Container selbst bearbeiten wollen, schalten Sie dort auf die Einstellungen für diesen Container um.
[2] Abgesehen von den üblichen Einstellungen für Links gibt es in diesem Fall noch zwei weitere Optionen. Link Type:

• Hidden Link = fügt einen versteckten Link hinzu, der das gesamte Element abdeckt oder
• Wrapper = verwandelt den Container in ein Link-Element mit HTML5-Code, zerbricht jedoch, wenn Sie z. B. einen anderen Link oder Buttons in den Container integrieren. Im Normalfall ist aber „Wrapper“ die bessere Option.
• Unter Aria Label müssen Sie nicht unbedingt etwas eingeben.

Einstellungen in der Seitenleiste

In der rechten Seitenleiste bestimmen Sie die Darstellung des Containers und seines Inhalts. Zuerst können Sie für den äußeren Container zwischen voller Breite (s. o.) oder eingehaltener Breite (so breit wie der Inhalt der Seite/des Beitrags) wählen. Darüber hinaus gibt es dieselben Optionen aber auch für die innere Breite, d. h. für die in den Container eingefügten Blöcke. Mittels Tag Name versehen Sie den Container, sofern notwendig, mit einem auf die Strukturierung der Seite bezogenen „Namensschild“.

• div: Voreingestellt und muss normalerweise nicht geändert werden
• section: Abschnitt
• header: im Kopfbereich
• footer: am Fuß der Seite
• aside: nebensächlicher Inhalt

Die Anpassungsoptionen der nächsten Menüpunkte wurde bereits unter Typografie, Abstand, Backgrounds, Dynamic Data und Effects beschriebenen. Hinsichtlich der Farbeinstellungen können Sie jeweils eine eigene Farbe für den Hintergrund des Containers, die darin enthaltenen Texte und/oder Links sowie den Rahmen wählen. Mittels der jeweils ersten Schaltfläche bestimmen Sie die Farbe im Normalzustand, mittels der zweiten die Hover-Farbe.

Meistens ist es jedoch sinnvoller die Text- oder Link-Farbe in den Einstellungen der jeweiligen Blöcke anzupassen. Unter Dynamic Data können Sie ein sich automatisch anpassendes Hintergrundbild (z. B. das Featured Image eines Beitrags) einsetzen. Im Gegensatz zu den anderen Blöcken können Sie das Layout eines Container auch mit Formen (s. Teil 3) gestalten.

GenerateBlocks Überschrift

Die Bezeichnung Überschrift für diesen Block ist etwas missverständlich. Denn im Gegensatz zum Überschrift-Block bei Gutenberg können Sie damit nicht nur die Überschriften H1 bis H6 erstellen, sondern auch einen normalen „Text“-Absatz P sowie ein div-Element. Das Auswahl-Menü öffnet sich, wenn Sie auf das vierte Symbol (als H2 voreingestellt) in der Bearbeitungsleiste über dem Block klicken. Die weiteren Optionen in dieser Leiste sind (von links nach rechts):

1. Umschalter zum Wechseln des Blocks
2. Feld zum freien Bewegen des Blocks im Editor mit dem Cursor
3. Pfeile: Verschieben des Containers über oder unter den vorherigen/folgenden Block
4. Position des Textes: Linksbündig, zentriert oder rechtsbündig
5. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
6. Fett (B) oder Kursiv (I)
7. Link erstellen
8. Dropdown-Menü für die spezielle Gestaltung einzelnen Textteile
9. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen.

Die Anpassungsoptionen in der rechten Seitenleiste entsprechen den in Teil 2 und 3 beschriebenen. Allerdings können Sie bei diesem Block ein Icon verwenden, jedoch keine Formen hinzufügen.

GenerateBlocks Bild

Nachdem Sie auf GenerateBlocks Image geklickt haben, öffnet sich wie bei dem Gutenberg Bild-Block das Fenster zur Auswahl eines Bilds. Entweder Sie laden es direkt von Ihrem PC hoch, wählen eines aus Ihrer WP-Mediathek aus oder geben eine Bild-URL ein. In der Bearbeitungsleiste oberhalb des Bilds haben Sie folgende Optionen (von links nach rechts):

1. Umschalter zum Wechseln des Blocks
2. Position des Bilds: Linksbündig, zentriert oder rechtsbündig
3. Capture (CC): Hinzufügen einer Bildunterschrift
4. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
5. Verlinkung des Bilds
6. Erstzen des angezeigten Bilds durch ein anderes
7. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen.

Der wichtigste Menüpunkt in der rechten Seitenleiste ist Einstellungen. Als erstes geben Sie die Breite und Höhe, in der das Bild angezeigt werden soll (nicht die tatsächliche Größe!) in px ein. Im Dropdown-Menü Object fit (Einpassen) haben sie die Wahl zwischen

• Vererbt: folgt der Basis-Programmierung Ihres Themes für Bilder.
• Cover: Das Bild füllt die vorgegebene Fläche aus und wird ggf. an den Rändern abgeschnitten.
• Contain: Die Größe des Bilds passt sich an die vorgegebenen Maße an.
• Fill: Um die Fläche auszufüllen, wird das Bild ggf. gestreckt oder gequetscht.
• None: Die Größe des Bilds verändert sich nicht.

In das Feld Alt text (alternative text) geben Sie eine kurze Beschreibung dessen, was auf dem Bild zu sehen ist, ein. Außerdem sollten Sie auch noch das Schlüsselwort für den Beitrag, der das Bild enthält, angeben. Ein Title attribute wie z. B. featured image können Sie eintragen, müssen es aber nicht. Darüber hinaus haben Sie noch die Möglichkeit die Abstände anzupassen, einen (farbigen) Rahmen, dynamische Daten und/oder Effekte hinzufügen.

Buttons

Während die Optionen für den Bild-Block bei Gutenberg nur wenig von dem von GenerateBlocks abweichen, ist der Unterschied zwischen Gutenberg und GenerateBlocks Buttons deutlich größer. Das Design der „normalen“ Buttons legen Sie im Customizer fest. Wenn Sie einzelne Buttons davon abweichend zu gestalten wollen, geht dies, abgesehen von der Farbe, Schriftgröße und dem Radius, nur mit einem zusätzlichen HTML-Code oder mittels einer, im stylesheet (style.ccs) Ihres (Child-)Themes selbst definierten CSS-Klasse.

Hingegen können Sie bei GenerateBlocks die Anpassungen für jeden Button direkt im Editor vornehmen. Nach dem Auswählen öffnet sich zunächst der „Button-Block“, der einen Platzhalter-Button enthält. Zu Erkennen ist er an dem „Zwei-Buttons-Symbol“ links in der Bearbeitungsleiste über dem Block. Die Optionen dieser Leiste beziehen sich immer auf den gesamten Block und nicht auf den/die einzelnen Button/s.

1. Umschalter zum Wechseln des Blocks
2. Feld zum freien Bewegen des Blocks im Editor mit dem Cursor
3. Pfeile: Verschieben des Button-Blocks über oder unter den vorherigen/folgenden Block
4. Position des Button-Blocks: Linksbündig, zentriert oder rechtsbündig
5. Capture (CC): Hinzufügen einer Bildunterschrift
6. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
7. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen

Dasselbe gilt für die Einstellungen in der rechten Seitenleiste. Dort können Sie die Abstände des Blocks zu den Außenrändern bzw. zum darüber-/darunter liegenden Block einstellen. Falls Ihr Block mehrere Buttons enthält und diese untereinander erscheinen sein sollen, aktivieren Sie den Schalter vor Vertikal anordnen. Nach der Aktivierung des Schalters Horizontalen Raum ausfüllen passt sich die Bereite eines Buttons automatisch der gesamten Breite des Inhalts der Seite bzw. des Button-Blocks an. Diese Anpassungen können Sie zu Beginn oder später nach der Gestaltung des/der Buttons vornehmen und jederzeit korrigieren.

Buttons anpassen

Um jetzt den/die Buttons selbst anzupassen, klicken Sie auf den Platzhalter. Daraufhin erscheint oberhalb eine neue Bearbeitungsleiste mit folgenden Optionen (von links nach rechts):

1. Umschalter, um zum Buttons-Block zurückzukehren
2. Symbol für einen Einzel-Button
3. Feld zum freien Bewegen des Blocks im Editor mit dem Cursor
4. Pfeile: Verschieben des Button-Blocks über oder unter den vorherigen/folgenden Block
5. Plus-Zeichen: Duplizieren des (angepassten) Buttons, der dann direkt neben dem Ausgangs-Button erscheint
6. Verlinkung
7. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
8. Fett (B) oder Kursiv (I)
9. Link erstellen
10. Dropdown-Menü für die spezielle Gestaltung der Beschriftung
11. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen

Auch das Menü in der rechten Seitenleiste hat sich verändert und ermöglicht Ihnen die Detail-Anpassung des einzelnen Buttons. Neben den fast bei jedem Block angebotenen Einstellungen Typografie, Abstand, Farben, Dynamic Data und Effects können Sie der Beschriftung des Buttons auch ein Icon hinzufügen und statt einer einheitlichen Hintergrundfarbe einen Farbverlauf kreieren. Theoretisch ist es möglich, auch jeden Button in einer Reihe, selbst wenn er zunächst ein Duplikat des davor befindlichen ist, anders zu gestalten. Ob das sinnvoll ist, ist eine andere Frage.

Raster

Nach der Auswahl eines Raster- (Grid-) Blocks erscheint wie beim Bild-Block zunächst wieder ein Auswahlfenster. Dort können Sie auf eines der zwölf unterschiedlichen Layouts klicken, um die Grundstruktur festzulegen. Falls Sie sich noch nicht sicher sind, wie viele Spalten Sie benötigen, haben Sie auch die Möglichkeit, zunächst mit einer zu starten. Zu Beginn zeigt die obere Bearbeitungsleiste nur das Raster-Symbol, das Feld zum freien Bewegen des Blocks, die Pfeile, ein Plus-Zeichen und und das übliche Gutenberg Drei-Punkte-Menü.

Die Anpassungen in der rechten Seitenleiste beziehen sich in diesem Fall auf den gesamten Spalten-Block. So können Sie die Lücke zwischen den einzelnen Spalten (Horizontale Lücke) sowie den Abstand zur nächsten Spaltenreihe (Vertikale Lücke) einstellen. Da sich die Spalten auf kleineren Bildschirmen automatisch untereinander anordnen, bestimmt die „Vertikale Lücke“ auch den Abstand zur darunter angeordneten Einzelspalte. Entweder verwenden Sie einen der vorgegebenen Werte oder Sie geben einen individuellen Wert ein, indem Sie auf das Symbol rechts in dem betreffenden Feld klicken. Außerdem können Sie noch die vertikale und horizontale Ausrichtung einstellen.

• Vertikal: Standard = alle Spalten haben unabhängig von der Länge des Inhalts die gleiche Höhe.
• Die folgenden Einstellungen verändern die Höhe der Spalte abhängig von deren Inhalt.
  • Oben = Der obere Rand liegt auf einer Linie mit den anderen, die Spalte endet jedoch oberhalb oder unterhalb der anderen;
  • Zentriert = Die Spalte beginnt auf mittlerer Höhe und wird je nach Inhalt gleichmäßig nach oben und unten verlängert;
  • Unten: Wie „Oben“, nur dass der untere Rand auf einer Linie mit den anderen liegt und nach oben wächst.
• Horizontal: Falls die Spalte/n schmaler als der Raster-Block sind, können Sie sie links- / rechtsbündig oder zentriert anordnen.

Anschließend klicken Sie in eine Spalte des Rasters. Die obere Bearbeitungsleiste zeigt nun folgende Option (von links nach rechts):

1. Umschalter zum Wechseln des Blocks
2. Symbol für den Spalten-Container
3. Feld zum freien Bewegen des Blocks im Editor mit dem Cursor
4. Pfeile: Verschieben des Button-Blocks über oder unter den vorherigen/folgenden Block
5. Plus-Zeichen: Hinzufügen einer neuen (gleichgestalteten) Spalte rechts neben der aktuell bearbeiteten (z. B. wenn Sie nur mit einer Spalte begonnen haben).
6. Position des Button-Blocks: Linksbündig, zentriert oder rechtsbündig
7. Styles: Kopieren des Stils des Containers, einen vorher erstellten Stil verwenden (s. Global Styles) oder den Stil löschen
8. Verlinkung des Spalten-Containers
9. Drei-Punkte-Menü: Die üblichen Optionen für Blöcke im Gutenberg Editor vom Kopieren bis zum Löschen

Gestaltung der Spalten

Die Gestaltung einer einzelnen Spalte nehmen Sie in der rechten Seitenleiste vor. Unter Layout stellen Sie zunächst die Breite der aktiven Spalte ein. Dazu können Sie auf einen vorgegebenen Wert klicken, die Breite mittels des Schiebers anpassen oder einen eigenen Wert eingeben. Beachten Sie, dass die Gesamtsumme aller Spaltenbreiten immer kleiner/gleich 100 % sein sollte.

Unter Flex können Sie es bei den Voreinstellungen belassen. Auch die Vertikale Ausrichtung verändern Sie nur, wenn Sie diese nicht bereits zuvor festgelegt haben. Anders sieht es bei Vertikale Lücke entfernen aus. Wenn Sie zuvor für den Raster-Block einen Abstand zur folgenden Spaltenreihe eingegeben haben, können Sie ihn hier z. B. für den letzten Spalten-Container entfernen.

Abgesehen davon, dass Sie für den Spalten-Container kein Icon verwenden können, entsprechen alle weiteren Menüpunkte zur Anpassung der einzelnen Spalte/n wieder den bereits für die anderen GenerateBlocks Blöcke beschriebenen.

PDF: Beitrag herunterladen

Weiterlesen – Anpassung, Blöcke, Patterns, Documentation

GenerateBlocks Tutorial | Teil 1

GenerateBlocks Tutorial | Teil 2

GenerateBlocks Tutorial | Teil 3

GenerateBlocks Tutorial | Teil 5

Abbildungen © eb, GenerateBlocks, EDGE22 Studios LTD. | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.