Layout

Na het openen van de Pagebuilder zie je links een aantal hoofdgroepen, waarvan Layout de bovenste is. Na het uitklappen vind je daar de elementen Row en Columns. Alle elementen sleep je met je muis naar de juiste plek.

Rows

Het begint altijd met een Row, dus sleep een Row naar het werkblad. Als je dit hebt gedaan, zie je, door met je muis over het nieuwe blok te zweven, een menu verschijnen:

Appearance

Klik op het tandwiel om de instellingen van de Row te bewerken. Standaard is bij Appearance Contained geselecteerd. Dit is de meest gekozen oplossing, omdat men in de praktijk vaak tekst of media op een witte achtergrond zal plaatsen. Een container zorgt er voor dat teksten binnen een aangenaam leesbereik blijven, ook op grotere schermen. Als media (op de achtergrond) een belangrijker rol moet vervullen, omdat je bijvoorbeeld een achtergrondfoto of -video wil plaatsen, dan zal je willen kiezen voor een andere optie dan Contained.

Door te kiezen voor Full Width kun je de achtergrond over de hele paginabreedte instellen, terwijl de content (teksten en andere media) binnen de leesbaare container blijft.

Door te kiezen voor Full Bleed kun je zowel de achtergrond, als de overige content over de hele paginabreedte instellen. Meestal wordt deze optie gebruikt voor het tonen van (maximaal) een gecentreerde tekst.

Backgrounds

Je kunt een row een achtergrondkleur geven, maar ook kiezen voor een afbeelding of zelfs een video. Hoewel veel ondernemers trots zijn op hun professionele bedrijfsreportage, valt het aan te bevelen dergelijke video's als content in een los blok te presenteren, zodat klanten er bewust voor kunnen kiezen hun databundel van hun mobiele telefoon aan te spreken. Onthoud dat veel klanten naar iets op zoek zijn en een onverwachte video kan die zoektocht belemmeren. De achtergrond moet echt functioneel zijn, iets toevoegen aan de beleving!

Columns

Een rij kun je desgewenst onderverdelen in kolommen, waardoor meerdere blokken ontstaan, die je allen kunt voorzien van een unieke inhoud. Sleep een Columns naar je werkblad. Standaard worden niet alleen twee kolommen toegevoegd met de naam column 1 en column 2, maar ook een moeder-element met de naam columns. Daarboven zie je weer de oorspronkelijke row.

Kolommen toevoegen, verwijderen en in grootte aanpassen

Door met je muis over de geneste elementen heen te gaan, kun je de betreffende instellingen wijzigen. Laten we dat eens doen door een kolom toe te voegen. Twee is mooi, maar we gaan er drie maken.

• Hover over de instellingen van een column.
• Klik op het duplicate knopje, rechts van het tandwiel.
• Je ziet nu dat de gekozen kolom weer in tweeën is gedeeld.

Andere weetjes

• Door met je muis over een kolom heen te gaan, kun je deze verwijderen door op het prullenbakje te klikken.
• Een kolom kun je breder of smaller maken door met je muis op de lijn tussen de kolommen te klikken en deze te verslepen naar de gewenste breedte. Zo bestaan veel contentblokken uit een kolom van 2/3 met tekst, met een naastgelegen kolom met een foto (of video).

Meerdere kolommen op gelijke hoogte

In voorkomende gevallen wil je dat alle kolommen in de rij even hoog zijn. Dit kun je instellen door met je muis naar de laagste kolom(men) te gaan en daar op het tandwieltje voor de instellingen te klikken. Kies voor Full Height.