Magento 2.3.1 met Page Builder is officieel uit, en bij MediaCT zijn we laaiend enthousiast over deze update van Magento. Wetende wat er ging komen hebben we alle klanten overgezet naar deze meest recente versie van Magento, en dit betekent dat Page Builder in de praktijk gebruikt kan worden. Page Builder is al een tijdje een belangrijk onderwerp van gesprek geweest, zowel intern als bij onze klanten. Sinds de aankondiging van Magento in 2016 zijn de verwachtingen hoog gespannen. We hebben in 2017 al eens een artikel geplaatst rondom de Bluefoot Page Builder functionaliteit, dat als basis is gebruikt voor de nieuwe Page Builder.

blog-martijn.jpg

We gaan in op de meest gestelde vragen die we horen over Page Builder: Wat is Page Builder, hoe werkt het in de praktijk, wat zijn de belangrijkste features, en wat is de toekomst van Page Builder.

Wat is Page Builder?

Page Builder is een nieuwe manier van content beheren in Magento. Overal waar voorheen een contentveld beschikbaar was met een WYSIWYG (what you see is what you get) editor is nu een Page Builder tool beschikbaar. Met Page Builder kan er gemakkelijk content worden samengesteld en gepresenteerd zonder dat hier HTML-kennis voor nodig is. Page Builder vervangt daarmee ook direct WYSIWYG editor. Page Builder kan worden gebruikt binnen categorieën, CMS pagina’s en producten. Vanuit Page Builder kan eigenlijk bijna alle content worden gepresenteerd en worden samengesteld. Denk hierbij aan afbeeldingen, video’s en teksten, maar ook aan product data. Het samenstellen gaat makkelijk door het slepen van elementen, het zogeheten “drag & drop” concept.

Bouw een pagina met Page Builder

Bouw een pagina met Page Builder

Kenmerken van Page Builder

Dit is wat je kort gezegd kunt verwachten van Page Builder

  • Gemakkelijk pagina’s en andere content bouwen met drag & drop

  • Volledige controle over de layout

  • Realtime voorbeeldfunctie

  • Mogelijkheid voor het plaatsen van zeer veel verschillende content types (afbeeldingen, video’s)

  • Flexibele layout mogelijkheden (ook voor mobiel en tablet)

  • Content tonen op basis van personalisatie

Page Builder in de praktijk

Wanneer je start met Page Builder begin je met een leeg canvas, dat ze een “stage” noemen. Dit is een soort van kader waarbinnen alle content samengesteld kan worden. Binnen dit kader wordt er gebruik gemaakt van rijen en kolommen. Hierbinnen kunnen dan de losse elementen worden geplaatst. Alle elementen die geplaatst worden worden automatisch op basis van een grid uitgelijnd. Het grid kan vanuit de layout of template specifiek worden ingesteld. Als je bijvoorbeeld een nieuwe kolom plaatst kun je zelf aangeven door middel van slepen hoe groot de kolom moet zijn en waar deze komt te staan binnen het grid. Slepen en plaatsen is daardoor erg makkelijk. Het grid heeft een standaard layout welke ook vrij makkelijk aan te passen is aan het gebruikte thema. Uiteindelijk valt alle content vanuit Page Builder binnen het grid waardoor het altijd er goed uit ziet binnen het bestaande thema. De kolommen zijn eigenlijk schaalbaar zodat ze in formaat kunnen veranderen en waardoor ze passend zijn voor diverse schermresolutie, zoals desktop, tablet en op mobiele telefoons. Daarnaast is het gebruik van HTML niet meer nodig!

Thema

Veel elementen zijn voor de styling afhankelijk van het geïmplementeerde thema en de daarvoor toegepaste styleguide in Magento. Zo zijn tekstkoppen zoals een h1 direct voorzien van een juiste opmaak. Bepaalde elementen zoals afbeeldingen of knoppen kunnen worden toegevoegd met aanvullende styling. Het is dan makkelijk om bijvoorbeeld padding, margin en kleuren toe te voegen bovenop de al aanwezige instellingen.

Wijzigingen die je doet in Page Builder zijn direct zichtbaar aan de voorkant van de webshop. Dit maakt het gebruik van Page Builder erg efficiënt voor medewerkers die snel een aanpassing moeten doen in de webshop.

Mobiel

Op basis van het grid in Page Builder wordt er automatisch bepaald hoe de content passend wordt gemaakt voor verschillende resoluties. Kolommen vallen onder elkaar en worden daarna automatisch weer uitgelijnd zodat het er altijd mooi uit blijft zien. Voor afbeeldingen kan er voor mobiel een andere afbeelding worden gekozen dan desktop.

Een van de grootste krachten van Page Builder is dat het vrijwel overal ingezet kan worden en dat een Page Builder ook weer content kan bevatten met daarin een Page Builder block.


Weten wat er nog meer mogelijk is met Page Builder? We helpen je graag!


Een aantal features uitgelicht…

Styling/opmaak

