Création d'un système de dimensionnement et d'espacement avec des variables de conception divi 5

Divi 5 vous donne un moyen structuré de définir, gérer et réutiliser les décisions de dimensionnement et d'espacement sur l'ensemble de votre site. En utilisant des variables de conception et des préréglages, vous pouvez créer un système de conception évolutif facile à entretenir, ajuster et reproduire.

Dans cet article, nous vous montrerons comment penser dans les systèmes, et nous vous guiderons dans la construction d'un système de dimensionnement et d'espacement complet.

Divi 5 est prêt à être utilisé sur tout nouveau site que vous créez, mais il est suggéré de tenir les sites existants migrés (pour l'instant).

Pourquoi utiliser un système de dimensionnement et d'espacement?

La plupart des utilisateurs de Divi souhaitent la cohérence dans les mises en page, les marges et la typographie. Mais peu prennent le temps de définir ces normes dès le début. Ou si vous le faites, vous l'avez probablement fait via un thème d'enfant fortement stylé. Maintenant, vous pouvez:

Abonnez-vous à notre chaîne YouTube

1. Définissez une variable de nombre une fois (comme 16px ou pince (16px, 4vw, 48px))
2. Affectez-le aux préréglages modules / élément
3. Ou des préréglages de groupe d'options (comme l'espacement ou le dimensionnement)
4. Mettre à jour la variable plus tard et voir les modifications reflété à l'échelle du site
5. Utilisez moins CSS dans l'ensemble pour les pages plus minces

Avec d'autres constructeurs de sites, les concepteurs ont tendance à s'appuyer fortement sur les cadres CSS pour appliquer un espacement et un dimensionnement cohérents tout en utilisant un système qu'ils peuvent prendre d'un projet à l'autre. Avec Divi 5, vous pouvez créer votre propre «framework de conception» qui fonctionne dans le divi ui à l'aide des variables de conception de Divi sans avoir besoin de toucher une seule ligne de code.

Taille des éléments, rembourrage et marges

Chaque élément Web a trois composants affectant l'espacement et la taille globaux:

• Taille de l'élément : la taille du contenu du noyau d'un élément, défini par la largeur et la hauteur.
• Rembourrage : espace ajouté à l'intérieur d'un élément, augmentant sa zone cliquable et sa taille visuelle.
• Marge : l'espace ajouté à l'extérieur d'un élément, l'éloignant des autres éléments.

Exemples pratiques pour les éléments de divi

En général, c'est ainsi que vous pouvez vous attendre à utiliser le rembourrage et la marge en Divi:

• Les sections ont généralement un rembourrage supérieur et inférieur (pas une marge) pour créer un espacement vertical dans une page.
• Les lignes bénéficient souvent d'un rembourrage vertical, mais sinon, laissez le contenu les remplir.
• Les colonnes se concentrent principalement sur la marge appliquée pour créer des écarts de colonne.
• Les modules utilisent généralement une marge inférieure pour séparer clairement les éléments empilés, mais la quantité de marge dépend des groupes visuels.

Valeurs d'espacement par défaut de Divi

Les débutants à la conception Web qui utilisent Divi ne réalisent probablement même pas que Divi prend des décisions d'espacement pour vous hors de la boîte. Les concepteurs plus expérimentés les ajustent souvent pour correspondre à leurs objectifs, mais ces défauts permettent à la plupart des gens de démarrer leurs projets rapidement.

Ces valeurs par défaut peuvent être utiles, mais les concepteurs préfèrent souvent définir leurs propres normes d'espacement. Si vous vouliez voir à quoi ressemblerait votre page sans la configuration du rembourrage par défaut, vous pouvez le faire:

1. Accédez à n'importe quel élément et trouvez le groupe d'options d'espacement sous l' onglet Design .
2. Ouvrez le groupe d'options par défaut et définissez le rembourrage supérieur et inférieur sur 0 (zéro).
3. Enregistrez l'espacement par défaut OG Preset pour l'appliquer à l'échelle du site à chaque élément.

Cela vous montrera à quoi ressemblent vos pages sans les paramètres par défaut de Divi. Il ne sera pas aussi beau, mais vous commencerez à voir ce que vous devez faire pour créer votre propre système de conception (ou vous pouvez utiliser les valeurs par défaut de Divi et apporter des modifications comme bon vous semble).

En utilisant une échelle d'espacement de 8 points

