Comment aligner verticalement le contenu dans Divi

La possibilité d'aligner verticalement le contenu lors de la création d'un site avec Divi peut être un ajout pratique à votre ceinture d'outils de conception. Parfois, une certaine mise en page nécessite que le contenu soit aligné verticalement de différentes manières (centré, bas, haut). Le besoin le plus courant est d'avoir votre contenu centré verticalement. Il fournit une délicieuse touche d'espacement symétrique qui est vraiment pratique lorsque vous utilisez plusieurs dispositions de colonnes pour votre contenu. De plus, le contenu centré verticalement reste centré sur différentes largeurs de navigateur, ce qui simplifie l'application d'un rembourrage ou de marges personnalisés pour obtenir une réactivité similaire.

Dans ce tutoriel, je vais vous montrer comment ajouter quelques petits extraits de CSS à n'importe quelle colonne pour aligner verticalement le contenu. J'utiliserai certaines des mises en page prédéfinies de Divi pour des exemples de la façon de procéder. Si vous ne connaissez pas grand-chose à CSS, vous n'avez pas à vous inquiéter. Ce sera assez facile à appliquer à vos propres mises en page en quelques secondes.

Comprendre Flex et Divi

La propriété css Flex (ou Flexbox) est simplement un moyen de positionner des éléments dans des piles horizontales et/ou verticales (un peu comme un tableau). Sauf que, contrairement aux tableaux traditionnels, la propriété flex vous permet de créer des boîtes qui s'ajustent ou « s'adaptent » à la taille du contenu qu'elles contiennent.

Divi utilise la propriété flex chaque fois que vous sélectionnez « Égaliser les hauteurs de colonne » comme paramètre de ligne. Cela garantit simplement que la taille de vos colonnes s'adaptera à la taille de la colonne avec le plus de contenu. Et comme « Egaliser les hauteurs de colonne » active le flex pour le conteneur de lignes, vous pouvez facilement en profiter en ajoutant du CSS à vos colonnes pour ajuster le contenu de chaque colonne (ou boîte).

