Comment réorganiser les éléments sur différents points d'arrêt dans Divi 5

La conception réactive nécessite plus que des dispositions de mise à l'échelle, elle nécessite également de contrôler la façon dont le contenu s'empile entre les appareils. Une conception qui semble structurée sur le bureau peut être un ordre déroutant sur le mobile, avec des barres latérales ou des éléments secondaires poussant le contenu clé de la vue. Divi 5 aborde cela avec son nouveau système Flexbox, qui introduit des structures de colonnes réactives prédéfinies et des contrôles de commande précis.

Dans cet article, nous examinerons pourquoi la réorganisation des éléments est importante, comment les outils Flexbox de Divi 5 sont simples et parcourent les étapes pour restructurer les dispositions à différents points d'arrêt.

Pourquoi vous voudriez réorganiser les éléments

Lorsqu'une mise en page passe du bureau vers le mobile, l'ordre d'empilement ne reflète pas toujours votre expérience prévue. Une conception de bureau équilibrée à trois colonnes peut s'effondrer dans une pile verticale où la colonne de gauche vient toujours en premier, poussant un appel à l'action, un formulaire d'inscription ou des coordonnées loin de la page, où les utilisateurs peuvent ne jamais le voir.

Abonnez-vous à notre chaîne YouTube

Le système Flexbox de Divi 5 corrige cela en vous permettant de réorganiser visuellement les éléments à chaque point d'arrêt. Vous pouvez déplacer un CTA directement sous le titre sur mobile, apporter des témoignages au-dessus d'une table de tarification ou mettre en évidence les informations de contact avant le contenu long. Au lieu d'être coincé avec la logique d'empilement par défaut du navigateur, vous décidez de la hiérarchie. Cela garantit que votre contenu le plus important apparaît toujours là où il est le plus important.

Comment Flexbox de Divi 5 facilite la réorganisation

Divi 5 vous donne un contrôle direct sur la façon dont les éléments s'empilent à travers les points d'arrêt. Vous pouvez utiliser des structures de colonnes Flex prédéfinies pour configurer des dispositions qui s'adaptent naturellement, puis affinez les structures de colonne et les ordres de colonne à chaque taille d'écran.

Le Flexbox agit comme un récipient brillant qui s'ajuste en fonction de l'espace. Au lieu de l'empilement de contenu au hasard, vous contrôlez l'ordre sur chaque appareil.

Divi 5 gère également bien les dispositions imbriquées et complexes. Vous pouvez modifier les structures de lignes, les tailles de colonnes et l'ordre des modules à chaque point d'arrêt sans copier le contenu ou le codage.

Il gère également automatiquement l'alignement et le positionnement verticaux, ce qui rend votre contenu utile, entièrement réactif et non organisé au hasard.

Un guide étape par étape pour réorganiser réactif dans Divi 5

Jetons un coup d'œil à la façon dont vous pouvez réorganiser les éléments dans Divi 5 en utilisant son nouveau système Flexbox. Les étapes ci-dessous vous guident en configurant les structures de colonne et en ajustant l'ordre à différents points d'arrêt afin que vos dispositions restent claires et cohérentes sur chaque appareil.

1. Configurez vos sept points d'arrêt personnalisés

Divi 5 vous donne sept points d'arrêt au lieu de trois. Vous pouvez modifier chaque valeur de pixel afin que votre site soit correct sur n'importe quel appareil.

Cliquez sur le menu EllipSis dans votre barre des tâches et trouvez les commutateurs à bascule de point d'arrêt. Chacun a des gammes par défaut, mais vous pouvez modifier ces chiffres pour mieux s'adapter à votre public.

Vous verrez le téléphone (sous 767px), le téléphone large (sous 860px), la tablette (sous 980px), la tablette large (sous 1024px), le bureau (plus de 981px), l'écran large (plus de 1280px) et l'ultra large (plus de 1440px).

Après les avoir allumés, de petites icônes apparaissent dans votre barre des tâches. Cliquez sur n'importe quelle icône pour voir comment votre site regarde immédiatement la taille de cette écran.

Au lieu de cliquer sur chaque icône et d'être limité dans vos tests, vous pouvez saisir le bord de votre toile et le faire glisser à gauche ou à droite. Votre conception rétrécit ou se développe lorsque vous tirez, montrant comment votre disposition change à différentes largeurs.

Faites glisser la toile vers 300px et regardez votre disposition de bureau à trois colonnes transformer en une seule pile mobile. Retirez-le à 1200px et revenez votre contenu étalé. Vous n'avez pas besoin de changer de modes d'aperçu ou de redimensionner la fenêtre de votre navigateur.

2. Accédez aux commandes flexibles

Cliquez sur l'icône des paramètres de n'importe quelle ligne pour ouvrir le panneau Paramètres sur le côté droit. Accédez à l'onglet Design en haut de ce panneau. 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.

S'il n'est pas appliqué à votre disposition existante, vous pouvez le changer en flexion en un clic.

Faites défiler vers le bas pour localiser le champ de direction de disposition. Cela déterminera l'ordre et la manière dont les colonnes apparaissent (côte à côte ou au-dessus et en dessous).

