Comment harmoniser les hauteurs de colonne avec des images sur Divi ?

Dans le builder Divi, vous avez la possibilité de créer des colonnes. Vous pouvez intégrer différents éléments à cet endroit.

Toutefois, si vous intégrez des images qui n’ont pas été retravaillées en hauteur avant l’intégration dans la bibliothèque de médias, vous risquez de vous retrouver face à des différences de hauteur entre vos images. Ce qui n’est pas très esthétique, comme vous pouvez le constatez dans la capture d’écran ci-dessous.

hauteur images différente divi colonne
Pour régler ce problème, nous allons procéder à 2 manipulations très simples.

Pour commencer, nous allons effectuer des réglages dans la rangée.

Réglages de la rangée

  • Aller dans les réglages de la rangée
  • Dans “style”
  • Puis dans dimensionnement
  • Activer “oui” dans la catégorie ” harmoniser la hauteur des colonnes”

harmoniser hauteur colonne rangée divi
La hauteur des colonnes est à présent harmonisée pour la rangée. Si vous souhaitez, par exemple, ajouter un texte dans cette rangée sous les images, cette manipulation vous permettra d’avoir un texte bien aligné sous les 3 images.

Maintenant, nous allons régler la hauteur de chaque image.

Réglages de la hauteur de chaque image

Nous allons partir de la hauteur de l’image la plus petite.

Dans le cas présent, il s’agit de la photo du gateau à droite

  • Paramètres du module de cette image
  • Aller dans “style”
  • “Dimensionnement”
  • “Hauteur” : regarder la hauteur initiale de cette image, ici 205 px et réutiliser cette taille pour modifier la hauteur des deux autres photos
réglage hauteur image divi
Nos 3 images sont désormais de la même hauteur.

Vous pouvez retrouver l’ensemble de ces manipulations dans le tuto vidéo ci-dessous

Autres articles qui pourraient vous plaire

Quelle extension WordPress choisir pour l’optimisation de vos images ?

Quelle extension WordPress choisir pour l’optimisation de vos images ?

Parmi toutes les étapes de la création d’un site développé sous le CMS WordPress, la vitesse de chargement reste un indispensable si vous souhaitez améliorer l’expérience utilisateur sur mobile comme sur ordinateur. Vous trouverez de nombreuses extensions gratuites ou payantes pour alléger vos images. Je vous propose ici d’en découvrir 3 qui ont fait leurs preuves même dans leur version freemium

lire plus
Comment optimiser votre boutique en ligne ?

Comment optimiser votre boutique en ligne ?

En 2020, les ventes en ligne des magasins ont connu une augmentation sans précédent. Le succès de votre boutique internet est indissociable de l’optimisation de vos pages. Comment travailler le référencement naturel de votre boutique en ligne pour atteindre la première page des moteurs de recherche et de Google et générer des ventes ?

lire plus
Comprendre WordPress pour mieux l’utiliser

Comprendre WordPress pour mieux l’utiliser

Comprendre le fonctionnement de WordPress, que vous soyez débutant ou développeur se révèle indispensable pour conserver un site rapide, sécurisé, optimisé et répondant aux normes UX. Alors, quels langages informatiques se cachent sous le capot de notre CMS WYSIWYG préféré ? Comment le télécharger et faire vos premiers pas sur Wordpress ?

lire plus