Magento 2 Page Builder uitgelegd met praktische voorbeelden

Wat is Page Builder?

Page Builder is Magento's drag-and-drop content editor. Sinds Magento 2.3 is het onderdeel van de core (voorheen Bluefoot). Met Page Builder maak je visueel aantrekkelijke pagina's zonder code te schrijven.

Waar kun je Page Builder gebruiken?

• CMS pagina's
• CMS blokken
• Product beschrijvingen
• Category beschrijvingen
• Dynamic blocks (Adobe Commerce)

De Page Builder interface

Editor openen

Ga naar Content > Pages

Open een pagina of maak nieuwe aan

Klik in het Content veld

De Page Builder interface verschijnt

Interface onderdelen

Canvas: Het centrale werkgebied waar je content samenstelt

Panel (links):

• Layout: Rijen en kolommen
• Elements: Tekst, buttons, dividers
• Media: Afbeeldingen, video, banners
• Add Content: Blokken, widgets, producten

Toolbar (boven content):

• Bewerken, dupliceren, verbergen, verwijderen

Layout met Rows en Columns

Rows (Rijen)

Elke sectie begint met een Row. Rows bepalen:

• Volledige breedte of contained
• Achtergrondkleur of afbeelding
• Padding en margins
• Minimum hoogte

Row toevoegen:

Sleep "Row" uit het panel naar de canvas

Hover over de row en klik het tandwiel icoon

Configureer de instellingen

Row types:

• Full Width: Strekt van rand tot rand
• Full Bleed: Achtergrond strekt, content contained
• Contained: Alles binnen container breedte

Columns

Binnen een Row maak je kolommen voor layout:

Columns toevoegen:

Sleep "Column" naar een Row

Voeg meerdere columns toe

Pas breedtes aan door te slepen

Column breedtes:

Page Builder werkt met een 12-kolom grid:

• 1/2 + 1/2 = 6 + 6
• 1/3 + 2/3 = 4 + 8
• 1/4 + 1/4 + 1/2 = 3 + 3 + 6

Werken met Content Types

Text

Het Text element biedt een WYSIWYG editor:

• Koppen (H1-H6)
• Paragrafen
• Lijsten
• Links
• Basis opmaak

Best practice: Gebruik H1 spaarzaam (één per pagina), gebruik H2-H4 voor structuur.

Heading

Voor standalone koppen met meer styling opties:

• Heading level selecteren
• Custom styling via CSS classes
• Betere semantic markup dan Text

Buttons

Call-to-action buttons:

• Primary en secondary styles
• Link configuratie
• Hover states
• Meerdere buttons naast elkaar

Button toevoegen:

Sleep "Buttons" naar canvas

Klik om text aan te passen

Configureer link via tandwiel

Image

Afbeeldingen invoegen:

• Upload of selecteer uit media gallery
• Alt text instellen (belangrijk voor SEO!)
• Link toevoegen
• Mobile afbeelding (optioneel andere afbeelding voor mobiel)

Banner

Banners combineren afbeelding met overlay tekst:

• Achtergrondafbeelding
• Overlay kleur en opacity
• Headline en tekst
• Button
• Link op hele banner

Banner use cases:

• Hero images
• Promotional banners
• Category headers

Slider

Meerdere slides die automatisch of handmatig wisselen:

• Elke slide heeft banner-achtige opties
• Navigatie pijlen
• Pagination dots
• Autoplay instellingen

Video

Embed video's van:

• YouTube
• Vimeo
• Lokaal geüploade video's

Video instellingen:

• Autoplay (let op: vaak geblokkeerd door browsers)
• Mute (vereist voor autoplay)
• Loop
• Controls tonen

Products Content Type

Products toevoegen

Toon producten direct in je content:

Sleep "Products" naar canvas

