2.1Arrière-plans, superpositions & effets
L'essentiel en 30 secondes
- Arrière-plan d'un conteneur (onglet Style) : couleur unie, dégradé, image ou vidéo.
- Du texte sur image devient illisible : poser une superposition (overlay semi-transparent) pour garder le contraste.
- Effets : ombres (box-shadow), arrondis (border-radius), bordures — avec modération.
Mini-cas filé — Nadia habille la bannière
Nadia veut une bannière avec une belle photo d'atelier en fond et le titre par-dessus. Problème : sur la photo claire, le titre blanc disparaît. Elle pose une superposition sombre semi-transparente : le texte redevient lisible, la photo reste visible. Puis elle arrondit les coins des cartes pour un rendu moderne.
Suite du niveau 1 — Nadia passe de la structure au design riche.
1. Arrière-plans et lisibilité
Un conteneur peut recevoir un arrière-plan (onglet Style) : couleur unie, dégradé, image de fond ou même vidéo. Pour une image, on règle le cadrage et l'attachement (« fixe » crée un léger effet parallaxe). Mais poser du texte sur une image est le piège classique : selon la zone, le texte devient illisible.
La solution : une superposition (overlay) — une couche semi-transparente (couleur ou dégradé) posée entre l'image et le texte. Nadia ajoute un overlay sombre à 40 % : la photo reste visible, le titre redevient net. C'est un réflexe de lisibilité.
2. Effets avec modération
Les effets donnent du relief : ombres (box-shadow) pour détacher une carte, arrondis (border-radius) pour un rendu doux, bordures pour délimiter. Appliqués finement, ils modernisent ; en excès, ils alourdissent et datent.
Nadia arrondit légèrement les cartes de réalisations et ajoute une ombre discrète au survol. Règle : chaque effet doit servir la lisibilité ou la hiérarchie, pas décorer pour décorer.
🔎 Exemple concret — Bannière lisible (cas Nadia)
Conteneur bannière :
- arrière-plan = image atelier (cadrée, attachement normal)
- superposition = noir à 40 % (overlay)
- titre blanc par-dessus → lisible
- cartes : border-radius 8px + ombre légère au survol
→ Belle image ET texte net.Résultat : design riche sans sacrifier la lisibilité.
Leçon : overlay d'abord, effets ensuite, avec mesure.
Vocabulaire de la section
- Arrière-plan (background)
- Le fond d'un conteneur : couleur, dégradé, image ou vidéo (onglet Style).
Exemple simple : une photo d'atelier en fond de bannière.
Ce que ce n'est pas : confondre fond du conteneur et image insérée (widget Image).
Réflexe : le fond habille la boîte ; le widget Image affiche un visuel.
- Superposition (overlay)
- Une couche semi-transparente posée sur une image de fond pour garder le texte lisible.
Exemple simple : overlay noir à 40 % sous le titre de la bannière.
Ce que ce n'est pas : mettre du texte directement sur une image contrastée.
Réflexe : texte sur image → overlay systématique.
- Attachement (parallaxe)
- Réglage d'une image de fond : « fixe » crée un léger effet de profondeur au défilement.
Exemple simple : fond fixe pour une section d'ambiance.
Ce que ce n'est pas : abuser du parallaxe partout (lourd, fatigant).
Réflexe : parallaxe ponctuel, jamais sur toute la page.
- Effets (ombres, arrondis)
- Ombres (box-shadow), arrondis (border-radius), bordures pour donner du relief.
Exemple simple : cartes arrondies avec ombre discrète au survol.
Ce que ce n'est pas : empiler ombres fortes et bordures criardes.
Réflexe : un effet doit servir la lisibilité ou la hiérarchie.
- Lisibilité texte sur image
- Garantir le contraste du texte posé sur un fond visuel.
Exemple simple : overlay + couleur de texte adaptée.
Ce que ce n'est pas : juger lisible sur son écran sans vérifier les zones claires.
Réflexe : vérifier le texte sur toute la largeur de l'image.
En pratique — Habiller une section proprement
- Donnez à un conteneur une image de fond (onglet Style) et cadrez-la.
- Ajoutez une superposition (overlay) semi-transparente et réglez son opacité.
- Posez un titre par-dessus et vérifiez sa lisibilité sur toute la largeur.
- Ajoutez un arrondi et une ombre discrète aux cartes, avec modération.
Script prêt à dire — justifier l'overlay au client (20 s)
« J'ai gardé votre belle photo d'atelier en fond, avec un léger voile sombre dessus : c'est ce qui permet au titre de rester parfaitement lisible, quelle que soit la luminosité de la photo. Rien n'est caché, juste rendu net. »
Expliquer l'overlay comme un service de lisibilité, pas un assombrissement.
Modèle copier-coller — check fond visuel
CONTENEUR : _______________
FOND : couleur / dégradé / image / vidéo
IMAGE : cadrage ok ? attachement (normal/fixe) : _____
TEXTE SUR IMAGE ? → SUPERPOSITION : couleur ___ opacité ___ %
CONTRASTE TEXTE VÉRIFIÉ (toute la largeur) : oui / non
EFFETS : arrondi ___ px, ombre (discrète) : oui / nonBannière photo
Image + overlay + titre : l'effet « waouh » sans perdre la lisibilité.
Section sobre
Couleur unie ou dégradé léger : parfois plus pro qu'une image.
Carte
Fond blanc, arrondi léger, ombre discrète : rendu moderne et net.
Performance
Vidéo de fond gourmande : réserver aux cas forts, compresser (voir 5.1).
✓ Bonnes pratiques
- Poser une superposition dès qu'il y a du texte sur image.
- Utiliser les effets avec modération.
- Vérifier le contraste sur toute la largeur.
✗ Pièges fréquents
- Texte directement sur image contrastée.
- Parallaxe et vidéos de fond partout (lourd).
- Ombres/bordures criardes.
Points clés à retenir
- Arrière-plan : couleur, dégradé, image, vidéo.
- Superposition (overlay) = réflexe de lisibilité.
- Effets (ombres, arrondis) avec modération.
- Toujours vérifier le contraste du texte.
Défi 48h — appliquez demain
Créez une section avec image de fond + overlay + titre lisible. Testez en réduisant/augmentant l'opacité de l'overlay jusqu'au bon contraste. Ajoutez un arrondi discret à une carte. 20 minutes.
- Je règle un arrière-plan (image, dégradé) proprement.
- J'ajoute une superposition pour la lisibilité du texte.
- J'utilise les effets avec modération.
Questions fréquentes
Comment rendre un titre lisible sur une photo ?
En posant une superposition (overlay) semi-transparente entre l'image de fond et le texte, et en choisissant une couleur de texte contrastée. Vérifiez sur toute la largeur de l'image.
Dois-je utiliser des vidéos en arrière-plan ?
Avec parcimonie : une vidéo de fond est lourde (performance, mobile). Réservez-la aux sections à fort impact et compressez-la ; sinon, une image ou un dégradé suffit.
Les ombres et arrondis datent-ils un site ?
En excès, oui. Utilisés finement (arrondi léger, ombre discrète), ils modernisent au contraire. Chaque effet doit servir la lisibilité ou la hiérarchie.
Le titre blanc de Nadia disparaît par endroits sur la photo d'atelier en fond. Que faire ?