Comment créer des hauteurs de colonnes égales avec Flexbox en divi 5

La création de dispositions propres et professionnelles est une pierre angulaire d'une conception Web efficace, et les hauteurs de colonnes égales contribuent à une disposition équilibrée. Que vous affichiez des produits, des services ou des articles de portefeuille, des colonnes qui alignent parfaitement stimulent l'expérience utilisateur. Dans Divi 4, des colonnes égales étaient possibles, mais Divi 5 apporte beaucoup plus à la table.

Dans Divi 5, l'intégration de son système de mise en page Flexbox améliore le processus, offrant un moyen plus simple et plus flexible de créer des hauteurs de colonne égales. Cet article vous guidera à travers la création de dispositions propres et équilibrées. Plongeons-nous!

Hauteurs de colonnes égales en divi 4

Dans Divi 4, la réalisation de colonnes avec des hauteurs égales était simple mais limitée. Une bascule a activé toutes les colonnes à l'intérieur d'une ligne pour correspondre à la hauteur de la plus haute colonne. Cette fonctionnalité était une bouée de sauvetage pour maintenir la cohérence visuelle, mais elle avait des limites qui nécessitaient souvent des solutions de contournement.

L'effet de hauteur égale dans Divi 4 a été appliqué aux conteneurs de colonne, ce qui signifie que les couleurs d'arrière-plan, les images ou les bordures devaient être définies au niveau de la colonne. Cette approche ne s'est pas étendue aux modules dans les colonnes, ce qui pourrait entraîner des lacunes maladroites. Par exemple, un bouton sous un module de texte court dans une colonne laisserait un espace maladroit en dessous, tandis qu'un bouton sous un module de texte plus long dans une autre colonne l'a rempli, créant un look déséquilibré.

Lorsque les concepteurs voulaient plus de contrôle, comme l'alignement du contenu du module verticalement ou l'ajustement de l'espacement, CSS personnalisé était souvent nécessaire. Cela a posé un défi, en particulier pour les débutants, car ils ont dû plonger dans les champs CSS personnalisés de Divi pour obtenir des résultats polis. Par exemple, si vous vouliez que les boutons s'alignent au bas de la colonne dans Divi 4, vous devrez utiliser CSS pour y parvenir.

Comment Flexbox en divi 5 traite des colonnes égales

Flexbox est intégré de manière transparente dans Divi 5, ce qui rend la création de hauteurs de colonnes égales plus faciles à réaliser. Contrairement à l'option basée sur les basculements de Divi 4, Divi 5 exploite Flexbox pour fournir des contrôles intégrés qui facilitent la conception de pages Web.

Avec Flexbox, vous pouvez étirer automatiquement les colonnes pour correspondre au plus haut tout en offrant des options d'alignement précises pour les colonnes et leur contenu. Cela élimine le besoin de CSS personnalisés, ce qui rend les dispositions avancées possibles pour chaque utilisateur Divi, pour les débutants et les professionnels. Le système de mise en page Flexbox de Divi 5 permet aux concepteurs de créer facilement des conceptions professionnelles cohérentes.

Comment créer des hauteurs de colonne égales dans divi 5

La création de colonnes avec une hauteur égale dans Divi 5 est un jeu d'enfant grâce à son intégration Flexbox. Dans les étapes ci-dessous, nous allons montrer comment configurer les choses et nous assurer que tout s'aligne parfaitement.

Étape 1: Créez votre conception

Ouvrez le constructeur visuel sur une page nouvelle ou existante. Cliquez sur l' icône Black + pour ajouter une nouvelle ligne .

Lorsque la boîte de dialogue de la nouvelle section apparaît, sélectionnez la disposition à trois colonnes sous des colonnes égales .

Ajoutez un module de groupe dans la première colonne.

Ensuite, ajoutez un module d'icône dans le module de groupe dans la première colonne.

Sélectionnez l' icône de vérification dans l'onglet Contenu.

Dans l'onglet Design , définissez la couleur de l'icône sur # 2EA3F2 et la taille de l'icône à 36px.

Ensuite, ajoutez un module d'en-tête sous le module d'icône. Assurez-vous d'ajouter la rubrique au module de groupe en cliquant sur l' icône Black + au lieu de celle grise.

Tapez la conception Web comme titre dans l' onglet Contenu .

