Comment remplacer les polices par des variables de conception de police de Divi 5

Les mises à jour de la police peuvent être un mal de tête. Changez une police de titre et soudain, vous suivez chaque endroit où il apparaît. Manquez un ou deux cap, et votre conception se sent immédiatement éteinte. La mise à jour manuelle des polices invite à l'incohérence.

Divi 5 résout cela avec des variables de police et des préréglages. Au lieu de rechercher chaque instance, vous pouvez régler vos polices une fois et laisser le système gérer le reste. La typographie reste propre et unifiée, peu importe le nombre de modules que vous utilisez. Jetez un œil à quel point il peut être simple.

Pourquoi les polices statiques peuvent créer des problèmes

Les configurations de polices statiques créent un réseau de complications qui aggravent avec le temps. Lorsque vous ajoutez des polices directement dans chaque élément, vous dispersez des choix de typographie sur des centaines d'endroits différents.

Vous construisez un site en utilisant l'écran PlayFair pour les en-têtes et les poppins pour le texte du corps. Quelques mois plus tard, vous souhaitez passer à une pile de polices plus moderne. Maintenant, vous chassez chaque module, chaque préréglage, chaque paramètre personnalisé pour trouver où vivent ces polices. Manquez même un cap enterré profondément dans une section de témoignage, et votre conception peut sembler cassée.

Lorsque vous mettez à jour manuellement les polices une par une, vous pouvez accidentellement utiliser différentes tailles ou poids. Vous mettez à jour la plupart des titres vers 32px, mais en manquez quelques-uns qui restent à 28px. Votre conception autrefois cohésive semble désormais déséquilibrée.

Cette méthode dispersée transforme de simples changements de police en projets majeurs. Ce qui devrait prendre des minutes s'étend en heures de chasse et de mise à jour fastidieuses. Vous passez plus de temps à gérer la typographie que de concevoir avec lui.

Ce que vous devez utiliser à la place: les variables de conception et les préréglages de Divi 5

Les variables de conception stockent vos paramètres de conception, que vous pouvez réutiliser n'importe où. Réglez une police une fois, enregistrez-la en tant que variable de conception, puis utilisez-la sur votre site. Modifiez la variable ultérieurement et tous les éléments à l'aide de l'IT mettent automatiquement à jour.

Divi propose six types de variables: nombres, texte, images, liens, couleurs et polices. Deux variables de police par défaut sont prêtes à l'emploi: une pour les titres et une pour le texte du corps. Le gestionnaire de variables se trouve dans la barre latérale gauche sous l'icône de la base de données.

Ces variables fonctionnent dans des champs qui ne les soutiennent pas, comme les champs de nombres, les champs de police et les paramètres d'espacement. Cliquez sur l'icône variable à côté de tout champ pris en charge pour voir vos options.

Que font les préréglages du groupe d'options

Les préréglages du groupe d'options économisent des groupes de style spécifiques, tels que la typographie, les frontières ou l'espacement, pas des modules entiers. Par exemple, vous pouvez créer un préréglage juste pour les polices et les tailles de rubrique.

Lorsque vous appliquez un préréglage de groupe d'options, il ne change que cette zone de style. Le reste de votre module reste le même. Vous pouvez combiner différents préréglages sur un élément sans problèmes. Mélanger les variables de conception avec des préréglages de groupe d'options pour plus de flexibilité. Créez des préréglages qui utilisent vos variables. Lorsque vous mettez à jour une variable, tous les préréglages à la mise à jour également.

Guide étape par étape pour créer un système de police dynamique avec Divi 5

La configuration des variables de police prend environ vingt minutes. Une fois qu'ils fonctionnent, les changements de police se produisent instantanément sur l'ensemble de votre site. Voici comment y arriver:

1. Créez des variables de police pour votre nouveau système

Ouvrez le gestionnaire de variables en cliquant sur l'icône de la base de données sur votre barre latérale gauche. Accédez à l'onglet Fonts. Vous verrez deux variables par défaut: une pour les titres et une pour le texte du corps.