Kies condition (categorie, SKU's, attribuut)

Configureer aantal en sortering

Conditions:

• Category: Alle producten uit een categorie
• SKU: Specifieke producten
• Attribute: Producten met bepaald attribuut

Weergave opties:

• Grid of Carousel
• Aantal kolommen
• Producten per pagina

Use cases

• "Gerelateerde producten" sectie
• "Bestsellers" carousel
• "Nieuw binnen" showcase

Block en Dynamic Block

CMS Block invoegen

Hergebruik bestaande CMS blokken:

Sleep "Block" naar canvas

Selecteer het block

Dit is handig voor content die op meerdere pagina's moet staan.

Dynamic Block (Adobe Commerce)

Toon content op basis van:

• Klantsegmenten
• Cart rules
• Catalog rules

Bijvoorbeeld: toon andere banner voor B2B klanten vs B2C.

Geavanceerde technieken

Mobile responsiveness

Page Builder is automatisch responsive, maar je kunt content per viewport aanpassen:

Content verbergen per device:

Selecteer element

Open Advanced settings

Gebruik "Hide on Mobile/Tablet/Desktop" classes

Kolom reorder op mobile:

Kolommen stacken automatisch op mobiel. De volgorde in desktop bepaalt stack volgorde.

CSS classes toevoegen

Voor custom styling:

Selecteer element

Ga naar Advanced

Voeg CSS Classes toe

Style via je theme CSS

Templates opslaan

Sla layouts op als herbruikbare templates:

Maak je layout

Klik "Save as Template" (rechtsboven)

Geef een naam

Hergebruik via "Apply Template"

Praktische voorbeelden

Homepage layout

``

[Row - Full Width - Hero Banner]

[Banner met call-to-action]

[Row - Contained]

[Column 1/3] [Column 1/3] [Column 1/3]

USP Icon USP Icon USP Icon

[Row - Contained]

[Heading: Populaire categorieën]

[Column 1/4] [Column 1/4] [Column 1/4] [Column 1/4]

Cat Image Cat Image Cat Image Cat Image

[Row - Full Bleed - Achtergrondkleur]

[Heading: Bestsellers]

[Products Carousel]

[Row - Contained]

[Column 2/3] [Column 1/3]

Over ons tekst Afbeelding

`

Category landing page

`

[Row - Full Width - Category Banner]

[Banner met category naam]

[Row - Contained]

[Text: Category introductie/SEO tekst]

[Row - Contained]

[Heading: Top producten in deze categorie]

[Products Grid - 8 producten]

`

About us pagina

`

[Row - Full Width - Header image]

[Image]

[Row - Contained]

[Column 1/2] [Column 1/2]

Onze missie text Team foto

[Row - Contained]

[Heading: Onze waarden]

[Column 1/3] [Column 1/3] [Column 1/3]

Icon+Text Icon+Text Icon+Text

[Row - Contained]

[Video embed - bedrijfspresentatie]

``

Performance tips

Afbeeldingen optimaliseren

• Gebruik correcte formaten (WebP indien mogelijk)
• Resize voor te uploaden (niet 4000px breed)
• Comprimeer afbeeldingen
• Vul alt tekst altijd in

Niet te veel content

• Veel rows/columns = meer DOM elementen
• Page Builder voegt extra markup toe
• Houd pagina's gefocust

Caching

Page Builder content wordt gecached als onderdeel van FPC. Na wijzigingen:

Sla op

Cache wordt automatisch geïnvalideerd

Bij problemen: flush cache handmatig

Veelgestelde vragen

Kan ik custom content types toevoegen?

Ja, developers kunnen custom Page Builder content types maken. Dit vereist module development.

Werkt Page Builder met Hyvä?

Standaard niet volledig. Er zijn compatibility modules beschikbaar die Page Builder content vertalen naar Hyvä-compatible markup.

Hoe exporteer ik Page Builder content?

Page Builder content wordt opgeslagen als HTML met speciale data-attributen. Export kan via:

• Database export
• Magento's content staging (Adobe Commerce)
• Custom export scripts

Kan ik de WYSIWYG editor aanpassen?

Ja, via TinyMCE configuratie kun je toolbar options en plugins aanpassen.