Création d'un système d'espacement basé sur les lacunes avec Divi 5

L'espacement cohérent est le fondement d'un site Web poli et poli. Au lieu de gérer les marges sur les éléments individuels un par un, vous pouvez compter sur un seul système qui maintient les dispositions propres et équilibrées sur votre site.

Avec les nouvelles variables de conception de Divi 5 et les fonctionnalités Flexbox, vous pouvez désormais créer un système d'espacement basé sur des écarts directement dans le constructeur visuel, aucun codage personnalisé requis. Jetons un coup d'œil!

Pourquoi les méthodes d'espacement traditionnelles échouent

Les marges et le rembourrage semblent assez simples. Ajoutez de l'espace ici, ajustez le rembourrage là-bas. Mais cette approche peut facilement devenir désordonnée. Voici comment cela se passe dans la pratique:

Vous définissez une marge de 30px sur un bloc de texte. Ensuite, vous avez besoin d'espace autour d'un bouton, vous ajoutez donc 20px.

Un autre module a besoin d'une salle de respiration, vous choisissez donc 40px. Chaque décision semble juste dans l'instant, mais vous construisez une maison de cartes.

Passez au mobile, et tout peut sembler disbalancé. Ces valeurs de pixels soigneusement choisies ne se traduisent pas. Votre espacement est parfait sur le bureau, mais déséquilibré sur les tailles d'écran plus petites. Vous créez donc des valeurs spécifiques au mobile, puis des valeurs de tablette.

Vous gérez maintenant trois systèmes d'espacement différents. Cette approche divisée rend le maintien d'un rythme visuel cohérent sur votre site difficile.

Comment les propriétés d'écart facilitent l'espacement

Les propriétés GAP fonctionnent différemment des marges traditionnelles. Vous n'appliquez pas l'espacement à chaque élément individuellement. Au lieu de cela, vous définissez des règles d'espacement sur le conteneur parent. Le conteneur gère automatiquement l'espacement entre tous les éléments enfants.

Avec Flexbox activé, vous obtenez deux commandes d'espace: horizontale et verticale. Réglez l'écart horizontal à 24px et tous les éléments enfants obtiennent 24px d'espace entre eux horizontalement. Réglez l'écart vertical à 15px et les éléments empilés obtiennent 15 pix d'espace vertical.

Cela fonctionne pour tout contenu à l'intérieur du conteneur Flexbox. Les modules de texte, les images, les boutons, les diviseurs et tout ce que vous y mettez, obtiennent le même espacement cohérent. Vous n'aurez pas besoin de creuser à travers des modules individuels et d'ajuster leurs marges séparément; Les propriétés de l'espace gèrent les mathématiques d'espacement.

La méthode traditionnelle fait des choix d'espacement aléatoire: 10px ici, 20px là-bas, 40px ailleurs. Ces valeurs dispersées provoquent des incohérences et rendent difficile de savoir quel espacement s'applique. Les propriétés de l'espace suppriment les conjectures en utilisant une règle cohérente pour tous les éléments.

Cette approche a encore des limites. Vous devez toujours vous souvenir de chaque valeur que vous avez utilisée et l'appliquer manuellement partout où vous en avez besoin. Vous devez deviner quelles valeurs fonctionnent où. Une fois que vous avez défini ces valeurs, changer d'avis signifie trouver chacun et le remplacer manuellement, en laissant de la place aux erreurs et aux incohérences.

Un système d'espacement basé sur les lacunes avec des variables Flexbox et de conception est une bien meilleure approche.

Comment configurer le système GAP dans Divi 5

La construction d'un système d'espacement basé sur les lacunes semble complexe, mais Divi 5 le rend étonnamment simple. Vous n'avez pas besoin de connaissances de codage ou de cadres externes. Le constructeur visuel gère tout via des variables de conception et des commandes Flexbox. Nous vous guiderons à travers chaque étape, de la création de vos variables d'espacement à la sauvegarde des préréglages réutilisables.

1. Créer des variables d'espacement

