GenerateBlocks Tutorial | 9 geniale Blöcke für WordPress

GenerateBlocks – ein Page Builder durch die Hintertür?

Um eine Website zu gestalten, benötigen Sie zunächst ein Theme, das Sie an Ihre Wünsche anpassen. Ein Theme bildet jedoch nur das „Gerüst“ der gesamten Website (Header, Menü, Footer, Farben, etc.). Für die Startseite verwenden Sie möglicherweise noch ein spezielles Template / eine fertige Vorlage, aber wie sieht es mit den übrigen Seiten und Beiträgen aus?

Zwar bietet der Gutenberg Editor für die Gestaltung der Seiten und Beiträge eine Reihe von Optionen an, die bei vielen einfacheren Websites auch ausreichen. Wenn Sie jedoch mehr Kontrolle über die Gestaltung einzelner Blöcke haben und auch kleine Details individuell anpassen möchten, stoßen Sie unter Umständen bald an die Grenzen von Gutenberg.

Entweder nutzen Sie dann einen Page Builder (ein Baukasten-System) oder Sie installieren ein / mehrere Plugin/s. Bei WordPress stehen diverse Plugins mit unterschiedlichem Funktionsumfang und von unterschiedlicher Qualität zur Auswahl, die dem Editor zusätzliche Anpassungsfelder hinzufügen. Abhängig von der Art des Plugins können dies nur die Optik betreffende erweiterte Anpassungen oder zusätzliche Funktionen für bestimmte Blöcke sein. Kleinere Plugins dienen meistens nur der Erweiterung um eine oder wenige Funktionen.

Je umfangreicher das Plugin jedoch ist und je mehr „voreingestellt“ ist, desto mehr Code bringt es normalerweise jedoch mit. Wenn, unabhängig davon, welche Funktionen Sie tatsächlich einsetzen, immer das gesamte Paket geladen wird, können auch diese Plugins den Code der Website ähnlich aufblähen, wie dies bei einem Page Builder der Fall wäre. Nicht so bei dem noch recht neuen Plugin GenerateBlocks, das sich nicht nur dadurch grundlegend von den herkömmlichen Page Buildern unterscheidet.

Was ist bei GenerateBlocks anders?

Der Entwickler hinter GenerateBlocks verfolgt einen anderen Ansatz. Die Programmierung von Tom Usborne, der auch das GeneratePress Theme entwickelt hat, ist Performance-orientiert und zeichnet sich durch Stabilität und Sicherheit aus. So wird nur so viel CSS wie nötig sowie eine möglichst einfache HTML-Struktur verwendet. Der Gesamt-Code bleibt dementsprechend klein und es werden nur die Code-Zeilen hinzugefügt, die auf Ihrer Website auch tatsächlich benötigt werden. Darüber hinaus ist das Plugin sehr flexibel, responsiv und mit allen modernen Themes kompatibel.

Auf den ersten Blick wirkt GenerateBlocks sehr minimalistisch, denn es werden nur sechs „zusätzliche“ Blöcke und ein Vorlagen Block zur Verfügung gestellt. Doch der Schein trügt. Die vielfältigen Gestaltungsmöglichkeiten, die Ihnen dieses Plugin eröffnet, bemerken Sie spätestens dann, wenn Sie damit arbeiten.

Die ersten Schritte mit GenerateBlocks

Um das Plugin zu installieren, gehen Sie auf Ihr WordPress-Dashboard > Plugins > Installieren und suchen nach GenerateBlocks von Tom Usborne. Nach der Installation aktivieren Sie das kostenlose Plugin. Anschließend erscheint auf der linken Seite Ihres WP-Dashboards unten ein neuer Menüpunkt – GenerateBlocks. Ein Klick darauf öffnet das Dashboard des Plugins mit einer Übersicht über die neuen Blöcke.