L'échelle de 8 points est un schéma de mise en page où les valeurs d'espacement sont construites en utilisant des incréments de 8. Ainsi, au lieu d'utiliser des valeurs arbitraires comme 13px ou 27px, vous vous en tenez à des valeurs comme 8, 16, 24, 32, 40, 48, etc.

Ce système aide:

• Gardez le rythme vertical et horizontal en utilisant une rubrique cohérente de tailles
• Assurez-vous des piles d'espacement proprement à travers les points d'arrêt
• Accélérer la prise de décision (moins de choix = conception plus rapide)

Vous pouvez utiliser l'échelle dans PX ou REM, selon votre préférence ou votre type d'échelle. Par exemple, 16px devient 1Rem lorsque la taille de la police de base est de 16px.

Maquette une page qui regroupe votre attention sur des zones sélectionnées et pousse les visiteurs dans la page avec un espacement vertical

L'espacement vertical indique au lecteur où se concentrer. Les éléments regroupés avec un espacement plus serré sont naturellement considérés comme liés les uns aux autres. Les choses séparées par plus d'espace indiquent une nouvelle idée.

Comment créer un système de dimensionnement et d'espacement

Un système pour vos tailles et espaces se compose de deux choses: définir des variables ou des jetons qui seront utilisés dans une conception et en utilisant de manière cohérente ces variables tout au long de la conception du site. Voici comment vous pouvez le faire avec Divi.

Étape 1: Créer des variables de nombre dans le gestionnaire de variables de conception

Divi 5 introduit une interface visuelle pour définir des valeurs numériques réutilisables. Chaque variable de numéro comprend:

1. Un nom facilement rappelable (par exemple, Gap-SM, Text-H1) qui n'est pas trop long
2. Une valeur ou une fonction numérique calc () ou clamp ()
3. Une unité CSS (PX, REM,%, VW, etc.)

En raison du gestionnaire de variables, vous n'avez pas besoin d'écrire des variables CSS dans une feuille de style séparée. Vous définissez tous ces éléments dans le gestionnaire de variables de conception, puis les sélectionnez dans les champs d'entrée dans le constructeur visuel.

Vous trouverez ci-dessous un ensemble de démarrage complet de variables de nombre pour correspondre à un système de conception de 8 points. Vous n'avez pas à l'utiliser, mais cela vous donne une idée de ce qui est possible.

Et voici à quoi cela ressemble d'avoir rempli cela dans le gestionnaire variable.

Notez que ces valeurs d'espacement seront utiles dans la prochaine fonction Flexbox de Divi 5

Étape 2: Planification de votre système d'espacement en 8 points

Vos pages contiendront généralement des modèles d'éléments répétitifs. Recherchez des groupes communs ou des grappes telles que:

• En-tête, paragraphe, bouton
• Petit cap, grand cap, paragraphe
• Icône, paragraphe
• Cartes contenant plusieurs éléments