Op veel elementen kan basis styling worden toegepast zoals kleuren, paddings en margins. Ook kun je per rij aangeven hoe deze ten opzichte van de pagina uitgelijnd moet zijn, denk hierbij aan het tonen van een afbeelding over de volledige breedte van de pagina.

Media

Page Builder ondersteunt mogelijkheden voor afbeeldingen, video’s en banners met daarin tekst en afbeeldingen. Ook kunnen verschillende elementen over elkaar heen worden geplaatst op het grid. Zo kun je bijvoorbeeld een tekst over een afbeelding plaatsen. Voor afbeeldingen kan kan er voor mobiele weergave nog een alternatieve afbeelding worden gekozen. Daarnaast zorgt Page Builder er zelf voor dat de media correct meeschaalt op mobiel, desktop en hier tussenin.

Producten

Een van de interessante mogelijkheden is om op een makkelijke manier producten en productlijsten toe te voegen via Page Builder. Sleep gemakkelijk een product blok in het Page Builder grid en kies daarna welke producten je wilt tonen. Het tonen van product kan op basis van attributen. Wil je alle rode schoenen op de homepage dan is die mogelijkheid er. Als er daarna nieuwe producten bij komen die voldoen aan deze eigenschappen dan worden ze ook automatisch getoond. Na het maken van een product keuze kun je dit direct terugzien in Page Builder met de gekozen producten.

Tabs

Bovenstaande besproken elementen kunnen ook in tabs worden geplaatst. Dit zijn de bekende tabbladen die we vaak tegenkomen op paginas, bij producten en op diverse andere plekken.

Dit is een live voorbeeld van wat een klant te zien krijgt, en de mogelijkheid om aanpassingen te doen

Dit is een live voorbeeld van wat een klant te zien krijgt, en de mogelijkheid om aanpassingen te doen

Stel tabs (standaard) in

Stel tabs (standaard) in

Dynamic Blocks

Een van de mooie nieuwe features van Magento 2.3 zijn de dynamic blocks. Hiermee kan er persoonlijke content worden getoond op basis van klantsegmentatie. Met deze toevoeging in Magento in combinatie met Page Builder kun je echt dynamische pagina’s gaan samenstellen die per klant anders zijn. Toon hiermee bijvoorbeeld banners met acties die alleen van toepassing zijn voor de klant of toon accessoires die horen bij producten die een klant heeft gekocht. Ook kunnen productlijsten gevuld worden met producten die vooral interessant zijn voor deze klanten.

Een dynamic block kan daarnaast ook gekoppeld worden met acties en prijsregels waardoor je volledige Page Builder content kunt tonen op basis van acties.

Ook kan Page Builder weer gebruikt worden binnen een “dynamic block” en deze kan dan met behulp van een widget weer op willekeurige plekken op de website worden getoond. Dit laatste kan ook met behulp van regels en segmentatie.

Staging

In Magento Commerce ligt de nadruk heel erg op content staging. Hiermee kunnen in de toekomst content veranderingen vooraf gepland worden. Page Builder werkt hier ook mee samen en maakt het mogelijk om volledig andere Page Builder content samen te stellen en te tonen op het moment dat je zelf instelt. Weet je al dat je over 2 weken een actieperiode hebt met alle witte schoenen en dat actie op zondag zal beginnen? Dan kun je het zo plannen dat op die zondag een actie begint die de huidige actie door witte schoenen vervangt en een banner met de actie toont.

Opmaakmogelijkheden

Opmaakmogelijkheden

Deel je layout in

Deel je layout in

Media/contentopties

Media/contentopties

Dupliceren

Een punt dat wellicht niet heel belangrijk lijkt, maar er juist voor zorgt dat Page Builder zo fijn werkt, is de mogelijkheid om snel bestaande Page Builder elementen te dupliceren. Wil je vier productblokken onder elkaar die een klein beetje verschillen? Plaats en configureer dan één element en dupliceer deze met een druk op de knop. Alle instellingen worden dan overgenomen en je hoeft alleen maar de gegevens te veranderen die nodig zijn. Denk hierbij aan het vervangen van rode voor witte schoenen. Zo is het werken met Page Builder erg efficiënt.

De toekomst van Page Builder

Magento heeft 2 jaar ontwikkeld aan Page Builder en heeft ook aangegeven dit verder door te gaan ontwikkelen. Zo zijn ze druk bezig om Page Builder gereed te maken voor PWA door middel van het ontwikkelen van een uitgebreide GraphQL API.

Daarnaast wil Magento Page Builder verder integreren met andere onderdelen van Magento waaronder B2B. Ook zullen we een doorontwikkeling zien op het gebied van personalisatie voor klanten.

Waarschijnlijk zal Magento er ook voor kiezen om de Adobe Experience Cloud te gaan integreren in Page Builder. Denk hierbij bijvoorbeeld aan het direct en makkelijk beschikbaar hebben van alle media uit de Experience Cloud. De mogelijkheden met Page Builder zijn eindeloos!


Meer weten over Page Builder in de praktijk?

We adviseren je graag over de uitgebreide mogelijkheden!