GenerateBlocks Tutorial 5 | Tabs, Accordion, Patterns

GenerateBlocks Tutorial – Teil 5

Erfahren Sie alles über die neusten Blöcke Tabs, Accordion und Query Loop sowie über Patterns, die GenerateBlocks Documentation und die Bewertung des Plugins.

Tabs und Accordion

Im Februar 2023 wurde die Sammlung von GenerateBlocks um zwei weitere Blöcke ergänzt. Wie die Bezeichnung bereits sagt, handelt es sich bei Tabs um einen Block, der es Ihnen ermöglicht, mehrere „Tabellenreiter“ neben oder untereinander anzuordnen. Ein Klick auf Tab A öffnet einen Container, in den Sie Inhalte wie z. B. Textblöcke oder Bilder einfügen können. Genauso verfahren Sie bei Tab B, etc. Alle Tabs stellen eigentlich Buttons dar und können genauso wie diese gestaltet werden. Dasselbe gilt für die Container und deren Inhalte.

Die Funktionsweise des Accordions ist vergleichbar. Jedoch setzt sich dieses nicht aus mehreren klickbaren Buttons zusammen, sondern es besteht nur aus einem Überschrifts-Container. Ein Klick darauf öffnet wiederum einen Container, den Sie mit Inhalt füllen. In den Einstellungen bestimmen Sie, ob das Accordion beim Aufrufen der diesen enthaltenen Seite bereits geöffnet oder geschlossen sein soll. Alle weiteren Einstellungen entsprechen wiederum den zuvor für die einzelnen Blöcke beschriebenen.

Query Loop

Dieser recht neue Block von GenerateBlocks ermöglicht es Ihnen, Ihre neusten Beiträge oder Seiten anzuzeigen. Er bezieht seine Informationen automatisch aus den auf Ihrer Website bereits vorhandenen Inhalten. Einerseits können Sie wieder mit einem Layout aus dem Auswahlfenster beginnen. Andererseits haben Sie aber auch die Option, eine „fertige“ Design-Vorlage (s. unter Patterns) auszuwählen. In jedem Fall legen Sie zuerst in der rechten Seitenleiste fest, ob der Block Seiten oder Beiträge enthalten soll und wie viele angezeigt werden. Wenn Sie mit dem reinen Layout starten, können Sie über das Plus-Symbol in der oberen Bearbeitungsleiste noch eine Seiten-Nummerierung für weitere, nicht angezeigte Seiten/Beiträge hinzufügen.

Im Prinzip setzt sich der Query Loop Block aus einem Raster innerhalb eines Containers zusammen. Dementsprechend gleichen die Grundeinstellungen für den Block denen für den Raster-Block beschriebenen. Der Unterschied besteht darin, dass die einzelnen Spalten bereits mit Inhalt gefüllt sind. Während Sie es hinsichtlich der Funktion(en) bei den vorprogrammierten belassen sollten, können Sie das Layout natürlich noch anpassen. Beispielsweise klicken Sie auf die Überschrift und verändern deren Schriftgröße oder -farbe, etc. Auch können weitere Elemente wie einen Textauszug hinzufügen oder entfernen.

Patterns

Neben dem Query Loop ist auch der Patterns Block noch recht neu. Wenn Sie diesen auswählen, erscheint zuerst ebenfalls wieder nur ein Platzhalter mit einem Open Pattern Library (Vorlagen-Bibliothek öffnen) Button. Nachdem Sie auf diesen geklickt haben, öffnet sich ein neues Fenster, in dem Sie sowohl Zugriff auf die Vorlagen von GenerateBlocks als auch auf Ihre eigenen haben (s. auch unter Local Patterns).

Die Vorlagen von GenerateBlocks unterscheiden sich insofern von den bekannten Design-Vorlagen anderer Anbieter, als dass Sie hier nicht ein komplettes Template bzw. ein vorgefertigtes Layout für die gesamte Seite erhalten, sondern einzelne Blöcke. Diese können Sie ganz nach Ihren Wünschen kombinieren. Jedoch ist es auch möglich, nur einen einzelnen Block in Ihr selbst erstelltes Seiten-Layout zu integrieren. Denkbar wären z. B. ein aufwendiger gestalteter Call-to-Action-Block oder Header. Die Vorlagen sind in folgende Kategorien unterteilt:

