Tout ce que vous devez savoir sur le système de mise en page Flexbox de Divi 5

Les sites Web flexibles et réactifs sont cruciaux, en particulier dans le monde en évolution rapide de WordPress. Les sites Web modernes doivent s'adapter de manière transparente sur différentes tailles d'écran, des ordinateurs de bureau à écran large aux écrans mobiles compacts. Divi 5 est une réécriture de base complète de Divi 4, conçue avec la vitesse, les performances et la flexibilité à l'esprit.

Au cœur de cette transformation se trouve le système de mise en page Flexbox de Divi 5, une nouvelle fonctionnalité qui permet aux utilisateurs de Divi de créer facilement des dispositions complexes et réactives. Dans cet article, nous plongerons dans ce qui fait de Flexbox un excellent ajout à Divi 5.

Commençons.

Qu'est-ce que Flexbox?

Flexbox, ou la disposition flexible de la boîte, est un modèle de disposition CSS conçu pour organiser des éléments en lignes ou colonnes, ce qui leur permet de fléchir, de rétrécir ou de se développer pour s'adapter à l'espace disponible.

Abonnez-vous à notre chaîne YouTube

Contrairement aux méthodes de disposition traditionnelles, Flexbox simplifie la création de conceptions dynamiques et réactives en fournissant des contrôles intuitifs pour l'alignement, l'espacement et l'ordre. Son approche unidimensionnelle le rend idéal pour construire des dispositions flexibles à travers les appareils.

L'intégration de Divi 5 de Flexbox

Divi 5 intègre Flexbox directement dans son noyau, en remplaçant les systèmes de disposition obsolètes comme les sections de spécialité et de largeur pleine. En adoptant Flexbox, Divi 5 propose un système moderne et efficace qui prend en charge la nidabilité infinie et les possibilités de mise en page plus avancées sans avoir besoin de code personnalisé.

Divi 4 vs divi 5

Bien que fonctionnel, le système de grille de Divi 4 a été limité par les structures de colonne et la nidabilité limitée. Par exemple, la réorganisation des colonnes pour les appareils mobiles a obligé à dupliquer la section et à la cacher sur des tailles d'écran plus petites, soit à l'ajout de CSS personnalisés.

Le système Flexbox de Divi 5 élimine ces limites, offrant une meilleure façon de créer des sites Web Divi. Cette refonte fait de Divi 5 une solution plus flexible et à l'épreuve du futur.

Caractéristiques clés du système de mise en page Flexbox de Divi 5

Le système de mise en page Flexbox de Divi 5 propose des fonctionnalités qui redéfinissent la façon dont les concepteurs abordent les sites Web de construction. Les utilisateurs peuvent déverrouiller un ensemble puissant et intuitif d'outils pour créer des conceptions dynamiques et réactives en activant l'option Flex. Voici une ventilation de ses capacités de base:

Toute disposition, pas de limites

Avec Divi 5, vous pouvez créer pratiquement n'importe quelle disposition à l'aide de Flexbox. Bien qu'il ait diverses options de mise en page, vous n'êtes pas limité à eux. Avec Flexbox, vous pouvez construire n'importe quoi avec précision. Le système prend en charge des conceptions uniques pour différents appareils, garantissant que les dispositions sont étonnantes sur les ordinateurs de bureau, les tablettes et les smartphones.

Les concepteurs peuvent modifier le placement et le style des modules pour s'adapter à des tailles d'écran spécifiques.

Le système prend en charge des conceptions uniques pour différents appareils grâce à des points d'arrêt réactifs personnalisables. En utilisant des options telles que la direction de la disposition et l'enveloppement de disposition, les concepteurs peuvent contrôler le placement des modules, les arrangements de colonnes et le style pour s'assurer que les dispositions sont étonnantes sur n'importe quel appareil.

Positionnement et alignement avancé

Le contenu Justify et les contrôles des éléments d'alignement rendent intuitif l'alignement vertical et horizontal. Que ce soit le contenu verticalement avec des éléments aligs définis pour mettre fin ou distribuer des éléments avec Justify Content Set à démarrer, Divi 5 fournit des paramètres conviviaux pour obtenir des résultats parfaits sur les pixels sans CSS personnalisé.