Unabhängig davon, ob Sie die kostenlose oder die Pro-Version verwenden, stehen Ihnen alle oben abgebildeten Blöcke zur Verfügung. Lediglich der Patterns-Block ist nur in der Pro-Version enthalten. Außerdem sind die Anpassungsoptionen beim kostenlosen Plugin etwas eingeschränkt:

• Typografie / Typography: Änderung der Schriftart, -größe, etc. für einen bestimmten Block
• Farben / Colors: Anpassung nicht nur der Hintergrund- und Textfarbe, sondern (je nach Block) auch des Rahmens, Hovers, Icons, …
• SVG-Icons: Einfügen von im Plugin enthaltenen oder eigenen Icons beim Überschrift- oder Button-Block
• Abstände / Spacing: Festlegen der Abstände z. B. zwischen Text und Rahmen, zu anderen Blöcken, …
• Hintergründe / Backgrounds: Hinzufügen von Hintergrundbildern und Kontrolle von deren Größe und Position
• sowie von Farbverläufen / Gradients als Hintergrund oder Overlay (bei Bildern).

Darüber hinaus bietet GenerateBlocks Pro zusätzlich:

• Pattern Library: Auswahl an „fertigen“ Vorlagen für Blöcke mit bestimmten Inhalten
• Global Styles: Globale Stile
• Asset Library: Eigene Formen und Icons als Vorlage speichern
• Effects: Hinzufügen von Effekten wie Schatten, Bewegung, …
• Advanced Backgrounds: Erweiterte Einstellung für Hintergründe
• Container Links: Verlinkung des gesamten Containers, nicht nur des Inhalts (Text / Bild)
• Copy+Paste Styles: Kopieren eines Block-Layouts und einsetzen an anderer Stelle der Website.
• Device Visibility: Festlegen der Sichtbarkeit auf Desktops, Tablets oder Smartphones
• Custom Attributes: Modifizierung durch Hinzufügen besonderer Eigenschaften

Da die kostenlose Version bereits eine Reihe von Erweiterungen für die Anpassung der meistgenutzten Blöcke mitbringt, dürfte diese für kleine bis mittlere Websites ausreichen. Dennoch lohnt sich das Abonnement der Pro-Version für alle, die Wert auf eine wirklich individuelle Gestaltung legen oder sich für kompliziertere Block-Anpassungen gerne inspirieren lassen und Unterstützung bei der Umsetzung möchten.

GenerateBlocks Pro

Wie auch beim GeneratePress Premium Theme besuchen Sie die Website von GenerateBlocks, legen ein Konto an und kaufen die von Ihnen gewünschte Pro-Variante (Preise s. Teil 4). Diese laden Sie dann auf Ihren PC herunter, als zip-Datei auf der WordPress Plugins Seite hoch und aktivieren das Plugin. Löschen Sie jedoch das kostenlose Plugin nicht! Nachdem Sie den Lizenzschlüssel, den Sie in Ihrem GeneratePress-Konto kopiert und im GenerateBlocks Dashboard eingesetzt haben, erhalten Sie automatisch alle Updates für das laufende Abonnements-Jahr. Die Lizenz verlängert sich solange, bis Sie sie kündigen. Jedoch erhalten Sie rechtzeitig vor Ablauf des bezahlten Jahres eine Erinnerungs-E-Mail.

Die Erläuterungen in diesem Beitrag beziehen sich zwar auf die Pro-Version, aber natürlich entsprechen die Einstellungen bei den vom kostenlosen Plugin unterstützten Optionen denen der für diePro-Version beschriebenen.

Englische Begriffe

Da insbesondere im Anpassungsmenü (noch) nicht alle Begriffe ins Deutsche übersetzt sind, hier eine Liste der immer wiederkehrenden Bezeichnungen:

GenerateBlocks Dashboard

