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

Comment proposer la livraison gratuite sur WooCommerce ?

Comment proposer la livraison gratuite sur WooCommerce ?

Lorsque vous créez votre page et vos articles, vous remarquez que sur la page qui présente vos articles, vos images mises en avant ne sont pas toutes de la même dimension. Certaines images mises en avant peuvent être plus grandes ou plus petites que les autres, ce qui affecte l’esthétique globale de votre site. Suivez mes conseils pour harmoniser la dimension de vos images et rendre votre page encore plus attrayante.

lire plus
Optimisez l’apparence de votre blog WordPress en redimensionnant la taille de vos images mises en avant

Optimisez l’apparence de votre blog WordPress en redimensionnant la taille de vos images mises en avant

Lorsque vous créez votre page et vos articles, vous remarquez que sur la page qui présente vos articles, vos images mises en avant ne sont pas toutes de la même dimension. Certaines images mises en avant peuvent être plus grandes ou plus petites que les autres, ce qui affecte l’esthétique globale de votre site. Suivez mes conseils pour harmoniser la dimension de vos images et rendre votre page encore plus attrayante.

lire plus
Quelles sont les différentes étapes à suivre pour mettre à jour la version PHP chez votre hébergeur OVH ?

Quelles sont les différentes étapes à suivre pour mettre à jour la version PHP chez votre hébergeur OVH ?

Le tableau de bord de votre WordPress vous indique que vous devez effectuer la mise à jour de PHP car vous êtes sur une ancienne version. Vous ne savez pas comment faire et quel risque pour votre site internet. Suivez le pas à pas très simple qui va vous permettre de mettre à jour en toute sécurité les fichiers php de votre hébergement web, que vous ayez un site WordPress ou sur un autre CMS.

lire plus