Kategorien
Inhalte erstellen Plugins

GenerateBlocks: die fantastischen Vier

GenerateBlocks vom GeneratePress-Entwickler Tom Usborne erweitert den Block-Editor um die vier fantastischen Blöcke Container, Grid, Headline und Buttons, mit denen man sehr flexible Layouts erstellen kann.


GenerateBlocks im Überblick

Zum Kennenlernen von GenerateBlocks gibt es zwei Adressen:

Nach der Installation von GenerateBlocks finden Sie im Block-Editor vier neue Blöcke namens Container, Grid, Headline und Buttons.

GenerateBlocks - die vier Blöcke
Die vier Blöcke von GenerateBlocks auf einen Blick

Mit diesen vier Blöcken erstellen Sie die Layouts, für Inhalte wie Bilder, Galerien oder Videos nehmen Sie weiterhin Ihre bisher verwendeten Lieblingsblöcke.

In diesem Beitrag stelle ich Ihnen GenerateBlocks kurz vor und zeige, wie Sie damit den Header-Abschnitt der Startseite von generateblocks.com erstellen.

GenerateBlocks.com - Beispiel
Dieses Beispiel von generateblocks.com erstellen Sie im Folgenden Schritt für Schritt

1. Der Container-Block

Der Container-Block ist der Kern von GenerateBlocks und umgibt die verschiedenen Abschnitte im Inhaltsbereich einer Webseite. Ein GenerateBlocks-Container kann sehr flexibel gestaltet werden.

Im Beispiel geht der Container über die gesamte Breite der Seite. Er hat oben und unten ein padding von 150px. Der Hintergrund bekommt die Farbe #002130 und hat einen sehr dezenten Farbverlauf. Alles in allem haben Sie danach ein dunkles Rechteck.

GenerateBlocks - Schritt 1 - Der Container-Block
Ein (noch) leerer Container-Block im Editor

Zur Gestaltung eines Containers-Blocks gibt es in den Block-Einstellungen folgende Bereiche:

  • Layout regelt die Breite des Containers
  • Typography für eine detaillierte Schriftgestaltung
  • Spacing für Abstände und Rahmenlinien
  • Colors für Hintergrund-, Text- und Linkfarben
  • Background-Gradient für flexible Farbverläufe
  • Background Image für Hintergrundbilder
  • Advanced zur Auswahl des HTML-Elements (div, section etc.) sowie ID und Klassen
  • Documentation enthält einen Direktlink zur Dokumentation des Blocks.

Auf den Registern Tablet und Mobile können Sie die allgemeinen Einstellungen für Typography und Spacing überschreiben.

Fazit: Der Container-Block von GenerateBlocks ist das, was der Gruppe-Block von WordPress vielleicht mal werden möchte, wenn er groß ist.


2. Der Grid-Block

Ein Grid ist ein Raster, und der Grid-Block ist für das Nebeneinander der Dinge zuständig. Er ähnelt dem Spalten-Block von WordPress, ist aber viel flexibler.

Für das Beispielayout benötigen sie zwei Spalten mit einer Breite von 50% und einem Zwischenraum von 90px. In der Block-Navigation können Sie nach dem Einfügen der Spalten die Struktur des Grid-Blocks erkennen:

  • Der Grid-Block selbst umgibt das mehrspaltige Layout.
  • Jede Spalte bekommt einen eigenen Container-Block.
GenerateBlocks - Schritt 2 - Der Grid-Block
Ein Container mit einem Grid-Block im Editor

Dieser Trick ist genial, denn dadurch haben Sie automatisch für jede einzelne Spalte fast alle oben beschriebenen Gestaltungsmöglichkeiten des Container-Blocks.


3. Der Headline-Block

Der Headline-Block hat es ebenfalls in sich, denn er ist nicht nur für Überschriften gedacht, sondern auch für kurze Texte aller Art.

Die folgende Abbildung zeigt in der linken Spalte oben einen Headline-Block als h1-Überschrift und darunter einen Headline-Block als Absatz.

GenerateBlocks - Schritt 3 - Der Headline-Block
Zwei Headline-Blöcke in der rechten Spalte

4. Der Buttons-Block

Das Web ist ein interaktives Medium, und der Buttons-Block kümmert sich um die Interaktion mit Ihren Besuchern.

GenerateBlocks - Schritt 4 - Der Buttons-Block
Der Buttons-Block mit zwei Buttons

Der Buttons-Block hat in den Einstellungen genau wie der Headline-Block einen Bereich namens Icons, in dem Sie ein SVG-Icon einfügen, positionieren und gestalten können.

Ein paar General Icons und Social Icons werden mitgeliefert, aber falls kein passendes Icon dabei ist, können Sie (unter Beachtung der jeweiligen Lizenzen) SVG-Icons von Font Awesome, Bootstrap Icons und anderen Websites kopieren und dann hier im Eingabefeld Icon SVG HTML einfügen.

Dieses kleine Eingabefeld ist im Alltag wirklich genial und macht SVG-Icons in der Handhabung einfacher als Grafikdateien oder Icon-Fonts.


GenerateBlocks im Video

Das folgende Video zeigt die bisherigen Schritte und noch ein bisschen mehr. Am besten in Ruhe anschauen und zwischendurch immer wieder anhalten und zurückspielen.


Fazit: GenerateBlocks ist genial

Die Blöcke von GenerateBlocks lassen die entsprechenden Standardblöcke von WordPress weit hinter sich:

  • Container ist ein Gruppe-Block, mit dem man wirklich gestalten kann.
  • Grid ist wie der Spalten-Block, nur viel besser zu gestalten.
  • Headline ist wie eine pfiffige Kombination der Blöcke Überschrift und Absatz.
  • Buttons ist viel flexibler als der Buttons-Block von WordPress und hat SVG-Icons.

Vielleicht werden die Standardblöcke von WordPress ja irgendwann mal so gut wie es die GenerateBlocks jetzt schon sind. Bis dahin bilden die fantastischen Vier von GenerateBlocks eine solide, stabile und superschnelle Grundlage für Layouts aller Art, am besten zusammen mit dem Theme GeneratePress aus demselben Hause.

Von Peter Müller

Sie kennen mich vielleicht von meinen Büchern und Videokursen. Meine Spezialität ist es, trockene und komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Website: pmueller.de

2 Antworten auf „GenerateBlocks: die fantastischen Vier“

Und machen Elementor obsolete. Habe mir die Vollversion vom GeneratePress geholt und das Paket überzeugt. Vor allem zu dem Preis, selbst wenn es ein Jahres-Abo wäre, für beliebig viele Sites zum doppelten Preis

Das geht mir ähnlich. GeneratePress hat mir als Theme schon immer gut gefallen. Es diente auch als Basis, als ich um 2016 rum mit Elementor pmueller.de neu erstellt habe. Bei Elementor war ich von der einfachen Bedienung begeistert, aber die Idee, dass ein Pagebuilder den WordPress-Editor *ersetzt*, fand ich nie sympathisch.

GenerateBlocks ist kein 1:1-Ersatz für einen Pagebuilder, aber zum Erstellen von mehrspaltigen Layouts sind sie einfach Klasse, und für den Rest gibt es andere gute Blöcke.

Schreibe einen Kommentar

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