Het kolommenblok is een blok die je kan gebruiken om een kolommen (maximaal 6) aan een pagina toe te voegen.
Het kolommenblok doet zelf niets. Het is een container die je kunt vullen met kolomblokken. Gebruik dit blok om content in gelijkmatige blokken (kolommen) over de pagina te verdelen.
1. Hoe voeg ik het blok toe? #
Klik op het + icoon in de hoofdnavigatie of in het content gebied. Typ ‘kolommen’ en klik op het kolommenblokicoon om het toe te voegen.
Vervolgens krijg je onderstaand keuzemenu. Kies hier voor een variantie die het beste bij jouw content past.
Klik op dit icoon ( ) om de ‘Document weergave‘ in te zien. Na het toevoegen vind je hier het kolommenblok met het aantal gekozen subkolomblokken.
Deze subkolommen zijn nog leeg. Klik op het + icoon in de kolom om de kolom te vullen.
2. Blokwerkbalk #
Selecteer het blok zodat de blokwerkbalk (erboven) weergegeven wordt. Hieronder leggen we uit wat elke functie in de blokwerkbalk doet.
2.1. Verander naar een ander type blok #
Standaard staat hier het (geselecteerde) blokicoon, dat per blok verschilt. Klik hierop om een ander blok te kiezen zonder dit blok te verwijderen en weer op het + icoon te hoeven klikken. Kies een blok uit de lijst die na het klikken verschijnt.
2.2. Verander blokuitlijning #
Verander hiermee de uitlijningen naar:
- Geen
- Wijd
- Volle breedte
2.3. Verander verticale item-uitlijning #
Hier kan je de verticale uitlijning van de items instellen. Kies voor:
- Boven
- In het midden
- Onder
- Uitgerekt (volledige kolom gevuld)
Let op: zowel het kolommenblok als het kolom-subblok heeft deze functie. De functie werkt als volgt: het regelt de verticale uitlijning van het subblok in de ruimte van het containerblok.
2.4. Meer opties #
Onder dit icoon vind je meer bewerkingsfuncties zoals:
- Dupliceren
- Verwijderen
- Invoegen voor
- Invoegen na
- Bewerken in HTML
Hiervoor hebben we een apart overzicht gemaakt op deze pagina. Zoek naar de functie die je wilt gebruiken.
3. Blokinstellingen #
De blokinstellingen zijn verdeeld in twee tabbladen: Instellingen ( 
) en stijlen ( 
)
3.1. Instellingen #
Pas hei de werking van het blok aan.
3.1.1. Kolommen #
Hier kan je het aantal kolommen bewerken. Schuif de regelaar naar rechts om meer kolommen toe te voegen of verander het getal van de schuifregelaar naar het aantal gewenste kolommen.
Zet de schakelaar ‘stapel op mobiel’ aan om de kolommen op kleinere schermen niet naast elkaar weer te geven, maar onder elkaar.
3.1.2. Geavanceerd #
Bloknaam
Pas hier de naam van het blok aan. Deze bloknaam vind je terug in het ‘Document overzicht‘.
HTML-Anchor
Dit is een plek op je pagina waar je naartoe kunt linken. Vul hier een woord in dat je ergens anders in een link gebruikt om ervoor te zorgen dat de bezoeker direct naar die plek wordt geleid.
Extra CSS-klasse
Gebruik dit invulveld om extra CSS-klassen toe te voegen.
3.2. Stijlen #
Pas heir de opmaak van het blok aan.
3.2.1. Kleur #
Kies de kleur van de tekst, link en/of de achtergrondkleur (binnen het blok). Na het klikken opent een submenu met twee tabbladen:
- Effen
- Kleurverloop
Kies hier voor een effen kleur of een kleurverloop met twee kleuren.
Effen
Hier heb je de keuze voor de themakleuren (ingesteld door de ontwikkelaar van Noeste IJver) en standaard kleuren.
Kleurverloop
Kies meerdere aangepaste kleuren door op een plek in het balkje te klikken om een kleur submenu te openen en een kleur te kiezen. Het kleurverloop gaat over in de kleur die je op een bepaalde plek in de balk gekozen hebt. Je kunt kiezen voor:
- Lineair kleurverloop: Standaard van links naar rechts
- Radiaal kleurverloop: Waarbij de kleur links in de balk in het midden wordt weerggegeven en naar buiten uitloopt in een andere kleur
3.2.2. Typografie #
Hier vind je alle instellingen voor het bewerken en van lettertypes.
Grootte
Dit is een standaard instelling die altijd zichtbaar is. Als je wilt dat de grootte van een (kop)tekst afwijkt van de standaard, dan kan je kiezen voor de volgende maten:
- S
- M
- L
- XL
- XXL
Wil je het zelf instellen? Klik dan op dit icoon ( 
). Kies hier voor PX, EM, REM (Of %, VW of VH). Meer uitleg hierover vind je in dit overzicht.
Meer opties
Via het driepuntenicoon achter het woord typografie kan je meerdere instellingen zichtbaar maken:
- Font familie: De stijl van de letters
- Weergave: De dikte van de letters binnen de font familie
- Lijnhoogte: Hoe hoog de letters zijn
- Letterafstand: Hoe ver de letters van elkaar af staan
- Tekstversiering: Onderlijnen of doorhalen van de tekst
- Letter case: De manier van hoofdlettergebruik: HOOFDLETTERS, kleine letters of Met Hoofdletter
3.2.3. Afmetingen #
Pas hier de ruimte om het blok aan.
Klik op het + icoon achter ‘Afmetingen‘ en maak een keuze.
Padding
De padding is de ruimte tussen de rand van het blok en de tekst.
Klik op dit icoon ( 
) om te keizen welke zijden je wilt aanpassen. Verschuif de blauwe stip om de padding groter of kleiner te maken.
Wil je het zelf instellen? Klik dan op dit icoon ( ). Kies hier voor PX, %, EM, REM, VW of VH. Meer uitleg hierover vind je in dit overzicht.
Marges
De marge bepaalt de ruimte tussen de blokken.
Klik op dit icoon ( ) om te keizen welke zijden je wilt aanpassen. Verschuif de blauwe stip om de padding groter of kleiner te maken.
Wil je het zelf instellen? Klik dan op dit icoon ( ). Kies hier voor PX, %, EM, REM, VW of VH. Meer uitleg hierover vind je in dit overzicht.
Blokafstand
Bij blokafstand kan je de afstand tussen de blokken instellen. Verschuif de blauwe stip om de afstand groter te maken.
Wil je het zelf instellen? Klik dan op dit icoon ( ). Kies hier voor PX, %, EM, REM, VW of VH. Meer uitleg hierover vind je in dit overzicht.
3.2.4. Rand #
Dit zijn de instellingen voor de rand:
- Kies voor een kleur of laat het op transparant staan.
- Voer in hoe breed je de rand wil weergeven of pas de breedte aan emt de schuifregelaar ernaast. Je kan op ‘PX‘ klikken om te kiezen voor een andere eenheid. Bekijk de uitleg over de eenheden in dit artikel.
- Met dit icoon (
) staan alle klanten van de rand aan elkaar gekopppeld. Wil je niet alle randen even dik? Klik dan op dit icoon om de randen apart in te stellen.
Radius
De radius maakt de hoeken van de rand ronder. Gebruik pixels om de hoeken af te ronden. Gebruik het percentage om de rand elliptisch te maken. Bekijk de uitleg over de eenheden in dit artikel.