Il peut être intérressant quand untilise le thème Divi, de vouloir centrer verticalement du contenu ou un image par rapport à un autre contenu. Souvent quand on utilise deux colonnes ou plus.
Dans se petit guide je vous explique étape par étape avec des images comment centrer verticalement votre contenu facilement. Nous allons, comme vous le voyez sous l’image ci-dessous, aligner une image par rapport à du contenu. Cela ne vous prendra que 4 petites étapes. C’est parti!
1. Ouvrir les paramètres de la colonne
Rendez-vous sur votre site web et accédez à l’administration. Une fois dessus selectionnez la page désirée et activez le Visual Builder d’Elegant Themes.
Cliquez sur l’écrou du cadre vert (celui des colonnes) pour ouvrir le menu de configuration des colonne.
2.Harmoniser les hauteurs des colonnes
Pour ce faire :
- Cliquez sur Style
- Cliquez sur Dimensionnement
- Switchez sur oui sous le paramètre « Harmoniser les hauteurs des colonnes » (ne cliquez pas de suite sur le petit « v » on va devoir retourner sous l’onglet Contenu)
3.Accédez aux paramètres de la colonne ou si situe le contenu à centrer
Vous devez maintenant cliquez sur l’onglet « Contenu » ensuite selon ou se trouve votre contenu à centrer verticalement, ici dans mon cas je veux centrer l’image par rapport au texte, celle-ci se situant dans la seconde colonne je vais cliquer sur l’écrou de la seconde colonne (cfr point 2).
4.Centrer le contenu verticalement grâce à une ligne css
Une fois dans les paramètres de la colonne:
- Cliquez sur l’onglet « Avancé »
- Cliquez sur le menu « Personnaliser CSS »
- Ajouter cette petite ligne de code CSS dans l’encadré nommé « Elément principal »
margin:auto;
Vous n’avez plus qu’à sauvegarder et voila! Votre contenu est maintenant centré verticalement par rapport à votre contenu.
J’espère vous avoir aidé et si vous recherchez de l’aide avec votre projet que ce soit avec divi ou WordPress n’hésitez pas à consulter mes services de webdesigner freelance!
À bientôt !