Terug naar Ondersteuning Inhoud en media Blokken Omslagafbeeldingblok

Omslagafbeeldingblok

In een omslagafbeeldingblok wordt een afbeelding of video weergegeven waaraan je tekst en andere content kunt toevoegen. Het is geschikt voor kopteksten en andere weergaven in banner-stijl. In deze handleiding lees je hoe je het omslagafbeeldingsblok kunt gebruiken om je bericht of pagina een mooie, professionele look te geven.

Instructievideo

Het omslagafbeeldingblok toevoegen

Om het omslagafbeeldingblok toe te voegen, klik je op het invoegpictogram + Blok en zoek je naar ‘cover’. Klik erop om het blok toe te voegen aan het bericht of de pagina.

💡

Je kunt met behulp van je toetsenbord ook /cover op een nieuwe regel typen en op Enter drukken om snel een nieuw omslagafbeeldingblok toe te voegen.

Je kan de slash-opdracht /cover gebruiken om een omslagafbeeldingblok toe te voegen.

Meer gedetailleerde instructies over het toevoegen van blokken vind je hier.

Een afbeelding kiezen

Wanneer je het blok invoegt, heb je twee opties om een afbeelding of video in te stellen: media uploaden en selecteren:

  1. Kies Uploaden om een nieuwe afbeelding of video vanaf je apparaat toe te voegen.
  2. Kies Media selecteren om een bestaande afbeelding of video op je site of een afbeelding van Google Foto’s, de Pexels Free Photos-bibliotheek of Openverse te selecteren.

Je kunt daarnaast de optie Uitgelichte afbeelding gebruiken selecteren om de omslagafbeelding als de uitgelichte afbeelding van je pagina of bericht in te stellen.

Je kunt ook op de gekleurde cirkels klikken om de respectievelijke achtergrondkleur voor je omslagafbeelding te gebruiken. Je kunt de kleur later veranderen naar een willekeurige andere kleur in de blokinstellingen.

Het omslagafbeeldingblok selecteren

Nadat je een omslagafbeelding hebt toegevoegd, kun je deze selecteren in de Lijstweergave om de betreffende werkbalk en het instellingenpaneel te openen in de rechterzijbalk:

Een omslagafbeelding selecteren in de Lijstweergave.
Tips voor het kiezen van een afbeelding

Tekst en andere content toevoegen

Nu je een afbeelding hebt geselecteerd, kan je er een titel op plaatsen. Je kan dit bijvoorbeeld doen om een nieuwe sectie, een bericht of pagina een titel te geven. Je kan ook andere blokken toevoegen om weer te geven bovenaan het omslagafbeeldingblok, zoals een Knopblok of Paragraafblok.

Blokwerkbalk

Als je op het blok klikt, wordt er boven het blok een werkbalk met opties weergegeven:

De werkbalk voor omslagafbeeldingblokken

Deze opties zijn:

Uitlijning

Zoals bij vele andere blokken kan je het omslagafbeeldingblok zelf links, rechts of in het midden uitlijnen met behulp van de werkbalk. Wanneer je voor Links uitlijnen of Rechts uitlijnen kiest, kan je een ander blok naast het omslagafbeeldingblok plaatsen.

Het omslagafbeeldingblok kan ook breed of op volledige breedte worden uitgelijnd. Deze opties zijn handig voor het creëren van unieke kopteksten en breedbeeldeffecten. Deze twee opties zijn alleen beschikbaar als je thema dit soort uitlijningen ondersteunt. 

Breedbeeldafbeelding boven een afbeelding met volledige breedte, om te tonen dat Volledige breedte verder reikt.
Met Breed wordt de bijbehorende kolom uitgerekt, terwijl het blok met volledige breedte over de volledige paginabreedte loopt.
Plaats van content

Gebruik de optie Plaats van content om aan te passen waar tekst en andere content moet worden geplaatst op de afbeelding:

Door te klikken op de knop Plaats van content in de werkbalk, krijg je opties te zien waarmee je aan het omslagafbeeldingblok toegevoegde content kunt uitlijnen.
De content verplaatsen in het blok met behulp van Plaats van content
Uitlijning van volledige hoogte

Om in te stellen dat de afbeelding altijd in de volledige grootte wordt weergegeven, kun je de optie Volledige hoogte aan/uit instellen in de werkbalk van het blok dat verschijnt wanneer je erop klikt.

GIF waarin wordt getoond hoe de volledige hoogte voor het omslagafbeeldingblok wordt ingesteld
Duotone-filter toepassen

Met de duotone-filteroptie kun je de kleuren van de afbeelding configureren via de blokwerkbalk. Denk aan zwart-wit foto’s, maar dan in iedere kleurencombinatie die je wilt. Klik om aan de slag te gaan op de knop Duotone-filter in de werkbalk, kies vervolgens uit de voorbeelden hieronder, of configureer je eigen kleuren.

