Le Divi Builder, développé par Elegant Themes, est une solution populaire pour créer des sites web personnalisés sans programmation. Cependant, les utilisateurs rencontrent souvent un problème récurrent : la découpe automatique des images. Cet article explore les solutions pour résoudre ce problème, en s’inspirant du guide proposé par Pee-Aye Creative.
Comprendre le problème : la découpe automatique des images
Par défaut, Divi applique des dimensions fixes aux images, souvent en recadrant ou redimensionnant celles-ci pour s’adapter aux conteneurs. Si cette fonction peut être utile pour maintenir une cohérence visuelle, elle pose problème lorsque les images sont tronquées de manière inattendue, en rognant des parties essentielles. Cela est particulièrement frustrant dans des cas où des détails critiques sont coupés, comme des visages ou des logos.
Pour éviter ce problème, vous pouvez modifier les paramètres de Divi ou appliquer des solutions CSS personnalisées.
Étape 1 : Désactiver les dimensions par défaut de Divi
L’un des moyens les plus simples de résoudre le problème consiste à désactiver les dimensions automatiques dans Divi. Voici les étapes recommandées :
- Utiliser les paramètres de l’éditeur Divi :
- Accédez au module Image ou Galerie dans le Divi Builder.
- Modifiez les paramètres de mise en page et assurez-vous de choisir une option comme aspect ratio ou taille originale. Cela permettra à vos images de s’afficher sans altération.
- Éviter les tailles prédéfinies :
- Dans la section des paramètres généraux, désactivez les options qui contraignent les dimensions des images.
- Téléverser des images aux bonnes dimensions :
- Pour garantir un affichage optimal, téléversez des images avec des proportions déjà adaptées à l’utilisation prévue.
Étape 2 : Utiliser du CSS pour contrôler les images
Lorsque les outils intégrés ne suffisent pas, vous pouvez recourir au CSS pour obtenir un contrôle précis.
Exemple de code CSS :
.et_pb_image img {
object-fit: cover;
width: 100%;
height: auto;
}
Ce code applique une stratégie où les images s’ajustent au conteneur sans distorsion.
Explication des propriétés CSS :
- object-fit : Détermine comment l’image s’adapte à son conteneur.
covergarantit que toute la zone du conteneur est remplie sans déformer l’image. - width et height : Ces propriétés permettent de conserver les proportions naturelles tout en remplissant le conteneur.
Étape 3 : Ajuster l’aspect ratio
Si votre design nécessite des proportions spécifiques, comme un format carré ou 16:9, vous pouvez utiliser une combinaison de CSS et de paramètres Divi.
Exemple pour un format carré :
.et_pb_image {
aspect-ratio: 1 / 1;
}
Exemple pour un format 16:9 :
.et_pb_image {
aspect-ratio: 16 / 9;
}
Ces ajustements sont particulièrement utiles pour des galeries ou des grilles d’images où l’uniformité des dimensions est essentielle.
Étape 4 : Utiliser un plugin Divi
Pour ceux qui préfèrent éviter de manipuler directement du code, il existe des plugins spécialisés qui simplifient ces ajustements.
- Divi Assistant : Proposé par Pee-Aye Creative, ce plugin offre des outils pour personnaliser les dimensions des images sans toucher au code.
- Divi Carousel Maker : Idéal pour créer des carrousels entièrement personnalisables.
- Divi Events Calendar : Un outil utile pour gérer les affichages liés à des événements, avec un contrôle précis sur les images.
Ces plugins offrent une interface utilisateur intuitive, éliminant le besoin de connaissances en développement.
Étape 5 : Optimiser les images pour le web
L’optimisation des images est une étape cruciale pour garantir la rapidité et l’efficacité du site. Voici quelques bonnes pratiques :
- Compression :
- Utilisez des outils comme TinyPNG pour réduire la taille des fichiers sans perte de qualité visible.
- Formats adaptés :
- Privilégiez les formats modernes comme WebP, qui offrent une compression supérieure avec une excellente qualité.
- Balises alt et SEO :
- Assurez-vous que chaque image inclut une description dans sa balise alt pour améliorer l’accessibilité et le référencement.
Conclusion
Résoudre les problèmes de découpe d’images dans Divi peut sembler complexe, mais avec les solutions décrites ci-dessus, vous pouvez obtenir des résultats professionnels sans sacrifier la qualité visuelle de votre site. Que vous préfériez utiliser les outils intégrés de Divi, du CSS personnalisé ou des plugins dédiés, il existe une méthode adaptée à vos besoins.
Pour des tutoriels détaillés et des ressources supplémentaires, visitez le site de Pee-Aye Creative. Ils proposent une mine d’informations pour optimiser vos sites Divi et en tirer le meilleur parti