Dans l'onglet Design, choisissez H5 comme niveau d'en-tête , inter comme la police de cap et moyen comme poids de police de cap . Définissez le style de police de cap sur majuscules , en tête de l'alignement du texte à gauche , la couleur du texte de titre sur # 000000 et conservez la taille du texte de la tête à la taille par défaut de 16px .

Ensuite, ajoutez un module de texte sous la rubrique à l'intérieur du module de groupe. Vous pouvez laisser les paramètres tels quels.

Nous ajouterons un module de bouton pour le module final de la colonne. Cependant, au lieu de l'ajouter au module de groupe, nous l'ajouterons en dessous. Cela nous permettra de créer des hauteurs de colonne égales, mais alignera le bouton en bas, ce qui rend le design plus cohérent.

Cliquez sur l'onglet Conception et attribuez les paramètres de style souhaités au module de bouton. Vérifiez votre bouton pour vous assurer qu'il est en dehors du module de groupe en regardant la vue des calques dans le menu de gauche. Une fois terminé, le bouton doit ressembler à la capture d'écran ci-dessous - à gauche avec un fond bleu et un texte blanc.

Étape 2: Duplication des colonnes

Une fois la première colonne remplie de contenu, nous copierons le contenu de la première colonne dans les deuxième et troisième colonnes et apporterons quelques modifications. Vous pouvez supprimer les deuxième et troisième colonnes et dupliquer le premier, ou copier et coller le module de groupe et le bouton dans les deuxième et troisième colonnes.

Ensuite, modifiez le titre de cap dans la 2ème colonne en codage et le titre de cap dans la 3e colonne de marketing . Nous supprimerons également une partie du contenu du module de texte dans la 2ème colonne afin que nous puissions démontrer comment Divi 5 gère Flexbox avec des longueurs de contenu variables. Comme vous pouvez le voir, les colonnes sont inégales.

Avant de passer à l'étape suivante, cliquez dans la première colonne et ajoutez un espacement de 25px à tous les côtés de notre colonne.

Nous ajouterons également un rayon de bordure 15px et une largeur de bordure 1px avec # 666666 comme couleur.

La dernière étape de la conception de notre ligne consiste à copier les attributs de conception de la 1ère colonne et à les coller dans les colonnes restantes. Cliquez avec le bouton droit sur la première colonne et sélectionnez Copier les styles d'élément . Ensuite, cliquez avec le bouton droit sur la 2ème colonne et sélectionnez le style d'élément de collez . Répétez également cette action pour la 3ème colonne.

Étape 3: Configurer les paramètres Flexbox pour des hauteurs égales

Ensuite, nous devrons configurer nos paramètres Flexbox pour la ligne. Divi 5 intègre les commandes Flexbox dans son système de mise en page, allant au-delà de la bascule des hauteurs de la colonne d'EQUI 4 de Divi 4. Accédez à l' onglet Conception de la ligne et assurez-vous que Flex est sélectionné sous la disposition .

Ensuite, assurez-vous que la ligne est sélectionnée dans la direction de la disposition , commencez sous justifier le contenu et que l'étirement est sélectionné sous les éléments d'alignement . Cela indiquera à Divi 5 de conserver la structure de la colonne, d'aligner tous les éléments dans la ligne vers la gauche et de remplir l'espace disponible dans le conteneur parent.

Ensuite, cliquez sur les paramètres de la première colonne. Cliquez sur le menu déroulant Layout pour révéler ses paramètres dans l' onglet Design . Par défaut, Flex sera sélectionné sous la mise en page . Dans le champ de direction de disposition , sélectionnez la colonne . Sous Justifier le contenu , sélectionnez l'espace entre . Alignez tous les éléments au début (à gauche) et laissez le colocage de mise en page défini sur No Wrap .

Répétez les étapes ci-dessus pour les 2e et 3e colonnes. Vous pouvez également utiliser les fonctionnalités de copie / coller ou d'étendre pour appliquer les mêmes paramètres aux colonnes restantes de la ligne.

Tous les modules du groupe seront étirés pour remplir l'espace disponible, et les boutons à l'extérieur du groupe seront alignés en bas.

Étape 4: Testez la réactivité

Les points d'arrêt réactifs personnalisables de Divi 5 facilitent l'autorisation de vos hauteurs de colonnes égales sur tous les appareils. Utilisez la vue réactive pour prévisualiser votre mise en page dans le constructeur visuel. Par défaut, il y a trois points d'arrêt. Cependant, Divi 5 en a maintenant 7, qui peut facilement être activé en cliquant sur le menu Ellipsis dans la barre d'outils en haut du constructeur visuel. Activez les points d'arrêt que vous souhaitez et cliquez sur Enregistrer pour les appliquer.

