Page d'accueil¶
La Page d'accueil est la page d'ouverture du site. Il existe une seule page d'accueil par site — vous pouvez seulement la modifier, pas la dupliquer ou en créer une nouvelle. Dans le CMS, elle se trouve sous Entrées → EENMALIG → Home.

Trois onglets¶
L'écran d'édition a trois onglets :
- Header — l'image en haut au chargement de la page d'accueil
- Page — le contenu sous le header (Content Builder avec un set fixe de blocs)
- SEO — métadonnées pour moteurs de recherche et réseaux sociaux
Onglet « Header »¶
Le header est l'image pleine largeur en haut. Il existe deux styles — choisissez selon le matériel visuel et le message :
Header 1.0 — visuel + texte + bouton¶
- Une image de fond, mise à l'échelle dynamique (remplit toujours la largeur ; les bords peuvent être rognés)
- Un titre ou slogan superposé
- Un bouton optionnel avec lien
Marche le mieux avec des visuels apaisés sur lesquels le texte reste lisible.
Header 2.0 — carrousel photo ou vidéo¶
- Un carrousel de maximum 4 photos, ou une vidéo qui se lance automatiquement
- Réglage distinct pour ordinateur et mobile (deux onglets)
- Superposition optionnelle avec texte et boutons sur le visuel, la même que le bloc Photo avec superposition
Marche le mieux quand les photos ou la vidéo portent elles-mêmes le message (par ex. intérieur du bureau, équipe, ambiances).
Lequel choisir ?
- Vous voulez un message clair ou un appel à l'action dans le header ? → Header 1.0
- Vous voulez plusieurs impressions visuelles alternées ? → Header 2.0
Header 1.0 — champs¶
| Champ | Contenu |
|---|---|
| Image header | Une image — idéalement 1920×1080 ou plus large, JPG, compressée. |
| Titre / slogan | Texte court superposé. Restez court : max 8 mots. |
| Bouton | Optionnel. Champ Lien avec texte personnalisé. |
Le bouton est masqué pendant un processus de rendez-vous actif
Si la fonctionnalité de rendez-vous est active sur le site, le bouton du header est automatiquement remplacé par le bouton de rendez-vous. Le bouton Header 1.0 n'est donc visible que sans rendez-vous actifs — vérifiez dans Général → Rendez-vous si c'est activé.
Header 2.0 — champs¶
Header 2.0 a deux onglets : un pour l'ordinateur, un pour le mobile.
- Header 2.0 (Desktop) — ce que voient les visiteurs sur ordinateur ou tablette (≥768px)
- Header 2.0 (Mobile) — ce que voient les visiteurs sur smartphone (<768px)

Ordinateur : carrousel photo ou vidéo¶
En haut de l'onglet Header 2.0 (Desktop), vous choisissez avec Type d'en-tête ce que le header desktop affiche :
| Type d'en-tête | Contenu |
|---|---|
| Carrousel photo | 1 à 4 photos, format large. Les photos défilent automatiquement. À partir de deux photos, des points apparaissent en bas pour que les visiteurs naviguent eux-mêmes. |
| Vidéo | Un fichier vidéo lu automatiquement, sans son et en boucle. En option une image d'aperçu affichée jusqu'au chargement de la vidéo. |
Avec Proportion, vous déterminez le recadrage des photos et de la vidéo sur ordinateur :
| Proportion | Quand |
|---|---|
| 8:3 (par défaut) | Bannière large et basse. Fournissez des photos de 3600 à 4800 px de large ; elles sont recadrées depuis le bord supérieur. |
| 16:9 (image plus haute) | Image plus haute, plus de place pour une superposition. Même fourniture, autre recadrage. |
Pour garder une photo aussi grande légère (JPG, qualité 70 à 80 %, moins de 1,5 Mo) : voir Photos pour le web.
Exigences pour la vidéo
MP4 (H.264), max 10 Mo, format paysage d'au moins 1600px de large, max 15 sec. La vidéo est automatiquement recadrée à la proportion choisie depuis le bord supérieur.
Mobile : photos portrait distinctes¶

Sur smartphone, la vidéo n'est jamais affichée — ce sont les photos de l'onglet Header 2.0 (Mobile) qui le sont. C'est un carrousel distinct au format portrait (ratio 4:5), jusqu'à 4 photos. Téléchargez de préférence des photos d'au moins 1600 de large × 2000 de haut.
Header mobile : un choix délibéré
Si vous remplissez l'onglet Header 2.0 (Mobile), les visiteurs sur smartphone voient un en-tête visuellement attrayant. Si vous le laissez vide, il n'y a pas d'en-tête sur mobile et le contenu pertinent apparaît directement en haut. Les deux sont corrects — choisissez ce qui convient à la page.
Superposition : texte et boutons sur le header¶
En bas de l'onglet Header 2.0 (Desktop) se trouve le groupe Superposition : les mêmes champs que le bloc Photo avec superposition, mais sur les photos ou la vidéo du header. Tout est facultatif : si vous laissez tout vide, il n'y a pas de superposition.

