In de Portal Builder bepaal je hoe een scherm eruitziet door elementen in een vaste volgorde op te bouwen. In dit artikel lees je hoe die opbouw werkt en hoe je areas, rijen en kolommen aanmaakt en beheert.
In dit artikel:
- De opbouw van een scherm
- Areas toevoegen en beheren
- Het gridsysteem: rijen en kolommen
- Hoogte en breedte instellen
- Rijen en kolommen verwijderen
De opbouw van een scherm
Elk scherm in de Portal Builder is opgebouwd uit een hiërarchie van layout-elementen. Van boven naar beneden:
| Element | Beschrijving |
|---|---|
| Scherm | De pagina zelf, bevat een template. |
| Template | Bevat een grid en één of meer areas om widgets in te plaatsen. |
| Area | Een zone op het template waarin widgets geplaatst kunnen worden. |
| Grid | Het raster van een template. Bestaat uit rijen en kolommen. |
| Rij | Een horizontale rij binnen het grid. |
| Kolom | Een verticale kolom binnen het grid. |
| Widget | Wordt geplaatst in een area. Een widget toont informatie of functionaliteit. |
Areas toevoegen en beheren
Areas zijn de hoofdsecties van een scherm. Je kunt meerdere areas boven en onder elkaar plaatsen om een gevarieerde pagina-indeling te maken.
Area toevoegen
- Selecteer het Template waaraan je een area wilt toevoegen.
- Schakel de grid mode in met de knop bovenin de pagina.
- Selecteer een gebied in het grid om een area aan te maken.
- Geef de area een naam en bevestig.
- De area verschijnt in het Grid.
Area verplaatsen
Selecteer de area via het menu Grid areas in de rechterbalk van het template. Bewerk de positie van de area in de rechterbalk horizontaal en verticaal.
Het gridsysteem: rijen en kolommen
Binnen het template staat een grid. Dit grid werkt als een tabel: je bepaalt zelf het aantal rijen, het aantal kolommen per rij, en de verhoudingen.
Rij toevoegen
- Selecteer het template.
- Klik op + Voeg rij toe in de rechterbalk.
- Een nieuwe rij verschijnt.
Kolom toevoegen
- Selecteer het template.
- Klik op + Voeg kolom toe in de rechterbalk.
- De nieuwe kolom verschijnt.
Tip: Het is ook mogelijk om een rij of kolom toe te voegen tussen andere rijen en kolommen. Houd je muis op de rij-naam of kolom-naam links of bovenin beeld. Links en rechts van de naam verschijnt een + icoon. Door op de + te klikken, wordt de rij of kolom op die specifieke plek toegevoegd.
Hoogte en breedte instellen
Je kunt per rij de hoogte instellen. Er zijn vier mogelijkheden:
- Automatisch (Auto): de rij past zich aan de hoogte van de inhoud aan. Dit is de standaardinstelling en de meest gebruikte optie.
- Pixels (px): Stel een vaste hoogte of breedte in met een aantal pixels.
- Fracties (fr): Neemt een vast aantal fracties van de ruimte in.
- Minmax (minmax): Variabele hoogte of breedte binnen een minimaal en maximaal aantal pixels.
Daarnaast is het mogelijk om een tussenruimte in te stellen tussen rijen en kolommen. Dit gebeurt altijd in een vast aantal pixels.
Rijen en kolommen verwijderen
Selecteer het template. In de rechterbalk is het mogelijk om de rij of kolom te verwijderen. Let op: verwijderen van een rij of kolom verwijdert ook de areas die erin staan.