Avec vos wireframes initiaux (ou conceptions d'espaces réservées), vous aurez la possibilité de créer des modèles potentiels. Vous créerez également des choses qui ne s'intègrent pas dans les modèles que vous devrez décider comment gérer. Mais tout cela fait partie de la conception.

Vous pouvez le faire sur Figma ou en créant directement une page Wireframe avec des éléments d'espace réservé en divi. Obtenez tout ce que vous pouvez disposer sur une page. Vous pouvez utiliser une extension Chrome appelée Meason tout pour vous aider à visualiser l'espacement (d'abord avec l'espacement par défaut de Divi) lorsque vous commencez à les ajuster.

Pour utiliser l'extension, activez-la à partir de la barre d'outils d'extension Chrome. Cliquez ensuite sur un élément sur la page qui vous intéresse, en concentrant l'outil sur cet élément. À partir de là, déplacez votre souris pour mesurer divers aspects entre l'élément actuellement sélectionné et d'autres éléments lorsque vous en survolez.

Étape 3: Attribuez des variables de numéro aux préréglages du groupe d'options

Avec un wireframe d'une page configurée et d'une variable de conception en place, vous pouvez commencer à apporter des modifications liées à l'espacement et au dimensionnement de votre page. Vous pouvez d'abord commencer par des groupes de contenu. Concentrons-nous sur la rubrique, le paragraphe et le bouton dans la section des héros.

Wireframe avec contenu d'espace réservé et dimensionnement de police / police en place

Notez qu'à ce stade, vous voudrez avoir déjà une première ébauche de votre typographie. Cela comprend les polices, le dimensionnement des polices et l'espacement de hauteur / lettre de ligne. Sans cela, vous êtes très susceptible de rééquilibrer toute votre dimensionnement une fois que vous avez établi votre système typographique.

Exemple d'options de dimensionnement de typographie configurées en variables de nombre

Maintenant, nous voulons évaluer quel espacement par défaut est appliqué dans la conception. Pour ce faire, vous pouvez consulter le tableau plus tôt dans le post et le comparer avec ce que nous avons dans la section des héros. De toute évidence, il y a une section (# 1) et deux lignes (# 2 et # 3). Pour le moment, nous allons définir le rembourrage supérieur / inférieur de la ligne par défaut sur zéro.

Ensuite, nous avons deux options pour l'espacement des sections: nous pouvons définir le rembourrage sur zéro et le comprendre plus tard, ou nous pouvons définir un rembourrage supérieur et inférieur préliminaire dans le préréglage par défaut des sections pour ressembler à ceci:

• Bureau : platelage supérieur et inférieur
• Tablette : platelage supérieur et inférieur sur Space-xxl
• Mobile : rembourrage supérieur et inférieur sur Space-XL

Mais ce que vous faites dépend entièrement de vous et des variables de conception d'espacement que vous finissez par configurer (ou en utilisant les valeurs par défaut si vous préférez les adopter comme la vôtre). Ce que nous avons en ce moment (avec un rembourrage de ligne par défaut défini sur zéro et un rembourrage de section personnalisé):

Étape 4: Espacement des modules

La prochaine chose à faire est de travailler sur l'espacement entre les modules dans les sections / lignes. La clé est de choisir un moyen cohérent d'appliquer l'espacement aux modules.

Vous avez des options, vous pouvez diviser l'espacement de plusieurs manières:

• Appliquer l'espacement sur la marge
• Appliquer l'espacement sur la marge-fond
• Appliquer l'espacement uniformément entre la marge et la marge-fond

Il est important de se rappeler que de nombreux modules ont une marge-fond appliquée par défaut, donc je vous recommande de suivre cette convention et de commencer lors de la définition de votre paradigme d'espacement. Pour commencer, vous pouvez définir les marges supérieur / inférieure sur zéro pour voir à quoi l'espacement entre les modules est sans défaut qui leur est appliqué.

Dans cette section, nous avons appliqué 0px en haut et en bas pour voir tous ces modules sans espacement par défaut

Maintenant, nous pouvons commencer à affecter des variables de conception d'espacement au fond de marge de ces modules pour créer un système d'espacement. Nous allons commencer par le titre et le texte du corps.

Lorsque vous commencez à voir des modèles avec votre espacement de module, vous voudrez peut-être ajouter ces choix d'espacement aux préréglages par défaut. Et comme vous devez créer des règles d'espacement pour les éléments qui s'écartent, vous pouvez créer des préréglages d'éléments personnalisés. Les nouveaux éléments utiliseront le préréglage par défaut à partir de là, mais vous pouvez rapidement sélectionner un préréglage d'élément personnalisé pour diverses situations.

Comment utiliserez-vous Divi 5 pour le dimensionnement et l'espacement?

La création d'un système d'espacement et de dimensionnement dont vous êtes satisfait revient à pratiquer les principes fondamentaux et à vous appuyer sur les outils à accomplir. Divi 5 est en passe de créer le système de conception de facto pour les sites Web WordPress. Il frappe le point idéal d'avoir beaucoup de flexibilité, mais il est facile de vous envelopper la tête.

Si vous n'avez jamais envisagé de créer des systèmes de conception, Divi vous permet d'y penser à partir d'une variable de conception et d'un niveau prédéfini, non seulement sur un module individuel ou un niveau d'élément. Cela vous aide à appliquer de manière cohérente des décisions de conception de base aux éléments plus rapidement que jamais.

Allez-vous essayer le système à 8 points, ou avez-vous d'autres choses prévues? De plus, est-ce la première fois que vous pensez à l'espacement par défaut de Divi? Il fait la conception avec Divi Automatic, mais pour les concepteurs professionnels, vous voudrez peut-être modifier certaines de ces défauts pour obtenir votre vision parfaite de pixels.

Divi 5 est prêt à être utilisé sur tout nouveau site que vous créez.