• Configurez vos polices principales: cliquez sur la variable d'en-tête. Choisissez votre famille de polices et votre poids, puis économisez. Faites de même pour le texte du corps, mais choisissez quelque chose de propre et facile à lire.
• Ajoutez plus de polices si nécessaire: certaines conceptions ont besoin de polices supplémentaires pour des devis, des témoignages ou du texte spécial. Cliquez sur «Ajouter une nouvelle variable» et donnez-lui un nom clair.
• Remplissez tous les détails: chaque variable contient votre famille de polices, votre poids, votre style et d'autres paramètres. Utilisez des poids audacieux pour les titres, les poids réguliers pour le texte du corps et l'italique lorsque vous souhaitez ajouter l'accent.
• Gardez vos noms simples: au lieu de confondre les étiquettes, appelez-les «citation de citation» ou «Fixer la police».
• N'oubliez pas de sauvegarder: vos modifications ne resteront pas avant que vous n'ayez appuyé sur le bouton de sauvegarde.

La plupart des sites Web n'ont besoin que de polices de cap et de polices corporelles. Ajoutez uniquement des variables supplémentaires pour les besoins de conception spéciaux, pas de minuscules ajustements de texte. Moins de variables facilitent la création de nouveaux contenus.

2. Ajouter des variables de nombre pour les tailles de police

Passez à l'onglet Nombres dans le gestionnaire de variables. Ici, vous créez des variables de taille qui fonctionnent avec vos polices. Considérez-les comme votre échelle de typographie.

Commencez par vos tailles de cap. Créez des variables nommées H1, H2, H3, etc. Réglez chacun sur une taille différente qui a du sens pour votre conception. Vous pouvez utiliser des valeurs de pixels régulières comme 32px ou des unités réactives comme CLAMP () pour les tailles qui s'adaptent à d'autres écrans.

Le texte du corps a également besoin de sa variable de taille. Appelez-le quelque chose comme «taille corporelle» et définissez-le sur une taille de lecture confortable, généralement autour de 16px à 18px.

Vous pouvez également créer des variables pour des besoins en texte spéciaux. Peut-être que vous voulez une variable «petit texte» pour les légendes ou une variable «grand texte» pour les témoignages. Nommez-les clairement pour que vous vous souveniez de ce qu'ils sont plus tard.

Ces variables de nombre fonctionnent partout où vous avez besoin de dimensionnement cohérent. Utilisez-les pour les hauteurs de ligne, l'espacement ou toute mesure qui apparaît plusieurs fois sur votre site. Lorsque vous mettez à jour une variable de nombre, tout ce qui l'utilise change automatiquement.

La plupart des sites Web n'ont besoin que de polices de cap et de polices corporelles. Ajoutez uniquement des variables supplémentaires pour les besoins de conception spéciaux, pas de minuscules ajustements de texte. Moins de variables facilitent la création de nouveaux contenus.

3. Utilisez la recherche et le remplacement pour échanger des polices statiques

Cliquez avec le bouton droit sur n'importe quel champ de police dans les paramètres de votre module pour voir l'option Rechercher et remplacer. Cela ouvre un panneau où Divi charge automatiquement vos paramètres de police actuels. Vous pouvez maintenant échanger cette police statique avec l'une de vos variables de conception.

Le champ d'élément source montre de quel module vous avez commencé. Vous pouvez changer cela pour choisir tout autre élément sur votre page comme point de départ.

La valeur de recherche affiche la police que vous souhaitez remplacer. Au lieu de choisir une autre police statique, définissez votre valeur de remplacement sur l'une de vos variables de conception de police.

Trouvez et remplacez également les travaux pour les tailles de police. Cliquez avec le bouton droit sur n'importe quel champ de taille de police pour accéder au même panneau de remplacement. Cela vous permet d'échanger des tailles de niveau d'élément comme 24px avec vos variables de nombre.

Recherchez des modules de texte où vous définissez manuellement les tailles de police. Ces paramètres de taille dispersés créent les mêmes problèmes que les polices statiques. Lorsque vous souhaitez ajuster votre échelle de typographie, vous finissez par chasser à travers chaque module pour trouver chaque taille. Remplacez ces tailles statiques par votre H1, H2, votre taille corporelle ou d'autres variables de nombre.

Définissez vos limites de remplacement

Trouvez et remplacez les contrôles de localisation où des modifications se produisent. Choisissez «Page entière» pour mettre à jour les polices sur toute votre disposition. Choisissez «Élément actuel et enfants» pour limiter les modifications à cette section spécifique et à tout ce qui est imbriqué à l'intérieur.

Vous pouvez également cibler des conteneurs parents ou des zones de page spécifiques.

Find et remplacer le type d'élément vous aide à vous concentrer sur des modules spécifiques. Sélectionnez «Tous les éléments» pour un échange de polices complet, ou choisissez des «modules» pour sauter les conteneurs et les éléments structurels. Vous pouvez devenir encore plus spécifique en ne ciblant que certains types de modules.

