Comment aligner verticalement et horizontalement des sections, des lignes, des colonnes et des modules dans DIVI Builder

Lors de la construction d'un site à l'aide de Divi, la possibilité d'aligner verticalement le contenu peut être un ajout précieux à votre boîte à outils de conception. Selon la mise en page, le contenu peut avoir besoin d'être aligné verticalement de différentes manières (centré, bas, haut). Le besoin le plus courant est que votre matériel soit aligné verticalement. Il ajoute une belle touche d'espacement symétrique à votre contenu, ce qui est très utile lors de l'utilisation de plusieurs dispositions de colonnes. De plus, le contenu centré verticalement reste centré sur la largeur du navigateur, éliminant ainsi le besoin d'un rembourrage ou de marges personnalisés pour obtenir une réactivité similaire.

Dans cette leçon, je vais vous apprendre à aligner verticalement le contenu de n'importe quelle colonne à l'aide de quelques lignes simples de CSS. À des fins de démonstration, j'utiliserai plusieurs mises en page préfabriquées de Divi. Vous n'avez pas besoin de vous inquiéter si vous n'êtes pas familier avec CSS. En quelques secondes, vous pourrez l'appliquer à votre conception.

• Comprendre la différence entre Flex et Divi
• Est-ce obligatoire ?
• Ajoutez la mise en page préconfigurée à votre page.
• Méthode 1 : Alignement vertical du contenu avec Flex et Auto Margin
• Aligner le contenu en bas
• Alignement vertical du contenu pour les colonnes de votre ligne
• Méthode 2 : Aligner le contenu verticalement à l'aide de la direction Flex de la colonne
• Qu'en est-il des mises en page avec une seule colonne ?
• Réflexions finales sur l'alignement vertical et horizontal de DIVI

Comprendre la différence entre Flex et Divi

L'attribut CSS Flex (ou Flexbox) n'est qu'un moyen d'organiser les éléments en piles horizontales et verticales (un peu comme un tableau). Contrairement aux tableaux classiques, cependant, la fonction flex vous permet de créer des boîtes qui « s'adaptent » à la taille du contenu qu'elles contiennent.

Divi utilise l'attribut flex lorsque vous choisissez « Égaliser les hauteurs de colonne » comme paramètre de ligne. En termes simples, cela garantit que la taille de toutes vos colonnes s'ajuste à la taille de la colonne contenant le plus d'informations. Étant donné que « Egaliser les hauteurs de colonne » déclenche le flex pour le conteneur de lignes, vous pouvez l'utiliser en ajoutant du CSS à vos colonnes pour modifier le contenu de chaque colonne (ou zone).

Si vous ajoutez « margin: auto » à une colonne d'une ligne, par ex amp le, le contenu de cette colonne (que ce soit un ou plusieurs modules) seront centrés verticalement.

Toutes vos colonnes (et leur contenu) seront centrées verticalement si vous ajoutez « align-items : center ; » à votre rangée.

Bien sûr, la propriété flex a beaucoup plus d'applications dans la conception de sites Web et des CSS plus avancés que vous pouvez utiliser dans votre thème. Cependant, je voulais garder les choses simples pour ce tutoriel.

Est-ce obligatoire ?

D'un point de vue technique, non. Vous pouvez utiliser un espacement personnalisé pour positionner votre contenu/modules verticalement dans une colonne (remplissage et marge). Ex amp le, vous pouvez utiliser les options d' espacement de Divi pour centrer le module (s) verticalement dans la file d' attente pour donner une colonne égale et supérieure de rembourrage inférieur. Vous pouvez également aligner le contenu en bas en ajoutant un rembourrage supérieur à une colonne. Lorsque vous ajoutez plus de contenu à votre page, vous devrez peut-être modifier l'espacement. De plus, le maintien de cet alignement sur plusieurs tailles de navigateur peut être problématique.

Donc, si vous cherchez un moyen d'aligner les informations verticalement sans avoir à vous soucier d'un espacement spécifique, je pense que vous trouverez cela bénéfique.

Que la fête commence!

Ajoutez la mise en page préconfigurée à votre page.

Je vais commencer par la mise en page du portfolio de l'entreprise de design d'intérieur. Créez une nouvelle page pour avoir cette mise en page sur votre page. Après cela, donnez un nom à votre page. Sélectionnez « Utiliser Divi Builder » puis « Utiliser Visual Builder » dans le menu déroulant. Choisissez ensuite « Choisir une mise en page prédéfinie » dans le menu déroulant. Ensuite, sélectionnez le pack de mise en page de l'entreprise de design d'intérieur dans la fenêtre Charger à partir de la bibliothèque. Enfin, à partir de la sélection des mises en page, choisissez la page Portfolio et cliquez sur « Utiliser cette mise en page ».

Vous êtes prêt à commencer une fois la mise en page chargée sur votre page.

Méthode 1 : Alignement vertical du contenu avec Flex et Auto Margin

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