Vous trouverez ci-dessous les options de contenu Justifier pour contrôler l'alignement et la distribution. Pendant ce temps, les options des éléments d'alignement apparaissent juste sous les options de positionnement.

3. Structure de disposition en amende pour chaque taille d'écran

Vos commandes Flexbox sont désormais actives, mais les dispositions de bureau peuvent nécessiter des ajustements structurels pour les écrans plus petits. Une disposition à trois colonnes peut fonctionner magnifiquement sur un bureau, mais devenir écrasante et bondée sur une tablette, nécessitant une grille 2 × 2 à la place, encore plus sur un appareil mobile où il n'y a de l'espace que pour une grille.

Heureusement, les icônes de l'appareil en haut à droite de vos commandes vous permettent de prévisualiser votre mise en page sur différents écrans et de définir les paramètres Flexbox pour chaque point d'arrêt. Cela vous permet d'ajuster la conception afin qu'elle ait l'air bien et fonctionne bien sur chaque appareil.

Passez au point d'arrêt de la tablette et cliquez sur le bouton de structure de la colonne Modifier. Au lieu de la configuration actuelle, choisissez une disposition symétrique 2 × 2. Cela rend instantanément la vue moins écrasante en montrant moins de cartes dans chaque ligne. Ajustez les lacunes verticales et horizontales au besoin pour un look équilibré. Sélectionnez ensuite la colonne CTA, définissez sa classe de colonne sur FullWidth dans les paramètres de dimensionnement et sélectionnez «Grow to Remplacer».

Votre version de tablette affiche désormais deux cartes simultanément, en gardant cette apparence uniforme. Le bouton d'appel à l'action se trouve bien dans la ligne en bas, ce qui le fait ressortir, similaire à votre disposition de bureau. Cette mise à jour aide à créer une expérience plus propre et plus accueillante qui évite la sensation encombrée de trop d'options rassemblées.

Pour mobile, utilisez l'option de structure de colonne de modification pour passer à une structure à colonne unique. Dans les commandes Flexbox, définissez la direction de disposition sur la colonne inversée. Ajustez l'écart à ce qui semble le mieux pour votre contenu.

4. Réorganiser les colonnes à travers les points d'arrêt

L'utilisation des valeurs de commande est un excellent moyen de décider manuellement de l'ordre des éléments enfants de vos conteneurs flexibles (souvent des colonnes) sur diverses tailles d'écran. L'onglet Ordre dans les paramètres de ligne donne à chaque colonne un nombre qui indique au navigateur: «Afficher cette colonne en position 1, celle-ci en position 2», etc. Des nombres plus bas apparaissent en premier et des nombres plus élevés apparaissent en dernier. Aussi simple que ça.

Vous pouvez même utiliser l'ordre «0» ou des nombres négatifs comme «-1» pour forcer le contenu spécifique à apparaître en premier, quelles que soient les autres valeurs.

Chaque point d'arrêt prend en charge son propre système de commande, vous donnant un contrôle complet sur le positionnement des éléments sur les appareils.

Jetons un coup d'œil à un exemple pratique: sur le bureau, sélectionnez la colonne 1 et définissez sa commande sur 1. Sélectionnez la colonne 2 et définissez sa commande sur «2» et fais de même pour le reste des colonnes. Votre disposition de bureau circule naturellement de gauche à droite, se terminant par un appel à l'action.

Personnalisation de la commande sur les tablettes et les mobiles

Maintenant, passez au point d'arrêt de la tablette à l'aide de la bascule de l'appareil. Et modifiez les ordres de colonne:

Définissez la colonne 6 (appel à l'action) sur «3», il apparaît donc dans la rangée du milieu. Laissez les colonnes 1 et 2 telles quelles, colonne 3 As 4, et le reste comme vous le souhaitez. Les utilisateurs de tablette consultent votre appel à l'action immédiatement après la proposition de valeur, suivi des détails de support.

Ensuite, passez au mobile à l'aide de la bascule de l'appareil. Changez l'ordre de la colonne CTA en «3» et laissez l'ordre des deux premières colonnes telles quelles. Faites le reste de l'ordre de la colonne similaire à la disposition des tablettes.

L'ordre de source sous-jacent de votre contenu reste le même, mais le CTA passe de la dernière position à la troisième sans affecter la disposition du bureau. De cette façon, vous pouvez contrôler comment les sections apparaissent à différents points d'arrêt sans duplication ou restructuration de votre contenu.

Contrôlez comment tout s'empile avec Divi 5

Le nouveau système Flexbox de Divi 5 vous donne un contrôle précis sur la façon dont le contenu s'empile sur les appareils. Avec sept points d'arrêt personnalisables et une mise à l'échelle en toile en direct, vous pouvez prévisualiser et ajuster les dispositions à n'importe quelle taille d'écran en temps réel.

Au lieu de compter sur l'ordre d'empilement par défaut du navigateur, vous décidez exactement où les barres latérales, les CTA et le contenu clé apparaissent. Flexbox vous permet de maintenir la hiérarchie et la clarté de chaque appareil sans solutions ou code supplémentaires.