Een GIF van een afbeelding waar in de editor op wordt geklikt en waar vervolgens verschillende Duotone-filters op worden toegepast om te kijken hoe het eruit ziet.

Om je eigen kleuren te configureren, selecteer je de stippen op de kleurbalken:

Een schermafbeelding met markeringen waar op de instellingen van het Duotone-filter moet worden geklikt om een aangepaste kleur te configureren op de kleurbalk.
Een uitgelichte afbeelding in een omslagafbeeldingblok weergeven

Gebruik het omslagafbeeldingblok als je de uitgelichte afbeelding ook automatisch bovenaan je bericht of pagina wilt weergeven.

  1. Voeg een uitgelichte afbeelding aan je bericht of pagina toe.
  2. Voeg een omslagafbeeldingblok toe door te klikken op het invoegpictogram + Blok of door /cover op een nieuwe regel te typen, en druk vervolgens op Enter.
  3. Klik op de werkbalk van het omslagafbeeldingblok op Media toevoegen en selecteer vervolgens Uitgelichte afbeelding gebruiken. Je huidige uitgelichte afbeelding wordt dan automatisch opgehaald en aan het omslagafbeeldingblok toegevoegd.
Je uitgelichte afbeelding gebruiken in een omslagafbeeldingblok.
Afbeelding vervangen

Dit is een andere optie op de werkbalk van het omslagafbeeldingblok die zichtbaar wordt nadat je een eerste afbeelding of video hebt toegevoegd. Als je Vervangen kiest, kun je een nieuw mediabestand voor je omslagafbeeldingblok selecteren.

De afbeelding of video op het omslagafbeeldingblok vervangen.

Blokinstellingen

Als je op het blok klikt, zie je aanvullende blokinstellingen in de rechterzijbalk. Als je de zijbalk niet ziet, moet je wellicht op het pictogram Instellingen in de rechterbovenhoek klikken om de instellingen weer te geven. Dit pictogram lijkt op een vierkant met twee oneven kolommen:

Het instellingenpictogram in de Editor met een zwarte achtergrond en daaronder de tooltip 'Instellingen'.
Klik op het pictogram Instellingen om de blokinstellingen te openen
Stijlen

Gebruik de stijlen in de instellingen van het omslagafbeeldingblok om een golvend effect toe te voegen aan de boven- of onderkant van de omslagafbeelding.

In het gedeelte Stijlen staan drie opties: een standaard optie, een met een golf onderaan en een met een golf bovenaan.
Vaste achtergrond

In de blokinstellingen van de zijbalk zie je een schakelaar voor een vaste achtergrond. Een vaste achtergrond houdt in dat de omslagafbeelding met de pagina mee scrolt. Als je deze optie uitschakelt, krijgt de afbeelding een vaste plaats en scrolt deze niet mee.

De vastgezette afbeelding beweegt dus met het scherm mee wanneer je scrolt.

Deze functie, ook wel bekend als een parallaxeffect, kan op sommige mobiele apparaten worden uitgeschakeld om de paginaprestaties te verbeteren.

Herhaalde achtergrond

Met de optie Herhaalde achtergrond kun je dezelfde afbeelding herhaald weergeven, zodat deze een patroon vormt in het omslagafbeeldingblok. Als je bijvoorbeeld een kleine afbeelding van een ballon hebt en je deze meerdere keren in het omslagafbeeldingblok wilt weergeven, kun je deze optie inschakelen. Zo ziet dit dan eruit:

De schakelknop voor herhaalde achtergrond vind je bij media-instellingen in de zijbalk voor het omslagafbeeldingblok.
Eén afbeelding die meerdere keren wordt weergegeven aan de hand van de optie Herhaalde achtergrond.

💡

Kies een kleine afbeelding om hem meerdere keren te herhalen. Hoe kleiner de afbeelding, hoe vaker hij wordt herhaald.

Je kunt de schakelknop voor Herhaalde achtergrond samen met Vaste achtergrond gebruiken, maar het is niet verplicht Vaste achtergrond in te schakelen. Speel gerust met deze opties en ontdek wat bij je site past.

Focuspunt selecteren

Als de optie voor een vaste achtergrond is uitgeschakeld, zie je de kiezer van het focuspunt. Met deze tool kan je het belangrijkste detail van de foto identificeren en dat extra laten opvallen. Klik op de kiezer om deze te verslepen naar het door jou gewenste punt, of gebruik de horizontale en verticale positiepercentages eronder om het punt handmatig in te stellen.

Alt. tekst

In het tekstveld kun je een alternatieve tekstbeschrijving toevoegen om de toegankelijkheid en SEO te verbeteren.

Media wissen

Om de omslagafbeelding te wissen en plaats te maken voor een achtergrond met één kleur, gebruik je de optie ‘Media wissen’, zoals hier weergegeven:

Knop Media wissen
Selecteer ‘Media wissen’ om de omslagafbeelding te wissen
Kleur van de overlay