Par exemple, si vous ajoutez « marge : auto » à n'importe quelle colonne d'une ligne, le contenu de cette colonne (qu'il s'agisse d'un ou de plusieurs modules) sera centré verticalement.

De plus, si vous ajoutez « align-items:center ; » à votre ligne, toutes vos colonnes (et leur contenu) seront centrées verticalement.

Bien sûr, il existe de nombreuses autres utilisations de la propriété flex dans la conception Web, ainsi que des CSS plus avancés que vous pouvez appliquer à votre thème. Mais pour ce tutoriel, je voulais garder les choses simples.

Est-ce vraiment nécessaire ?

Techniquement, non. Vous pouvez aligner verticalement votre contenu/modules dans une colonne en utilisant un espacement personnalisé (remplissage et marge). Par exemple, vous pouvez utiliser les options d'espacement de Divi pour donner à une colonne un remplissage égal en haut et en bas pour centrer le ou les modules verticalement dans la colonne. Ou, vous pouvez ajouter uniquement un remplissage supérieur à une colonne pour aligner le contenu en bas. Cependant, vous devrez peut-être ajuster l'espacement lors de la mise à jour de votre page avec plus de contenu. De plus, il peut être difficile de conserver cet alignement sur différentes largeurs de navigateur.

Donc, si vous cherchez une solution pour aligner verticalement le contenu sans avoir à penser à un espacement personnalisé, je pense que vous trouverez cela utile.

Commençons!

Chargez la mise en page prédéfinie sur votre page

Pour commencer, je vais utiliser la mise en page du portfolio de l'entreprise de design d'intérieur. Pour obtenir cette mise en page sur votre page, créez une nouvelle page. Donnez ensuite un titre à votre page. Cliquez sur « Utiliser Divi Builder » puis « Utiliser Visual Builder ». Sélectionnez ensuite l'option « Choisir une mise en page prédéfinie ». Sélectionnez ensuite le pack de mise en page d'entreprise de design d'intérieur dans la fenêtre contextuelle Charger à partir de la bibliothèque. Enfin, sélectionnez la page Portfolio dans la liste des mises en page et cliquez sur « Utiliser cette mise en page ».

Une fois la mise en page chargée sur votre page, vous êtes prêt à partir.

Méthode 1 : Comment aligner verticalement le contenu à l'aide de Flex et de la marge automatique

Ouvrez les paramètres de ligne de la deuxième ligne de la page (celle directement sous la ligne avec le titre de la page). Sous les paramètres de conception, ouvrez le groupe d'options Dimensionnement et notez que "Égaliser les hauteurs de colonne" est déjà actif. Cela signifie que la ligne a maintenant la propriété flex (« display: flex; ») ajoutée.

Allez maintenant dans les paramètres de l'onglet Avancé pour la même ligne et ajoutez l'extrait de code css suivant sous la zone de saisie Élément principal de la colonne 2.

margin: auto;

Maintenant, le contenu de la deuxième colonne s'est déplacé pour devenir centré verticalement.

Aligner le contenu en bas

Si vous souhaitez aligner votre contenu en bas de manière à ce que tous les modules s'empilent en bas de votre colonne, vous pouvez ajuster la valeur de la marge comme suit :

margin: auto auto 0;

Aligner le contenu verticalement pour toutes les colonnes de votre ligne

Au lieu d'ajouter "marge:auto" à chaque colonne individuellement, vous pouvez également centrer verticalement le contenu de toutes les colonnes de votre ligne en ajoutant l'extrait suivant à l'élément principal de vos paramètres de ligne.

align-items: center;

Ou si vous souhaitez que tout le contenu de vos colonnes soit aligné en bas, vous pouvez ajouter cet extrait :

align-items: flex-end;

Et, n'oubliez pas que vous pouvez profiter de la fonctionnalité Extend Styles de Divi en faisant un clic droit sur l'élément principal avec votre extrait css et en cliquant sur « Étendre l'élément principal ».

Ensuite, étendez cet élément principal css à toutes les lignes de la page (ou de la section) pour centrer verticalement tout le contenu de chaque colonne de la page.

Maintenant, tout est centré verticalement.

Mais, vous avez peut-être remarqué que la couleur d'arrière-plan de la colonne blanche ne couvre plus toute la hauteur de la ligne. C'est parce que nous avons ajouté « marge : auto » à la colonne. Pour résoudre ce problème, vous pouvez changer la couleur d'arrière-plan de la ligne en blanc et supprimer le remplissage de la ligne. Mais à la place, je vais vous montrer un moyen de centrer le contenu de votre colonne sans changer la marge.

Méthode 2 : Alignement vertical du contenu à l'aide de la direction Flex de la colonne

Dans la première méthode, nous avons profité de l'ajout de la propriété flex à la ligne. Cela a fait de chacune de nos colonnes une « boîte flexible » qui peut être alignée verticalement simplement en ajustant la marge.

Mais il existe également un moyen d'utiliser la direction flexible pour aligner le contenu de notre colonne sans perdre l'effet « Egaliser la hauteur de la colonne » qui maintient nos colonnes (et les arrière-plans de colonnes) de la même taille. Pour ce faire, nous allons simplement ajouter quelques lignes de CSS à notre colonne afin que tous les modules de la colonne soient empilés verticalement puis centrés.

Revenons à notre ligne dans l'exemple précédent. Ouvrez les paramètres de ligne et retirez tout CSS personnalisé que vous pourriez avoir en cliquant avec le bouton droit sur CSS personnalisé et en cliquant sur "Réinitialiser les styles CSS personnalisés"

Ajoutez ensuite le CSS suivant sous l'élément principal de la colonne 2 :

display: flex;
flex-direction: column;
justify-content: center;

Ou si je voulais aligner le contenu en bas, changez simplement "justify-content: center" en "justify-content: flex-end".

Ce qui est génial avec cette configuration, c'est que si mon contenu est centré verticalement et que je fais la ligne sur toute la largeur, le contenu reste centré.

Faire des présentations avec différentes quantités de texte alignées verticalement

Rendre le contenu de votre colonne centré verticalement peut également être utile pour les textes de présentation. Comme vous le savez, tous les textes de présentation n'auront pas la quantité exacte de texte utilisée pour décrire la fonctionnalité ou le service. Le fait de centrer ces textes de présentation verticalement peut créer un joli design pour votre mise en page.

Pour cet exemple, je vais aligner verticalement les textes de présentation sur la mise en page de la page d'accueil des paiements numériques.

Je vais d'abord ajouter des quantités différentes de corps de texte aux textes de présentation pour donner une représentation plus réaliste de ce à quoi un site pourrait ressembler.

Maintenant, je dois aller dans les paramètres de ligne et « Egaliser les hauteurs de colonne ».

Maintenant, je peux ajouter mes extraits CSS pour aligner mon contenu et modifier le design.

Sous l'onglet Avancé de vos paramètres de ligne, nous pouvons centrer verticalement le contenu de nos colonnes en ajoutant ce qui suit sous Élément principal :

align-items: center;

Ou remplacez-le par le suivant pour les aligner en bas.

align-items: flex-end;

Ou vous pouvez réinitialiser vos styles CSS personnalisés et ajouter les marges personnalisées suivantes pour aligner la première colonne en bas et la troisième colonne en haut.

Colonne 1 Élément principal CSS :

margin: auto auto 0;

Colonne 3 Élément principal CSS :

margin: 0 auto auto;

Qu'en est-il des dispositions à une colonne ?

Techniquement, vous n'avez pas besoin d'un extrait css ou d'un flex pour centrer verticalement le contenu de votre colonne. Tout ce que vous avez à faire est de vous assurer que vous avez un espacement égal au-dessus et en dessous de votre contenu (ou modules). La plupart du temps, les utilisateurs ont besoin d'un contenu centré verticalement sur des mises en page comportant plusieurs colonnes, car ils souhaitent que le contenu adjacent s'aligne parfaitement.

Beaucoup d'applications

Il existe de nombreuses applications utiles pour aligner verticalement votre contenu dans Divi. Cela serait utile pour les en-têtes avec une disposition sur deux colonnes avec le texte de l'en-tête dans une colonne et vous voulez vous assurer qu'un CTA (bouton) dans l'autre colonne est centré verticalement. Il serait également utile de centrer verticalement les logos dans une disposition à six colonnes (surtout si les logos ont des dimensions légèrement différentes).

Dernières pensées

Même si cette méthode repose sur quelques petits extraits de CSS personnalisés, je pense que l'application peut être extrêmement utile pour ceux qui recherchent une solution rapide à un processus parfois lourd. J'aimerais entendre d'autres exemples où cela pourrait être utile.

N'hésitez pas à partager vos idées et commentaires ci-dessous.

À votre santé!