Photo avec superposition¶
Le bloc Photo avec superposition affiche une photo avec, par-dessus, un cadre de texte : un surtitre, un titre, un texte court et jusqu'à trois boutons. Vous choisissez où le cadre se place sur la photo et dans quelle combinaison de couleurs. Idéal comme accroche visuelle avec message : une photo d'ambiance de votre agence avec un slogan et un bouton vers votre page de contact.
La photo n'est jamais recadrée : elle apparaît dans ses proportions naturelles. L'espace libre pour le cadre de texte doit donc se trouver dans la photo elle-même.
Apparence sur le site¶
Champs¶
| Champ | Type | Obligatoire | Contenu |
|---|---|---|---|
| Largeur | Choix : Dans la colonne de contenu / Pleine largeur | Non | Par défaut Dans la colonne de contenu. La Pleine largeur fonctionne sur la page d'accueil et les pages sans colonne latérale (contact, actualités, produits) ; sur les pages ordinaires, le bloc suit toujours la colonne de contenu. |
| Photo | Fichier (image) | Oui | Photo aux proportions naturelles. Laissez dans l'image une zone calme où viendra la superposition. |
| Photo mobile | Fichier (image) | Non | Image verticale pour les petits écrans, remplace la photo sur tablette et smartphone. Fortement conseillée pour les photos larges : une image 3:1 ne fait qu'environ 125 px de haut sur un téléphone. |
| Surtitre | Texte | Non | Petite ligne au-dessus du titre (tagline). |
| Titre | Texte | Non | Le titre dans le cadre. |
| Texte | Éditeur de texte | Non | Restez bref : la superposition doit tenir dans la zone libre de la photo. |
| Boutons | Liste de liens | Non | Maximum 3. Chaque bouton est un lien (interne, externe, e-mail, téléphone, fichier). Sans boutons, la superposition n'affiche que du texte. |
| Position de la superposition | Choix : grille 3×3 | Non | Emplacement du cadre sur l'image : gauche/centre/droite × haut/milieu/bas. Par défaut Au centre. Uniquement sur ordinateur. |
| Style du texte | Choix (4 options) | Non | Texte sombre, sans aplat (par défaut), Texte clair, sans aplat, Texte sombre sur aplat blanc ou Texte clair sur aplat primaire. Choisissez un texte clair sur une photo sombre ; un aplat aide sur une photo chargée. |
| Superposition sur mobile | Choix : Sous l'image / Masquer | Non | Par défaut Sous l'image. Masquer est prévu pour un slogan décoratif ; un titre avec des boutons doit simplement être affiché. |
Rendu¶
- Ordinateur : la photo sur toute la largeur de la colonne (ou pleine largeur), avec le cadre de texte par-dessus à la position et dans les couleurs choisies.
- Tablette et mobile (moins de 992 px) : le cadre de texte est toujours sous la photo, centré, quelle que soit la position choisie. Le texte ne chevauche ainsi jamais l'image. Avec Masquer, le cadre disparaît complètement.
- S'il y a une Photo mobile, elle remplace la photo normale sur tablette et mobile.
- Si tous les champs de la superposition sont vides, le bloc affiche simplement la photo.
- Les boutons sans lien renseigné ne sont pas affichés.
Quand l'utiliser¶
- Accroche sur la page d'accueil ou en haut d'une page d'atterrissage : photo d'ambiance avec slogan et bouton.
- Photo d'équipe avec message : « Notre équipe est à votre service » avec un bouton vers la page équipe ou un rendez-vous.
- Campagne ou action : une image avec un appel court et un seul bouton clair.
À ne pas utiliser pour¶
- Une photo sans message — un bloc Photo suffit.
- Beaucoup de texte à côté d'une photo — utilisez un bloc Photo + texte.
- Plusieurs photos à la suite — utilisez un Carrousel photo.
Conseils¶
- Faites prévoir la zone libre dans la photo elle-même par le graphiste : un morceau de ciel, de mur ou d'arrière-plan flou où le texte reste lisible.
- Choisissez l'aplat selon la photo : texte clair sans aplat sur une photo sombre, aplat blanc ou primaire sur une photo chargée ou claire.
- Prévoyez une Photo mobile dès que votre photo est plus large que haute. Sinon, l'image devient une fine bande sur téléphone.
- Un seul bouton suffit généralement : moins de choix, plus de clics.
- Fournissez la photo en 2400 pixels de large (3600 en Pleine largeur) ; le CMS en crée lui-même des versions WebP plus légères. Voir Photos pour le web.
Erreurs fréquentes¶
- Texte sur une partie chargée de la photo → illisible. Déplacez la superposition via Position de la superposition ou choisissez une variante avec aplat.
- Texte long dans la superposition → le cadre dépasse la zone libre. Limitez-vous à une ou deux phrases.
- Pleine largeur choisie sur une page ordinaire → sans effet, le bloc y suit toujours la colonne de contenu.
- Pas de Photo mobile pour une photo large → sur smartphone, il ne reste presque rien de la photo.