Gebruik het indelingsrasterblok om content op je website uit te lijnen. Met dit blok kan je responsieve breakpoints definiëren, wat inhoudt dat je kan aangeven hoeveel kolommen er naast elkaar getoond moeten worden in je bericht of op je pagina voor weergaven op computers en mobiele apparaten.
In deze handleiding
Een indelingsraster zorgt ervoor dat de content van een webpagina gestructureerd en uitgelijnd is. Het bevat een aantal verticale lijnen die afhankelijk zijn van het weergaveapparaat (het responsieve breekpunt):
- 12 rasterlijnen voor computers.
- 8 rasterlijnen voor tablets.
- 4 rasterlijnen voor mobiele apparaten.
In het indelingsrasterblok vormen de rasterlijnen samen kolommen (1-4). Je kunt in elk van deze kolommen content plaatsen.
Bij kleinere apparaten is het gebruikelijk dat een indeling voor computers over meerdere rijen wordt gespreid. Dit wordt automatisch ingeschakeld wanneer je naar de weergave voor tablets of mobiele apparaten schakelt, maar kan worden opgeheven door de rasterwaarden direct te wijzigen.
Responsieve breekpunten zijn een ingewikkeld onderwerp. Als je je hierover niet druk wilt maken, kun je het indelingsrasterblok nog steeds gebruiken. Het raster maakt dan gebruik van standaard breekpunten.
Om het indelingsrasterblok toe te voegen, klik je op het invoegpictogram + Blok en zoek je naar ‘layout grid’. Klik erop om het blok toe te voegen aan het bericht of de pagina.
💡
Je kunt met behulp van je toetsenbord ook
/layoutop een nieuwe regel typen en op Enter drukken om snel een nieuw indelingsrasterblok toe te voegen.
Als je een site met plugins hebt, zorg er dan voor dat je de indelingsraster-plugin in Plugins → Geïnstalleerde plugins activeert.
Meer gedetailleerde instructies over het toevoegen van blokken vind je hier.
Als je voor het eerst een indelingsrasterblok toevoegt, word je gevraagd het aantal kolommen te kiezen:
Je kunt dit later wijzigen in de blokinstellingen.
Iedere kolom in het raster kan andere blokken bevatten. Klik op het invoegpictogram + Blok voor elke kolom en zoek vervolgens het blok op dat je wilt toevoegen.
Als je op het blok klikt, wordt er een werkbalk met opties weergegeven:
De werkbalk voor indelingsrasterblokken bevat de volgende opties:
- Verander blogtype of -stijl.
- Sleep het blok.
- Verplaats het blok omhoog of omlaag.
- Wijzig de horizontale uitlijning of breedte van het blok.
- Responsieve breekpunten voor computers, tablets en mobiele apparaten.
- Verander de verticale uitlijning van het blok.
- Extra opties.
Als je op het blok klikt, zie je aanvullende blokinstellingen in de rechter zijbalk. Als je de zijbalk niet ziet, moet je wellicht op het pictogram ⚙️ (tandwiel) in de rechterbovenhoek klikken om de instellingen weer te geven.
Indeling
Gebruik dit om het aantal kolommen in een indelingsrasterblok te wijzigen. Als je het aantal kolommen met één vermindert, wordt de laatste kolom (inclusief alle content) verwijderd.
Responsieve breekpunten
Pas de weergaven voor computers, tablets en mobiele apparaten aan door op de overeenkomstige knoppen te klikken.
Tussenruimte
Dit bepaalt hoeveel rasterlijnen een kolom overslaat om ruimte toe te voegen tussen de kolom en de vorige kolom of de kolom en het begin van het indelingsraster.
Spanwijdte
Dit is het totale aantal rasterlijnen over de volledige breedte van één kolom.
De rasterafscheiding is de ruimte tussen twee kolommen binnen het raster.
Als je geen afscheiding selecteert, worden alle afscheidingen, inclusief de eerste en laatste, verwijderd.
Wanneer de grootte van de afscheiding en andere waarde heeft dan Geen afscheiding, kun je de knop voor Eindafscheiding toevoegen uitschakelen. De afscheidingen helemaal links en rechts worden dan uit het raster verwijderd zodat het de volledige breedte van de pagina vult.
Geavanceerd
Met het tabblad Geavanceerd kan je een CSS-klasse toevoegen aan je blok, zodat je aangepaste CSS kan schrijven en de stijl van het blok naar eigen wens kan aanpassen.
Elke kolom in het indelingsrastervlok heeft zijn eigen instellingen waar je de achtergrondkleur en opvulling kunt wijzigen. Deze zijn alleen van invloed op de individuele geselecteerde kolom.
In principe kun je de grootte van de kolommen in het indelingsraster aanpassen. Het totaal van alle waarden voor tussenruimte en spanwijdte van alle kolommen in een rij mag echter niet groter zijn dan het aantal rasterlijnen dat beschikbaar is voor het weergaveapparaat.
Bijvoorbeeld: op een computer (12 rasterlijnen) kan bij een indeling met drie kolommen iedere afzonderlijke kolom een spanwijdte van 4 rasterlijnen hebben zonder tussenruimte; iedere afzonderlijke kolom een spanwijdte hebben van 3 rasterlijnen met 1 lijn tussenruimte, of kan één kolom een spanwijdte hebben van 10 rasterlijnen en de andere twee kolommen een spanwijdte van ieder 1.
Zo zorg je ervoor dat je kolommen niet overlappen. Soms betekent dit dat je de waarde voor tussenruimte of spanwijdte op een plek pas kunt verhogen als je de waarden op een andere plek verlaagt.
Elk kolom in je raster heeft een gekleurde optie aan de zijkanten. Dit zijn sleepgrepen en als je erop klikt en ze naar links of rechts sleept, wordt het blok groter of kleiner.
Je kunt de grootte van de kolommen in een lay-out aanpassen door de waarden voor Tussenruimte en Spanbreedte direct aan te passen in de blokinstellingen in de zijbalk.
Deze worden automatisch aangepast wanneer je de sleepgrepen gebruikt.
Wanneer je de grootte van het raster en de manier waarop kolommen worden weergegeven of mobiele apparaten en tablets wilt veranderen, houd er dan rekening mee dat de som van alle waarden voor tussenruimte en spanbreedte van de afzonderlijke kolommen niet meer mag zijn dan 8 rasterlijnen voor tablets en 4 rasterlijnen voor telefoons.
In het voorbeeld hieronder stellen we in dat de kolommen een spanbreedte van 2 en een tussenruimte van 0 hebben om twee kolommen weer te geven op mobiele apparaten en 4 op tablets.
Ondersteuning 