Das Powerhouse-Team hinter dem beliebten GeneratePress WordPress-Theme hat ein neues Plugin herausgebracht: GenerateBlocks. Dabei handelt es sich um eine kleine Sammlung von leichtgewichtigen WordPress-Blöcken, mit denen Webseiten ohne Code ganz einfach gestaltet werden können.
Schon bevor der Gutenberg Editor nur annähernd so weit war, Webseite komplett mit Blöcken zu erstellen bauen, gewann GenerateBlocks an grosser Beliebtheit. Durch seine Fähigkeiten, mit nur 4 Blöcken eine schnelle Seite zu gestalten stand fest, wohin die Zukunft geht.
Im folgenden Beitrag zeige ich dir, weshalb GenerateBlocks die Zukunft von WordPress Page Buildern ist und weshalb du zu dieser leichtgewichtigen Lösung wechseln solltest.
Solltest du bereits schon mit Blöcken arbeiten, wirds du GenerateBlocks lieben. Es verschafft dir im Hinblick auf die Google Core Web Vitals einen enormen Vorteil.
GenerateBlocks – Die Grundlagen
GenerateBlocks wurde 2020 von Tom Usborne und dem unglaublich talentierten Entwicklerteam hinter GeneratePress entwickelt und kostenlos im WordPress-Repository veröffentlicht. Seit der Veröffentlichung ist es auf über 80`000 WordPress Seiten installiert und verfügt dabei über eine beeindruckenden 5-Sterne-Bewertung.
Anfang 2021 wurde auf Wunsch der Community nach mehr Funktionen auch eine Pro-Version veröffentlicht, dazu später aber mehr.
Bereits seit dem ersten Tag habe ich GenerateBlocks auf einigen WordPress Seiten installiert und staune regelmässig wieder aufs Neue, was damit alles möglich ist ohne an Performance zu verlieren.
Mittlerweile ist GenerateBlocks das zweite Plugin, welches ich nach GeneratePress auf einer neuen Seite installiere.
Der Unterschied zwischen GenerateBlocks und GeneratePress
Immer wieder fragen Nutzer in Foren oder Kommentaren, was der Unterchied zwischen GeneratePress und GenerateBlock sei. Die Antwort ist dabei relativ einfach.
GenerateBlocks ist im Wesentlichen eine Sammlung von WordPress-Blöcken, wie du sie bereits schon vom Gutenberg Editor kennst. Durch die Installation des Plug-ins kannst du diese Blöcke mit jedem WordPress-Theme nutzen.
Bei GeneratePress handelt es sich um ein WordPress-Theme, welches vom gleichen Team wie GenerateBlocks entwickelt wurde und meiner Meinung nach das beste Theme für eine Webseite ist.
Solltest du dich also entschliessen, GenerateBlocks auf deiner WordPress Seite zu installieren, empfehle ich dir gleichzeitig den Wechsel zu GeneratePress. Du bekommst hierbei nicht nur ein perfektes Zusammenspiel zwischen Plugin und Theme, sondern auch erstklassigen Support bei Problemen von einem Team, welches beide Elemente auswendig kennt.
Funktionen
Wer GenerateBlocks zum ersten Mal bedient, wird überrascht sein, wie einfach das Plugin zu bedienen ist. Zwar braucht es wie bei allem etwas Übung, jedoch dürfte das Erstellen einer Webseite für Menschen ohne Vorkenntnisse im Programmieren nach 1–2 Wochen kein Problem sein.
Sollte es dennoch mal ein Problem geben, hilft die Dokumentation, die YouTube Videos oder der Support bei so ziemlich jeder Frage.
Weitere Dinge, welche ich an GenerateBlocks so liebe:
- Schnell und leichtgewichtig, ohne Code-Abhängigkeiten.
- Keine komplizierte neue UI zu lernen. Genau wie bei GeneratePress nutzt GenerateBlocks die Vorteile der nativen WordPress-Stile und Steuerelemente, um alles zu erreichen. Das macht es super einfach zu lernen.
- 100% zugänglich, ein wichtiger Aspekt, der oft übersehen wird.
- Alles ist von Haus aus responsive und verwendet moderne Flexbox-Raster. Bei Bedarf können Sie sogar die mobilen Ansichten getrennt vom Desktop optimieren.
- Hervorragender Support durch einen engagierten Entwickler und ein hervorragendes Team. Sie werden sehen, dass Tom regelmäßig Fragen im Forum beantwortet.
Die vier Blöcke von GenerateBlocks
In der kostenlosen Version von GenerateBlocks gibt es vier Blöcke, mit welchen sich alles bauen lässt.
Der Container Block
Einer der wichtigsten Blöcke ist der „Container Block“. Dank ihm lassen sich Inhalte in Zeilen bzw. Abschnitte aufteilen und organisieren. Um einen Container hinzuzufügen, gibst du einfach /container in den WordPress-Block-Editor ein.
Hast du einen Container hinzugefügt, kannst du innerhalb der Block-Optionen mehre Dinge anpassen:
- Einstellen, ob die gesamte Breite der Webseite genutzt wird oder z. B. 1200px.
- Einstellen der Breite des Containers
- Padding und Margin des Blocks
- Hintergrundfarbe des Containers
Der Grid Block
Dank dem „Grid Block“ kannst du innerhalb eines Containers verschiedene Layouts erstellen, was dir einen gestalterischen Freiraum ermöglicht. Gibst du im Block-Editor /grid ein, kannst du zwischen 12 verschiedenen Layouts auswählen.
Diese Layouts sind bereits responsive und lassen ohne Problem individuell anpassen.
Im Beispiel oben siehst du einen Container, welcher ein Grid mit 3 Spalten enthält. Beim Erstellen eines Grids, erstellt GenerateBlocks automatisch aus jeder Spalte einen weiteren Container. Somit lassen sich zum Beispiel pro Spalte unterschiedliche Hintergrundfarben auswählen.
Hast du ein Grid hinzugefügt, kannst du innerhalb der Block-Optionen mehre Sachen anpassen:
- Abstand der Horizontalen sowie Vertikale Lücke ändern
- Horizontale sowie vertikale Ausrichtung anpassen
Der Headline Block
Mit dem „Headline Block“ bzw. Überschriften Block lassen sich, wie der Name schon sagt, Überschriften einfügen. Im Fall von GenerateBlocks, bietet dieser Block aber noch eine Menge an Optionen an, wodurch er zu einem mächtigen Werkzeug wird. Um eine Headline hinzuzufügen, tippe einfach /headline im WordPress-Blockeditor ein.
Ist die Headline im Editor platziert, kannst du durch die Optionen folgende Einstellungen vornehmen:
- Auswahl zwischen H1, H2, H3, H4, H5, H6 oder Paragraph und div
- Ändern der Schriftfamilie, Schriftgrösse, Linienhöhe und vielem mehr
- Farbe der Schrift
- Hinzufügen eines vordefinieren Icons oder einem eigenen (durch Hinzufügen von SVG Code)
Im folgenden Beispiel habe ich ein SVG-Icon ausgewählt, welches bei der Überschrift angezeigt wird. Du kannst nun die Positionierung, Grösse, Farbe anpassen.
Der Buttons Block
Mit Buttons bringst du den nötigen «Call to Action» auf deine Webseite. Um einen Button hinzuzufügen, tippst du einfach /button im WordPress-Block-Editor ein.
Einige Dinge, die du bei den Buttons ändern kannst:
- Typografie / Schrift
- Abstand zwischen den Buttons
- Farben
- Hintergrund Verlauf
- Icon (hier lässt sich wie beim Headline Block ein SVG Icon hinzufügen. Super für Social Media Icons)
Im folgenden Bild kannst du die Button-Funktion inklusive Icon sehen. Die Schrift kann auch deaktiviert werden, so dass am Schluss nur ein Icon sichtbar ist.
Zwischen den Blöcken navigieren
Ab einer bestimmten Anzahl von Blöcken kann es etwas schwieriger werden, etwas auszuwählen. Da kommt die Blocknavigation gerade recht
Klicken Sie im WordPress-Block-Editor auf die drei Zeilen am oberen Rand. Daraufhin wird eine Listenansicht Ihrer Blöcke angezeigt. Normalerweise wähle ich den Block oder Bereich aus, an dem ich arbeiten möchte. Dann kann ich bei Bedarf zum übergeordneten Container navigieren. Das ist viel einfacher als zu versuchen, genau an der richtigen Stelle zu klicken.
Jeder Block, der in GenerateBlocks enthalten ist, hat viele Komponenten, die Sie leicht ändern können. Dies geschieht alles über Kippschalter auf der rechten Seite des WordPress-Block-Editors. Alle Optionen können auch separat für Desktop-, Mobil- und Tablet-Geräte angepasst werden. Im Folgenden werde ich auf einige eingehen.
Komponenten der einzelnen Blöcke
Typografie einstellen
The typography component lets you select from system fonts (my personal recommendation) or Google Fonts and fine-tune all sorts of different aspects:
- Weight
- Transform
- Font family fallback
- Font size (px/em/%)
- Letter spacing
Abstände definieren
The spacing component gives you precise control over your layouts, including:
- Padding (px, em, %)
- Margin (px, em, %)
- Border size
- Border radius (px, em, %)
- Outer z-index
- Inner z-index
Farben verändern
The colors component lets you choose colors for everything, from containers to content. A few examples:
- Background color
- Text color
- Link color
- Link color hover
- Border color
Farbverläufe hinzufügen
The gradients component lets you extend your color range with custom gradients to add clever shading or subtle overlays. A few features include:
- Selector
- Direction
- Color one (%)
- Color two (%)
Hintergrundbilder hinzufügen
The backgrounds component lets you add background images and control different properties:
- Image URL
- Image size
- Select
- Image opacity
- Size
- Position
- Repeat
- Attachment
Formen hinzufügen
The shapes component lets you select from all sorts of different shapes that you can use for the background on containers. Some properties you can change include:
- Random waves, angles, curves, and triangles
- Location
- Color
- Height
- Width
- Flip horizontally
- z-index
GenerateBlocks Preise
Alles, was ich oben beschrieben habe, ist in der kostenlosen Version von GenerateBlocks enthalten. Wenn du jedoch noch mehr Funktionen möchtest, gibt es eine Pro-Version.
Du kannst hierbei aus drei verschiedene Jahrespläne auswählen:
- Personal für $39 pro Jahr für eine WordPress-Webseiten.
- Pro für $69 pro Jahr für 10 WordPress-Webseiten.
- Professional für $99 pro Jahr für 250 WordPress-Webseiten.
Alle Pläne umfassen Folgendes:
- Mehr als 150 Vorlagen von einem UI/UX Profi erstellt
- Lokale Vorlagen erstellen
- Globale Stile
- Block-Effekte
- Asset-Bibliothek
- Erweiterte Hintergründe
- Container-Hover-Funktionen
- Benutzerdefinierte Attribute
- Support und Updates für ein Jahr
Pro Funktionen in GenerateBlocks
Below I’m going to dive into some of the awesome features included in the pro version of GenerateBlocks. Like with GeneratePress premium, the pro version of GenerateBlocks requires that you have the free version installed.
Template Library
GenerateBlocks has over 150 templates you can choose from. And they are continuously adding more. Just go to the WordPress Block Editor, select the template library block, and choose from anything you want:
- Wireframe
- Content
- Hero
- Call to action
- Team
- Info boxes
- Social media icons
- Contact
- Footer
- Pricing table
- Logos
- Testimonial
- Headline
- Button
Taking advantage of the template library will save you hundreds of hours. You can have a contact page, fancy footer, or pricing page created in a matter of seconds. And the best part is, unlike a page builder, you don’t sacrifice performance. They have all been built with speed in mind!
Better yet, you can import from a template, tweak them, and save them to your local template library.
Advanced Backgrounds
The backgrounds in the free version work great, but the pro version lets you do even more. Add background gradients and images to your containers and apply them to any device!
Copy and Paste Styles
Save even more time by using the copy/paste block styles option. No more doing things over and over!
Global Styles
Next is one of my favorites features, and that is global styles. This lets you create styles you can use throughout your entire website. It’s also great for performance, as you aren’t creating entirely separate code every time.
Effects
CSS these days is really powerful, and the pro version of GenerateBlocks lets you harness it! Here are just a few of the amazing effects you can apply:
- Opacity and blend
- Transition
- Box shadow
- Text shadow
- Transform
- Filter
Container Links
Turn your Container blocks into beautiful card-style links and design them with hover design options.
Asset Library
Have a lot of assets you use regularly? Add them to your asset library and gain access to them inside the WordPress Block Editor. This is another killer feature!
Device Visibility
Easily hide or show our blocks on desktop, tablet, and mobile devices. This comes in handy if you are trying to design a perfectly fluid website. Sometimes less is more on mobile.
Custom Attributes
Apply any custom data-* attributes to your elements with a simple user interface.
Performance
If you care about performance, then Google Core Web Vitals is something you can’t ignore. This is the latest update initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web. As of May 2021, it will be part of Google’s ranking signals. That’s why it’s more important than ever to take performance seriously, as it will impact your search engine result pages (SERPs).
For those of you who aren’t familiar with Core Web Vitals, basically, Google is really starting to crack down on almost everything. Every single piece of code matters these days. Things like the largest contentful paint (LCP) and cumulative layout shift (CLS) have become the new normal for troubleshooting pages’ performance issues.
Page builders are destroying the internet
I’ve worked on thousands of WordPress sites over just this last year alone, and all the really slow ones have one thing in common: Page builders.
I’ve never been a huge fan of page builders, and in the past, have encouraged users to stay away from them. However, I can no longer subtly recommend this. If you want a fast site, you need to move away from page builders now.
Page builders were developed due to the lack of being able to easily design a website without code. Let’s be honest; it was hard to build a WordPress site five years ago unless you knew how to code. Page builders definitely served their purpose, as many WordPress folks are “website implementors,” not coders. And that’s why many page builders experienced skyrocket growth.
However, these days, things are very different. You now have amazing plugins like GenerateBlocks, which lets you design websites with 1/10th of the amount of code! Oh, and you don’t have to do any actual coding either.
Take a look at the overall codebase size of GenerateBlocks versus Elementor, Oxygen, and Divi.
- It’s 87% smaller than Oxygen.
- It’s 93% smaller than Elementor.
- It’s 96% smaller than Divi Builder.
Of course, you don’t have all the fancy bells and whistles, but these are the very things that are causing problems for you trying to rank higher with Core Web Vitals. Let’s take sliders, for example. Sliders should have died years ago, but they are still around. These cause cumulative layout shift (CLS) warnings. It’s much better to design a static header. Ditch the animations, ditch the moving parts.
Then you have the DOM (Document Object Model). To put it simply, whenever a page loads, the browser parses the HTML of a page and renders the DOM. Think of this as a structured tree in a sense. However, this isn’t just the HTML source code, as JavaScript can manipulate it. Check out this article on what, exactly, is the DOM?
You don’t need to fully understand the DOM, just that the more layers of code you have, the more DOM elements will be on a page. A very common problem among page builders is an excessive DOM size. This is because they are essentially adding additional code like nested divs, which create a bigger DOM. The bigger the DOM, the more you’ll be penalized in terms of performance.
Plugins like GenerateBlocks work a little differently. While they still add code, they work more closely within the already existing code parameters in WordPress core. It also adds less code in general, to begin with, because it was developed from the ground up with performance in mind. That’s why many Web Core Vitals warnings just never appear.
GenerateBlocks only adds one CSS file per page, which contains all of the CSS generated by your options. There is no Javascript or inline CSS – it’s all in one, tidy place. Page builders, on the other hand, typically load dozens of files on each page.
GenerateBlocks also lets you control the CSS Print Method. You can choose between an external file or inline embedding. An external file is better for performance, as this means it can be cached easier by the browser and isn’t required to be downloaded on each page load.
Many think it all comes down to a trade-off between performance or design. However, this is no longer the case. Many of the page builder sites I’ve worked on can easily be re-created with a plugin like GenerateBlocks.
I’ve found that many users go with page builders simply because they think that is the normal thing to do. It’s time to change that! Kyle wrote a great piece recently I recommend checking out: Damn. Gutenberg smokes Elementor. Sarah Gooding over at WP Tavern also covered this: Gutenberg’s faster performance is eroding page builders’ dominance.
Below is an example of the performance on our ecommerce WordPress site built entirely with GenerateBlocks. Now obviously, other things also play into performance, but fixing your code is the first place to start!
Zusammenfassung
Wenn du nun bereit bist, schnelle und leichtgewichtige Websites zu erstellen, die zukunftssicher sind und auch von den Google Core Web Vitals geliebt werden, dann empfehle ich dir GenerateBlocks auszuprobieren.
Nutzt du GenerateBlocks bereits oder hast du eine Frage? Wenn ja, beantworte ich deine Fragen gerne in den Kommentaren unten.