• Footer: Fußbereich
• Contact: Block für Kontaktinformationen
• Query Loop (s. oben)
• Testimonial: Kunden-Bewertungen
• Content: Bereiche mit Bildern und Text
• Info Boxes: Hervorhebung spezieller Informationen
• Team: Informationen zu Team-Mitgliedern
• Button: Besonders gestaltete Buttons
• Hero: Header-Bilder mit Text und Button
• Call to Action: Aufforderung an die Besucher, aktiv zu werden
• Table: Tabellen
• Headline: Besonders gestaltete Überschriften
• Pricing Table: Preis-Tabellen / Spalten-Layout
• Wireframe: Reduzierte Darstellung unterschiedlicher Blöcke (zur weiteren Bearbeitung)
• Hover Boxes: Bilder oder Text-Boxen, die sich bei Berührung verändern
• Social Media Icons: Unterschiedliche Darstellung von Icons für die meistgenutzten Sozialen Netzwerke
• Logos: Basis-Layouts zum Einfügen von Logos

Darüber hinaus unterscheiden sich die GenerateBlocks Patterns von den meisten üblichen Vorlagen auch durch Ihre Anpassbarkeit. So können Sie die Platzhalter nicht nur durch Ihre eigenen Bilder und Texte ersetzen. Bei GenerateBlocks sind auch alle Elemente/Blöcke, aus denen sich die ausgewählte Vorlage zusammensetzt veränderbar. Das bedeutet, dass Sie für die einzelnen Blöcke die gleichen Gestaltungsoptionen haben wie für von Ihnen selbst „neu“ erstellte Blöcke.

• Ist Ihnen die Schrift oder der Container zu groß, verkleinern Sie es.
• Gefallen Ihnen die Farben nicht, passen Sie sie an Ihr Farbkonzept an.
• Benötigen Sie keinen Button, löschen Sie ihn.
• Fehlt Ihnen ein Block, fügen Sie ihn an der gewünschten Stelle ein.

Einerseits spart die Verwendung von Patterns nicht nur Zeit, da das Grundkonzept bereits steht und Sie sich keine Gedanken mehr um die Kombination von Blöcken, die Abstände etc. machen müssen. Andererseits dienen sie auch als Inspiration und Ausgangspunkt, so dass am Ende durch Ihre eigene Kreativität vielleicht doch ein vollkommen individuelles „neues“ Layout entsteht.

GenerateBlocks Documentation

Dass GenerateBlocks aus demselben Haus wie das GeneratePress Theme kommt, zeigt sich auch bei der Unterstützung seitens des Entwicklers/Teams. Auf der Website von GenerateBlocks finden Sie unter Support › Documentation ebenfalls recht ausführliche Erläuterungen (Englisch) zu den gängigen Fragen rund um die Nutzung von GenerateBlocks.

• General: Von der Installation bis zur Bezahlung
• Blocks: Beschreibung aller Blöcke
• Components: Erläuterungen zu den Anpassungsoptionen
• Block Editor: Tipps für Nutzer (z. T. für diejenigen mit eher fortgeschrittenen Webdesign-Kenntnissen)

Falls Sie dort nicht die passenden Antworten finden, werfen Sie einen Blick in das gut gepflegte › Community Forum oder nehmen Sie direkt Kontakt mit den Entwicklern auf.

Bewertung und Preise

Obwohl auch schon die Optionen des kostenlosen Plugins relativ umfangreich sind, lohnt sich spätestens, wenn Sie eine „größere“ Website erstellen möchten, die Pro-Version. Darüber hinaus zeigen Sie durch ein Abonnement dem Entwickler Ihre Anerkennung seiner Leistung und gute Arbeit sollte auch angemessen bezahlt werden.