Der erste Punkt im Menü des GenerateBlocks Dashboards sind die Einstellungen. Hier brauchen Sie an den Voreinstellungen nichts zu verändern. Falls Sie die Pro-Version erworben haben, fügen Sie in das Eingabefeld oben Ihren Lizenzschlüssel (s. oben) ein. Außerdem können Sie optional noch den Erhalt von Beta-Updates aktivieren. Anschließend das Speichern (Save) nicht vergessen. Die drei, am Kopf dieses Dashboards angezeigten Menüpunkte betreffen nur die Pro-Version.

Local Patterns

Hier haben Sie die Möglichkeit, eigene Vorlagen – Local Patterns – für einzelne Blöcke zu erstellen. Dazu klicken Sie auf Add new (Neu hinzufügen), kreieren im Editor das Layout und den Inhalt für einen bestimmten Block und veröffentlichen ihn. Anschließend können Sie diesen Block beliebig einsetzen, indem Sie den Editor für eine Seite oder einen Beitrag öffnen,

1. auf das blaue Plus in der Menüleiste oben links und
2. dann auf Pattern Library (Vorlagen Bibliothek) klicken.
3. Im neuen Fenster öffnen Sie Local Patterns und
4. wählen den gewünschten Block aus.

Global Styles

Prinzipiell ähnelt die Vorgehensweise zum Erstellen von Global Styles der für die lokalen Vorlagen beschriebenen. Sie klicken auf Add new und der Editor öffnet sich.

1. Wählen Sie Buttons, Headline oder Container von GenerateBlocks aus.
2. In der rechten Seitenleiste sehen Sie nun den Menüpunkt Global Styles mit einer ID.
3. Geben Sie der ID einen eindeutigen, auf Ihren Block bezogenen Namen wie z. B. aktions-button oder h2-ueberschriften.
4. Gestalten Sie den Block nach Ihren Vorstellungen.
5. Klicken Sie zum Schluss auf Veröffentlichen.

Mit Global Styles bestimmen Sie „nur“ das Design (Größe, Farben, Abstände, etc.) des jeweiligen Blocks. Nachdem Sie beispielsweise einen Button mit „Global Styles“ erstellt haben, können Sie jeden GenerateBlocks Button genauso einfügen, wie Sie ihn gestaltet haben. Nach der Auswahl z. B. des Button-Blocks auf einer neuen Seite oder in einem Beitrag, erscheint in der rechten Seitenleiste des Editors ein Schalter Use Global Styles. Sobald sie diesen aktivieren, können Sie in einem Dropdown-Menü z. B. Ihren „Aktions-Button“ auswählen.

Die Vorteile sind, dass Sie so einerseits nicht jedes Mal, wenn Sie z. B. diesen Button einsetzen wollen, ihn „neu“ gestalten müssen. Andererseits können Sie das Design aber auch jederzeit unter „Global Styles verändern“, ohne dass es notwendig ist, wiederum jeden Ihrer vorhandenen Buttons einzeln zu korrigieren.

Im Gegensatz zu den Local Patterns, werden durch Global Styles jedoch keine Inhalte (wozu z. B. auch Icons zählen) festgeschrieben. Diese fügen Sie erst beim Einsetzen im Seiten-/Beitrags-Editor ein. Außerdem können Sie diese Blöcke trotzdem noch über das Anpassungsmenü einer Seite / eines Beitrags verändern, wenn das Design im Einzelfall vom Standard abweichen soll.

Asset Library

Auch hier können Sie Ihre eigenen Werke speichern. Da es sich in diesem Fall um SVG (Scalable Vector Graphics = skalierbare Vektor-Grafik)-Dateien handelt, installieren und aktivieren Sie jedoch zunächst das Safe SVG WordPress Plugin. Außerdem sollten Sie Ihre › SVGs optimieren, bevor Sie sie hochladen.