Divi 5 aborde les problèmes d'empilement mobile de Divi 4 avec la commande de colonne personnalisée. Les concepteurs peuvent réorganiser des éléments pour les vues mobiles et de bureau en utilisant des commandes réactives dans le constructeur visuel, garantissant que les modules apparaissent dans l'ordre souhaité sans sections de duplication.

Contrôle amélioré sur l'espacement et l'emballage

L'onglet de dimensionnement de Divi 5 offre des options comme Grow à remplir, rétrécir pour s'adapter et personnaliser, donnant aux concepteurs un contrôle intuitif sur le dimensionnement et l'espacement des éléments.

Le contrôle d'emballage de disposition permet aux éléments d'envelopper de nouvelles lignes ou de rester en une seule ligne, en s'adaptant aux tailles de conteneurs. Par exemple, l'activation de WRAP garantit que les éléments se déplacent vers de nouvelles lignes au lieu de déborder, tandis que le rétrécissement pour s'adapter empêche les éléments de dépasser les limites de leur conteneur, la création de dispositions propres et adaptables.

Intégration avec d'autres fonctionnalités divi 5

• Synergie avec des lignes imbriquées et des groupes de modules: le système de mise en page Flexbox fonctionne de manière transparente avec les lignes et les groupes de modules imbriqués de Divi 5, permettant des options de mise en page plus complexes. Cette intégration permet aux utilisateurs Divi de gérer les modules dans les colonnes en tant qu'unités cohésives.
• Prise en charge du constructeur de boucle: le système jette également les bases du prochain constructeur de boucle, améliorant l'affichage de contenu dynamique, tels que les grilles de blog ou les listes de produits.
• Interactions pour les éléments dynamiques: la fonction d'interactions de Divi 5, qui prend en charge les fenêtres contextuelles, les bascules, les mouvements de souris et les effets basés sur le défilement, se marie parfaitement avec Flexbox, permettant aux utilisateurs Divi de créer des dispositions interactives attrayantes.

Du bloc à la flexion

Le système de mise en page Flexbox dans Divi 5 est une mise à niveau claire du modèle de mise en page basé sur le bloc dans Divi 4. Les éléments de pile de dispositions de blocs dans un ordre fixe, ce qui rend les ajustements même simples plus difficiles qu'ils ne devraient l'être.

Flexbox vous donne plus de contrôle. Vous pouvez facilement aligner, espacer et réorganiser le contenu sur n'importe quelle taille d'écran, avec moins de solutions de contournement et de résultats plus propres.

Comment utiliser le système de mise en page Flexbox de Divi 5

Divi 5 fait de Flexbox un jeu d'enfant à utiliser. Il fonctionne exactement comme dans Divi 4, juste avec plus d'options. Vous pouvez choisir une ligne avec des colonnes égales, des colonnes de décalage, des grilles multi-rangs ou des grilles multi-colonnes.

Comme dans Divi 4, sélectionnez un module à placer dans la première colonne.

Après avoir ajouté vos modules, cliquez sur l'icône des paramètres de la ligne que vous avez ajoutée et accédez à l' onglet Design . Dans le menu de mise en page, vous trouverez tous les contrôles Flexbox de Divi 5. Par défaut, Flex est sélectionné dans le style de mise en page .

Vous pouvez contrôler l'espacement entre les colonnes en ajustant l'espace horizontal et vertical .

Dans le champ de direction de disposition , vous pouvez choisir d'afficher le contenu de la ligne de gauche à droite (ligne), de droite à gauche (ligne), colonne (paramètre par défaut) et colonne inversée.

Justifier le contenu contrôle l'alignement et la distribution des éléments flexibles dans la section ou la ligne. Ils peuvent être alignés dès le début (en haut), le milieu, la fin (en bas), l'espace entre, l'espace autour ou les espacer uniformément.

Les éléments d'alignement contrôle l'alignement des éléments flexibles à l'intérieur de la section ou de la ligne. Vous pouvez aligner les éléments au début de la section, du centre, de la fin (à droite) ou de les étirer à travers le conteneur.

