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

Lors de la création d’un site à l’aide de Divi, l’option d’alignement vertical du contenu peut être un ajout précieux à votre boîte à outils de conception. Selon la mise en page, le contenu devra peut-être ê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 lorsque vous utilisez des dispositions à plusieurs colonnes. De plus, le contenu centré verticalement reste centré sur toute la largeur du navigateur, éliminant ainsi le besoin de remplissage 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 en utilisant 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 à 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 marge automatique
• 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 de flexion des colonnes
• 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). Cependant, contrairement aux tableaux classiques, 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 colonnes » comme paramètre de ligne. En termes simples, cela garantit que la taille de toutes vos colonnes s'adapte à la taille de la colonne contenant le plus d'informations. Étant donné que « Égaliser les hauteurs de colonnes » 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 boîte).

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

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

Bien entendu, la propriété flex propose de nombreuses autres applications en matière de conception 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). Par amp , vous pouvez utiliser les options d'espacement de Divi pour centrer le(s) module(s) verticalement dans la file d'attente afin de donner à une colonne un remplissage supérieur et inférieur égal. Vous pouvez également aligner le contenu en bas en ajoutant un remplissage supérieur à une colonne. Lorsque vous ajoutez du contenu à votre page, vous devrez peut-être modifier l'espacement. De plus, maintenir cet alignement sur plusieurs tailles de navigateur peut s'avérer 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 cela vous sera utile.

Commençons cette fête !

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

Je vais commencer par la mise en page du portefeuille 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 Interior Design Company dans la fenêtre Charger depuis la bibliothèque. Enfin, après avoir sélectionné les 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 marge automatique

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 « Égaliser les hauteurs des colonnes » est déjà actif ; Cela signifie que la propriété flex (« display : flex ; ») a été ajoutée à la ligne.

Sous la zone de saisie de l'é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 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 afin 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 des paramètres de votre ligne, plutôt que d'ajouter « margin : 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 fonctionnalité É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 désormais équilibré verticalement.

Cependant, vous avez peut-être remarqué que la couleur d'arrière-plan de la colonne blanche ne couvre plus la totalité de la ligne en raison de l'ajout de « marge : auto » dans la colonne. Vous pouvez remédier à ce problème 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 de flexion des colonnes

Nous avons utilisé la propriété flex ajoutée en premier à 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 « Égaliser la hauteur de la colonne », qui maintient nos colonnes (et arrière-plans de colonnes) de la même taille. Pour ce faire, nous ajouterons quelques lignes de CSS à notre file d'attente, ce qui obligera tous les modules qu'elle contient à être empilés verticalement puis centrés.

Revenons à la rangée d' amp précédente. 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 « justify-content : flex-end » pour aligner le contenu en bas.

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

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

Centrer verticalement le contenu de vos colonnes peut également aider avec les présentations. Comme vous le savez peut-être, tous les textes de présentation ne contiennent pas la même quantité de texte pour décrire une fonctionnalité ou un service. Centrer ces présentations verticalement peut donner à votre mise en page une belle apparence.

Pour la mise en page de la page d'accueil des paiements numériques, j'alignerai verticalement les présentations de cet amp .

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

Maintenant, je dois « Égaliser les hauteurs des colonnes » dans les paramètres de ligne.

Je peux désormais 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 de code 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 en 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 matériel 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és, je pense qu'elle peut être utile pour les personnes recherchant une solution rapide à une procédure fastidieuse. N'hésitez pas à partager vos opinions sur cette approche, ainsi que des amp de la manière dont elle vous a permis d'économiser du temps et des efforts dans le passé.