Évitez les remplacements accidentels

L'option «Remplacer les champs identiques» empêche les modifications indésirables. Allumez-le lorsque vous souhaitez remplacer les polices sans affecter d'autres paramètres qui pourraient partager la même valeur.

Cela maintient votre rayon de bordure à 10px même lorsque vous remplacez une police qui s'appelle «10px» ou quelque chose de similaire.

Sans ce paramètre, recherchez et remplacez les looks de votre valeur cible partout. Avec son activé, le système ne modifie que les champs de police réels, laissant d'autres paramètres de conception seuls.

4. Travaillez votre système de polices

Vous aurez besoin d'opérations de recherche et de remplacement séparées pour différents poids et styles de police. Votre site peut utiliser la même famille de polices en poids réguliers et audacieux. Gérez chaque variation individuellement, en les remplaçant par les variables de conception appropriées que vous avez créées plus tôt.

Chaque fois, le processus est le même: cliquez avec le bouton droit sur le champ de police, définissez votre valeur de remplacement sur une variable de conception, choisissez votre portée et appliquez les modifications. Répétez ceci pour chaque police statique qui doit être mise à jour.

5. Créez des préréglages avec vos variables

Accédez à n'importe quel module de texte et accédez à l'onglet Design. Localisez la typographie et cliquez sur l'icône prédéfinie. Sélectionnez votre variable de police de cap dans le menu déroulant. Appliquez votre variable de numéro H1 pour le dimensionnement.

Configurer la hauteur de ligne et les valeurs d'espacement. Nommez le préréglage «En-tête principal» et enregistrez-le. Cliquez sur l'icône Star pour définir ceci comme votre défaut. Les nouveaux modules de texte adopteront automatiquement ces paramètres. Tous les modules existants avec la même balise d'en-tête et aucun style hériteront également de ces paramètres.

Vous pouvez répéter ce processus pour chaque niveau d'en-tête. Chaque préréglage maintient la cohérence tout en servant différentes fins.

Ces préréglages de typographie fonctionnent avec n'importe quel module contenant des champs de texte. Les modules de texte de présentation, le contenu de l'accordéon, les témoignages et les formulaires de contact acceptent tous les mêmes préréglages. Cette compatibilité transversale élimine les tâches de style répétitives.

Le groupe d'options préréglage cible les catégories de style spécifiques uniquement. Appliquez un préréglage de la tête sur le texte du bouton tout en gardant les paramètres de l'arrière-plan et de la bordure du bouton intacts.

6. étendre vos nouvelles variables sur tous les éléments

Cliquez avec le bouton droit sur n'importe quel élément à l'aide de vos nouvelles variables. Sélectionnez «Étendre les attributs» dans le menu. Configurez l'élément source comme votre module récemment mis à jour.

Définissez l'emplacement sur «Page entière» pour les mises à jour complètes. Sous les types d'attributs, choisissez des «styles» pour vous concentrer uniquement sur les éléments de conception.

Activer «Remplacer uniquement les champs identiques» pour éviter les modifications indésirables de rembourrage, de marges ou d'autres valeurs numériques qui pourraient correspondre à vos tailles de police. Sélectionnez «Tous les éléments» pour mettre à jour les modules et les conteneurs, ou choisissez «Modules» pour cibler les éléments de contenu spécifiquement.

Processez les pages complexes dans des sections plus petites plutôt que des mises à jour à l'échelle du site. Sélectionnez la «section actuelle» pour limiter les modifications dans une zone à la fois. Commencez par votre section d'en-tête. Appliquer des extensions variables, examiner les résultats et passer aux principaux domaines de contenu. Terminez la section de pied de page en dernier.

Cette approche méthodique identifie les conflits de formatage tôt et contrôle le processus de mise à jour.

Divi 5 rend la typographie plus facile

Vous aviez l'habitude de passer de l'écran PlayFair à quelque chose de moderne et de mettre à jour la plupart des titres, mais manquez ce témoignage à la page trois. Votre site a l'air déséquilibré pendant des semaines.

Les variables de Divi 5 rationalisent la typographie de votre site Web. Modifiez votre variable de cap de l'icône de la base de données dans la barre latérale, et chaque module de texte se met à jour instantanément. Ce pied de page de contact est inclus.

La prochaine fois que vous renseignerez, vous metterez à jour deux variables au lieu de cliquer sur cinquante modules. L'outil de recherche et de remplacement attrape ce que vous manqueriez normalement. Votre typographie reste serrée et vos week-ends restent le vôtre.