Dit blok is bedoeld als subblok van het query loop-blok. Het laat de uitgelichte afbeelding van een bericht zien.
1. Hoe voeg ik het blok toe? #
Klik vervolgens op het + icoon in de hoofdnavigatie of in het content gebied. Typ ‘Uitgelichte afbeelding‘ en klik op het Uitgelichte afbeeldingblokicoon 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 bok een plekje omhoog of omlaag te schuiven.
2.3. Duotoon #
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 blokuitlijning #
Verander hiermee de uitlijning naar:
- Geen
- Wijd
- Volle breedte
- Links
- In het midden
- Rechts
2.5. Vervang/Toevoegen #
Hiermee kan je de afbeeldingen toevoegen of vervangen. Klik hierop om de mediabibliotheek te openen of om een andere afbeelding te uploaden.
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 #
Zet de schakelaar ‘Link naar pagina‘ aan om van de afbeelding een link naar een andere pagina te maken.
3.1.1. Geavanceerd #
Bloknaam
Pas hier de naam van het blok aan. Deze 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 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 kunt kiezen voor:
- Lineair: Standaard van links naar rechts
- Radiaal: Van het midden naar buiten
Overlay opaciteit
Stel hier de intensiteit van bedekkende kleur in.
3.2.2. Filters (duotone) #
Voeg 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 de filter over de afbeelding te plaatsen.
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 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 (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 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 (Of %, VW of VH). Meer uitleg hierover vind je in dit overzicht.
Beeldverhouding
De afbeelding wordt standaard rechthoekig ingeladen. In dit keuzemenu vind je de opties voor andere verhoudingen. Bijvoorbeeld:
- 1:1 (vierkant)
- 16:9 (extra breed)
- 9:16 (extra hoog)
Wil je de hoogte en breedte van de afbeelding handmatig aanpassen? Vul dan hier het aantal pixels in. Let op: Deze pixels staan vast en passen zich niet aan verschillende beeldschermen aan. Dit kan tot onverwacht gedrag (bugs) leiden.
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 op pas de breedte aan met de schuifregelaar ernaast. Je kan op ‘PX’ klikken om te kiezen voor een andere eneheid. 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.
De radius maakt de hoeke nvan de rand ronder. Gebruik pixels om de hoeken af te ronden. Gebruik percentage om de rand elliptisch te maken. Meer uitleg over deze eenheden vind je 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.