Photo + texte¶
Le bloc Photo + texte place une image à côté d'un champ de texte dans une mise en page 50/50. Sur les petits écrans (mobile), les deux passent l'un sous l'autre ; sur les écrans larges, ils sont côte à côte. Vous choisissez si la photo se trouve à gauche ou à droite du texte — pratique pour alterner visuellement deux blocs consécutifs.
Comment cela apparaît sur le site¶
Champs¶
| Champ | Type | Obligatoire | Contenu |
|---|---|---|---|
| Texte | Éditeur de texte avec mise en forme | Oui | Le contenu à côté de l'image. |
| Photo | Fichier (image) | Oui | Une image depuis le dossier Ressources. |
| Position de photo | Choix : Gauche / Droite | Non | De quel côté se trouve la photo. Par défaut Gauche. |
| Lien | Champ Lien | Non | Rend la photo cliquable (interne, externe, e-mail, téléphone, fichier). |
Comment cela s'affiche¶
- Deux colonnes de la moitié de la largeur du conteneur sur desktop (
col-lg-6). - L'un sous l'autre sur les petits écrans (tablette et mobile) — photo d'abord, puis texte.
- La photo n'est pas rognée à hauteur fixe (contrairement au bloc Photo), mais reçoit une qualité maximale.
- Si un Lien est rempli, la photo devient cliquable.
Quand utiliser ce bloc¶
- Une explication avec un visuel de soutien : un texte sur un produit avec une photo du produit à côté.
- Une présentation de collaborateur : portrait à gauche, courte description à droite.
- Une explication étape par étape avec un visuel par étape (alternez gauche/droite pour le rythme).
À ne pas utiliser pour¶
- Une photo qui doit remplir toute la largeur — utilisez plutôt un bloc Photo.
- Un long texte avec plusieurs paragraphes et sous-titres — utilisez plutôt une Photo suivie d'un bloc Texte.
- Trois colonnes ou plus — il y a des blocs dédiés (Texte 2-colonnes, Texte 3-colonnes).
Conseils pour de bonnes combinaisons¶
- Photo en portrait (2:3) ou carré (1:1) rend le mieux dans une demi-colonne. Les photos paysage larges paraissent petites.
- Gardez le texte court : 2 à 4 paragraphes. Si le texte ne tient pas, utilisez un bloc Texte en dessous.
- Alternez gauche/droite si vous placez plusieurs blocs Photo+texte d'affilée. Cela donne du rythme visuel.
- Les longs titres (Titre) viennent avant, pas comme première ligne du champ texte — sinon vous obtenez un titre trop petit.
Erreurs fréquentes¶
- La photo reste à gauche dans quatre blocs successifs — page monotone. Alternez la position.
- Le texte est bien plus long que la hauteur de la photo — vide en dessous de la photo. Raccourcissez le texte ou choisissez une photo plus haute.
- Photo et texte n'ont pas de lien thématique — utilisez alors deux blocs séparés.