Homepage

De Homepage is de openingspagina van de site. Er bestaat één homepage per site — je kan ze enkel bewerken, niet dupliceren of nieuw aanmaken. In het CMS staat ze onder Inhoud → EENMALIG → Home.

Drie tabs

Het bewerkingsscherm heeft drie tabs:

1. Header — het bovenste beeld bij het laden van de homepage
2. Pagina — de inhoud onder de header (Content Builder met een vaste set blokken)
3. SEO — meta-gegevens voor zoekmachines en social media

Tab "Header"

De header is het volle-breedte beeld bovenaan. Er zijn twee headerstijlen beschikbaar — kies de juiste afhankelijk van het beeldmateriaal en de boodschap:

Header 1.0 — sfeerbeeld + tekst + knop

• Eén achtergrondfoto, dynamisch geschaald (vult altijd de volle breedte; randen kunnen worden bijgesneden)
• Een titel of slogan over de foto
• Een optionele knop met link

Werkt het best met rustige sfeerbeelden waar tekst leesbaar over kan staan.

Header 2.0 — fotocarrousel of video

• Een fotocarrousel met maximaal 4 foto's, of een video die automatisch speelt
• Aparte instelling voor desktop en mobiel (twee tabs)
• Optionele overlay met tekst en knoppen over het beeld, dezelfde als het blok Foto met overlay

Werkt het best als de foto's of video zelf de boodschap dragen (bv. interieur kantoor, team, sfeerbeelden).

Welke kies je?

• Wil je een duidelijke boodschap of call-to-action in de header? → Header 1.0
• Wil je meerdere visuele indrukken afwisselen? → Header 2.0

Header 1.0 — velden

Veld	Wat erin?
Headerfoto	Eén afbeelding — best 1920×1080 of breder, JPG, gecomprimeerd.
Titel / slogan	Korte tekst over het beeld. Houd 't kort: max 8 woorden.
Knop	Optioneel. Link-veld met aangepaste tekst.

Knop wordt verborgen tijdens een actief afsprakenproces

Als de afspraken-functionaliteit actief is op de site, wordt de header-knop automatisch vervangen door de afspraak-knop. De Header 1.0-knop is dus enkel zichtbaar als afspraken niet aanstaan — check in Algemeen → Afspraken of dit aanstaat.

Header 2.0 — velden

Header 2.0 heeft twee tabs: één voor desktop, één voor mobiel.

• Header 2.0 (Desktop) — wat bezoekers op een computer of tablet (≥768px) zien
• Header 2.0 (Mobile) — wat bezoekers op een smartphone (<768px) zien

Desktop: fotocarrousel óf video

Bovenaan de Header 2.0 (Desktop)-tab kies je met Type header wat de desktop-header toont:

Type header	Wat erin?
Foto carrousel	1 tot 4 foto's, breed formaat. De foto's wisselen automatisch af. Vanaf twee foto's verschijnen onderaan bolletjes waarmee bezoekers zelf kunnen bladeren.
Video	Eén videobestand dat automatisch, geluidloos en in een lus speelt. Optioneel een poster-foto die getoond wordt tot de video geladen is.

Met Verhouding bepaal je de bijsnijding van foto's en video op desktop:

Verhouding	Wanneer
8:3 (standaard)	Brede, lage banner. Lever foto's aan van 3600 tot 4800 px breed; ze worden bijgesneden vanaf de bovenrand.
16:9 (hoger beeld)	Hoger beeld, meer ruimte voor een overlay. Zelfde aanlevering, andere bijsnijding.

Zo'n grote foto toch licht houden (JPG, kwaliteit 70 tot 80 %, onder 1,5 MB): zie Foto's voor het web.

Eisen aan de video

MP4 (H.264), max 10 MB, liggend formaat van minstens 1600px breed, max 15 sec. De video wordt automatisch bijgesneden naar de gekozen verhouding vanaf de bovenrand.

Mobiel: aparte staande foto's

Op smartphone wordt nooit de video getoond — wel de foto's uit de Header 2.0 (Mobile)-tab. Dat is een apart carrousel in staand (portret) formaat (verhouding 4:5), tot 4 foto's. Lever foto's aan van minstens 1600 breed × 2000 hoog.

Mobiele header: een bewuste keuze

Vul je de Header 2.0 (Mobile)-tab in, dan krijgen smartphone-bezoekers een visueel aantrekkelijke header-carrousel. Laat je hem leeg, dan is er op mobiel geen header en zie je meteen de relevante content bovenaan. Beide zijn correct — kies wat past bij de pagina.

Overlay: tekst en knoppen op de header