Enfin, l'enveloppement de mise en page (wed-wrap dans CSS) vous donne un contrôle direct sur la façon dont vos sections, lignes et colonnes se comportent. Wrap indique au navigateur de permettre aux éléments d'un conteneur de se déplacer vers une nouvelle ligne s'il n'y a pas assez d'espace horizontal pour les installer dans une seule ligne. La pellicule inversée fait la même chose, mais inverse l'ordre des éléments.

Le système de mise en page Flexbox de Divi 5 vous donne les outils pour organiser les éléments exactement comme vous le souhaitez sans avoir à lutter avec le code.

Avantages pour les concepteurs Web et les développeurs

Le système de mise en page Flexbox de Divi 5 offre plusieurs avantages pour chaque utilisateur Divi. Cela facilite la création de dispositions complexes et réactives avec moins d'efforts.

1. Construire des dispositions complexes avec facilité

La construction de dispositions complexes avec le système de disposition Flexbox de Divi 5 est plus intuitive que les versions précédentes de Divi. Il facilite la création de dispositions plus faciles et moins dépendantes des structures de lignes rigides. Vous pouvez positionner, espacer et organiser des éléments de conception en quelques clics.

De plus, vous pouvez facilement modifier la structure de la colonne pour les écrans plus petits, ajuster l'espacement à la volée et construire des conceptions complexes sans cacher des lignes sur certains points d'arrêt ni utiliser CSS personnalisé.

2. Réactivité améliorée

Divi 5 excelle dans la création de conceptions réactives qui s'adaptent de manière transparente entre les appareils. Avec des points d'arrêt réactifs personnalisables, les utilisateurs Divi peuvent ajuster les dispositions pour des tailles d'écran spécifiques, assurant un aspect poli. Divi 5 adresse les limitations mobiles de Divi 4 en introduisant la commande de colonne personnalisée.

Cette fonctionnalité vous permet de réorganiser les colonnes pour les vues mobiles sans sections de supplication ou d'utiliser des CSS personnalisés.

3. Liberté de création

Flexbox permet aux utilisateurs de repousser les limites créatives en prenant en charge les dispositions uniques et complexes, des grilles au contenu dynamique, le tout sans codage. L'intégration avec la fonction d'interactions de Divi 5 facilite les éléments engageants comme les fenêtres, les bascules et les effets basés sur le défilement.

L'interface du système rend la conception professionnelle accessible à tous, tandis que les contrôles avancés offrent une précision pour les utilisateurs plus avancés.

4. Performance et évolutivité

Flexbox génère un CSS plus propre et plus léger que le cadre basé sur les raccourcis de Divi 4, ce qui entraîne des performances de site plus rapides et de meilleures performances de référencement. Ce code optimisé améliore la maintenabilité et aide les sites Web à se charger rapidement, offrant une meilleure expérience utilisateur à vos visiteurs.

La conception avant-gardiste de Flexbox prend en charge les fonctionnalités à venir comme The Loop Builder, faisant de Divi 5 une solution évolutive pour créer des grilles de blog ou des listes de produits.

Le système de mise en page Flexbox redéfinit ce qui est possible avec Divi

Le système de mise en page Flexbox redéfinit la conception Web en Divi 5, combinant la flexibilité, la réactivité et la facilité d'utilisation. Divi 5 offre des commandes d'alignement et d'espacement intuitif, ce qui facilite la création de n'importe quelle disposition. La fonctionnalité s'intègre aux lignes imbriquées, aux groupes de modules et au prochain constructeur de boucle, vous permettant de regrouper et de nicer les modules et les lignes pour encore plus de flexibilité. Divi 5 offre un code plus propre que Divi 4, des performances plus rapides et des possibilités de conception illimitées. Ces fonctionnalités garantissent que Divi 5 est une solution à l'épreuve du temps pour créer des sites Web réactifs.

Êtes-vous prêt à construire votre prochain chef-d'œuvre? Essayez le dernier Divi 5 Alpha et rejoignez notre communauté pour partager vos commentaires.