Comment remplacer les styles statiques par des variables de conception de Divi 5

Si vous avez déjà modifié les couleurs, le rembourrage ou les polices un module à la fois, vous avez probablement réalisé à quel point les changements de style manuel sont lents, sujets aux erreurs et ennuyeux.

Divi 5 présente une façon plus intelligente de le gérer. Avec les variables de conception et trouver et remplacer, vous pouvez mettre à jour les styles statiques sur votre disposition et créer un système de conception réutilisable en quelques minutes. Voyons comment.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web.

Que sont les «styles statiques»?

Lorsque vous importez une disposition de divi ou utilisez une section pré-conçue, tout, comme les polices, les couleurs, l'espacement et les bordures, est déjà défini. Si une disposition n'utilise pas de préréglages, vous remarquerez que ces valeurs sont appliquées au niveau des éléments.

Une rubrique peut avoir sa taille de police tapée manuellement, un bouton peut utiliser un code couleur spécifique, et le rembourrage ou l'espacement peut utiliser des nombres fixes. Ces valeurs directement appliquées sont appelées styles statiques.

Et bien qu'ils semblent inoffensifs au début, ils peuvent rapidement devenir un problème lorsque vous voulez apporter des modifications. Le problème avec les styles statiques est qu'ils prennent plus de temps à gérer. Si vous souhaitez modifier la couleur de tous vos boutons ou ajuster l'espacement sur les sections, vous devez modifier chacun manuellement. C'est lent et frustrant.

Maintenant, imaginez que vous mettez à jour manuellement une marque de site Web complète ou que vous travaillez sur une mise en page complexe pleine de styles répétés. De nombreux concepteurs ont partagé à quel point ce processus peut être frustrant. Mais pendant des années, il n'y avait aucun moyen fiable de le réparer. C'est pourquoi nous avons construit une solution plus intelligente dans Divi 5.

Comment divi 5 facilite le remplacement des styles statiques

L'un de nos objectifs avec Divi 5 est de rendre votre flux de travail de conception plus rapide et moins répétitif. Pour aider à cela, nous avons ajouté deux fonctionnalités puissantes: les variables de conception , qui vous permettent de centraliser vos styles et de trouver et de remplacer , ce qui vous permet de les mettre à jour instantanément sur votre mise en page. Comprenons-les en détail.

Les variables de conception vous permettent de définir vos styles globaux

Avec Divi 5, vous pouvez enfin créer votre propre cadre de conception visuellement et l'utiliser pour modifier rapidement vos styles de marque.

Au lieu d'appliquer manuellement la même couleur, la même police ou l'espacement sur chaque module, Divi 5 vous permet désormais d'enregistrer ces valeurs sous forme de variables de conception. Ce sont des valeurs réutilisables que vous pouvez référencer sur votre site pour rendre votre conception plus cohérente et plus facile à entretenir.

