Review GenerateBlocks – atemberaubend schnell – Die Page Builder Alternative!
Heute schauen wir uns im Review GenerateBlocks ein wenig genauer an. Dies erweitert deine WordPress Seite um wirklich praktische, schnelle und geniale Block Funktionen die man sonst nur aus sogenannten Page Buildern her kennt. Nur leider kommen diese meistens mit sehr viel aufgeblähtem Code daher und sind alles andere als “Light”.
DarkWolfCave.de
Ich zeige dir ob GenerateBlocks besser optimiert ist, was es alles kann, wie du es benutzt und ob es wirklich so schnell und unkompliziert ist.
Was ist GenerateBlocks eigentlich?
Überblick einiger Funktionen von GenerateBlocks in einem Speedvideo
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenGenerateBlocks ist ein WordPress-Plugin, das es dir ermöglicht, auf einfache und schnelle Weise individuelle Inhalte und Layouts für deine Webseite zu erstellen, ohne dass du dabei tiefgehende Programmierkenntnisse benötigst. Das Plugin bietet ein visuelles Drag-and-Drop-Interface, mit dem du verschiedene Designelemente wie Überschriften, Texte, Bilder, Buttons und vieles mehr einfach kombinieren und anpassen kannst, um einzigartige und ansprechende Webseiten zu erstellen.
Der Hauptvorteil von GenerateBlocks besteht darin, dass es dir Zeit und Mühe spart. Da du keine umfassenden Kenntnisse in HTML oder CSS benötigst, kannst du schnell und einfach verschiedene Layouts und Inhalte für deine Webseite erstellen, ohne dass du Stunden damit verbringen musst, diese zu programmieren. Das Plugin ist auch sehr anpassungsfähig und flexibel, so dass du deine Designs genau so gestalten kannst, wie du es möchtest.
Ein weiterer Vorteil von GenerateBlocks ist, dass es dir ermöglicht, lokale Vorlagen deiner Blöcke zu erstellen. Wenn du also eine bestimmte Layout- oder Inhaltsstruktur gefunden hast, die du auf verschiedenen Seiten deiner Webseite verwenden möchtest, kannst du diese einfach als lokale Vorlage (local patterns) speichern und auf anderen Seiten einfügen. Das spart Zeit und stellt sicher, dass das Design deiner Webseite konsistent bleibt.
GenerateBlocks ist auch sehr benutzerfreundlich. Das Plugin ist einfach zu installieren und zu verwenden, so dass du sofort loslegen kannst, ohne dich mit einer steilen Lernkurve herumschlagen zu müssen. Es ist auch sehr flexibel und passt sich gut an verschiedene Arten von Webseiten an, von einfachen Blogs bis hin zu komplexen E-Commerce-Websites.
Diese ganzen Vorteile kennt man zwar auch schon von Page Buildern, diese bringen aber noch tonnenweise SourceCode mit, den man aber teilweise gar nicht benötigt, diese allerdings trotzdem geladen werden und daher deine Seite langsamer werden lassen kann.
Zusammenfassend bietet GenerateBlocks eine benutzerfreundliche und effiziente Möglichkeit, individuelle Inhalte und Layouts für deine Webseite zu erstellen, ohne dass du umfassende Programmierkenntnisse benötigst. Mit seinen flexiblen und anpassungsfähigen Funktionen, seiner Zeitersparnis und der Möglichkeit, lokale Vorlagen deiner Blöcke zu erstellen, ist GenerateBlocks ein leistungsstarkes Werkzeug für die Gestaltung deiner Webseite ohne diese unnötig aufzublähen und zu verlangsamen.
Wie benutzt man GenerateBlocks?
Um GenerateBlocks zu nutzen, musst du es zunächst auf deiner WordPress-Website installieren und aktivieren. Das geht genauso einfach wie alle anderen PlugIns direkt über WordPress. Klicke auf PlugIns -> Installieren und suche dort nach GenerateBlocks. Dann einfach auf “jetzt installieren” und danach “aktivieren” klicken.
Jetzt kannst du mit der Erstellung deiner eigenen Inhalte direkt beginnen, indem du entweder eine neue Seite oder einen neuen Beitrag erstellst. Im Gutenberg-Editor siehst du dann auch schon die neuen Blöcke.
Du kannst nun ein neues Block-Element hinzufügen, indem du es einfach aus der linken Seitenleiste auswählst und es in den Editor ziehst. Dann kannst du das Element anpassen, indem du seine Einstellungen bearbeitest und es so gestaltest, wie es deinen Vorstellungen entspricht.
In der kostenlosen Version von GenerateBlocks stehen dir nicht alle Blöcke und Funktionen zur Verfügung. Außerdem kannst du den Copyright Hinweis im Footer nicht entfernen. Um ein Gefühl dafür zu bekommen, ob dir die Möglichkeiten von GenerateBlocks zusagen, reicht diese aber vollkommen aus.
Und ja, du kannst auch mit der kostenlosen Version super Webseiten erstellen. Nur wirst du schnell feststellen, dass es sich lohnen wird auf die Pro Version umzusteigen. Vor allem weil diese auch wirklich vom Preis her erschwinglich ist.
GenerateBlocks – kostenlose Features
Geschwindigkeit
Erstelle blitzschnelle Webseiten mit sauberem HTML5-Code, dynamischem CSS und ohne Code-Abhängigkeiten und unnötigen aufgeblähten Code
Einfache Handhabung
GenerateBlocks bietet eine intuitive Benutzeroberfläche und eine Drag-and-Drop-Funktion, mit der du schnell und einfach benutzerdefinierte Layouts und Inhalte für deine Webseite erstellen kannst.
Flexibel
Du kannst bereits mit wenigen Blöcken fast jedes Layout erstellen, jeden Inhalt gestalten und jedes Design produzieren.
Entfalte deine Kreativität!
Customizer
Du kannst grundsätzliche Layout- und Farbeinstellungen direkt und schnell über den Customizer vornehmen
GenerateBlocks – Pro Features
Deutlich umfangreicher kommt da schon die Pro Version daher. Die zusätzlichen Features und Blöcke bieten dir nicht nur mehr Vielfalt, sondern erleichtern dir auch deine Arbeit enorm.
Um mal ein paar der Vorteile der GenerateBlocks Pro Version zu nennen:
Mehr Blöcke: Die Pro-Version enthält mehr vorgefertigte Blöcke, die du in deine Webseiten einfügen kannst. Dadurch sparst du Zeit und kannst schnell ansprechende Layouts erstellen.
Mehr Vorlagen: Du kannst auf über 200 professionell erstellte Vorlagen zugreifen und diese mit nur wenigen Klicks in deine Inhalte einfügen. Diese lassen sich sogar leicht an deine Bedürfnisse anpassen, oder du erstellst komplett Neue und speicherst diese in deiner eigenen lokalen Vorlagenbibliothek! Einen Überblick kannst du dir auf der PatternLibrary Seite verschaffen.
Animations- und Interaktionseffekte: Die Pro-Version bietet eine Vielzahl von Animationen und Interaktionseffekten für deine Blöcke, die deine Webseiten dynamischer und ansprechender machen. Du kannst zum Beispiel Hovern, Scroll-Trigger und mehr einstellen.
WooCommerce-Integration: Wenn du eine E-Commerce-Webseite mit WooCommerce betreibst, bietet dir die Pro-Version zusätzliche Blöcke und Integrationen für ein besseres Einkaufserlebnis.
Priorisierter Support: Als Pro-Version-Benutzer erhältst du priorisierten Support, falls du Probleme oder Fragen hast. Du hast Zugang zu einem dedizierten Support-Team, das dir bei allen Fragen und Anliegen helfen kann. Es ist zwar anders aufgebaut wie bei GeneratePress, aber auch hier bekommst du sehr schnell Hilfe und Anregungen. Was vielleicht etwas schwierig für den einen oder anderen sein könnte: es ist komplett auf englisch. Aber auch hier kann man ja auf diverse Übersetzer zurückgreifen 😉
Erhöhte Produktivität: GenerateBlocks Pro bietet eine schnellere und effizientere Möglichkeit, Webseitenlayouts zu erstellen. Mit der Pro-Version kannst du durch die Integration mit dem WordPress-Editor, dem Hinzufügen von globalen Einstellungen und der Verwendung von Vorlagenlayouts Zeit sparen und deine Produktivität steigern.
Pattern Library
Mit der Pro Version erhältst du Zugriff auf über 200 professionelle Vorlagen, auf die du direkt im Editor zugreifen kannst. Spare mit ein paar Klicks stundenlange Entwicklungszeit!
Global Styles
Mit den global Styles kannst du dir Vorlagen, zum Beispiel von häufig verwendeten Buttons, erstellen und diese auf deiner Webseite global benutzen.
So kannst du schnell und einfach optische Änderungen global durchführen
Akkordeon Block
Du kannst mit der leistungsstarken Akkordeon-Block-Variante auch wunderbar und einfach FAQ-Bereiche erstellen
Asset Library
Du magst SVG Icons und benutzt diese oft? Mit dieser Bibliothek fügst du deine Icons lokal hinzu und kannst diese dann direkt im Editor auswählen.
Block(Style) kopieren
Spare dir viel Zeit und kopiere/dupliziere komplette Blöcke sowie Styles und füge sie überall schnell wieder ein
Sichtbarkeit der Blöcke
Du kannst die Blöcke ganz einfach auf Desktop-, Tablet- und Mobilgeräten aus- oder einblenden
Kaufempfehlung der Pro Version
Meine persönliche Empfehlung:
Generate Blocks Pro
Fazit: Kaufempfehlung!
Über 200 Vorlagen – Einer der besten Vorteile der Pro Version sind die über 200 professionellen Vorlagen in der Pattern Library, auf die du direkt aus dem Editor zugreifen kannst. Hier kommen auch immer wieder weitere dazu.
Mehr Blöcke – durch noch mehr Blöcke kannst du deine Webseite noch kreativer gestalten
Ein- und Ausblenden von Blöcken – Du kannst Blöcke so einstellen, dass diese auf Tablett und Mobile Geräte nicht angezeigt werden oder nur auf diesen. Damit bist du noch flexibler bei der Gestaltung für Desktop und Mobil Ansichten
Block Style kopieren – Ein wirklich sehr nützliches Feature ist das leichte Kopieren und Duplizieren von ganzen Blöcken (auch mehrere gleichzeitig)
Globale Styles – Auch sehr nützlich. Im Prinzip wie eine Design-Vorlage. Du erstellst z.B. ein Button in einer bestimmten Optik. Diese speicherst du global und kannst ab jetzt jeden Button ganz leicht diesen Style übergeben. Solltest du einmal die Optik ändern wollen, dann führst du dies auch global durch und alle Buttons mit diesen globalen Styles werden direkt optisch geändert
Akkordeon Block – Du arbeitest viel mit FAQ Ansichten? Auch für SEO und FAQ-Schema?! Dann ist dieser Block unverzichtbar für dich. Aber auch Abseits von klassischen FAQ, trumpft der Block hier auf.
Tabs – genauso einfach wie beim Akkordeon, kannst du auch Tabs erstellen.
Asset Library – Ich arbeite oft und viel mit SVG Icons. Da ich diese aus diversen Gründen lokal einbinde, ist die Asset Library genial für mich. Hier hinterlege ich meine, bzw. die lokal eingebundenen Icons und kann im Editor jederzeit auf diese zugreifen
Geschwindigkeit – GenerateBlocks ist ein sogenanntes “Leichtgewicht” dank sauberem HTML5-Code, dynamischem CSS, ohne Code-Abhängigkeiten und es verzichtet auf unnötigen aufgeblähten Code
GenerateBlocks
Pro kaufen
PREISE
(können abweichen)
Personal
$39
pro Jahr
Plus
$69
pro Jahr
Professional
$99
pro Jahr
Weitere Infos zu GenerateBlocks
Schritt 1
Logge dich als Admin auf deiner WordPress Seite ein und klicke im Menü auf “Plugins – installieren“
Schritt 2
Suche nach “GenerateBlocks” und wähle “jetzt installieren” und dann “aktivieren” aus
Schritt 1
Installiere, wie weiter oben beschrieben, zuerst die kostenlose GenerateBlocks Version. Denn diese ist notwendig für die Pro Variante
Schritt 2
Nachdem du die Pro Version gekauft hast, logge dich in deinen Account ein:
https://generateblocks.com/account
Hier findest du jetzt die Pro Version und einen “download” Button daneben. Einfach drauf klicken und herunter laden oder, je nach Browser, rechts klick und “Link speichern unter” wählen. Hiermit lädst jetzt eine zip-Datei herunter.
Schritt 3
Wähle jetzt in deinem WordPress Dashboard “Plugins” und “Installieren“, danach “Plugin hochladen“
Wähle die heruntergeladene Zip-Datei aus:
und bestätige es mit “jetzt installieren” und aktiviere es
Raster
Mit dem Grid-Block kannst du erweiterte Spalten generieren. Es verwendet Flexbox und ermöglicht es so, dass du die Spalten auch auf mehrere Zeilen verteilen kannst, d. h. Du kannst immer wieder neue Spalten hinzufügen, um mehrzeilige Raster zu erstellen.
Query Loop
Mit dem Query Loop-Block kannst du deine Beiträge direkt über einen Block anzeigen lassen. Du kannst bestimmte Parameter dafür angeben und deinen Loop entsprechend anpassen.
Container
Das Kernstück von GenerateBlocks. Mit ihm kannst du erweiterte (oder einfache) Container für Deine Inhalte erstellen und diese in Reihen und Spalten aufteilen.
Tabs
Mit dem Tabs-Block kannst du Tabs (Registerkarten) erstellen. Unter jeden einzelnen Tab kannst du deine Inhalte einfügen und somit deine ganze Optik recht speziell gestalten. (Wie du es genau JETZT gerade erfährst. Denn Dieser Inhalt ist mit Tabs und Akkordeon Blöcken erstellt)
Akkordeon
Der Akkordeon-Block kann unter anderem dazu verwendet werden, um einen FAQ Bereich leicht und schnell einzurichten. Die einzelnen Abschnitte können aus- und eingeklappt werden. (So wie hier…)
Button
Über den Button-Block kannst du deine Buttons organisieren und optisch entsprechend anpassen
Überschrift
Mit dem “Headline” / Überschriften Block kannst du speziell deine Überschriften super einfach darstellen und anpassen.
Dabei bist du nicht auf die Schriftart- /größe beschränkt, sondern hast auch die Möglichkeit Abstände, diverse Farben, Rahmen, Ausrichtung, Icons uvm. einzustellen
Image
Mit dem Image-Block kannst du ein Bild einfügen. Im Vergleich zum WordPress Bild-Block bietet der GenerateBlocks Image Block echte dynamische Optionen und mehr Möglichkeiten für Anpassungen
Pattern Library
Mit diesem genialen Block hast du Zugriff auf eine Vorlagenbibliothek mit über 200 professionell erstellten Layouts.
Du kannst ganz einfach über den Editor auf diese zugreifen und einfügen.
Die Themenbereiche umfassen so ziemlich alles was man so benötigt. Es gibt Überschriften, Tabellen, Call to Action, Footer usw.
Eine Demo-Übersicht findest du bei GenerateBlocks
Außerdem hast du noch die Möglichkeit deine eigenen Vorlagen zu erstellen und diese unter “local patterns” abzuspeichern. Auch diese kannst du dann ganz leicht über den Editor auf deine Webseite einfügen
GenerateBlocks ist ein fortschrittliches Block-Plugin für WordPress, das es dir ermöglicht, benutzerdefinierte Layouts zu erstellen, ohne dass dafür spezielle Programmierkenntnisse erforderlich sind. Es wurde entwickelt, um die Arbeit von Webdesignern und Entwicklern zu erleichtern, die WordPress nutzen, um Websites und Blogs zu erstellen. Mit GenerateBlocks Pro kannst du unter anderem die Funktionen des Gutenberg Editors erweitern, um professionell aussehende Websites mit einer Vielzahl von Designoptionen zu erstellen.
Nach der Installation von GenerateBlocks kannst du nun direkt mit dem Erstellen von deinen eigenen Layouts beginnen. Dazu erstellst du einfach einen neuen Beitrag oder eine neue Seite.
Im Editor klickst du dann auf den “+”-Button, um einen neuen Block hinzuzufügen. In der Auswahl suchst du nach dem “GenerateBlocks” – Abschnitt und fügst mit einem einfach Klick den gewünschten Block hinzu:
Nachdem du einen Block hinzufügst, siehst du eine Vielzahl von Optionen, um ihn zu konfigurieren. Diese Optionen variieren je nach Blocktyp und einige sind auch nur in der GenerateBlocks Pro Version enthalten.
Mit diesen kannst du zum Beispiel die Hintergrundfarben (inkl. Hover), die Schriftart, die Größe und Positionierung des Blocks einstellen, und noch vieles mehr.
Als Beispiel nutzen wir eine Überschrift (H2) und passen Farbe(n) sowie die Schriftgröße an und fügen einen Schatteneffekt (nur Pro) hinzu:
Beginnen wir mit der Änderung der Schriftfarbe. Dazu klicken wir bei den Optionen auf “Farben” und dann auf den Kreis rechts neben “Text“.
Hier kannst du jetzt deine Textfarbe auswählen und genau einstellen.
Genauso kannst du vorgehen wenn du die Hintergrundfarbe, die Farben eines Links oder Icons usw ändern möchtest
Jetzt wollen wir, speziell für diese eine Überschrift, die Schriftgröße ändern. Auch dies ist kein Problem und die notwendigen Einstellungen finden wir bei den Optionen unter Typografie:
Wir wählen einfach mal “50” als neue Schriftgröße aus und können direkt im Editor das Ergebnis sehen.
Damit die Überschrift ein wenig mehr hergibt, können wir – zumindest in der Pro Version – noch diverse Effekte hinzufügen. Ich zeige dir in diesem Fall einen Schatteneffekt.
Dazu wählen wir bei den Optionen “Effects” und dann “Text Shadow” aus. Über den Schraubenschlüssel könntest du den Effect noch ein wenig mehr anpassen, allerdings sieht die default-Einstellung auch schon gut aus:
Eine sehr nützliche Funktion von GenerateBlocks ist die Verwendung von globalen Styles. Dieses Feature ermöglicht es dir, Einstellungen auf globaler Ebene festzulegen, die dann auf die entsprechenden Blöcke angewendet werden können. Auf diese Weise musst du nicht jede Einstellung einzeln anpassen. Stattdessen kannst du die Einstellungen einmal festlegen und sie auf alle Blöcke anwenden und auch später sehr einfach für alle genutzten wieder ändern.
Wichtig zu wissen
Es ist wichtig zu verstehen, dass es sich bei den global styles lediglich um das Design handelt! Also Farbe, Größe, Abstände usw. Nicht aber um den Inhalt. Es würden also auch keine Icons festgelegt. Im Prinzip erstellt man so eine neue CSS-Klasse für seine eigenen Objekte (z.B. H3-darkwolfcave-in-rot)
Ein Beispiel:
Um ein eigenen globalen Style erstellen zu können, öffnen wir den Menüpunkt “GenerateBlocks” und dann “Global Styles“:
Über den Button “ADD-NEW” können wir dann auch endlich mal loslegen und vergeben einen Titel. Weiterhin nutzen wir hier den Überschriften-Block von GenerateBlocks. In dem Beispiel habe ich mich für H3 entschieden:
Auf der rechten Seite sehen wir jetzt die Einstellungen, die wir ein wenig anpassen können. Wichtig ist hier der Name (gb-headline-DEIN_NAME), denn mit diesem bestimmst du bei allen weiteren Blöcken deren Aussehen. Damit du hier etwas eintragen kannst, musst du auf das Schloss klicken und vergibst einen eindeutigen Namen. Natürlich kannst du die Vorgabe auch lassen und einfach nur in dem Feld “Label” einen Namen vergeben den du dir merken kannst, bzw. der aussagekräftig ist.
Denn diesen wirst du später dann im Editor auswählen können.
Jetzt passen wir unsere Überschrift unseren Vorstellungen nach an. Ändern den Style und veröffentlichen alles sobald wir zufrieden sind. Mit diesen Schritten ist die Vorlage erst einmal fertig.
Jetzt erstelle einen neuen Beitrag / Seite oder editiere eine bestehende.
Wir fügen erneut einen Überschriften-Block von GenerateBlocks hinzu:
Auf der rechten Seite bei den Optionen kannst du jetzt ein neues Feld erkennen: “Use Global Style” – dieses aktivierst du und wählst aus dem Drop-Down-Feld dein gerade erstelltes Style aus:
Jetzt siehst du auch schon direkt im Editor das Ergebnis. Solltest du diesen Style jetzt zum Beispiel bei mehreren Überschriften in deinen Beiträgen verwendet haben, und in Zukunft dir überlegen dass grün vielleicht schöner wäre, dann änderst du in den global Styles für dieses Template einfach die Farbe auf grün.
Danach wären alle Überschriften, mit deinem globalen Style, in grün zu sehen.
Wie weiter oben aber bereits erwähnt, werden hier keine Inhalte “global” gespeichert – wie es im Gegensatz zu den Local Patterns der Fall wäre – sondern wirklich nur das Design.
GenerateBlocks Pro bietet dir die Möglichkeit, auf eine Bibliothek mit aktuell mehr wie 200 professionell erstellten Design-Vorlagen, direkt im Editor zuzugreifen.
Dafür musst du nichts weiter machen, als in deinem Beitrag oder auf deiner Seite, einen neuen “Pattern-Library“-Block von GenerateBlocks hinzuzufügen.
Dann kannst du auch schon direkt eine Vorlage auswählen:
Natürlich kannst du diese auch weiter an deine Bedürfnisse anpassen. So bist du schnell und dennoch flexible bei deiner Gestaltung
Zusätzlich zu den über 200 fertigen Vorlagen kannst du dir auch deine eigenen erstellen und speichern. Dies ist genauso leicht wie einen neuen Beitrag aus diversen Blöcken zu erstellen.
Wähle aus dem Menü “GenerateBlocks” den Unterpunkt “Local Patterns” aus und klicke auf ADD-NEW um eine neue Vorlage zu erstellen.
Bei Titel vergibst du wie immer einen Namen und lässt dann deiner Kreativität freien lauf, indem du Blöcke hinzufügst, dein Layout anpasst und Inhalt schreibst, den du in dieser Form öfters verwenden möchtest.
In meinem Beispiel zeige ich dir meinen Newsletter-Block, der in der Desktop Version ein wenig anders aussieht als in der Tablett/Mobile Ansicht. Ein solcher Block eignet sich ideal für eine Vorlage, da man diesen sicherlich auf seiner Webseite öfters einfügen möchte:
Wenn du deine Vorlage später erneut verwenden möchtest, fügst du diese ganz einfach über den “Pattern-Library“-Block von GenerateBlocks hinzu. In der Ansicht wechselst du auf “Local Patterns” und sucht dir dann deine entsprechende Vorlage aus.
Wichtig zu wissen
Du kannst deine Vorlagen jederzeit anpassen und ändern. Allerdings änderst du somit nur die Vorlage. Es gibt keine Verbindung zu bereits auf Seiten/Beiträgen eingefügten Blöcke.
Das bedeutet: du kannst KEINE globalen Änderungen vornehmen.