Sous la zone de saisie Élément principal de la colonne 2, accédez aux paramètres de l'onglet Avancé pour la même ligne et ajoutez l'extrait de code CSS suivant.

Le contenu de la deuxième colonne a maintenant été déplacé pour être centré verticalement.

Aligner le contenu en bas

Vous pouvez modifier la valeur de la marge comme suit pour aligner votre contenu en bas de sorte que tous les modules s'empilent en bas de votre colonne :

Alignement vertical du contenu pour les colonnes de votre ligne

Vous pouvez 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, plutôt que d'ajouter « marge : auto » à chaque colonne individuellement.

Vous pouvez également utiliser cet extrait si vous souhaitez que toutes les informations de vos colonnes soient alignées en bas :

N'oubliez pas que vous pouvez utiliser la fonction Étendre les styles de Divi en cliquant avec le bouton droit sur l'élément principal avec votre extrait CSS et en sélectionnant « Étendre l'élément principal ».

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

Tout est maintenant équilibré verticalement.

Cependant, vous avez peut-être remarqué que la couleur d'arrière-plan de la colonne blanche ne couvre plus toute la ligne en raison de l'ajout de la colonne « marge : auto ». Vous pouvez remédier à cela en changeant la couleur d'arrière-plan de la ligne en blanc et en supprimant le remplissage de la ligne. Au lieu de cela, je vais vous apprendre à centrer le contenu de votre colonne sans avoir à modifier la marge.

Méthode 2 : Aligner le contenu verticalement à l'aide de la direction Flex de la colonne

Nous avons d'abord utilisé la propriété flex ajoutée à la ligne. En conséquence, chacune de nos colonnes est devenue une « boîte flexible » qui pouvait être alignée verticalement en modifiant la marge.

Cependant, nous pouvons utiliser la direction flexible pour aligner le texte de notre colonne sans sacrifier l'effet « Egaliser la hauteur de la colonne », qui maintient nos colonnes (et les arrière-plans de colonne) de la même taille. Pour ce faire, nous ajouterons quelques lignes de CSS à notre file d'attente, ce qui entraînera l'empilement vertical de tous les modules qu'elle contient, puis leur centrage.

Retour Let au précédent ex amp ligne de le. En cliquant avec le bouton droit sur CSS personnalisé et en sélectionnant « Réinitialiser les styles CSS personnalisés », vous pouvez supprimer tout CSS personnalisé que vous pourriez avoir dans les paramètres de ligne.

Ensuite, dans l'élément principal de la colonne 2, appliquez le CSS suivant :

Remplacez "justify-content: center" par "justifiify-content: flex-end" pour aligner le contenu en bas.

J'aime cette configuration car si je positionne mon contenu verticalement et fais la ligne pleine largeur, le contenu reste centré.

Créer des Blurbs alignés verticalement avec différentes quantités de texte

Le fait de centrer verticalement le contenu de vos colonnes peut également aider avec les textes de présentation. Comme vous le savez peut-être, tous les textes de présentation n'auront pas la même quantité de texte pour décrire une fonctionnalité ou un service. Faire en sorte que ces textes de présentation soient centrés verticalement peut aider votre mise en page à être belle.

Pour les paiements numériques Page d' accueil mise en page, j'aligner verticalement les textes de présentation de cet ex amp le.

Pour créer une représentation plus réaliste de l'apparence d'un site, je vais d'abord ajouter des quantités variables de contenu corporel aux textes de présentation.

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

Maintenant, je peux aligner mon texte et ajuster le design à l'aide d'extraits CSS.

Nous pouvons centrer verticalement le contenu de nos colonnes en ajoutant ce qui suit à la section Élément principal de l'onglet Avancé de nos paramètres de ligne :

Veuillez le modifier comme suit pour les aligner en bas.

Vous pouvez également aligner la première colonne en bas et la troisième colonne en haut en réinitialisant vos styles CSS personnalisés et en ajoutant les marges personnalisées suivantes.

 Colonne 1 Élément principal CSS :

 Colonne 3 Élément principal CSS :

Qu'en est-il des mises en page avec une seule colonne ?

Vous n'avez pas besoin d'un extrait CSS ou d'un flex pour centrer verticalement votre contenu sur une colonne. Tout ce que vous avez à faire est de vous assurer que votre texte a un espacement égal au-dessus et au-dessous (ou modules). La plupart des consommateurs ont besoin d'un contenu centré verticalement sur des mises en page comportant de nombreuses colonnes, car ils souhaitent que le contenu adjacent s'aligne correctement.

Réflexions finales sur l'alignement vertical et horizontal de DIVI

Même si cette solution repose sur quelques extraits mineurs de CSS personnalisé, je pense qu'elle peut être utile pour les personnes à la recherche d'un remède rapide à une procédure fastidieuse. N'hésitez pas à partager vos opinions sur cette approche, ainsi que des amp de la façon dont elle vous a fait gagner du temps et des efforts dans le passé.