Divi 5 peut stocker les valeurs d'espace à l'intérieur du constructeur visuel à l'aide de variables de conception. Vous créez votre système d'espacement une fois et appliquez ces valeurs partout où les commandes Flexbox apparaissent, aucune fonction CSS personnalisée n'est nécessaire.

Le gestionnaire variable se trouve dans la barre latérale gauche de votre constructeur visuel. Cliquez sur cette icône, puis ouvrez l'onglet Nombres où des variables d'espacement peuvent être ajoutées.

Ici, vous créerez des valeurs qui peuvent être utilisées sur tout le site au lieu de pixels codés en dur. Plusieurs variables de conception sont disponibles; Nous ne les couvrirons pas dans ce post, mais nous avons un excellent guide.

Commencez avec votre unité d'espacement de base. La plupart des concepteurs travaillent avec 8-12px comme fondation, mais vous pouvez choisir 4px, 10px ou tout ce qui correspond à votre rythme de conception. Vous pouvez utiliser des unités avancées ici, à l'exception des pixels. Par exemple, nous commençons par REM au lieu de pixels (en supposant que le navigateur par défaut 1Rem = 16px):

• GAP XS: 0,75REM (~ 12px pour les relations serrées pour les colonnes avec uniquement l'icône et le texte)
• GAP S: 1.25REM (~ 20px pour les colonnes avec blocs de texte)
• GAP M: 2REM (~ 32px pour les boîtes de fonctionnalités, colonnes de service)
• GAP L: 3REM (~ 48px pour les sections de contenu principales, dispositions de barres latérales)

Ces étiquettes ne sont pas fixes; Vous et votre équipe pouvez les renommer au besoin. Vous pouvez également ajouter plus de variables d'écart. Les unités REM évoluent avec les paramètres de police du navigateur, de sorte que les visiteurs qui augmentent la taille du texte obtiennent un espacement proportionnel. Cela améliore l'accessibilité.

Utilisez des pinces pour faire des lacunes évolutives

Nous pouvons également utiliser CLAMP (). Nous expliquerons brièvement si vous ne savez pas ce qu'est une pince (). Mais d'abord, envisagez également d'ajouter ce qui suit aux variables de nombre:

• GAGNE DE COLONNE HORIZONTAL: Pince (16px, 2vw, 32px) (pour les lacunes horizontales entre les cartes, les fonctionnalités, etc.)
• Écart de colonne verticale: pince (16px, 1,5 VW, 32px) (pour les lacunes verticales entre les cartes, les fonctionnalités, etc.)

Clamp () est une unité CSS sûre à utiliser. Vous donnez trois valeurs: min, préférée et max. Le navigateur essaie la valeur préférée, mais s'il est trop petit, il utilise le min, et s'il est trop grand, il utilise le maximum.

Par exemple, l'espace de colonne horizontale: pince (16px, 2vw, 32px). L'écart évolue avec la largeur de l'écran (2vw = 2% de la fenêtre). Il ne va pas en dessous de 16px sur de petits écrans ou plus de 32 pix sur de grands écrans. Cela maintient l'espacement équilibré sans points d'arrêt ni requêtes multimédias.

Vous pouvez utiliser toutes les valeurs. Nous avons choisi cette méthode car il est facile à maintenir, s'adapte à changer et produit des résultats plus cohérents.

2. Activer la disposition Flexbox sur vos sections

Les nouvelles sections utilisent Flexbox par défaut. Pour les anciens sites, convertissez une section en cliquant sur l'icône des paramètres, en ouvrant l'onglet Design, en choisissant le style de mise en page sous l'onglet Layout et en sélectionnant «Flex». Faites de même pour vos lignes et colonnes.

Après avoir activé Flex, vous obtenez des options comme justifier le contenu pour l'alignement et la distribution. Aligner les contrôles des éléments vous permettez de définir la façon dont les éléments se comportent lorsque l'espace s'épuise horizontalement.

Ici, vous pouvez repérer les commandes d'espace, qui ont des curseurs horizontaux et verticaux séparés pour définir l'espacement entre les colonnes ou les modules à l'intérieur d'une ligne.

3. Appliquez des valeurs d'écart en utilisant vos variables

Une fois que vous avez configuré vos variables GAP dans le gestionnaire de variables de Divi, les appliquer aux paramètres de flexbox GAP devient simple grâce au système de contenu dynamique. Accédez à vos paramètres de disposition et survolez les étiquettes dans les champs d'espace horizontale ou verticale pour révéler l'icône de contenu dynamique.

Cliquez sur l'icône de contenu dynamique pour ouvrir la boîte de dialogue de sélection de variables. Vos variables d'écart enregistrées apparaissent dans ce menu.

Comme vous l'avez peut-être remarqué, nous avons ajouté deux ensembles de lacunes en fonction du contexte dans lequel ils seraient utilisés. Prenons une plongée plus profonde pour comprendre pourquoi:

Gaps de serrage: entre les colonnes flexibles

Vos écarts de serrage fonctionneraient au niveau du «conteneur» via les paramètres Flexbox de Divi.

Appliquez un espace de colonne horizontal [pince (16px, 2vw, 32px)] lorsque vous avez des colonnes disposées côte à côte, comme trois cartes de service en une ligne. Une fois sélectionné, Divi l'applique automatiquement au paramètre GAP. Le champ affichera votre nom de variable, confirmant la connexion. Cela crée un espacement horizontal proportionnel entre les colonnes 1, la colonne 2 et la colonne 3 lorsque la direction de disposition est définie comme une ligne.

Appliquer un espace de colonne verticale [pince (16px, 1,5 VW, 32px)] lorsque votre direction de disposition est définie sur la colonne, empilant les éléments verticalement. Cela espacera les éléments proportionnellement de haut en bas lorsque la direction de disposition sera définie sous forme de colonne.

Lorsque des colonnes avec une direction de ligne se cachent sur plusieurs lignes, comme six cartes disposées en trois colonnes par ligne, appliquez les deux lacunes. Un espace horizontal espace les éléments dans chaque ligne, tandis qu'un espace vertical espace les lignes elles-mêmes.

Gaps de base: Contenu dans les lignes

Vos lacunes de base contrôlent les relations entre les pièces de contenu à l'intérieur de chaque colonne. Lorsqu'un titre est suivi d'un paragraphe et d'un bouton dans la même colonne, envisagez d'appliquer GAP XS (0,75REM) entre eux.

Envisagez d'utiliser GAP S (1.25REM) pour les groupes de contenu avec plusieurs éléments de texte ou GAP L (3REM) si vous avez besoin d'espacement significatif entre deux colonnes, surtout si la direction de disposition de la colonne est définie sur une ligne.

L'avantage des variables de conception

Les variables de conception présentent plusieurs avantages sur la saisie des valeurs manuellement. Étant donné que les étiquettes peuvent être contextuelles, ils continuent d'espacer cohérent sans mémoriser des valeurs de pixel ou de rem.

Lorsque vous modifiez la philosophie d'espacement, mettez à jour une variable dans le gestionnaire de variables pour mettre à jour chaque écart utilisé sur le site.

Cette méthode visuelle évite également les erreurs d'espacement lorsque les membres de l'équipe entrent différentes valeurs. Les variables GAP créent un langage commun pour l'espacement, en gardant les dispositions alignées avec les normes de conception que vous définissez. Cela est particulièrement utile pour les grands projets avec de nombreux contributeurs ou après le transfert des clients lorsque les clients modifient ou ajoutent des pages.

4. Configurer des lacunes réactives

Les téléphones portables ont un espace horizontal limité. Votre disposition de service à trois colonnes a fière allure sur le bureau, mais devient à l'étroit et rigide à lire sur un écran de téléphone 360px.

Divi 5 vous donne sept points d'arrêt personnalisables avec lesquels travailler: téléphone, téléphone large, tablette, tablette large, ordinateur de bureau, écran large et ultra large. Chaque point d'arrêt fonctionne indépendamment. Vous pouvez modifier la direction de disposition, échanger des variables d'espace ou ajuster l'alignement sur le mobile sans gâcher le bureau. Cela vous permet de cibler les largeurs d'écran exactes où votre disposition doit changer.

Passez au point d'arrêt de votre téléphone et modifiez la direction de la disposition de la «ligne» à «colonne». Effacez l'option d'espace horizontal car vos colonnes s'empilent verticalement au lieu de se battre pour l'espace horizontal.

L'écart vertical basé sur la pince se rétrécit et se développe automatiquement à mesure que la largeur de la fenêtre change. Sur un petit écran de téléphone, 2VW est égal à environ 7px, mais la pince ne dépassera pas le minimum de 16px. Sur un écran plus grand, 2VW pourrait signifier 18px et sur un écran encore plus grand, 20px.

L'espacement se développe en douceur entre ces limites à mesure que la taille de l'écran change. Sans définir des valeurs différentes manuellement, vous obtenez un espacement serré sur l'espacement mobile et généreux sur le bureau.

Les lacunes de base peuvent encore nécessiter des ajustements manuels par point d'arrêt. Gap M peut se sentir trop serré sur le mobile. Passez à votre point d'arrêt mobile et appliquez l'espace L au lieu de l'option d'espace vertical.

Vous pouvez également créer des variables spécifiques aux mobiles, telles que «Gap Mobile S» ou «Gap Mobile L», et les appliquer aux points d'arrêt du téléphone et des tablettes. Cependant, la base de base et les écarts de serrage fonctionnent bien dans la plupart des cas.

5. Enregistrez votre configuration en tant que préréglé

Votre système d'écart fonctionne bien maintenant. Les variables de conception vous donnent le contrôle de l'espacement via l'interface visuelle avec laquelle vous avez travaillé. Mais la configuration des configurations Flexbox encore et encore s'améliore rapidement. Vous devez ajuster les paramètres de direction de disposition, d'alignement et d'emballage. Ensuite, vous appliquez vos variables d'écart à chaque nouvelle section. Ce processus consomme du temps.

Les préréglages du groupe d'options résolvent ce problème. Il stocke votre configuration complète de Flexbox, y compris la direction de disposition, l'alignement, l'emballage, la justification et les lacunes horizontales et verticales qui font référence à vos variables de conception.

Une fois que vous avez configuré tous les paramètres Flexbox, survolez le panneau de style de mise en page. Vous verrez l'icône de préréglage du groupe d'options.

Cliquez dessus et sélectionnez «Créer un préréglage à partir des styles actuels». Nommez-le en fonction de ce que fait la mise en page: «Grille à trois colonnes», «Grille de services» ou «affichage de la carte».

Le préréglage porte la configuration Flexbox vers n'importe quel conteneur. Il ne copie pas les couleurs d'arrière-plan, les polices ou tout autre style visuel.

Appliquez votre préréglage «trois colonnes» sur n'importe quelle ligne. Il configure automatiquement le même comportement d'espacement, d'alignement et d'emballage. Chaque ligne ou colonne conserve son aspect visuel tout en utilisant la même structure de mise en page.

Vous passez moins de temps à recréer des configurations que vous avez déjà perfectionnées. L'identité visuelle reste unique à chaque section. La base structurelle reste cohérente sur votre site. Votre système d'écart reste rapide à mettre en œuvre, et vos modèles de disposition éprouvés sont réutilisés efficacement.

Obtenez un espacement parfait à chaque fois avec Divi 5

Avec les nouvelles variables Flexbox et Design de Divi 5, l'espacement cohérent devient sans effort. GAP Contrôle les dispositions d'équilibre entre les appareils, tandis que les variables garantissent que les mises à jour reflètent tout au long de votre site avec un seul changement.

Au lieu de correctifs constants, vous obtenez un système clair en qui vous pouvez faire confiance. Réglez votre espacement une fois, réutilisez-le partout et concentrez-vous sur la conception de grandes expériences pour vos visiteurs.