Het stapelenblok is een groepvariatieblok die je kan gebruiken om een andere blokken boven elkaar te groeperen. Het stapelenblok doet zelf niets. Het is een container die je kunt vullen met andere blokken die vervolgens netjes onder elkaar komen te staan.
1. Hoe voeg ik het blok toe? #
Klik op het + icoon in de hoofdnavigatie of in het content gebied. Typ ‘stapelen‘ en klik op het stapelen blokicoon om het toe te voegen.
Vervolgens komt onderstaande afbeelding in het contentgebied te staan. Het is een voorbeeld van een stapel blokken. De bovenste rechthoek met de + is een blok, daaronder is een tussenruimte en daaronder weer ruimte voor een volgend blok.
Klik op het kruisje om een blok toe te voegen die het begin vormt van de stapel.
Zodra je het eerste veld van de stapel gevuld hebt, typ je ‘Enter‘ om een tweede blok toe te voegen in de stapel. Dit nieuwe blok is een standaard paragraafblok die je vervolgens weer kan veranderen naar een ander gewenst blok.
Je kunt ook op dit icoon ( 
) klikken in de hoofdnavigatie om de ‘Document weergave‘ in te zien. Je ziet daar vervolgens het stapelblok als hoofdcontainer staan. Daaronder ‘hangt’ het subblok dat je hebt toegevoegd. Selecteer dit subblok en klik op het opties icoon ( ). Kies voor de optie ‘toevoegen voor/na‘ om een blok ervoor of erachter toe te voegen.
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. Blok verplaatsen #
Het icoon met zes stipjes heeft een sleepfunctie. Klik op deze puntjes en houd ze vast om het blok te verplaatsen naar een nieuwe locatie. Naast de sleepfunctie staat een icoon met een pijltje omhoog en omlaag. Klik op één van de pijltjes om het blok een plekje omhoog of omlaag te schuiven.
2.3. Verander horizontale item-uitlijning #
Hier kan je de horizontale uitlijning van de items instellen. Kies voor:
- Links
- In het midden
- Rechts
- Gelijkmatig verspreid
2.4. Verander verticale item-uitlijning #
Hier kan je de verticale uitlijning van de items instellen. Kies voor:
- Boven
- In het midden
- Onder
- Uitgerekt (Kolom vullend)
Het kan zijn dat je hier weinig verandering ziet omdat de items al boven elkaar staan.
2.5. Verander blokuitlijning #
Verander hiermee de uitlijning naar:
- Geen
- Wijd
- Volle breedte
2.6. 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 hier de werking van het blok aan.
3.1.1. Layout #
Kies hier eerst voor een horizontale of verticale oriëntatie (richting) van de items. Vervolgens kan je de items uitlijnen bij ‘Justifaction‘.
Opties horizontaal
- Links
- Midden
- Rechts
- Gelijkmatig uitlijnen
Opties verticaal
- Boven
- Midden
- Onder uitlijnen
- Uitrekken
Toestaan om op meerdere regels weer te geven
Hier kan je inschakelen of de items automatisch overvloeien op een volgende regels als ze slecht op één regel passen.
Als deze optie uitgeschakeld staat, worden de items kleiner zodat ze allemaal op dezelfde regel passen en wordt de tekst afgebroken.
3.1.2. Positie #
Hier kan je kiezen voor ‘Standaard‘ of ‘Sticky‘. Standaard is zoals het ongewijzigd werkt. Sticky betekent dat het blok bovenaan in het scherm op dezelfde positie blijft staan als je naar boven of onder scrolt.
3.1.3. Geavanceerd #
Bloknaam
Pas hier de naam van het blok aan. De bloknaam vind je terug in het ‘Document overzicht‘.
HTML-element
Pas hier de HTML-tag. Standaard staat het blok in een <div. tag. Dit staat voor division en wordt gebruikt als container voor andere HTML elementen.
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 hier de opmaak van het blok aan.
3.2.1. Kleur #
Kies de kleur van de tekst, link en/of de achtergrondkleur. Na het klikken opent een submenu met twee tabbladen: ‘effen‘ en ‘kleurverloop‘.
Effen
Hier heb je de keuze voor de themakleuren (ingesteld door de ontwikelaar van Noeste IJver) en standaardkleuren.
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 kleurverloo pgaat over in de kleur die je op een bepaalde plek in de balk gekozen hebt. Je kunt kiezen voor een ‘Lineair kleurverloop‘ (van links naar rechts) of een ‘Radiaal kleurverloop‘ (vanuit het midden naar buiten).
3.2.2. Achtergrondafbeelding #
Klik hierop om een afbeelding te downloaden of uit de mediabibliotheek te halen, om als achtergrondafbeelding te dienen voor dit blok.
Hier vind je ook een reset optie om de achtergrondafbeelding te verwijderen.
3.2.3. Typografie #
Hier vind je alle instellingen voor het bewerken 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). Uitleg hierover vind je in dit overzicht.
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
- Tekstversieringen: Onderlijnen of doorhalen van de tekst
- Lettercase: de manier van hoofdlettergebruik: HOOFDLETTERS, kleine letters, Of Met Hoofdletter.
3.2.4. 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 kiezen 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. Vind uitleg hierover in dit overzicht.
Marges
De marge bepaalt de ruimte tussen de blokken.
Klik op dit icoon ( ) om te kiezen 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. Vind uitleg hierover 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 iccon ( ). Kies hier voor PX, %, EM, REM, VW of VH. Vind uitleg hierover in dit overzicht.
Minimumhoogte
Vul hier in hoe hoog je het blok wil weergeven. Ook hier kan je kiezen voor PX, %, EM, REM, VW of VH. Vind uitleg hierover in dit overzicht.
3.2.5. 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 met 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 kanten van de rand aan elkaar gekoppeld. 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. Meer uitleg over deze eenheden vind je hier.
met dit icoon ( ) staan alle kanten van de rand aan elkaar gekoppeld. Wil je niet alle randen even dik? Klik dan op dit icoon om de randen apart in te stellen.