Comment aligner verticalement le contenu avec Divi

by | 13 Fév 2020 | Blog, Tuto Divi | 2 comments

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 screenshots comment centrer verticalement votre contenu facilement.   

Comment aligner verticalement le contenu avec Divi 1

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!

Comment aligner verticalement le contenu avec Divi 2

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.

Comment aligner verticalement le contenu avec Divi 3

2.Harmoniser les hauteurs des colonnes

Pour ce faire : 

  1. Cliquez sur Style
  2. Cliquez sur Dimensionnement
  3. 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) 
Comment aligner verticalement le contenu avec Divi 4

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).

Comment aligner verticalement le contenu avec Divi 5

4.Centrer le contenu verticalement grâce à une ligne css

Comment aligner verticalement le contenu avec Divi 6

Une fois dans les paramètres de la colonne:

  1. Cliquez sur l’onglet « Avancé »
  2. Cliquez sur le menu « Personnaliser CSS »
  3. Ajouter cette petite ligne de code CSS dans l’encadré nommé « Elément principal »

 margin:auto;

Comment aligner verticalement le contenu avec Divi 7

Et voila votre contenu est maintenant centré verticalement par rapport à votre contenu. 

Si cette article vous a aidé, n’hésitez pas à me laisser un commentaire cela fait toujours plaisir !

Sébastien Chaidron

Comment aligner verticalement le contenu avec Divi 8
Depuis des années, je développe avec passion des sites web et je travaille pour vous en tant que développeur WordPress Freelance. Contactez-moi pour plus d’informations à support@easyonweb.be

Comment trouver des polices d’écriture sur d’autres sites web

Contenu de l'article Comment trouver des polices d'écriture sur dautres sites web ? Via l'inspecteur de page Via WhatFont Comment installer WhatFont Comment utiliser WhatFont Conclusion Mon Thème WordPress favoris!* Mon plugin Multilingue préféré ?* Chaque site web a...

Créer un formulaire dynamique sur WordPress

Contenu du tuto Créer un formulaire dynamique sur wordpress Description du plugin 1. Choisir une version (Free ou Premium) 2. Installation du plugin 3. Création votre premier formulaire 4. Ajout de champs dynamiques 5. Création du formulaire calculé 6. Traitement des...

Comment insérer un iframe dans WordPress

Contenu de l'article Intégrer un Iframe dans WordPress Qu'est-ce qu'un Iframe ? Pourquoi ai-je besoin d'un Iframe? Intégrer Google Maps Intégrer une vidéo YouTube  Intégrer un Iframe dans WordPress Depuis des années, je développe avec passion des sites web et je...

Thème Divi pour WordPress – Test et avis

Contenu de l'article Thème Divi pour WordPress – Test et avis Qui est derrière Divi ? Que propose Divi ? Concevez des en-têtes et des pieds de page avec Divi Theme Builder Divi et SEO Téléchargement et prix de Divi Documentation et soutien sur le thème Les...

Wix ou WordPress, qui est le meilleur en 2020?

Wix ou WordPress? À lire absolument avant de choisir!Sébastien Chaidron | Webdesigner & Développeur Web freelance à BruxellesLorsqu'il s'agit de choisir une solution pour votre site web, quel système de gestion de contenu (CMS) vous conviendra le mieux, WordPress...

Comment augmenter le trafic de mon site web

Vous recherchez à améliorer votre référencement naturel ( SEO ) pour mieux positionner votre site sur les moteurs de recherche ? Voici 3 Astuces pour augmenter votre visibilité sur le Web. Le référencement naturel n'est plus aussi facile qu'il y a 10 ans. Aujourd'hui...

Catégories