| Champ | Contenu |
|---|---|
| Surtitre | Petite ligne au-dessus du titre (tagline). |
| Titre | Le titre sur le header. |
| Texte | Texte court. Limitez-vous à une ou deux phrases. |
| Boutons | Maximum 3 boutons, chacun un lien. Par exemple vers votre page de contact ou un rendez-vous. |
| Position de la superposition | Emplacement du cadre sur l'image (grille 3×3). Par défaut Au centre. |
| Style du texte | Texte sombre ou clair, avec ou sans aplat blanc ou primaire. |
Dans l'onglet Header 2.0 (Mobile), vous choisissez avec Superposition sur mobile ce qui se passe sur petits écrans : Sous l'image (par défaut) ou Masquer. Sous 992 px, la superposition n'est jamais sur l'image mais en dessous, pour que le texte reste toujours lisible.
Vous aviez déjà un Header Slogan ?
L'ancien champ Header Slogan (avec l'option sur fond sombre) n'existe plus. Un slogan existant a été converti automatiquement lors de la mise à jour en une superposition avec ce texte comme Titre, en bas à droite de l'image. Vous pouvez maintenant l'adapter via les champs de la superposition.
Laissez de la place dans l'image
Comme pour le bloc Photo avec superposition, la zone libre doit se trouver dans les photos ou la vidéo elles-mêmes. Choisissez la Position de la superposition là où l'image est calme, ou utilisez une variante avec aplat.
Apparence sur le site¶
Un Header 2.0 en proportion 16:9, avec un carrousel de plusieurs photos et une superposition à gauche de l'image :

Onglet « Page »¶
L'onglet Page est un Content Builder avec une sélection fixe de blocs — pas le catalogue complet. Les blocs sélectionnés sont adaptés à une page d'accueil :
| Bloc | Ce qu'il fait |
|---|---|
| Segments de produits | 3 cartes : Particuliers / Entreprises / Associations |
| Actualités | 4 actualités les plus récentes |
| Bannière de rendez-vous | Grande bannière « Prenez rendez-vous » |
| Bureaux | Tous les bureaux avec horaires |
| Équipe | Carrousel d'équipe |
Il n'y a généralement pas de blocs Texte ou Photo libres — ceux-là, vous les ajoutez sur une Page ordinaire, pas sur la Page d'accueil.
L'ordre compte
L'ordre dans lequel vous placez ces blocs détermine ce que le visiteur voit en haut. Placez la section la plus essentielle (typiquement Segments de produits) en haut.
Onglet « SEO »¶
Cet onglet gère l'apparence de la page d'accueil dans les résultats de recherche et les aperçus réseaux sociaux. Champs :
- Méta-titre — apparaît dans l'onglet du navigateur et comme titre dans Google
- Méta-description — texte court sous le titre dans les résultats
- Image de partage social — apparaît quand quelqu'un partage l'URL sur LinkedIn / Facebook / WhatsApp
Ce qui N'EST PAS sur la Page d'accueil¶
Certains éléments visibles sur la page d'accueil sont gérés ailleurs dans le CMS :
- Logo et nom du bureau → Algemeen → Agent
- Navigation principale → Algemeen → Navigatie
- Pied de page, coordonnées → Algemeen → Agent + Bureaux
- Bannière cookies → géré centralement par Bene.be (voir Droits d'accès)
Conseils¶
- Testez sur mobile et desktop — le header se redimensionne différemment. Ouvrez Aperçu et basculez entre vues.
- Gardez le header sobre : trop de texte sur une photo se lit mal. Une phrase courte vaut mieux qu'un paragraphe.
- Renouvelez la page d'accueil saisonnièrement : les visiteurs reviennent régulièrement, une page d'accueil figée un an entier paraît dépassée.
- Concertez-vous avec les autres bureaux : si toutes les agences KBC-Agent veulent la même structure, soyez cohérent. Pour un caractère unique, choisissez quelque chose de différent.
Erreurs fréquentes¶
- Image header avec texte intégré — illisible à la traduction, pas adaptable par langue. Mettez toujours le texte via le champ Titre/slogan.
- Image header trop sombre ou trop chargée — le titre disparaît. Choisissez un visuel calme avec assez de contraste pour le texte du titre.
- Pas de méta-description dans SEO — Google prend automatiquement un fragment, souvent sous-optimal. Remplissez toujours.
- S'attendre à pouvoir ajouter des blocs Texte libres — le Content Builder de la page d'accueil est volontairement limité pour la cohérence. Le contenu libre se place sur une Page ordinaire.