Met de overlay-kleurenopties kan je een gekleurde overlay toevoegen aan de omslagafbeelding. Dit is standaard een grijze, transparante overlay, maar met de overlay-kleurenopties kan je die kleur wijzigen naar de kleur van jouw keuze.

De optie Kleur van de overlay staat in de zijbalk bij Overlay. Hiermee kun je kiezen uit een reeks kleuren, een aangepaste kleur instellen en de transparantie aanpassen.
Voeg een gekleurde overlay toe en stel de doorzichtigheid in.
Transparantie

Met deze schuifbalk stel je de doorzichtigheid van de overlay van de omslagafbeelding in. Door de schuifbalk naar 100 te verplaatsen, wordt de overlay donkerder en minder doorzichtig en door deze naar 0 te verplaatsen, wordt de overlay lichter en transparanter. Op 100 is de overlay volledig ondoorzichtig en is de omslagafbeelding niet meer zichtbaar. Op 0 verdwijnt de overlay volledig en is alleen je afbeelding nog zichtbaar.

💡

Als je een titel toevoegt aan je omslagafbeelding, raden we je aan om de overlay in ieder geval een beetje ondoorzichtig te maken, zodat de tekst makkelijker leesbaar is.

Typografie

Pas de weergave van je bloktekst aan met de volgende instellingen.

Als je de instelling niet ziet, klik je op de drie stippen rechts van Typografie (zoals rechts weergegeven). Je kunt vervolgens de optie kiezen die je wilt openen:

  • Lettergrootte
  • Lettertypefamilie
  • Weergave
  • Lijnhoogte
  • Decoratie
  • Hoofdletter of kleine letter
  • Letterafstand
Vervolgkeuzemenu Typografie
Typografie in de zijbalk van de blokinstellingen, met de extra opties uitgevouwen.

Lettergrootte stelt je in staat om de grootte van de tekst aan te passen. Je kunt uit vooringestelde groottes kiezen, zoals klein, gemiddeld en groot.

Je kunt ook een specifieke waarde instellen door op de schuifbalk direct boven de standaardselecties te klikken, die in onderstaande schermafbeelding met een 1 gemarkeerd is. Je kunt de eenheden wijzigen door op de plek te klikken waar in de schermafbeelding hieronder een 2 gemarkeerd is. Je kunt kiezen uit pixels, em of rem.

Instellingen lettergrootte typografie

Lettertypefamilie geeft je de optie om het gebruikte lettertype te wijzigen. Kies uit een lijst met lettertypes in het vervolgkeuzemenu.

Met Weergave kun je het lettertype wijzigen tussen normaal en schuingedrukt, van dun tot extra dik.

Regelhoogte stelt de lege ruimte boven en onder de tekst in. Als je voor nul kiest, is het verstandig om de site op je telefoon te bekijken.

Decoratie bevat opties voor onderstrepen en doorstrepen.

Met Hoofdletters of kleine letters kun je de hele tekst in hoofdletters te schrijven, alleen de eerste letter in een hoofdletter schrijven of alles in kleine letters schrijven.

Letterafstand bepaalt de ruimte tussen elk teken in de tekst. Je kunt de eenheden wijzigen van de standaard (pixels) naar een percentage, em, rem, vw en vh. Meer informatie over relatieve eenheden vind je hier.

Afmetingen

Je kan de minimumhoogte van de omslagafbeelding (in pixels) instellen, zodat deze altijd minimaal zo hoog is als waarop je deze instelt, ongeacht welk formaat scherm iemand gebruikt om de pagina te bekijken.

Je kunt ook opvulling toevoegen om de ruimte rondom de content in het omslagafbeeldingblok te vergroten.

Video in het omslagafbeeldingblok

Deze functie is van toepassing op sites die onze WordPress.com Explorer-, Creator- of Entrepeneur-abonnementen gebruiken. Als je site een van onze oude abonnementen gebruikt, is deze beschikbaar voor Pro-abonnementen.

Je kunt een video gebruiken in het omslagafbeeldingblok. Video’s werken het beste als .mp4-bestand, maar je kunt je video’s ook in andere bestandsindelingen uploaden. Bekijk de lijst met geaccepteerde indelingen.

De omslagafbeelding speelt geen geluid van het videobestand af. Als je wilt dat je video geluid afspeelt, gebruik je het Videoblok.

Voeg het omslagafbeeldingblok zoals gewoonlijk toe, maar kies ervoor om een video in plaats van een afbeelding toe te voegen. Vervolgens kun je de video die je wilt invoegen selecteren en zo nodig de breedte-instellingen van het blok bijstellen.

Daarna ben je er klaar voor om tekst of knoppen toe te voegen die je op de omslagvideo wil weergeven.

Geavanceerd

Met het tabblad Geavanceerd kun je een CSS-klasse toevoegen aan je blok, zodat je aangepaste CSS kunt schrijven en de stijl van het blok naar wens kunt aanpassen. Meer informatie.

In het gedeelte Geavanceerd kun je een CSS-klasse aan je blok toevoegen.
Copied to clipboard!