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

GenerateBlocks – ein Page Builder durch die Hintertür?

Um eine Website zu gestalten, benötigst du zunächst ein Theme, das du an deine Wünsche anpasst. Ein Theme bildet jedoch nur das „Gerüst“ der gesamten Website (Header, Menü, Footer, Farben, etc.). Für die Startseite verwendest du 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 du jedoch mehr Kontrolle über die Gestaltung einzelner Blöcke haben und auch kleine Details individuell anpassen möchtest, stößt du unter Umständen bald an die Grenzen von Gutenberg.

Entweder nutzt du dann einen Page Builder (ein Baukasten-System) oder du installierst ein / mehrere Plugin/s. Bei WordPress stehen diverse Plug-ins 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 Plug-ins dienen meistens nur der Erweiterung um eine oder wenige Funktionen.

Je umfangreicher das Plug-in jedoch ist und je mehr „voreingestellt“ ist, desto mehr Code bringt es normalerweise jedoch mit. Wenn, unabhängig davon, welche Funktionen du tatsächlich einsetzt, immer das gesamte Paket geladen wird, können auch diese Plug-ins 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 deiner 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 Basis- plus zwei „zusätzliche“ Blöcke und ein Vorlagen Block zur Verfügung gestellt. Doch der Schein trügt. Die vielfältigen Gestaltungsmöglichkeiten, die dir dieses Plugin eröffnet, bemerkst du spätestens dann, wenn du damit arbeitest.

Die ersten Schritte mit GenerateBlocks

Um das Plugin zu installieren, gehst du auf dein WordPress-Dashboard > Plugins > Installieren und suchst nach GenerateBlocks von Tom Usborne. Nach der Installation aktivierst du das kostenlose Plugin. Anschließend erscheint auf der linken Seite deines 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 du die kostenlose oder die Pro-Version verwendest, stehen dir alle oben abgebildeten Blöcke zur Verfügung. Lediglich zwei Zusatzblöcke sowie der Patterns-Block sind 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).

Zusätzlich umfasst GenerateBlocks Pro:

• 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 besuchst du die Website von GenerateBlocks, legst ein Konto an und bezahlst die von dir gewünschte Pro-Variante (Preise s. Teil 4). Diese lädst du dann auf deinen PC herunter, als zip-Datei auf der WordPress Plugins Seite hoch und aktivierst das Plugin. Lösche jedoch anschließend das kostenlose Plugin nicht!

Nachdem du den Lizenzschlüssel, den du in deinem GenerateBlocks-Konto kopiert und im GenerateBlocks Dashboard eingesetzt hast, erhältst du automatisch alle Updates für das laufende Abonnements-Jahr. Die Lizenz verlängert sich solange, bis du sie kündigst. Jedoch wirst du rechtzeitig vor Ablauf des bezahlten Jahres per Erinnerungs-E-Mail benachrichtigt.

› GenerateBlocks

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 die Pro-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 brauchst du an den Voreinstellungen nichts zu verändern.

Falls du die Pro-Version erworben hast, fügst du in das Eingabefeld oben deinen Lizenzschlüssel ein. Außerdem kannst du optional noch den Erhalt von Beta-Updates aktivieren. Darüber hinaus wäre es durchaus sinnvoll, das externe Laden von Google Fonts (Disable Google Fonts) zu unterbinden (s. Abbildung). Diese werden dann auch in der Fonts Auswahl nicht mehr angezeigt. Anschließend das Speichern (Save) nicht vergessen. Die drei, am Kopf dieses Dashboards angezeigten Menüpunkte betreffen nur die Pro-Version.

Local Patterns

Hier hast du die Möglichkeit, eigene Vorlagen – Local Patterns – für einzelne Blöcke zu erstellen. Dazu klickst du auf Add new (Neu hinzufügen), kreierst im Editor das Layout und den Inhalt für einen bestimmten Block und veröffentlichst ihn. Anschließend kannst du diesen Block beliebig einsetzen, indem du den Editor für eine Seite oder einen Beitrag öffnest,

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

Lokale Vorlagen aktualisieren sich nicht automatisch
Wenn du an der Original-Vorlage etwas veränderst, werden diese Änderungen nicht automatisch von den, mittels dieser Vorlage auf deinen Seiten / in deinen Beiträgen zuvor eingefügten, Blöcken übernommen. Sie müssen jeweils einzeln korrigiert werden.

Global Styles

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

1. Wähle Buttons, Headline oder Container von GenerateBlocks aus.
2. In der rechten Seitenleiste siehst du nun den Menüpunkt Global Styles mit einer ID.
3. Gib der ID einen eindeutigen, auf deinen Block bezogenen Namen wie z. B. aktions-button oder h2-ueberschriften.
4. Gestalte den Block nach deinen Vorstellungen.
5. Klicke zum Schluss auf Veröffentlichen.

