16 mei 2020    Echte Meneer

Gutenberg blocks vs page builders

De belangrijkste verandering voor WordPress de laatste jaren was de introductie van de Gutenberg editor. Hierdoor werd de klassieke editor passé en was het mogelijk om eenvoudige lay-outs te maken met de Gutenberg editor die standaard met WordPress geïnstalleerd werd.

Veel ontwikkelaars in de WordPress community zagen hun kans schoon en ontwikkelden plugins waarmee je enigszins complexere lay-outs kunt bouwen. De ontwikkeling is anno mei 2020 zover dat ze page builders kunnen vervangen of moet je eigenlijk zeggen dat sommige plugins de nieuwe generatie page builders geworden zijn.

De klassieke page builders (Divi, Elementor, Oxygen, Visual Composer, Brizy) zullen nog lange tijd bestaan, maar het merendeel van website gebruikers en bouwers zullen genoeg hebben aan Gutenberg blocks.

Nadelen van Page Builders:

  • Vertragen de website. (Veel code nodig om een lay-out te bouwen > bloated).
  • Leercurve is pittig. Vaak mooie UI (Bijv. Divi), maar draak om mee te werken.
  • Beperkt in dynamische data lay-out mogelijkheden. Toch thema nodig.
  • Prijzen. Vaak abonnement structuur met jaarlijkse kosten.

De ontwikkeling van Gutenberg blocks

Er zijn een aantal gratis Gutenberg plugins (eigenlijk extensies) waarmee je al fancy lay-outs kunt bouwen. Door het installeren van zo’n extra Gutenberg plugin kun je zelf een lay-out maken of je kiest een template uit de bibliotheek van de plugin. Klinkt als een pagebuilder, toch?!

De beste Gutenberg block plugins

Er zijn er zoveel, maar er springen er op dit moment wel een paar uit. Hangt natuurlijk samen met welke modules je zoekt. Wil je een slider, een video pop-up of een feature grid? Uiteindelijk hangt het af van wat je wil maken en je eigen skillset. Ik licht er 3 uit en zal een lijstje toevoegen die je kunt gebruiken om te kijken welke jij nodig hebt.

1) Custom color palettes for Gutenberg

Custom Color Palette for Gutenberg

Custom Color Palette for Gutenberg

A small and simple plugin to adjust the default color palette of the new WordPress Gutenberg Editor.

ThemeZee

Met deze plugin kun je de kleuren die je gebruikt voor je website in een palet vastleggen (via je Customizer) en kun je de kleuren gebruiken in de Gutenberg editor. Je zou eigenlijk verwachten dat dit een standaard optie is in Gutenberg, maar vooralsnog heb je hiervoor deze plugin nodig.

2) Qubely – Visual Gutenberg Block Toolkit

Gutenberg Blocks and Page Builder – Qubely

Gutenberg Blocks and Page Builder – Qubely

Gutenberg Blocks and readymade sections with rich customization options. Enhance Gutenberg editor with easy UI…

Themeum.com

Qubely laat je veel verschillende modules/widgets toevoegen aan de editor. Net als Kadencce blocks is Qubely min of meer een echte pagebuilder. Er zijn ook veel templates beschikbaar, helaas veel alleen in de betaalde Pro versie van de Qubely plugin.

Handige widgets zijn de tabs, de timeline, video pop-up, slider, post caroussel, prijslijst. Qubely is een plugin die het meest een page builder benadert op dit moment.

3) Kadence Blocks

Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks – Gutenberg Page Builder Toolkit

Custom Blocks for for Gutenberg to help extend the editing capabilities.

Kadence WP

Ook Kadence Blocks kent een gratis versie. Deze plugin is zeer bruikbaar om secties en kolommen toe te voegen in de lay-out die je wil maken. Met voorgebakken templates, responsive opties en handzame widgets.

Gutenberg block plugins die de moeite waard zijn:

  • Advanced Gutenberg Blocks
  • Advanced Gutenberg
  • Elementor Blocks for Gutenberg (laat je E lay-outs invoegen)
  • Ultimate addons for Gutenberg (heeft Masonry post module)
  • Stackable
  • Drop it (laat je bijv. foto’s van Unsplash invoegen)
  • WooCommerce blocks (laat je producten etc. invoegen)
  • Atomic blocks
  • Generate blocks
  • Guteblock
  • Gutentor page builder (veel templates)
  • Disable Gutenberg blocks

.. meer weten? Gebruik de live chat button.