Wat is de page builder in Magento?

Sinds Magento 2.4.3 is het mogelijk om gebruik te maken van de page builder. Deze content editor geeft je veel vrijheid bij het maken van pagina’s en blokken. In deze handleiding leggen we uit hoe je gebruik kunt maken van de page builder en geven we enkele voorbeelden.

1.

Log in op de backend omgeving van Magento en ga naar de pagina of het blok dat je aan wil passen. In ons voorbeeld gaan we de homepage aanpassen. Wij navigeren naar Inhoud > Elementen > Pagina’s en kiezen hier voor het bewerken van de homepage (zie ook de handleiding voor het aanpassen van pagina’s of blokken).

2.

Om te starten met de page builder klik je op de knop ‘Edit with Page Builder’ of wanneer er al content staat, kun je ook direct op de content klikken om de page builder te openen.

3.

De page builder bestaat uit drie onderdelen:

  1. De boven balk
  2. Het menu
  3. De content
4.

We beginnen onze uitleg met de bovenste balk. Deze balk bestaat uit 4 secties met elk zijn eigen unieke functies en mogelijkheden, namelijk:

Afbeelding: Beschrijving:
Vind onderdelen in het menu op naam. Zoek je bijvoorbeeld op “text” dan verschijnt de teksteditor als resultaat.
Wissel tussen desktop en mobiel zicht. Bekijk de ingevulde content in de diverse scherm formaten.
Sla de ingevulde content op als een template om deze te kunnen gebruiken op andere pagina’s of blokken. Of laad een opgeslagen template in om te gebruiken op de huidige pagina.
Sluit de editor. De aangepaste content blijft gewoon staan in de editor. Het is niet mogelijk in de editor zelf op te slaan.

 

5.

Aan de linkerzijde staat het menu. In dit menu vind je diverse elementen die je naar het content veld kunt slepen om zo een pagina op te bouwen.

6.

En als laatste hebben we het content veld. In dit veld vul je jouw pagina door elementen van het menu naar het content veld te slepen. Dit is een voorbeeld van een standaard layout met verschillende elementen:

  1. Sleep een ‘Row’ naar het content veld.
  2. Sleep een ‘Column’ naar de net toegevoegde ‘Row’.
  3. Sleep content elementen zoals bijvoorbeeld een afbeelding of een text editor naar de kolom of kolommen die je net hebt toegevoegd.

In de afbeelding hieronder vind je een voorbeeld van bovengenoemde layout. Wij gaan gebruik maken van 2 kolommen.

7.

Wanneer je met je muis over elementen in het content veld gaat, zie je een menu verschijnen die je extra opties biedt voor het desbetreffende element. Standaard zijn de volgende opties zichtbaar:

Afbeelding: Omschrijving:
Ingedrukt houden om het element te verplaatsen.
Klik hier om meer opties te zien voor het element.
Klik om de zichtbaarheid van het element te wijzigen.
Klik hier om het element te dupliceren.
Klik hier om het element te verwijderen.
8.

Wanneer je klaar bent met het toevoegen en aanpassen van de layout, sluit je de page builder door rechtsboven op het inklap icoontje te drukken.

9.

Om de, in de page builder doorgevoerde wijzigingen, ook daadwerkelijk door te voeren moet je de pagina of het blok nog opslaan. Dit doe je door rechtsboven op de oranje knop ‘Opslaan’ te drukken.