Hoe kunnen we helpen?
Page Builder in Magento
In dit artikel bespreken we Magento Page Builder, een meegeleverde extensie voor Magento open source vanaf versie 2.4.3. Page Builder is een editor die het mogelijk maakt voor niet-technische gebruikers om content aan te maken.
Page Builder laat je allerlei contentelementen (content types) naar het canvas van de editor slepen om zo eenvoudig pagina’s te bouwen en beheren. De pagina wordt ingedeeld in rijen (rows) waarop je met drag-and-drop de gewenste content plaatst.
Page Builder Menu
Wanneer Pager Builder actief is binnen jouw Magento open je deze door te klikken op de knop Edit with Page Builder. (Content > Pages > Page > Content) Het Page Builder menu verschijnt aan de linkerkant met allemaal content types verdeeld in secties.
Content Types in Magento Page Builder
| Content Type | Content Type |
| Layout | rijen, kolommen en tabbladen als indeling van een pagina |
| Elements | tekst en knoppen, maar ook HTML-code |
| Media | afbeeldingen, video’s, banners, sliders en Google Maps |
| Add Content | contentblokken voor een statische of dynamische weergave van je productcatalogus |
We ga nu wat dieper in op de verschillende secties van het Page Builder menu.
Layout
We starten met een leeg canvas waarop we layout-elementen kunnen verslepen waaronder rijen, kolommen en tabbladen.
Elements
Elements is een sectie met content types waarmee je tekst, knoppen, koptitels en HTML-code toevoegt aan ieder layout-element die je op het canvas plaatst. De layout-elementen worden zichtbaar zodra je een van deze elementen versleept naar het canvas.
HTML Code is een bijzonder content type waarmee je HTML, CSS en JavaScript code invoegt in de van je webpagina.
Daarnaast zijn er knoppen waarmee je specifieke contentelementen kunt invoegen in je code.
- Insert Widget
- Insert Image
- Insert Variable
Met de knop Insert Image voeg je afbeeldingen toe uit je bibliotheek.
Met de knop Insert Widget voeg standaard content elementen in op je pagina. Er zijn veel standaard widgets beschikbaar, maar je kunt ook je eigen widget maken en gebruiken in Magento (Content > Widgets > Add Widgets). Wees erop bedacht dat het gebruik van veel widgets het inladen van je pagina’s vertraagt.
Met de knop Insert Variable voeg je variabelen in op je pagina wat zorgt voor hergebruik van content. Ook hier kun je weer je eigen variabelen maken en gebruiken in Magento (System -> Other settings -> Custom Variables).
Media
De sectie Media biedt content types voor afbeeldingen, video, knoppen, sliders en Google Maps die je dan positioneert binnen de layout-elementen op het canvas.
De Magento Page Builder heeft twee nieuwe functionaliteiten. Je kunt de slider gebruiken als een productcarrousel of als productgrid. Deze tonen een voorbeeldweergave van jouw producten. Kies voor de productcarrousel als je de afbeeldingen naast elkaar wilt tonen. Deze geeft je ook de optie om de producten te continue te roteren. Een productgrid toont je producten in kolommen onder elkaar.
Add Content
In de sectie Add Content kun je contentblokken met statische inhoud, dynamische inhoud of je kunt producten uit de catalogus toevoegen. Dynamische blokken zijn zeer krachtig omdat je daarmee content kunt serveren aan je klanten op basis van prijsregels op producten and klantsegmentaties.
Wanneer we het contentelement Products selecteren hebben we de optie om die producten te tonen op basis van productcategorie, SKU of wanneer de producten voldoen specifieke voorwaarden.
Mobiele weergave
Page Builder kan de content optimaliseren voor een juiste weergave op telefoons en tablets. Eventueel kan je andere afbeeldingen laten inladen voor mobiele apparaten dan de afbeeldingen die je gebruikt voor de desktop. Dit betekent dat je de content helemaal kunt aanpassen voor gebruik op mobiele apparaten en andere elementen kiezen.
Een goede mobiele weergave van je webshop is uitermate belangrijk geworden nu Google voor al je content de mobiele versie gaat gebruiken voor indexering en ranking.
Page Builder beschikt over een raamwerk om de responsiveness van je pagina’s te testen en geeft merchants meer opties om hun content aan te passen. Zo kun je een minimale hoogte voor je afbeeldingen instellen en de padding en marges op je content types voor iedere apparaat aanpassen. Zo is het niet ongebruikelijk dat padding/marges lager zijn voor gebruik op kleinere schermen.
Uitbreidbaarheid Page Builder
Tot slot is de functionaliteit van Page Builder uit te breiden of aan te passen. Ontwikkelaars kunnen de bestaande lay-out en contentelementen aanpassen of toevoegen. Maar is het ook mogelijk om zelfgemaakte widgets te maken en te gebruiken of aan te passen.
Ook interesse in Page Builder? Neem dan contact met ons op.