À l'intérieur du constructeur visuel, le gestionnaire de variables vous permet de créer et d'organiser des variables en six types différents: couleurs, polices, nombres (comme l'espacement ou les tailles), le texte, les images et les liens.

Vous pouvez enregistrer chaque variable avec un nom clair, comme le rembourrage de section, donc le trouver et le réutiliser est plus facile. Contrairement à l'écriture de variables CSS manuellement, l'interface de Divi vous permet de gérer ces valeurs visuellement sans toucher au code.

Appliquer ces variables enregistrées est également plus facile. Lors de la personnalisation d'un module, accédez aux paramètres, localisez l'icône du gestionnaire de variables et choisissez votre variable dans la liste.

Vous verrez le véritable avantage quand il est temps d'apporter des modifications. Disons que vous voulez changer le rembourrage partout. Au lieu de modifier des dizaines de modules, il vous suffit de mettre à jour les valeurs une fois dans le gestionnaire de variables , et il se met à jour sur votre site.

Remarquez les valeurs qui changent en temps réel dans les champs de réglage appliqués? C'est la puissance d'un système de conception mondial.

Et cela ne se limite pas non plus aux styles de conception. Pour gérer efficacement le contenu répété, vous pouvez également enregistrer du texte, des images et des liens, comme une adresse, un e-mail ou un slogan de l'entreprise, en tant que variable de contenu. Il n'est plus nécessaire de copier-coller, il suffit de l'insérer comme du contenu dynamique, et il restera cohérent sur votre site.

Apprenez tout sur les variables de conception

Trouver et remplacer vous permet de passer des styles statiques aux styles globaux

La fonction de recherche et de remplacement de Divi 5 vous permet de mettre à jour rapidement les valeurs de style à travers votre mise en page sans modifier chaque module individuellement. Il est conçu pour vous aider à modifier des valeurs statiques comme les couleurs, les polices, l'espacement ou tout autre paramètre qui se répète sur les sections d'un seul point de départ en quelques clics.

Pour l'utiliser, cliquez avec le bouton droit sur n'importe quel champ de style à l'intérieur du constructeur visuel ou survolez et cliquez sur les trois points. Vous verrez l'option Rechercher et remplacer dans la liste déroulante.

Cela ouvre un nouveau panneau de recherche et de remplacement . Ici, vous pouvez effectuer les modifications souhaitées et les appliquer en vrac.

• (1.) Élément source: le paramètre que vous ciblez (par exemple, texte, couleur ou espacement). Ouvrez la liste déroulante et vous remarquerez que c'est en fait la hiérarchie des couches.
• (2.) Recherchez la valeur: la valeur exacte que vous souhaitez remplacer, comme une police ou un code couleur spécifique.
• (3.) Remplacer la valeur: la nouvelle valeur ou la nouvelle variable que vous souhaitez appliquer à la place.
• (4.) Trouver et remplacer à l'emplacement: Choisissez où appliquer la modification. Ce module, la section ou la page entière.
• (5.) Trouver et remplacer dans le type d'élément: décidez si la modification doit s'appliquer à tous les éléments ou uniquement des types de modules spécifiques.
• (6.) Remplacer uniquement les champs identiques: lorsqu'ils sont activés, les remplacements se produisent uniquement si le réglage et la valeur correspondent exactement.

Voici comment cela fonctionne. Disons que vous souhaitez modifier la police de cap utilisée à travers la page. Au lieu d'aller au module par module, nous utiliserons le panneau Rechercher et remplacer.

Lorsque vous l'ouvrez à partir des paramètres d'un en-tête, l' élément source est sélectionné automatiquement, vous n'avez donc pas toujours à le choisir manuellement.

(Vous pouvez également cliquer sur différents éléments et les options du panneau s'ajusteront automatiquement.)

Dans la valeur de trouver, entrez la valeur à remplacer. Pour notre exemple, c'est Médule un, la police appliquée actuelle. Dans la valeur de remplacement , choisissez la nouvelle valeur que vous souhaitez appliquer. Sélectionnons ACLONICA.

Sélectionnez ensuite si vous souhaitez mettre à jour toutes les instances de la page entière ou simplement la colonne, la ligne ou la section dans la recherche et le remplacer en emplacement. Gardez la recherche et remplacez dans le type d'élément comme tous les éléments car nous voulons cibler tous les modules d'en-tête.

Et c'est tout. Il suffit de frapper la recherche et de remplacer, et en quelques secondes, 20 instances de cap sont mises à jour. Remarquez le texte du corps et les polices de bouton restent intactes? C'est parce qu'ils utilisent différentes valeurs. Et c'est à quel point le système est précis.

Divi applique uniquement les modifications lorsqu'il trouve une correspondance exacte. Cela signifie que vous pouvez nettoyer les styles statiques en toute confiance, sans gâcher des conceptions qui n'ont pas besoin de changer. Mais comment les variables de conception s'adaptent-elles ici?

Ils sont comme la cerise sur le gâteau. Vous pouvez également utiliser des variables de conception dans le champ de valeur de remplacement . Survolez-le, cliquez sur l'icône du gestionnaire de variables et insérez une variable enregistrée.

Cela relie vos styles à un système globalement réutilisable qui est beaucoup plus facile et plus efficace à mettre à jour. C'est exactement comme ça que nous remplacerons toutes nos valeurs statiques par des variables de conception à notre site Web à l'épreuve des futurs pour des mises à jour plus faciles.

Apprenez tout sur la recherche et remplace

Ces deux fonctionnalités (et bien d'autres) sont disponibles à l'intérieur Divi 5. Le constructeur a été repensé pour offrir des performances plus rapides, des workflows plus intelligents et plus de contrôle. Honnêtement, lire à leur sujet est excitant, mais vous remarquerez le véritable changement lorsque vous ressentez ces fonctionnalités par vous-même.

Comment remplacer les styles statiques par des variables enregistrées

Maintenant que vous savez quels outils nous utiliserons, il est temps de les voir en action.

Pour vous guider à travers le processus, j'ai importé la disposition de la page de destination de la boutique de tarte à titre d'exemple. Les détails de conception de cette disposition, tels que les polices, les couleurs et l'espacement, ont été appliqués comme des styles statiques. La manière traditionnelle vous oblige à personnaliser le module par module. Mais dans ce tutoriel, nous les remplacerons étape par étape en utilisant le workflow que nous venons de couvert.

Mais avant de plonger, prenez un moment pour scanner votre disposition pour les modèles. Recherchez des styles répétés, tels que la même couleur utilisée entre les boutons, les tailles de police similaires dans les en-têtes, l'espacement cohérent entre les sections ou les paramètres de bordure identiques. Ces valeurs répétitives sont vos meilleurs candidats pour les variables de conception, surtout si vous êtes susceptible de les changer plus tard.

1. Enregistrez vos variables de conception

Après avoir analysé la disposition de la boutique de tarte, j'ai identifié quelques valeurs qui apparaissent de manière cohérente à travers la page et j'aimerais les mettre à jour avec mes styles préférés. Ceux-ci incluent:

• Largeur de bordure de ligne
• Rembourrage de bouton
• Texte de tête
• Texte du corps
• Couleur de texte du corps

À l'heure actuelle, ils sont appliqués comme des styles statiques. Ainsi, au lieu de répéter les mêmes paramètres manuellement, je les convertirai en variables de conception. Cela me donne un framework simple et réutilisable pour mettre à jour les styles de page en quelques clics.

Commençons par la largeur de la frontière sur les lignes. Pour créer et enregistrer une variable, ouvrez le gestionnaire de variables et choisissez le type. Pour la largeur de bordure d'une ligne, je choisirai la variable de numéro . Ensuite, nommez votre variable et attribuez-lui une valeur. Cliquez sur Enregistrer les variables.

Une fois enregistré, cette variable est prête à être réutilisée en un clic. Il apparaîtra partout où la largeur de la bordure peut être définie. Je suivrai le même processus pour le texte de cap, la police du corps, la couleur du texte et le rembourrage de bouton. Ces variables enregistrées constituent désormais le fondement du langage de conception de ma mise en page. Vous faites de même.

De cette façon, si vous décidez de modifier votre espacement de bouton ou de modifier la police plus tard, vous n'aurez pas à mettre à jour chaque module un par un. Il suffit de mettre à jour la variable et le reste se metra à jour.

2. Utilisez la recherche et le remplacement pour commuter les styles statiques en variables

Avec nos variables de conception prêtes, l'étape suivante consiste à remplacer les valeurs statiques à travers la disposition à l'aide de trouver et de remplacer. Commençons par le rembourrage de bouton.

À l'heure actuelle, chaque bouton utilise un rembourrage saisi manuellement: 6px pour le haut et le bas, et 1px pour la gauche et la droite. Pour apporter la cohérence et faciliter les mises à jour, j'ai créé deux variables:

• Button-T = 12px pour le rembourrage supérieur et inférieur.
• Button-l = 32px pour le rembourrage gauche et droit.

Pour les appliquer, je vais ouvrir les paramètres de n'importe quel bouton, accéder à la conception> Espacement> rembourrage , cliquez avec le bouton droit sur la valeur de rembourrage et choisissez Rechercher et remplacer les options.

Dans le panneau Rechercher et remplacer, je remplacerai la valeur statique existante par la variable enregistrée du gestionnaire de variables.

Après avoir cliqué sur Rechercher et remplacer , les cinq instances de bouton à travers la mise à jour de la page instantanément pour utiliser les nouvelles valeurs de rembourrage.

Vous pouvez suivre les mêmes étapes pour tous les autres styles statiques que nous avons identifiés plus tôt. Utilisez Find and Remplacez pour échanger chacun avec vos variables enregistrées, et vous vous retrouverez avec une disposition entièrement connectée à votre système de conception global.

3. Convertissez vos styles préférés en préréglages (facultatif)

Cette étape est facultative pour la portée de cet article, mais c'est un moyen puissant d'étendre votre système de conception.

Une fois que vous avez remplacé les styles statiques par des variables, vous pouvez enregistrer ces modules en tant que préréglages de groupe d'options. Par exemple, après avoir attribué une variable enregistrée pour la largeur de bordure à une ligne, j'ai enregistré cette ligne en tant que préréglage de bordure.

L'utilisation de variables à l'intérieur des préréglages signifie toutes les futures mises à jour de votre système de conception, comme la modification de la valeur d'une variable, se reflétera automatiquement dans tous les modules à l'aide de ce préréglage. Il n'est pas nécessaire de réappliquer ou de mettre à jour quoi que ce soit manuellement.

Ainsi, non seulement nous avons mis à jour la page entière avec une nouvelle marque en quelques clics, mais nous avons également créé un système flexible qui rend les futures mises à jour plus rapides, plus faciles et entièrement connectées. Comment cela fonctionne-t-il dans une véritable mise en page? Il est temps de le voir en action.

La mise à jour de vos styles de page est plus facile que jamais

La raison pour laquelle nous passons des styles statiques aux variables de conception est simple: ils facilitent les mises à jour. Avec les variables de conception en place, l'édition de votre disposition devient incroyablement simple.

Si jamais vous souhaitez modifier la police d'en-tête sur votre site Web, vous n'avez pas à modifier chaque module un par un. Ouvrez simplement le gestionnaire de variables, mettez à jour la valeur de police que vous avez enregistrée plus tôt, et la modification s'applique partout où cette variable est utilisée.

Vos préréglages de groupe d'options se mettront également à jour automatiquement s'ils utilisent des variables de conception. Cela maintient vos styles connectés, vous n'avez donc pas à répéter les mêmes modifications sur différents modules ou pages.

Lorsque j'ai personnalisé la disposition de la boutique de tarte plus tôt, je n'ai pas ajusté manuellement chaque bouton ou une rubrique. J'ai simplement édité mes variables enregistrées. La police, le rembourrage et les couleurs que j'ai définis précédemment ont appliqué à travers la page automatiquement. La disposition a suivi le système que j'avais déjà construit.

Bien sûr, peaufiner ou changer une couleur dans un seul module n'est pas difficile. Mais lorsque vous mettez à jour des dizaines de styles sur un site entier, la différence est massive. Ce n'est pas seulement plus rapide, il est plus propre, plus fiable et beaucoup moins sujet à l'erreur.

C'est la valeur réelle du passage aux variables: toute votre conception devient plus facile à gérer. Et quand votre client demande un changement de marque rapide le mois prochain? Vous aurez fini avant de terminer leur café.

Faciliter les modifications en vrac avec la recherche et remplacer

Vous n'avez pas besoin de commencer à zéro chaque fois que votre conception change. Avec le système de Divi 5 en place, les mises à jour ressemblent moins à une corvée et plus comme un simple pas en avant.

Ce flux de travail n'est pas seulement utile pendant la configuration. C'est ce qui facilite les mises à jour futures. Que votre client demande une nouvelle police ou que vous souhaitez tester une couleur de marque différente, vous pouvez faire le changement une fois et le voir reflété partout.

Divi 5 est conçu pour soutenir la façon dont les vraies sites Web de conception de personnes. Et maintenant, votre système de conception peut être aussi flexible que vos idées.