Wat is een grid

Het Grid is een blok waarmee je een flexibele, kolomgebaseerde lay-out kunt maken. Binnen dit blok kun je één of meerdere andere blokken toevoegen, waarbij de zel kan kiezen hoe breed het blok in het grid moet wroden. Een grid bestaat altijd uit twaalf kolommen. Dus als je bijvoorbeeld 2 blokken naast elkaar wil hebben moeten alle twee de blokken een breedte van 50% (ofwel 6 kolommen hebben). Als je dus drie blokjes naast elkaar wil hebben, moeten alle blokken in het grid een breedte van 33% hebben (dus 4 kolommen breed). Dit is handig voor het structureren van pagina’s en het verbeteren van de visuele presentatie.

Hoe voeg je een grid blok toe?

Selecteer het betreffende blok waar je het grid in wil hebben. In ons voorbeeld geval selecteren we eerst een "Sectie Blok" (lees hier meer over een Sectie)

Wanneer we het sectie blok gesecteerd hebben kunnen we het grid hieraan toevoegen. Er verschijnt een zwarte rand om het geselecteerde blok. Zo kun je zien welk blok geselecteerd is.

Stap 2, voeg het grid blok aan de sectie toe

Nu we het sectie blok geselecteerd hebben kunnen we er blokken aan toevoegen. Dit doe je door in het rechter menu met je muis te gaan over de icoontjes. Ieder icoon staat voor een groep verschillende functies van blokken. 

We kiezen nu het icoon met het vierkantje: in deze groep vind je alle structuur en basis blokken die nodig zijn voor de opbouw en layout van jou website of webshop. 

als je met je muis over het icoonje gaat komt er een menu in beeld met de opties onder deze groep. Een van deze opties is het grid blok

Klik op het grid blok en deze zal worden toegevoegd aan de sectie

Stap 3: Gelukt!

Gelukt. Je hebt het grid blok nu succesvol tegevoegd aan je website. 

Lees hier meer over hoe je een tekstblok toevoegd.

En lees hier meer over hoe je wit ruimte toevoegd aan een sectie.

Hoe pas ik de breedte aan van een blok in een grid

Dit doe je door het betreffende blok in het grid te selecteren (klik op dat blok) in dit voorbeeld hebben we een tekst blok. 

Nadat we het blok hebben geselecteerd kunnen we het snel bewerk menu openen. Dit kun je doen door te klikken op het toverstafje in de blauwe balk links onder in.

In die menu zie je verschillende opties. Als je geselecteerde blok daadwerkelijk in een grid zie je ook rechts de opties:  "width" (betekend breedte)

je kan hier voor gedefinieerde percentages kiezen: 25% 33% 50% 66% 75% en 100%

Klik op de gewenste breedte (we kiezen in dit voorbeeld voor 2 gelijke kolomen naast elkaar) dus gaan voor 50 %

Gelukt. de breedte is aangepast

Nu kunnen we nog een blok toevoegen en deze ook 50% breedte geven.

We hebben hier ter voorbeeld nog een afbeelding blok toegevoegd. Lees meer over hoe je een afbeelding blok toevoegd in dit stappen plan: afbeelding toevoegen