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.
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 la flexion 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ée.
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.
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.
Que la fête commence!
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.
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.
| 01 | marge : auto ; |
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 :
| 01 | marge : auto 0 ; |
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.
| 01 | align-items : centre ; |
Vous pouvez également utiliser cet extrait si vous souhaitez que toutes les informations de vos colonnes soient alignées en bas :
| 01 | align-items : extrémité flexible ; |
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 blanche de la colonne 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.
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 :
| 010203 | display: flex;flex-direction: colonne;justify-content: center; |
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 :
| 01 | align-items : centre ; |
Veuillez le modifier comme suit pour les aligner en bas.
| 01 | align-items : extrémité flexible ; |
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 :
| 01 | marge : auto auto 0 ; |
Colonne 3 Élément principal CSS :
| 01 | marge : 0 auto auto ; |
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.
Même si cette solution repose sur quelques extraits mineurs de CSS personnalisé, 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 leçons d'ex amp sur la façon dont elle vous a permis d'économiser du temps et des efforts dans le passé.
Les en-têtes et pieds de page d’un site Web sont des éléments essentiels. Dans la plupart des cas, l'en-tête fournit la navigation…
Astra et OceanWP sont deux des thèmes WordPress les plus populaires sur le marché. Professionnel…
Créer un excellent site Web d'actualités ne nécessite pas que vous deveniez un concepteur de sites Web. Nous…
Le thème Newspaper est l'un des thèmes WordPress les plus importants conçus par tagDiv, un…
Lorsqu'il s'agit de créer une boutique en ligne, WooCommerce est le plugin incontournable. Il…
Un en-tête est généralement la première chose qu’une personne voit lorsqu’elle visite votre site Web,…
Voir les commentaires
Merci pour l'explication claire. Cependant, cela ne fonctionne pas avec un module Blog. Il n’y a alors qu’une seule colonne dans la ligne. Le nombre de blogs côte à côte est déterminé par le module (3 par défaut). Les colonnes ici peuvent-elles également être identiques ?
Bonjour, Non, je suis désolé, c'est uniquement destiné aux colonnes DIVI classiques, le module de blog DIVI a un code entièrement différent pour aligner les colonnes.
Que se passe-t-il si vous souhaitez que le module soit aligné aux 2/3 vers le bas ou à 1/3 à partir du haut - et pas parfaitement au milieu, en haut ou en bas ?
Bonjour, j'ai peur que cela nécessite de faire du CSS personnalisé, par défaut, cette option n'existe pas.
Vous pouvez peut-être essayer d'aligner le contenu au milieu et d'ajouter un peu de remplissage à votre contenu, mais veuillez vérifier attentivement le rendu sur tous les appareils.