Structuur elementen

Samenvatting

Structuurelementen zijn de onzichtbare bouwstenen die bepalen hoe je blok is ingedeeld. Ze bevatten zelf geen tekst of afbeeldingen, maar zorgen ervoor dat alles op de juiste plek staat. Er zijn vier structuurelementen: container, rij, kolom en box.

Hoe werkt het

De vaste opbouw

Een blok is altijd van buiten naar binnen opgebouwd, in deze volgorde:

Blok
  └── Container (bepaalt de maximale breedte)
        └── Rij (groepeert kolommen naast elkaar)
              └── Kolom (bepaalt de breedte van een onderdeel)
                    └── Box (optioneel — voor uitlijning)
                          └── Content (koptekst, tekst, knop, etc.)

Het is belangrijk dat je deze lagen niet overslaat. Als je bijvoorbeeld een rij direct in een blok zet zonder container, kan de editor zich onvoorspelbaar gedragen.

Container

Wat doet het?
Een container begrenst de breedte van je content. Op een breed scherm zorgt de container ervoor dat tekst niet van rand tot rand loopt — er komt witruimte aan de zijkanten. Standaard is de maximale breedte 1056 pixels.

Wanneer gebruik je dit?
Altijd. Elke rij hoort binnen een container.

Voorbeeld: Een tekst-met-knop sectie — de container zorgt dat de tekst netjes gecentreerd staat en niet te breed wordt op een groot scherm.

Rij

Wat doet het?
Een rij groepeert kolommen horizontaal. Alles wat je naast elkaar wilt plaatsen, zet je in kolommen binnen dezelfde rij.

Wanneer gebruik je dit?
Altijd wanneer je onderdelen naast elkaar wilt plaatsen.

Wanneer niet?
Als je content gewoon onder elkaar wilt stapelen, heb je geen meerdere rijen nodig. Dan gebruik je één kolom en zet je de elementen onder elkaar.

Voorbeeld: Je wilt drie "feature"-blokken naast elkaar tonen. Je maakt één rij met drie kolommen van elk 4/12 (samen 12).

Kolom

Wat doet het?
Een kolom is een verticale eenheid met een instelbare breedte (de "spanwijdte"). Kolommen staan naast elkaar binnen een rij en verdelen samen de beschikbare ruimte.

Wanneer gebruik je dit?
Als je content naast elkaar wilt plaatsen.

Wanneer niet?
Maak niet voor elk klein element een aparte kolom. Een koptekst, tekst en knop die onder elkaar horen? Die gaan allemaal in dezelfde kolom. Een kolom per element maakt de structuur onnodig ingewikkeld.

Voorbeelden:

• Afbeelding links, tekst rechts → 2 kolommen (5/12 en 7/12)
• Drie kaarten naast elkaar → 3 kolommen (elk 4/12)

Box

Wat doet het?
Een box is een extra laag binnen een kolom waarmee je de uitlijning en richting van content instelt. Je bepaalt ermee of elementen gecentreerd staan, links of rechts uitgelijnd, of verticaal gestapeld versus horizontaal naast elkaar.

Wanneer gebruik je dit?
Als je specifieke uitlijning of contentrichting wilt instellen voor een groep elementen in een kolom.

Wanneer niet?
Niet elke kolom heeft een box nodig. Als je elementen gewoon onder elkaar wilt zetten (dat is de standaard), kun je ze direct in de kolom plaatsen zonder box.

Voorbeelden:

• Icoon boven, tekst eronder, knop onderaan → box met verticale richting
• Logo en navigatie naast elkaar in een header → box met horizontale richting

Wanneer gebruik je wat?

Veelgemaakte fouten

Meerdere containers naast elkaar in een rij
→ Dat klopt niet. Containers horen niet ín rijen — het is juist andersom: een container omsluit een rij.

Een rij direct in een blok, zonder container
→ Dit kan technisch, maar geeft onverwacht gedrag in de editor. Zet altijd een container om je rijen heen.

Een aparte kolom per element
→ Als je een koptekst in kolom 1, tekst in kolom 2 en een knop in kolom 3 zet, staan die naast elkaar — niet onder elkaar. Wil je ze onder elkaar? Zet ze allemaal in dezelfde kolom.

Geavanceerde structuur via code

De standaard opbouw is: blok → container → rij → kolom → (box) → content. Maar soms heb je een complexere indeling nodig. Met code kun je dieper nesten.

Voorbeeld: kolom in een kolom

Je wilt een brede afbeelding links en rechts twee tekstvakken boven elkaar:

Rij
  ├── Kolom (6/12) → afbeelding
  └── Kolom (6/12)
        ├── Rij → tekst + knop boven
        └── Rij → andere tekst onder

Voorbeeld: container in een container

Handig als je binnen een blok op volle breedte een smaller contentgedeelte wilt centreren:

Blok (volle breedte)
  └── Container (achtergrond op volle breedte)
        └── Container (content op 1056px)
              └── Rij → content

Tip: Gebruik geavanceerde nesting alleen als de standaard structuur niet voldoende is. Hoe dieper de nesting, hoe lastiger het blok via de editor te bewerken is.