Het coverblok of de omslagafbeelding gebruik je om omslagafbeeldingen of hero images toe te voegen.
Omslagafbeeldingen worden gebruikt als eerste opvallende afbeelding op een voorpagina. Ze staan meestal bovenaan en beslaan de hele breedte van het scherm.
1. Hoe voeg ik het blok toe? #
Klik op het icoon in de hoofdnavigatie of in het contentgebied. Typ ‘paragraaf’ en/of klik op het paragraaf blokicoon om het toe te voegen.
Vervolgens krijg je onderstaande opties te zien:
- Upload: Een afbeelding vanaf je computer uploaden
- Mediabibliotheek: Een afbeelding uit de mediabibliotheek selecteren
- Invoegen vanaf een URL: Een afbeelding vanuit een cloudopslag toevoegen.
Zodra de afbeelding is toegevoegd, zie je aan de rechterzijde en onderkant halverwege een cirkel. Klik en sleep de cirkel om de grootte van de afbeelding aan te passen.
Klik op een van de gekleurde cirkeltjes om de achtergrondkleur aan te passen. Dit kan later weer gewijzigd worden.
2. Blokwerkbalk #
Selecteer het blok zodat de blokwerkbalk 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 stippen heeft een sleepfunctie. Klik op de punten en houd ze vast om het blok te verplaatsen naar een nieuwe locatie. Naast de sleepfunctie staat een icoon met de pijlen omhoog en omlaag. Klik op één van de pijlen om het blok een plek omhoog of omlaag te schuiven.
2.3. Duotone filter toevoegen #
Dit voegt een tweekleurige filter toe op de afbeelding. In het scherm dat opent staan elf cirkels met twee kleuren. Klik op één van de cirkels om die kleur toe te passen.
Onder de elf cirkels staan de kleuren van de gekozen cirkel in een balk. De linker staat voor de schaduwen en de rechter staat voor de hoogtepunten.
Klik op één van de twee cirkels om de kleuren aan te passen of klink op de links ‘Schaduwen’ en ‘Hoogtepunten’ eronder.
2.4. Verander uitlijning #
Pas de uitlijning van de afbeelding aan naar:
- Geen
- Wijd
- Volle breedte
- Links
- In het midden
- Rechts
2.5. Wijzig positie van de tekst #
Klik op dit icoon ( 
) om de plaats van de tekst in te stellen. Het grote zwarte vierkantje in het icoon stelt de huidige plek voor. Klik op een van de kleinere grijze vierkantjes om de positie te wijzigen.
2.6. Schakel volledige hoogte in #
Klik op dit icoon ( 
) om de volledige hoogte van de afbeelding weer te geven.
2.7. Toevoegen/ vervang #
Hiermee kan je afbeeldingen toevoegen en/of vervangen. Klik hierop om de mediabibliotheek te openen of een andere afbeelding te uploaden.
2.8. 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 wil 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 uitstaat, houden de geneste (binnenste) blokken van de omslagafbeelding de breedte van de container (buitenste blok) aan. Wil je dat de geneste blokken deze breedte niet aanhouden, zet dan de schakelaar om. Er verschijnen vervolgens twee invulvelden die met elkaar verbonden zijn. Vul hier jouw gewenste breedte in pixels in.
3.1.2. Media-instellingen #
Hier vind je alle instellingen voor de omslagafbeelding, te beginnen met twee schakelaars:
Vaste achtergrond
Versleep de transparante witte stip over de afbeelding of vul de percentages in bij ‘links’ en ‘bovenaan’. Zet de schakelaar aan als je geen focuspunt wil instellen.
Herhalende achtergrond
Zet deze schakelaar aan als je wil dat jouw omslagafbeelding herhaald wordt.
Alternatieve tekst
De alternatieve tekst (alt-tekst) wordt weergegeven als een afbeelding niet geladen kan worden. Ook schermlezers gebruiken deze tekst. Beschrijf nauwkeurig wat er op de afbeelding te zien is, maar houd het beknopt.
Is de afbeelding alleen decoratief? Laat de alt-tekst dan leeg.
3.1.3. Geavanceerd #
Bloknaam
Pas hier de naam van het blok aan. Deze vind je terug in het ‘Document overzicht’.
HTML-element
Standaard wordt het blok in een <div>-tag geplaatst, wat dient als container voor andere HTML-elementen.
HTML-anchor
Dit is een plek op je pagina waar je naartoe kan 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 achtergrondkleur (binnen het blok). Na het klikken opent een submenu met twee tabbladen.
Effen
Hier heb je de keuze voor de themakleuren (ingesteld door de ontwikkelaar van Noeste IJver) en standaardkleuren.
Kleurverloop
Kies meerdere aangepaste kleuren door op een plek in het balkje te klikken om een kleursubmenu 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 kan kiezen voor:
- Radiaal: Van het midden naar buiten
- Lineair: Standaard van links naar rechts
Bedekking (overlay) opaciteit
Pas de mate van kleurdekking aan met een schuifregelaar om de omslagafbeelding donkerder te maken. Dit maakt de (kop)tekst beter leesbaar.
Filters (duotone)
Voeg een tweekleurig filter toe aan de afbeelding door een van de elf cirkels te kiezen.
3.2.2. Typografie #
Hier vind je alle instellingen voor het bewerken van lettertypes.
Grootte
Dit is een standaardinstelling die altijd zichtbaar is. Als je wil dat de grootte van een (kop)tekst afwijkt van de standaard, kan je kiezen uit 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:
- Fontfamilie: de stijl van de letters
- Weergave: de dikte van de letters binnen de fontfamilie
- Lijnhoogte: de hoogte van de letters
- Letterafstand: de ruimte tussen de letters
- 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 kiezen welke zijden je wil 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 (Of %, 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 kiezen welke zijden je wil 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 (Of %, VW of VH). Meer uitleg hierover vind je in dit overzicht.
Blokafstand
Bepaal de afstand tussen blokken door de blauwe stip te verschuiven.
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.
Minimumhoogte
Vul hier in hoe hoog je het blok wil weergeven.
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.
3.2.3. Rand #
Dit zijn de instellingen voor de rand:
- Kies een kleur of laat het op transparant staan
- Pas de breedte van de rand aan met de schuifregelaar of voer het in. Klik op ‘PX’ om voor een andere eenheid te kiezen. Meer uitleg over eenheden vind je in dit artikel.
- Met het icoon (
) staan alle zijden 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.