Met de PageBuilder kun je eenvoudig (home)pages opbouwen en aanpassen zonder dat je technische kennis nodig hebt. Je stelt pagina’s samen door gebruik te maken van rijen en widgets, die je volledig kunt indelen en stylen naar jouw wensen.
In de builder werk je met een duidelijke en flexibele structuur:
- Rijen vormen de basis van je pagina.
- Binnen deze rijen plaats je widgets zoals tekstblokken, afbeeldingen of andere elementen.
Je kunt rijen toevoegen, verplaatsen, verwijderen en aanpassen om de layout van je pagina precies goed te krijgen. Daarnaast bepaal je eenvoudig per apparaat (desktop, tablet en mobiel) hoe de layout van de pagina eruitziet. Ook kun je instellen of een rij bijvoorbeeld een achtergrondkleur krijgt of de volledige breedte van het scherm inneemt.
In dit artikel leggen we stap voor stap uit hoe je de PageBuilder gebruikt om jouw (home)pages op te bouwen, te beheren en te optimaliseren.
Rijen beheren in de builder
In de builder zie je aan de rechterkant van elke rij verschillende icoontjes waarmee je de rij kunt beheren:
Rij toevoegen: Voeg een nieuwe rij toe onder de huidige rij door op het plus-icoontje te klikken.
Rij verwijderen: Verwijder de rij uit door op het prullenbak-icoontje te klikken.
Rij verplaatsen: Verplaats de rij naar een andere positie door op de pijltjes omhoog of omlaag te klikken.
Rij-instellingen aanpassen: Pas de eigenschappen van de rij aan door op het tandwiel-icoontje te klikken.
Wanneer je de rij-instellingen opent, kun je het volgende instellen:
- Layout van de rij:
Standaard staat de layout voor alle apparaten (desktop, tablet en mobiel) ingesteld op 100% breedte. Je kunt dit eenvoudig aanpassen naar bijvoorbeeld een 50%-50% verdeling of een van de andere indelingen.
Dit doe je door de optie "Layout (desktop)" aan te passen in de rij-instellingen. Kies je bijvoorbeeld voor "50% - 50% (6 - 6)", dan wordt de rij verdeeld in twee gelijke kolommen van elk 50%.
De aanduiding "6 - 6" verwijst naar het aantal kolommen binnen de rij. Standaard zijn dit 12 kolommen in totaal (gelijk aan 100% breedte), gebaseerd op het Bootstrap framework.
Zodra je bij de optie "Layout (desktop)" een andere indeling kiest dan "100% (12)", verschijnen er extra opties om ook de layout voor tablet en mobiel in te stellen. Welke keuzes je hierbij krijgt, hangt af van de layout die je voor desktop hebt gekozen. Op dezelfde manier worden de opties voor mobiel bepaald op basis van de ingestelde tablet-layout. Zo kun je per apparaat zorgen voor een optimale weergave van je pagina. - Rijvolgorde aanpassen voor tablet en mobiel:
Voor zowel tablet als mobiel kun je ook de volgorde van de rijen aanpassen. Dit betekent dat wanneer je bijvoorbeeld voor tablet de layout "50% - 50% (6 - 6)" hebt gekozen en de optie "Rijvolgorde omkeren (tablet)" inschakelt, het linkerblok aan de rechterkant wordt getoond en het rechterblok aan de linkerkant. - Breedte van de rij:
Kies of de rij de volledige breedte van het scherm moet innemen of binnen de standaard containerbreedte moet blijven. - Achtergrondkleur instellen voor een rij:
Je kunt een achtergrondkleur instellen voor een rij bij de optie "Achtergrondkleur gebruiken". Zodra je dit doet, verandert de achtergrond van de rij naar de gekozen kleur, welke vervolgens over de volledige breedte van het scherm wordt weergegeven. - Tekstkleur van een rij aanpassen:
Met de optie "Tekstkleur wijzigen" kun je de kleur van de tekst in een rij aanpassen. Dit is vooral handig wanneer je een donkere achtergrondkleur hebt gekozen. Als de tekst dan ook donker is, kan deze slecht zichtbaar zijn. Door de tekstkleur aan te passen naar een lichtere kleur, zorg je ervoor dat de tekst goed leesbaar blijft. Deze wijziging heeft alleen effect op de rij waar je het voor instelt. - Verticale uitlijning van kolommen aanpassen:
Met de optie "Verticale uitlijning kolommen"kun je bepalen hoe de inhoud van de kolommen binnen een rij verticaal wordt uitgelijnd. Je hebt de keuze uit drie opties:- Boven (standaard)
- Midden
- Onder
- Ruimte boven en onder een rij:
Met de opties "Ruimte boven sectie (margin)" en "Ruimte onder sectie (margin)" stel je de ruimte buiten de rij in. Margin bepaalt de afstand buiten de rij, oftewel de ruimte die je boven of onder de rij wilt laten. Dit zorgt ervoor dat de rij meer of minder afstand krijgt van de andere elementen eromheen.
Daarnaast kun je met de optie "Ruimte binnen sectie (padding)" de ruimte binnen de rij aanpassen. Padding zorgt ervoor dat de inhoud van de rij (zoals tekst of afbeeldingen) niet tegen de randen van de rij aan zit. Als je padding toevoegt, creëer je meer ruimte tussen de inhoud en de randen van de rij. Je kunt hierbij kiezen uit: "Normaal" en "Geen (standaard)". - Ruimte tussen kolommen binnen een rij:
Binnen een rij kun je ook de ruimte tussen de kolommen aanpassen. Dit kun je doen door de opties "Horizontale ruimte tussen kolommen" en "Verticale ruimte tussen kolommen" in te stellen. Zo kun je zowel de horizontale als de verticale afstand tussen de kolommen naar wens aanpassen. - Development opties:
Tot slot zijn er twee developmentopties:- "CSS classes": Met deze optie kun je CSS classes op rijniveau toevoegen. Hiermee kun je maatwerk CSS toevoegen in de backoffice onder "Website uiterlijk > CSS aanpassen".
- "Developer ID": Met deze optie kun je een ID op rijniveau toevoegen. Dit is handig als je specifieke JavaScript of CSS wilt toepassen op een rij.
Let op: Om wijzigingen aan de voorkant te zien, moet je zowel de rij instellingen als de builder zelf opslaan.
Widgets toevoegen en configureren
Zodra je de rij-instellingen hebt aangepast, kun je beginnen met het toevoegen en configureren van de widgets.
Als je nog geen widgets hebt toegevoegd, zie je in de rij één of meerdere grijze vlakken met een "+" erin, afhankelijk van de gekozen layout. Dit geeft aan dat in dat blok nog geen widget is ingesteld. Klik op het grijze vlak om een widget toe te voegen. Er wordt dan een venster geopend waar je een widget kunt selecteren onder de optie "Widget > Widget type". Nadat je een widget hebt gekozen, kun je onder "Herkenbare titel voor interface (optioneel)" een naam toevoegen. Dit maakt het later makkelijker om de content van de widget te herkennen en beheren.
Na het toevoegen van een widget kun je meteen de instellingen aanpassen. Het is handig om de opties één voor één aan te passen en steeds de wijzigingen op te slaan, zodat je direct aan de voorkant van de pagina kunt zien wat er verandert. Dit is vooral nuttig wanneer je de widgets nog aan het ontdekken bent. Een groot voordeel is dat opties met dezelfde functie bij verschillende widgets dezelfde naam hebben. Hierdoor hoef je niet steeds opnieuw op zoek te gaan naar de juiste instelling.
Let op: Om de wijzigingen daadwerkelijk zichtbaar te maken op de voorkant van je pagina, moet je zowel de widgetinstellingen als de builder zelf opslaan.
Wanneer je een widget wilt bewerken, klik je simpelweg op het grijze vlak van de betreffende widget. De widgetinstellingen worden dan opnieuw geopend, zodat je de nodige aanpassingen kunt doen.
In het volgende artikel kun je meer lezen over de verschillende widgets: https://support.shoptrader.com/support/solutions/articles/80001174727-template-4000-pagebuilder-widgets