Composants Texte Image : Choisissez vos mises en page
Une combinaison puissante pour une communication efficace
- Flexibilité de conception : Cette approche offre diverses options de mise en page, permettant de créer des designs équilibrés et visuellement attrayants.
- Émotion et engagement : Les images peuvent susciter des émotions et créer un lien plus fort avec les utilisateurs. En utilisant des visuels évocateurs, vous pouvez renforcer le message du texte et inciter les visiteurs à s'engager davantage avec le contenu.
- Amélioration de la communication : Les images captent rapidement l'attention, tandis que le texte fournit des explications détaillées. Cette synergie permet de transmettre des messages complexes de manière plus efficace et mémorable.
Pour certaines mises en page, il peut être utile d'encadrer ce composant par une balise section. Par exemple, la page Produits est composée de plusieurs sections avec des couleurs de fond différentes, qui occupent toute la largeur.
Ces composants proposent plusieurs variantes :
- L'association d'une image avec un texte peut être à l'intérieur d'une carte ou être disposée directement dans la page.
- Les images peuvent être alternées, positionnées à gauche ou à droite des zones de textes.
- Des boutons d'appel à l'action peuvent être utilisés en option.
Caractéristiques communes à tous les composants de ce type
Entête et conclusion
- L'utilisation de l'en-tête et de la conclusion est facultative.
- Sur les mobiles, les textes sont alignés à gauche.
- À partir de 992px (breakpoint lg), les textes sont centrés horizontalement.
- L'utilisation de phrases courtes sur une seule ligne optimise l'affichage pour ce breakpoint.
Centrage vertical des zones avec flexbox
Selon le contenu, l'affichage en deux colonnes peut entraîner une différence de hauteur entre la zone de texte et la zone d'image. Afin d'optimiser l'affichage, la zone la moins haute est centrée verticalement par rapport à l'autre.
Utilisation simplifiée
- Ce type de composant n'utilise que des classes standards de Bootstrap.
- Aucun code personnalisé, CSS ou JavaScript n'est nécessaire.
- Chaque association d'une image avec un texte peut être dupliquée plusieurs fois.
Composants sur une ou deux colonnes
- Pour les petits écrans, la zone d'image est toujours positionnée en haut.
- Sur les grands écrans, les zones de texte et d'image sont centrées verticalement.
