Les cartes image — une image en haut, un titre et une ligne de texte en dessous — sont l’un des blocs les plus courants sur une page marketing. Elles correspondent au widget Image Box d’Elementor, mais quelques détails déterminent si le résultat est correct.
Quand une carte devient une Image Box
Un conteneur avec exactement une image, un titre et au plus un paragraphe, et aucun autre élément de contenu, est converti en une seule Image Box. Il existe un garde-fou délibéré : si la carte contient du texte supplémentaire au-delà du titre et du paragraphe — un numéro d’étape, un badge, un prix — la conversion est ignorée et le bloc est conservé comme un simple Container. Perdre ce texte supplémentaire serait pire que de garder une arborescence un peu plus profonde.
Faire en sorte que l’image remplisse réellement la carte
L’Image Box d’Elementor affiche l’image à 30 % de largeur par défaut. Ce n’est presque jamais ce que souhaite une carte convertie, donc la largeur d’affichage est définie explicitement en fonction de la largeur de l’image par rapport à sa carte — les images en pleine largeur reçoivent 100 %.
Si l’image source utilisait object-fit: cover pour remplir une hauteur fixe (ou une boîte aspect-ratio), cela est également repris : la hauteur rendue ainsi que Object Fit = Cover sont écrites dans le widget. L’avantage pratique apparaît en mode placeholder — les réglages sont déjà en place, de sorte que lorsque vous déposez ensuite une vraie image dans l’emplacement vide, elle est recadrée et remplit immédiatement la carte au lieu d’arriver comme une petite vignette à redimensionner à la main.
Coins arrondis
Les coins des cartes proviennent généralement de border-radius associé à overflow:hidden sur la carte, ce qui découpe l’image en pleine largeur selon le haut arrondi. Comme une Image Box aplatie ne possède pas son propre contrôle de débordement, l’image reçoit directement un rayon correspondant, afin qu’elle s’aligne avec le cadre arrondi de la carte.
La seule vraie limite
L’Image Box d’Elementor n’a aucun contrôle de padding du contenu. Si votre design comporte une image en pleine largeur avec un texte en retrait de, disons, 18 px, ce retrait ne peut pas être reproduit dans le widget — le propre padding du widget mettrait aussi l’image en retrait. Le texte se retrouve près du bord de la carte.
Si une marge intérieure de texte exacte au pixel près compte plus pour vous que d’avoir un seul widget bien rangé, conservez ce bloc comme Container avec des widgets Image, Titre et Texte distincts ; chacun garde son propre padding. C’est un véritable compromis entre propreté structurelle et espacement exact — bon à savoir avant de convertir toute une page de cartes.
Liste de contrôle pour les cartes image
- Téléversez d’abord les images dans la bibliothèque de médias et référencez de vraies URL
https://— elles sont importées sans étape manuelle. - Sinon, utilisez des espaces réservés d’image vides ; chaque emplacement conserve son texte
altcomme légende afin que vous sachiez quelle image va où. - Limitez la carte à image + titre + un paragraphe si vous voulez le résultat en un seul widget.
- Évitez les images intégrées en Base64 ; elles sont remplacées par des espaces réservés par conception.