Foto met overlay

Het Foto met overlay-blok toont een foto met daarop een tekstvlak: een bovenkop, een kop, korte tekst en tot drie knoppen. Jij kiest waar het vlak op de foto staat en in welke kleurencombinatie. Ideaal als blikvanger met boodschap: een sfeerfoto van je kantoor met een slogan en een knop naar je contactpagina.

De foto wordt nooit bijgesneden: ze verschijnt in haar natuurlijke verhouding. De vrije ruimte voor het tekstvlak moet dus in de foto zelf zitten.

Hoe het op de site verschijnt

Velden

Veld	Type	Verplicht	Wat erin?
Breedte	Keuze: In de contentkolom / Schermbreed	Nee	Standaard In de contentkolom. Schermbreed werkt op de homepage en op pagina's zonder zijkolom (contact, nieuws, producten); op gewone pagina's volgt het blok altijd de contentkolom.
Foto	Bestand (afbeelding)	Ja	Foto op natuurlijke verhouding. Laat in het beeld zelf een rustige zone vrij waar de overlay komt.
Foto mobiel	Bestand (afbeelding)	Nee	Staand beeld voor kleine schermen, vervangt de foto op tablet en smartphone. Sterk aanbevolen bij brede foto's: een 3:1-beeld is op een telefoon maar zo'n 125 px hoog.
Bovenkop	Tekst	Nee	Kleine regel boven de kop (tagline).
Kop	Tekst	Nee	De titel in het vlak.
Tekst	Tekst-editor	Nee	Hou het kort: de overlay moet in de vrije zone van de foto passen.
Knoppen	Lijst van links	Nee	Maximaal 3. Elke knop is een link (intern, extern, e-mail, telefoon, bestand). Zonder knoppen toont de overlay alleen tekst.
Positie overlay	Keuze: 3×3-raster	Nee	Waar het vlak op de foto staat: links/midden/rechts × boven/midden/onder. Standaard Midden. Geldt alleen op desktop.
Tekstweergave	Keuze (4 opties)	Nee	Donkere tekst, zonder vlak (standaard), Lichte tekst, zonder vlak, Donkere tekst op wit vlak of Lichte tekst op primair vlak. Kies lichte tekst op een donkere foto; een vlak helpt op een drukke foto.
Overlay op mobiel	Keuze: Onder het beeld / Niet tonen	Nee	Standaard Onder het beeld. Niet tonen is bedoeld voor een decoratieve slogan; een kop met knoppen toon je gewoon.

Hoe het rendert

• Desktop: de foto op volle breedte van de kolom (of schermbreed), met het tekstvlak erop in de gekozen positie en kleurencombinatie.
• Tablet en mobiel (onder 992 px): het tekstvlak staat altijd onder de foto, gecentreerd, ongeacht de gekozen positie. Zo overlapt tekst nooit het beeld. Met Niet tonen verdwijnt het vlak daar helemaal.
• Is er een Foto mobiel, dan vervangt die op tablet en mobiel de gewone foto.
• Laat je alle overlay-velden leeg, dan toont het blok gewoon de foto.
• Knoppen zonder ingevulde link worden niet getoond.

Wanneer gebruiken

• Blikvanger op de homepage of bovenaan een landingspagina: sfeerfoto met slogan en knop.
• Teamfoto met boodschap: "Ons team staat voor u klaar" met een knop naar de teampagina of een afspraak.
• Campagne of actie: een beeld met een korte oproep en één duidelijke knop.

Gebruik niet voor

• Een foto zonder boodschap — dan volstaat een Foto-blok.
• Veel tekst naast een foto — dan een Foto + tekst-blok.
• Meerdere foto's na elkaar — dan een Foto-carrousel.

Tips

• Laat de ontwerper de vrije zone in de foto zelf voorzien: een rustig stuk lucht, muur of wazige achtergrond waar de tekst leesbaar op staat.
• Kies het vlak op basis van de foto: lichte tekst zonder vlak op een donkere foto, een wit of primair vlak op een drukke of lichte foto.
• Voorzie een Foto mobiel zodra je foto breder is dan hoog. Anders wordt het beeld op een telefoon een smal strookje.
• Eén knop is meestal genoeg: hoe minder keuze, hoe meer klikken.
• Lever de foto aan op 2400 pixels breed (3600 bij Schermbreed); het CMS maakt er zelf lichtere WebP-versies van. Zie Foto's voor het web.

Veelgemaakte fouten

• Tekst op een druk deel van de foto → onleesbaar. Verplaats de overlay via Positie overlay of kies een variant met vlak.
• Lange tekst in de overlay → het vlak loopt buiten de vrije zone. Hou het bij één of twee zinnen.
• Schermbreed gekozen op een gewone pagina → geen effect, het blok volgt daar altijd de contentkolom.
• Geen Foto mobiel bij een brede foto → op smartphone blijft er van de foto weinig over.