Mit Global Styles bestimmst du „nur“ das Design (Größe, Farben, Abstände, etc.) des jeweiligen Blocks. Nachdem du beispielsweise einen Button mit „Global Styles“ erstellt hast, kannst du jeden GenerateBlocks Button genauso einfügen, wie du ihn gestaltet hast. 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 du diesen aktivierst, kannst du in einem Dropdown-Menü z. B. deinen „Aktions-Button“ auswählen.

Die Vorteile sind, dass du so einerseits nicht jedes Mal, wenn du z. B. diesen Button einsetzen willst, ihn „neu“ gestalten musst. Andererseits kannst du das Design aber auch jederzeit unter „Global Styles verändern“, ohne dass es notwendig ist, wiederum jeden deiner 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ügst du erst beim Einsetzen im Seiten-/Beitrags-Editor ein. Außerdem kannst du diese Blöcke trotzdem noch über das Anpassungsmenü einer Seite / eines Beitrags verändern, wenn das Design im Einzelfall vom zuvor festgelegten Standard abweichen soll.

Global Styles nicht kopieren, …
… um sie auf einer Seite einzufügen, sondern starte immer mit einem „leeren“ Block und verfahre wie oben beschrieben. Übertreibe es nicht, in dem du für jede Eventualität einen eigenen Stil erstellst. Beschränke dich auf wenige Blöcke, die entweder sehr aufwendig gestaltet sind oder die du besonders häufig einsetzen möchtest.

Asset Library

Auch hier kannst du deine eigenen Werke speichern. Da es sich in diesem Fall um SVG (Scalable Vector Graphics = skalierbare Vektor-Grafik)-Dateien handelt, installiere und aktiviere jedoch zunächst das Safe SVG WordPress Plugin. Außerdem solltest du deine › SVGs optimieren, bevor du sie hoch lädst.

› Safe SVG WP-Plugin

Anschließend erstellest du unter Shapes (Formen) und/oder Icons eine neue Gruppe und gibst ihr einen Namen. Daraus wird automatisch eine ID gebildet, die du später bei der Nutzung der Formen / Icons auf einer Seite verwendest. Darunter erscheint ein Browse Button über den du deine SVG-Datei/en hochlädst. Gleichzeitig erhältst du automatisch die SVG HTML.

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

Einbinden von SVG-Dateien auf Websites
Es birgt immer ein erhöhtes Sicherheitsrisiko. Deshalb solltest du dir überlegen, ob du diese Dateien wirklich benötigst. Wenn ja, nutze auf jeden Fall das SVG Save Plugin. Zumindest wenn du kein Profi bist, rate ich von der Verwendung von SVGs und der Nutzung der Asset Library eher ab.

Verwendung von GenerateBlocks

Erstelle eine neue Seite / einen neuen Beitrag oder klicke bei einer bereits vorhandenen Seite / einem Beitrag auf „Bearbeiten“. Anschließend fügst du im Gutenberg Editor einen neuen Block hinzu, indem du auf das blaue Plus-Symbol links oben in der Kopfleiste des Editors klickst. Nachdem du einen bestimmten GenerateBlocks Block häufiger verwendet hast, erscheint er auch in dem kleinen Auswahlfenster, das sich öffnet, wenn du das Plus-Zeichen rechts in einer leeren Zeile benutzt. Falls nicht, klicke dort auf

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

Symbole der Blöcke von GenerateBlocks
Sie unterscheiden sich in der Block-Asuwahl des Editors von denen für Gutenberg Blöcke dadurch, dass ihre Farbe nicht schwarz, sondern blau ist (s. auch Abbildung unter GenerateBlocks Pro, links oben).

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

Anpassungsoptionen

Grundsätzlich arbeitest du mit den GenerateBlocks Blöcken wie du es vom Gutenberg Editor gewohnt bist. 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 du nicht mehr das Gutenberg-, sondern nun das Menü für den betreffenden GenerateBlocks Block findest.

Zuoberst befinden sich immer drei Symbole für unterschiedliche Geräte-/Bildschirmgrößen, wobei zu Beginn immer die Desktop-Ansicht aktiv ist. Falls du deine hier gemachten Anpassungen für Tablets und/oder Smartphones verändern möchtest, klickst du 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 du kannst sie hier Geräte-spezifisch verändern.

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

1. Layout
2. Sizing (Größe)
3. Abstand
4. Borders (Rahmen)
5. Typografie
6. Farben
7. Backgrounds
8. Icon
9. Formen
10. Dynamic Data
11. Effects

Je nach Relevanz für den betreffenden Block werden nicht alle oben genannten Optionen angezeigt. Näheres dazu erläutere ich in den Beschreibungen der einzelnen GenerateBlocks Blöcke.

› GenerateBlocks

Weitere GenerateBlocks Tutorials

GenerateBlocks Tutorial | Teil 2 – Gestaltung der Blöcke

GenerateBlocks Tutorial | Teil 3 – Formen, Dynamic Data, Effects

GenerateBlocks Tutorial | Teil 4 – Container, Buttons, Raster

GenerateBlocks Tutorial | Teil 5 – Tabs, Accordion, Abfrage-Loop

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.