Onderaan de Header 2.0 (Desktop)-tab staat de groep Overlay: dezelfde velden als het blok Foto met overlay, maar dan op de header-foto's of -video. Alles is optioneel: laat je alles leeg, dan is er geen overlay.

Veld	Wat erin?
Bovenkop	Kleine regel boven de kop (tagline).
Kop	De titel op de header.
Tekst	Korte tekst. Hou het bij één of twee zinnen.
Knoppen	Maximaal 3 knoppen, elk een link. Bijvoorbeeld naar je contactpagina of een afspraak.
Positie overlay	Waar het vlak op het beeld staat (3×3-raster). Standaard Midden.
Tekstweergave	Donkere of lichte tekst, met of zonder wit of primair vlak.

Op de Header 2.0 (Mobile)-tab kies je met Overlay op mobiel wat er op kleine schermen gebeurt: Onder het beeld (standaard) of Niet tonen. Onder 992 px staat de overlay nooit op het beeld maar eronder, zodat de tekst altijd leesbaar blijft.

Had je al een Header Slogan?

Het vroegere veld Header Slogan (met de optie op donkere achtergrond) bestaat niet meer. Een bestaande slogan is bij de update automatisch omgezet naar een overlay met die tekst als Kop, rechts onder op het beeld. Je kan die nu verder aanpassen via de overlay-velden.

Laat ruimte in het beeld

Net als bij het blok Foto met overlay moet de vrije zone in de foto's of de video zelf zitten. Kies de Positie overlay waar het beeld rustig is, of gebruik een variant met vlak.

Hoe het op de site verschijnt

Een Header 2.0 met verhouding 16:9, een carrousel van meerdere foto's en een overlay links in het beeld:

Tab "Pagina"

De Pagina-tab is een Content Builder met een vaste selectie blokken — niet de volledige catalogus. De geselecteerde blokken zijn afgestemd op een homepage:

Blok	Wat het doet
Productsegmenten	3 cards: Particulieren / Ondernemingen / Verenigingen
Nieuws	4 nieuwste nieuwsberichten
Afspraak-banner	Grote banner "Maak een afspraak"
Vestigingen	Alle vestigingen met openingsuren
Team	Team-carrousel

Er zijn meestal geen vrije Tekst- of Foto-blokken — die voeg je toe op een gewone Pagina, niet op de Homepage.

Volgorde telt

De volgorde waarin je deze blokken plaatst, is wat de bezoeker bovenaan ziet als hij de homepage bezoekt. Plaats de meest essentiële sectie (typisch Productsegmenten) bovenaan.

Tab "SEO"

Deze tab beheert hoe de homepage verschijnt in zoekresultaten en social-media-previews. Velden:

• Meta-titel — wat in de browser-tab en als titel in Google verschijnt
• Meta-beschrijving — korte tekst onder de titel in zoekresultaten
• Social-share-afbeelding — wat verschijnt als iemand de URL deelt op LinkedIn / Facebook / WhatsApp

Wat NIET op de Homepage staat

Sommige onderdelen die je op de homepage ziet, beheer je elders in het CMS:

• Site-logo en kantoor-naam → Algemeen → Agent
• Hoofdnavigatie → Algemeen → Navigatie
• Voettekst, contactgegevens → Algemeen → Agent + Vestigingen
• Cookie-banner → centraal beheerd door Bene.be (zie Toegangsrechten)

Tips

• Test op mobiel én desktop — de header schaalt anders. Open Voorbeeld en wissel tussen weergaven.
• Houd de header rustig: te veel tekst over een foto leest slecht. Eén korte zin werkt beter dan een paragraaf.
• Vernieuw je homepage seizoenmatig: de bezoeker komt regelmatig terug, een vaste homepage een jaar lang voelt stoffig.
• Stem af met andere kantoren: als alle agentkantoren dezelfde homepage-structuur willen, doe dat consistent. Voor een uniek karakter kies je net iets anders.

Veelgemaakte fouten

• Header-foto met tekst in de afbeelding — onleesbaar bij vertaling, niet aanpasbaar per taal. Zet tekst altijd via het Titel/slogan-veld.
• Header-foto te donker of te druk — titel verdwijnt. Kies een rustig beeld met voldoende contrast voor de titeltekst.
• Geen meta-beschrijving in SEO — Google neemt automatisch een willekeurig stuk tekst, vaak suboptimaal. Vul altijd in.
• Verwacht dat je vrije Tekst-blokken kan toevoegen — de homepage Content Builder is bewust beperkt voor consistentie. Vrije content plaats je op een gewone Pagina.