Comment aligner verticalement avec le système de mise en page Flexbox de Divi 5

La création de dispositions visuellement équilibrées et réactives est essentielle dans la conception Web moderne, et le nouveau système de mise en page Flexbox de Divi 5 facilite la réalisation de l'alignement vertical. Cette nouvelle fonctionnalité puissante permet aux utilisateurs de Divi de concevoir des dispositions flexibles et dynamiques, offrant un contrôle complet sur le positionnement vertical. Que ce soit l'alignement du texte dans une section, l'équilibrage du contenu dans les lignes multi-colonnes ou la création de conceptions réactives, Divi 5 simplifie le processus avec des contrôles intuitifs construits directement dans le constructeur visuel.

Dans cet article, nous vous guiderons à travers les étapes pour maîtriser l'alignement vertical, fournir des exemples du monde réel et offrir des conseils pour créer des dispositions réactives et polies. Explorons comment le système de mise en page Flexbox de Divi 5 peut transformer votre approche en alignement vertical.

Comprendre le système de mise en page Flexbox de Divi 5

Flexbox, ou disposition flexible de la boîte, est un modèle de disposition CSS conçu pour simplifier la disposition des éléments dans un conteneur, ce qui le rend idéal pour l'alignement horizontal et vertical. Contrairement aux méthodes traditionnelles comme les flotteurs ou les marges, Flexbox fournit une approche simple pour organiser le contenu. Il permet aux éléments d'ajuster dynamiquement leur taille, leur commande et leur alignement en fonction des dimensions du conteneur et de la fenêtre, garantissant que les dispositions sont cohérentes et réactives sur toutes les tailles d'écran.

Avec Flexbox, vous pouvez centrer sans effort le contenu, distribuer de l'espace uniformément ou empiler des éléments dans un ordre spécifique. Cette flexibilité en fait un must pour les concepteurs de sites Web et divi 5 exploite son pouvoir pour permettre aux utilisateurs de créer des dispositions sophistiquées sans avoir besoin d'une connaissance avancée du CSS.

Comment divi 5 intègre Flexbox

Divi 5 a récemment introduit son système de mise en page Flexbox. Ce système intègre Flexbox directement dans le constructeur visuel, permettant aux utilisateurs de contrôler les dispositions de section, de ligne, de colonne et de modules avec des paramètres intuitifs.

Les caractéristiques clés incluent une variété de nouveaux modèles de lignes, des colonnes uniques aux sections multi-Row, ce qui facilite la création de dispositions en Divi.

Les commandes Flexbox de Divi 5 vous permettent de contrôler la direction de vos dispositions, de régler les lacunes horizontales et verticales, de justifier le contenu au début, au centre ou à la fin, activer l'enveloppe, etc.

La nouvelle fonctionnalité de structure de colonne de modification de Divi 5 vous donne plus de contrôle sur la façon dont les colonnes se comportent sur des appareils plus petits. Vous pouvez facilement modifier le nombre de colonnes ou les réorganiser, ce qui rend les conceptions superbes sur n'importe quelle taille d'écran.

Divi 5 s'éloigne des sections de spécialité et de Fullwidth, car les lignes peuvent désormais être imbriquées les unes dans les autres pour créer des conceptions complexes et réactives sans compter sur des types de sections obsolètes. Ces progrès font du système de disposition Flexbox de Divi 5 un outil puissant pour construire des dispositions modernes et adaptables directement dans le constructeur.

Configuration de l'alignement vertical dans Divi 5

Le système de mise en page Flexbox de Divi 5 est intégré de manière transparente dans le constructeur visuel, ce qui le rend accessible aux utilisateurs pour créer des conceptions flexibles et réactives. Pour commencer, ouvrez le constructeur visuel sur une page nouvelle ou existante et ajoutez une section et une ligne. Nous avons créé une disposition entière afin que nous puissions traverser les étapes pour aligner les éléments verticalement dans divers scénarios.

Alignement vertical sur une section

Dans les paramètres de la section, accédez à l' onglet de conception et localisez les options de mise en page , où vous trouverez les commandes Flexbox.

Assurez-vous que Flex est sélectionné dans le style de mise en page . Cela garantit que Flexbox est activé pour la section.

Par défaut, Start (Flex-Start) est sélectionné sous Justifier le contenu . Cela aligne tous les éléments au début du conteneur. Dans cet exemple, lorsque vous souhaitez centrer des éléments verticalement, vous pouvez choisir de les aligner sur le centre , l'espace autour ou l'espace uniformément . Étant donné que nous avons une seule ligne avec une ligne imbriquée incluse, tous les éléments de conception de notre section se concentreront verticalement avec n'importe quelle option mentionnée ci-dessus.

Alignement vertical sur une ligne

Vous pouvez également aligner verticalement le contenu au niveau des lignes. Cependant, dans cet exemple, nous utiliserons des éléments d'alignement plutôt que de justifier le contenu pour aligner verticalement les modules dans la ligne. Dans l' onglet Conception de la ligne, localisez les paramètres de mise en page . Assurez-vous d'activer Flex et de trouver les paramètres d' alignement des éléments . Par défaut, Start est sélectionné, et cela aligne tous les modules de la ligne en haut du conteneur.

Il existe quelques options selon la façon dont vous souhaitez aligner les éléments. Choisissez Center si vous souhaitez que les articles de la ligne se concentrent verticalement. Lors du choix de la fin, tous les éléments s'aligneront au bas de la ligne. L'étirement fait que tous les articles remplissent la hauteur de la rangée.

Alignement vertical sur les sections de plusieurs rangs

