Pour aligner verticalement le contenu dans Divi

Lorsque vous créez un site Web avec Divi, la fonctionnalité d’alignement vertical du contenu peut être facilement ajoutée à l’outil de conception. Parfois, une disposition exige que le contenu soit aligné verticalement de différentes façons (Centre, bas, haut). L’exigence la plus courante est que le contenu soit centré verticalement. Il fournit un espacement symétrique agréable qui est utile lorsque vous utilisez une disposition Multi – colonnes pour votre contenu. De plus, le contenu centré verticalement reste centré sur différentes largeurs de navigateur, ce qui simplifie l’application de rembourrage ou de Marges personnalisées pour obtenir des réponses similaires.
Dans ce tutoriel, je vais vous montrer comment ajouter de petits clips CSS à n’importe quelle colonne pour aligner verticalement le contenu. Je vais utiliser certaines des mises en page par défaut de Divi comme exemples pour illustrer comment cela peut être fait. Si vous en savez peu sur le SCS, vous n’avez pas à vous inquiéter. Cela sera facile à utiliser pour votre mise en page en quelques secondes. Comprendre les attributs Flex et Divi CSS Flex (ou flexbox) n’est qu’un moyen de placer les éléments dans une pile horizontale et \/ ou verticale (une table). De plus, contrairement aux tables traditionnelles, les propriétés Flex vous permettent de créer des panneaux qui sont appropriés ou « flexibles » pour la taille de leur contenu.
Divi utilise l’attribut Flex chaque fois que la hauteur de colonne de l’égaliseur est sélectionnée comme réglage de ligne. Cela garantit simplement que la taille de la colonne correspond à celle de la colonne qui contient le plus de contenu. Puisque la hauteur de colonne égalisateur active Flex pour le conteneur de ligne, vous pouvez facilement en profiter en ajoutant CSS à la colonne pour ajuster le contenu de chaque colonne (ou boîte). Par exemple, si vous ajoutez \
Ligne Cependant, je vais vous montrer une façon de centrer le contenu d’une colonne sans changer les marges.
Méthode 2: aligner le contenu verticalement en utilisant des directions de colonne flexibles dans la première méthode, nous avons utilisé l’attribut Flex ajouté à la ligne. Cela fait de chacune de nos colonnes une « boîte flexible » qui s’aligne verticalement en ajustant simplement les marges. Mais il y a aussi un moyen d’aligner nos colonnes avec une orientation flexible sans perdre l’effet d’équilibrer la hauteur des colonnes, qui maintient nos colonnes (et l’arrière – plan des colonnes) de la même taille. Pour ce faire, il suffit d’ajouter quelques lignes de CSS à la colonne de sorte que tous les modules de la colonne soient empilés verticalement, puis centrés.
Revenons à la ligne de l’exemple précédent. Ouvrez les paramètres de ligne et supprimez tout CSS personnalisé en cliquant avec le bouton droit sur le CSS personnalisé et en cliquant sur restaurer le style css personnalisé, puis ajoutez le CSS suivant sous l’élément principal dans la colonne 2: affichage: Flex;
Direction de flexion: colonne;
Aligner le contenu: centré; Ou, si vous voulez aligner ce qui suit, changez simplement le contenu aligné: Centre en contenu aligné: extrémité flexible. La meilleure chose à propos de cette configuration est que si mon contenu est centré verticalement et disposé en pleine largeur, alors le contenu est toujours centré. Un nombre différent de Blurb alignés verticalement fait que le contenu de la colonne est centré verticalement et peut également être utilisé pour Blurb. Comme vous le savez, tous les messages publicitaires n’ont pas le nombre exact de mots pour décrire la fonction ou le service. Centrer ces flous verticalement crée un beau design pour votre mise en page. Par exemple, je vais aligner verticalement les blurbs sur la disposition de la page d’accueil
Paiement numérique. Tout d’abord, j’ajouterai un certain nombre de textes textuels à l’introduction pour rendre le site plus réaliste. Maintenant, je dois aller au réglage de ligne et à la hauteur de colonne équilibrée. Maintenant, je peux ajouter des clips css pour aligner mon contenu et modifier le design. Dans l’onglet avancé des paramètres de ligne, vous pouvez centrer verticalement le contenu de la colonne en ajoutant ce qui suit sous l’élément principal: alignement: Centre; Ou changez – le pour l’aligner comme suit. Éléments d’alignement: Extrémités flexibles;
Alternativement, vous pouvez restaurer un style css personnalisé 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 CSS primaire: marge: automatique 0;
Colonne 3 Élément CSS principal: marge: 0 automatique; Comment va Lieb? Techniquement, vous n’avez pas besoin de clips CSS ou Flex pour centrer verticalement le contenu de la colonne. Tout ce que vous avez à faire est de vous assurer que le contenu (ou les modules) sont espacés de la même façon. Dans la plupart des cas, les gens ont besoin de contenu centré verticalement sur une disposition Multi – colonnes parce qu’ils veulent que le contenu adjacent soit parfaitement aligné. De nombreuses applications ont de nombreuses applications utiles pour aligner verticalement le contenu dans Divi. Ceci est utile pour les titres avec une disposition à deux colonnes, où l’une contient le texte du titre, et vous voulez vous assurer que le CTA (bouton) dans l’autre colonne est centré verticalement. Il est également utile de centrer l’identification verticalement dans une disposition à six colonnes (en particulier lorsque la taille de l’identification varie légèrement). Bien que cette approche soit basée sur de petits fragments de CSS personnalisés, je crois que l’application