Cliquez pour prévisualiser votre mise en page dans la vue de la tablette . Comme vous pouvez le voir, Flexbox garde les colonnes empilées côte à côte.

Vous pouvez modifier la structure des colonnes pour permettre aux colonnes de s'empiler verticalement sur des appareils plus petits. Dans le point d'arrêt de la tablette, cliquez sur l' onglet Contenu pour la ligne . Cliquez sur Modifier la structure de la colonne .

Lorsque la boîte de dialogue apparaît, cliquez pour activer la ligne unique sous des colonnes égales . Cela modifiera la ligne à 3 colonnes en une seule colonne sur la tablette et les appareils mobiles, tout en préservant la structure à 3 colonnes sur des ordinateurs de bureau.

Lorsque vous prévisualisez les modifications sur tous les points d'arrêt, vous verrez comment Divi transitions la disposition des petits écrans.

En automatisant l'alignement de la hauteur, les concepteurs peuvent se concentrer sur la créativité plutôt que sur les correctifs techniques, ce qui facilite la création de sites professionnels dans une fraction du temps. Le système de mise en page Flexbox de Divi 5 prend également en charge une meilleure organisation de contenu via des groupes de modules, ce qui facilite l'alignement sans CSS personnalisé plus facile que jamais.

Cas d'utilisation courants

Le système Flexbox de Divi 5 rend la création de hauteurs de colonnes égales polyvalentes et efficaces pour divers cas d'utilisation. Vous trouverez ci-dessous quelques façons courantes où le système Flexbox de Divi 5 brille:

1. Listes de produits

Dans les dispositions de commerce électronique, les cartes de produits varient souvent en longueur de contenu en raison des titres ou des descriptions. Avec Flexbox de Divi 5, vous pouvez créer une grille de cartes de produits où chaque colonne maintient une hauteur égale, assurant une apparence propre et professionnelle. Par exemple, un produit avec une brève description s'aligne parfaitement avec celui avec une description plus longue. Le système Flexbox de Divi 5 vous permet d'éviter les lacunes gênantes et de créer une expérience cohérente qui favorise la confiance et l'engagement des utilisateurs.

2. Sections en vedette

Les sections de service ou de fonctionnalités conviennent bien au système Flexbox de Divi. Flexbox dans Divi 5 garantit que tous les modules à l'intérieur d'une ligne ont des hauteurs de colonne égales, créant un aspect équilibré et poli. Qu'il s'agisse d'affichage des bios d'équipe, de services ou de faits saillants de fonctionnalité, des colonnes égalisées facilitent la numérisation de vos pages Web, améliorant l'expérience utilisateur.

3. Grilles de portefeuille

Une grille de portefeuille est le cas d'utilisation parfait pour Flexbox, en particulier pour les pigistes affichant leur travail. Flexbox garantit que les éléments de la galerie comme les images s'alignent uniformément, même avec différents rapports d'aspect. Vous pouvez utiliser un module de groupe, y attribuer une image d'arrière-plan et ajuster l'espacement en conséquence. Cela crée une grille professionnelle bien rangée qui met en valeur votre travail de manière cohérente, ce qui le rend idéal pour les photographes, les concepteurs ou les agences visant à impressionner les clients potentiels.

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!

Familiez-vous avec la fonction Flexbox de Divi 5 aujourd'hui

Le système de mise en page Flexbox de Divi 5 marque un bond en avant de Divi 4 d'égaliser les hauteurs de colonnes, transformant comment les utilisateurs Divi créent des colonnes égales. Lorsque Divi 4 reposait sur une méthode rigide et dépendante de l'arrière-plan qui nécessitait souvent des CSS personnalisés pour le raffinement, Divi 5 exploite Flexbox pour fournir des commandes intuitives et une réactivité transparente. Le résultat est un système plus efficace qui supprime la nécessité de solutions de contournement CSS personnalisées et permet aux utilisateurs de Divi de créer facilement des dispositions professionnelles polies.

Êtes-vous prêt à élever vos sites Web Divi? Plongez dans les paramètres Flexbox de Divi 5 et expérimentez les possibilités créatives qu'ils débloquent. Partagez vos commentaires ci-dessous ou connectez-vous avec nous sur nos réseaux sociaux pour partager vos réflexions sur notre nouvelle fonctionnalité Flexbox.