Dans ce scénario, nous avons trois lignes dans une section, y compris une ligne à colonne unique et deux lignes à trois colonnes. Nous utiliserons les paramètres de contenu Justify pour aligner verticalement tout le contenu dans les lignes.

Lorsqu'une section utilise des colonnes comme direction de disposition, justifier le contenu alignera verticalement ses lignes. Démarrer est sélectionné par défaut. Il aligne toutes les lignes en haut de la section. Les lignes seront emballées ensemble, à partir du bord supérieur. Le centre aligne toutes les lignes de la section verticalement. Les lignes seront emballées ensemble à partir du bord inférieur. Lorsque vous choisissez la fin , toutes les lignes s'alignent au bas de la section. Les lignes se feront emballer ensemble, à partir du bord inférieur.

L'espace entre distribue uniformément les lignes le long de l'axe principal (vertical). La première rangée sera affinée en haut de la section, la dernière rangée contre le bas, et toutes les lignes entre les deux auront une quantité égale d'espace les séparant. L'espace autour distribue les lignes avec un espace égal autour de chaque élément.

L'espace entre les rangées adjacentes sera le double de l'espace aux extrémités des lignes (l'espace entre la première rangée et le haut de la section, et l'espace entre la dernière ligne et le bas de la section). Enfin, l'espace uniforme est similaire à l'espace autour, mais il garantit que l'espace entre chaque ligne est le même, et l'espace au début et à la fin de la section est également égal à cet espacement.

Alignement vertical dans les groupes de modules

Le système Flexbox de Divi 5 simplifie également l'alignement vertical dans les groupes de modules, en particulier lorsque vous utilisez des fonctionnalités telles que le constructeur de boucle pour le contenu dynamique. Considérez un groupe de modules affichant des articles de blog avec une image, un titre de publication, un extrait de publication et un bouton. Sans alignement approprié, des éléments comme les boutons peuvent sembler mal alignés entre les colonnes. Dans les versions Divi précédentes, cela nécessitait des hauteurs de colonnes égales et des CSS personnalisés. Divi 5 rationalise ce processus avec Flexbox.

Pour aligner les éléments, cliquez dans la première colonne du groupe de modules, accédez à l' onglet Design et localisez les paramètres Flex. Définissez Justifier le contenu dans l'espace entre . Cela distribue uniformément les modules de la colonne, alignant parfaitement les boutons de lecture en plus de toutes les colonnes sans CSS personnalisé. Cette approche garantit des dispositions cohérentes et professionnelles pour le contenu dynamique comme les grilles de blog ou les listes de produits.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Conseils pour l'alignement vertical réactif

Le système de mise en page Flexbox de Divi 5 facilite l'alignement vertical, mais il y a quelques conseils à considérer. Divi 5 propose des outils robustes pour une conception réactive, vous permettant d'alimenter l'alignement vertical sur tous les appareils. Que vous centriez du contenu dans une section de héros ou que vous aligniez des boutons dans une disposition multi-colonnes, les conseils suivants vous aideront à tirer parti des fonctionnalités de Divi 5 pour maintenir des dispositions professionnelles cohérentes.

Utilisez des points d'arrêt réactifs personnalisables de Divi 5

Le système Flexbox de Divi 5 vous permet de personnaliser la commande et l'alignement des modules pour différentes tailles d'écran, garantissant que vos dispositions s'adaptent à toutes les tailles d'écran. Dans le constructeur visuel, vous pouvez utiliser sept points d'arrêt réactifs personnalisables pour contrôler comment les dispositions apparaissent sur les appareils.

Pour optimiser l'alignement vertical, vous pouvez ajuster les structures de colonnes sur les tablettes et les appareils mobiles. Cela garantit que vos dispositions sont parfaites sur chaque taille d'écran. Par exemple, vous voudrez peut-être deux colonnes sur une tablette et une seule sur les appareils mobiles.

Le système de mise en page Flexbox de Divi 5 vous permet également de modifier l'ordre de vos colonnes sur les appareils mobiles, contrôlant ce que les utilisateurs mobiles voient d'abord dans une section ou une ligne.

Utilisez les variables de conception de Divi 5

La fonction de variables de conception de Divi 5 est parfaite pour maintenir l'espacement et l'alignement cohérents à travers des vues réactives. Les variables de conception vous permettent de définir des valeurs réutilisables pour des propriétés telles que le rembourrage, les marges et les tailles de police, assurant l'uniformité dans vos dispositions. Pour l'alignement vertical, vous pouvez créer une variable pour le rembourrage vertical afin de standardiser l'espacement dans les lignes ou les sections. Par exemple, définissez une variable de conception nommée un rembourrage vertical à 30px dans le gestionnaire de variables de Divi.

Pour appliquer la variable à une ligne, accédez à l'onglet Design, cliquez sur le menu déroulant d'espacement et cliquez sur l'icône Dynamic Content pour l'utiliser.

Flexbox facilite l'alignement vertical

Le système de mise en page Flexbox de Divi 5 facilite l'alignement vertical, offrant une solution flexible et réactive pour créer des dispositions polies. En intégrant Flexbox dans le constructeur visuel, Divi 5 permet aux utilisateurs de contrôler l'alignement des sections, des lignes, des colonnes et des groupes de modules avec précision, le tout sans avoir besoin d'une connaissance avancée de CSS. Ses fonctionnalités garantissent des conceptions professionnelles cohérentes sur tous les appareils. Que vous centriez du contenu, que vous aligniez des groupes de modules dynamiques ou que vous créiez des dispositions multiples, Divi 5 simplifie le processus lors de la livraison des résultats.

Téléchargez le dernier divi 5 alpha et expérimentez le système de mise en page Flexbox sur un nouveau projet.