• Variante 1: Personal für 1 Website = 39 US-Dollar pro Jahr
• Variante 2: Plus für 10 Websites = 69 US-Dollar pro Jahr
• Variante 3: Professional für 250 Websites = 99 US-Dollar pro Jahr

Leider gibt es (noch) keine „Lebenslange Lizenz“ z. B. für professionelle Webdesigner wie beim GeneratePress Theme. Für den ersten Kauf erhalten Sie bei allen Produkten eine 30-Tage-Geld-zurück Garantie.

GenerateBlocks – Zusammenfassung

Zu Beginn waren im GenerateBlocks WP-Plugin nur vier Blöcke enthalten – Container, Überschrift, Raster und Buttons. Doch selbst diese waren schon eine überaus nützliche Erweiterung der Anpassungsoptionen, die ein Theme (ohne Page Builder) und der Gutenberg Editor mitbringen. Inzwischen sind mit Bild, Query Loop und Patterns noch drei weitere ebenso nützliche und von den Anwendern der ersten Stunde lange gewünschte Blöcke hinzugekommen.

Genauso wie das GeneratePress Theme, das zunächst recht minimalistisch und ohne große Wow-Effekte daher kommt, wird das Plugin vom selben Entwickler oft noch unterschätzt. Was sich recht unspektakulär liest – „die meisten Blöcke sind doch schon im Gutenberg Editor vorhanden“ – zeigt seine wahren Qualitäten erst auf den zweiten Blick. Es bietet fast unendliche Möglichkeiten, Blöcke individuell zu gestalten und miteinander oder mit Gutenberg Blöcken zu kombinieren. So können Sie ein wirklich „einmaliges“ Layout für einzelne Blöcke, einen Teilbereich Ihrer Website oder komplette Seiten und Beiträge erstellen.

Darüber hinaus ist das Plugin ebenso „sparsam“ und funktionsorientiert programmiert wie das GeneratePress Theme, so dass es im Gegensatz zu vielen anderen Plugins und den Page Buildern keinen negativen Einfluss auf die Ladezeit der Website hat. Auch gibt es keine vom Plugin selbst und von Ihnen unbemerkt verursachten Probleme mit der DSGVO wie das bei Page Buildern häufig der Fall ist. Das Plugin wird regelmäßig mit Updates versorgt und kontinuierlich weiterentwickelt. Da die Lernkurve ist relativ flach ist und die Einstellungen dem vom Gutenberg Editor bekannten Prinzip folgen, finden Sie sich schnell zurecht.

Selbst wenn Ihre ersten eigenen Layouts noch recht einfach gestaltet sein mögen, werden Sie schnell Gefallen an der Arbeit mit den neuen Blöcken finden und immer kreativer werden. Es macht einfach Spaß mit GenerateBlocks zu experimentieren, die eigenen Ideen auch ohne CSS- und HTML-Kenntnisse tatsächlich umzusetzen zu können, sich von den Patterns inspirieren zu lassen oder diese weiter zu entwickeln und sofort das Ergebnis zu sehen.

Fazit

Obwohl die Kombination von GeneratePress Theme und GenerateBlocks optimal ist/wäre, ist das Plugin auch mit jedem anderen WP-Theme kompatibel und stellt eine sinnvolle Ergänzung dar. Ein für alle Eventualitäten programmierter und deshalb überladener Page Builder ist spätestens jetzt überflüssig. Und falls Sie doch noch eine ganz spezielle Funktion vermissen, installieren Sie ein genau für diesen Zweck programmiertes kleines Plugin. So vermeiden Sie unnötigen Ballast und erhalten trotzdem eine individuell gestaltete Website, die professionell aussieht und funktioniert.

PDF: Beitrag herunterladen

Weiterlesen – Anpassung, Blöcke, Patterns, Documentation

GenerateBlocks Tutorial | Teil 1

GenerateBlocks Tutorial | Teil 2

GenerateBlocks Tutorial | Teil 3

GenerateBlocks Tutorial | Teil 4

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