Een card is een patroon van blokken in een container. Het heet een card omdat het lijkt op een kaart uit een kaartenspel. Zo kan je de content in een aantal ‘kaarten‘ op een pagina weergeven in dezelfde opmaak.
Let op: het cardblok heeft een beperkt aantal bloksoorten die je kan toevoegen. Als een blok niet beschikbaar is, overweeg dan zelf een card te bouwen met een ander blok, bijvoorbeeld met het kolommenblok.
1. Hoe voeg ik het blok toe? #
Klik op het + icoon in de hoofdnavigatie of in het content gebied. Typ ‘card‘ en klik op het cardblokicoon om het 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 een uitlijning links, in het midden, rechts of gelijkmatig verspreid.
2.4. Verander verticale item-uitlijning #
Hier kan je de verticale uitlijning van het item instellen. Kies voor:
- Boven
- In het midden
- Onder
- Uitgerekt (Kolom vullend)
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 #
Hier vind je een schakelaar om de layout van de geneste blokken te beïnvloeden.
Als de schakelaar uit staat dan houden de geneste blokken van de omslagbeelding de breedte van de container aan.
Wil jen iet dat de geneste blokken de breedte van de container aanhouden? Zet dan de schakelaar om. Er verschijnen vervolgens twee invulvelden die met elkaar verbonden zijn. Vul hier jouw gewenste breedte in pixel is.
Uitlijning en oriëntatie
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. Geavanceerd #
Bloknaam
Pas hier de naam van het blok aan. De bloknaam vind je terug in het ‘Document overzicht‘.
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).
Standaard en hover
Na het klikken op ‘Link‘ opent een submenu met twee tabbladen:
- Standaard: Staar voro de kleur van de link die altijd in beeld is.
- Hover: Staat voor de kleur die verschijnt als je met je muis op de link gaat staan.
3.2.2 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.
3.2.3. 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.