Anschließend erstellen Sie unter Shapes (Formen) und/oder Icons eine neue Gruppe und geben ihr einen Namen. Daraus wird automatisch eine ID gebildet, die Sie später bei der Nutzung der Formen / Icons auf einer Seite verwenden. Darunter erscheint ein Browse Button über den Sie Ihre SVG-Datei/en hochladen. Gleichzeitig erhalten Sie automatisch die SVG HTML.

Während Shapes dynamisch sind und nach jeder Änderung automatisch alle Formen dieser Gruppe innerhalb Ihrer Website aktualisiert werden, sind Icons statisch. Wenn Sie ein Icon ändern möchten, müssen Sie dies dort tun, wo es auf Ihrer Website eingesetzt ist. Eine Änderung in der Asset Library wirkt sich nur auf zukünftige, nicht aber auf bereits eingesetzten Icons aus.

Verwendung von GenerateBlocks

Erstellen Sie eine neue Seite / einen neuen Beitrag oder klicken Sie bei einer bereits vorhandenen Seite / einem Beitrag auf „Bearbeiten“. Anschließend fügen Sie im Gutenberg Editor einen neuen Block hinzu, indem Sie auf das blaue Plus-Symbol links oben in der Kopfleiste des Editors klicken. Nachdem Sie einen bestimmten GenerateBlocks Block häufiger verwendet haben, erscheint er auch in dem kleinen Auswahlfenster, das sich öffnet, wenn Sie das Plus-Zeichen rechts in einer leeren Zeile benutzen (s. Abbildung unten rechte Spalte). Falls nicht, klicken Sie dort auf

1. Alle durchsuchen
2. die linke Seitenleiste klappt aus
3. ganz oben erscheint GenerateBlocks
4. Wählen Sie dort einen der Blöcke aus.

Falls Sie einen bereits bestehenden Gutenberg Block umwandeln wollen, wird Ihnen der passende „neue“ Block auch im Menü der Bearbeitungszeile des alten Blocks (erstes Symbol links) angeboten.

Anpassungsoptionen

Grundsätzlich arbeiten Sie mit den GenerateBlocks Blöcken wie Sie es vom Gutenberg Editor gewohnt sind. Einerseits erscheint oberhalb des aktiven Blocks eine Bearbeitungsleiste mit den üblichen Grundeinstellungen sowie eventuell zusätzlichen Symbolen, die ich in der jeweiligen Beschreibung der Blöcke erläutere. Andererseits öffnet sich rechts die Seitenleiste, in der Sie nicht mehr das Gutenberg-, sondern nun das Menü für den betreffenden GenerateBlocks Block finden.

Zuoberst befinden sich immer drei Symbole für unterschiedliche Geräte-/Bildschirmgrößen, wobei zu Beginn immer die Desktop-Ansicht aktiv ist. Falls Sie Ihre hier gemachten Anpassungen für Tablets und/oder Smartphones verändern möchten, klicken Sie auf das entsprechende Symbol. Der Inhalt der dann geöffneten Seitenleiste entspricht dem beim Desktop. Die jeweiligen Werte für den Desktop sind jedoch etwas angegraut und Sie können sie hier Geräte-spezifisch verändern.

Unter diesen Schaltflächen befindet sich das Menü für die Anpassung der einzelnen Komponenten, dass Sie für die Bearbeitung der Einstellungen aufklappen.

1. Typografie
2. Abstand
3. Farben
4. Backgrounds
5. Icon
6. Formen
7. Dynamic Data
8. Effects

Einerseits variieren die oben genannten Optionen je nach Relevanz für den Block. Andererseits gibt es für manche Blöcke zusätzliche Optionen, die ich ebenfalls in der Beschreibung der einzelnen GenerateBlocks Blöcke erläutere.

Weiterlesen – Anpassung, Blöcke, Patterns, Documentation

GenerateBlocks Tutorial | Teil 2

GenerateBlocks Tutorial | Teil 3

GenerateBlocks Tutorial | Teil 4

GenerateBlocks Tutorial | Teil 5

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