L’alignement précis des textes et des icônes est essentiel pour créer un design harmonieux et professionnel dans Divi, un des thèmes WordPress les plus populaires. Voici une méthode simple pour atteindre cet objectif en utilisant du CSS personnalisé.
Étape 1 : Accéder aux paramètres CSS
Pour appliquer ces ajustements, allez dans Blurb Settings dans Divi. Ensuite, cliquez sur l’onglet Advanced et sélectionnez l’option Custom CSS.
Étape 2 : Ajouter le code CSS
Dans la section Free-Form CSS, ajoutez le code suivant :
selector .et_pb_blurb_content {
display: flex;
justify-content: center;
align-items: center;
}
selector .et_pb_main_blurb_image {
margin-bottom: 0 !important;
}
Explications du code :
display: flex;: Cette propriété permet de transformer le conteneur en un élément flex, facilitant l’alignement des éléments internes.justify-content: center;: Centrage horizontal du contenu.align-items: center;: Centrage vertical pour une harmonie parfaite entre le texte et l’icône.margin-bottom: 0 !important;: Élimine l’espace inutile sous l’icône, garantissant une proximité visuelle entre celle-ci et le texte.
Résultat final
Après avoir enregistré ces modifications, l’icône et le texte dans vos modules Blurb s’afficheront parfaitement alignés, offrant une apparence professionnelle et soignée.
Avec ce petit ajustement CSS, vous améliorez non seulement l’esthétique de votre site, mais aussi l’expérience utilisateur. Essayez-le dès maintenant pour des designs impeccables !
