Comment changer rapidement les styles de pack de mise en page avec Find & Remplacer

La mise à jour de la conception d'un pack de mise en page complet semble simple jusqu'à ce que vous réalisiez que vous devez modifier les mêmes styles sur cinq ou six pages différentes. Comme ces styles sont appliqués sous forme de valeurs statiques, même une petite mise à jour, comme modifier la police ou ajuster le rembourrage de la section, devient du temps en termes de page fini par page.

Mais que se passe-t-il si vous pouviez mettre à jour tous ces styles répétés en quelques clics? C'est exactement ce que Find and Remplacer fait dans Divi 5. Que vous échangez des polices, le remplacement des couleurs ou le réglage de l'espacement, cette fonction vous aide à apporter des modifications à l'échelle de la disposition instantanément. Nous vous montrerons comment l'utiliser pour nettoyer et restaurer un pack de mise en page entier.

Qu'est-ce que trouver et remplacer dans divi 5

Find and Remplacer est une fonctionnalité de Divi 5 qui vous permet de mettre à jour rapidement les valeurs de style répétées à travers votre mise en page. Qu'il s'agisse d'une police, d'un code couleur, d'un rembourrage ou même d'un effet d'ombre, vous pouvez maintenant modifier cette valeur une fois et l'appliquer sur plusieurs éléments.

Alors, comment cela fonctionne-t-il réellement? Il commence par n'importe quel module dans le constructeur visuel. Survolez un champ de style comme la couleur du texte ou la taille de la police, et vous verrez une icône à trois points. Cliquez sur cela (ou cliquez avec le bouton droit sur le champ) et sélectionnez Rechercher et remplacer .

Cela ouvre un panneau où vous définissez la valeur à remplacer, quelle devrait être la nouvelle valeur et où appliquer la modification. Vous pouvez le garder concentré sur ce module, l'élargir à toute la section ou parcourir la page à travers la page.

Une fois que vous avez fait l'expérience de ce flux de travail, vous comprendrez pourquoi c'est un outil si utile. Au lieu de chasser des dizaines de modules pour modifier la même couleur ou la même police, vous faites une mise à jour ciblée et la regardez l'entraînement sur toute votre disposition en quelques secondes. Mais pour vraiment déverrouiller la recherche et remplacer le potentiel, vous devez voir comment cela fonctionne avec les variables de conception, ce qui change tout.

Comment trouver et remplacer aide à mettre à jour plus rapidement les styles de mise en page

Nous allons parcourir deux scénarios: d'abord, une opération de découverte et de remplacement de base, puis la même tâche en utilisant des variables de conception (celle-ci est l'arme secrète).

Utilisation de trouver et de remplacer dans Divi 5

Le processus est simple: déclenchez-le à partir de n'importe quel champ de style, choisissez ce qu'il faut remplacer et appliquez le changement sur plusieurs modules. Passons à travers cela avec un véritable exemple.

Supposons que vous souhaitez augmenter la taille de la police de tous les titres de votre page. Commencez par cliquer sur n'importe quel module d'en-tête à l'intérieur du constructeur visuel. Accédez à Paramètres> Conception> En-tête Texte> Tize de la police du texte H1. Cliquez avec le bouton droit ou survolez pour trouver l'option de recherche et de remplacement entre autres.

Cela ouvre le panneau Rechercher et remplacer par de nombreuses options:

• (1) Élément source: Ceci définit le paramètre que vous ciblez, tel que la taille du texte, la couleur ou le rembourrage. Il est automatiquement sélectionné en fonction de l'endroit où vous avez ouvert le panneau.
• (2) Recherchez la valeur: la valeur actuelle utilisée sur votre disposition. Cela pourrait être une taille de police comme 30px, un code couleur comme # 000000 ou tout autre paramètre de conception. Cela est automatiquement ajouté.
• (3) Remplacer la valeur: la nouvelle valeur que vous souhaitez appliquer. Divi recherche la valeur correspondante et le remplace par celui-ci.
• (4) Trouver et remplacer à l'emplacement: Choisissez où la modification doit être appliquée. Vous pouvez le limiter à un seul module, à sa section ou à la page entière.
• (5) Trouver et remplacer dans le type d'élément: Décidez quels modules le changement doit affecter. Vous pouvez l'appliquer à tous les modules ou uniquement des types spécifiques comme des boutons, du texte ou des fleuves.
• (6) Remplacez uniquement les champs identiques: activez cela pour mettre à jour uniquement les champs qui correspondent exactement à la valeur de recherche. Cela permet d'éviter les modifications accidentelles des éléments non liés.

Par exemple, nous remplaçons la taille de la police de 30px à une pince fluide (20px, 4vw, 50px). Nous avons sélectionné une page entière et tous les éléments car nous voulons mettre à jour tous les en-têtes sur la page.

Cliquez sur le bouton Rechercher et remplacer et regarder ce qui se passe. Tous les en-têtes avec une taille de police de 30px ont désormais une valeur de serrage fluide ().

Les autres titres sont restés inchangés car Divi ne met à jour que les valeurs qui correspondent exactement à votre portée sélectionnée. Aucun montage manuel requis, et même pas des modifications accidentelles aux éléments non liés. Cette précision le rend parfait pour nettoyer les styles par défaut dans les packs de mise en page.

Apprenez tout sur la découverte de Divi et remplace

En utilisant des variables de conception dans la recherche et le remplacement

La recherche et le remplacement devient encore plus puissante lorsqu'ils sont associés à des variables de conception. Au lieu de remplacer une valeur statique par une autre valeur statique, vous pouvez le remplacer par une variable enregistrée du gestionnaire de variables. Cela construit un système de conception cohérent facile à mettre à jour plus tard.

Continuons avec le même exemple, à la mise à jour de toutes les tailles de polices d'en-tête. Mais cette fois, au lieu de remplacer 30px par une valeur de pince directe, nous le remplacerons par une variable nommée H3 Taille.

Créez d'abord la variable. Ouvrez le gestionnaire variable de la barre latérale gauche et accédez à la colonne numérique . Nommez votre variable, attribuez une valeur et enregistrez.

Cela rend la variable disponible sur tous les champs de taille de police. Vient maintenant la magie: vous pouvez l'utiliser directement dans le panneau Rechercher et remplacer pour attribuer la variable enregistrée à toutes les tailles de police en titre à la fois.

Ouvrez le panneau Rechercher et remplacer comme avant. Dans le champ Remplacer la valeur , survolez l'entrée et cliquez sur l'icône du gestionnaire de variables . Sélectionnez votre variable enregistrée, la taille de la police H3 et continuez avec les mêmes paramètres.

Cliquez sur trouver et remplacer pour appliquer la modification. Tous les en-têtes qui utilisent 30px feront désormais référence à la variable de taille de police H3 au lieu d'un nombre fixe.

Voici où ça devient intéressant. Besoin d'ajuster cette taille de police plus tard? Accédez au gestionnaire de variables , ouvrez la variable de taille de police H3 et modifiez la valeur. Mettez à jour la pince à serrer (24px, 5vw, 60px) et chaque ruban à l'aide de cette variable met à jour automatiquement.

Il n'est pas nécessaire de répéter la recherche et le remplacement. Avec une mise à jour, votre mise en page ajuste partout où la variable est utilisée.

Cette combinaison de variables de recherche et de remplacement et de conception rend la mise à jour des packs de mise en page entiers si efficaces, et nous suivrons ce processus dans ce tutoriel. Vous définissez vos variables de conception une fois, puis utiliserez la recherche et le remplacer pour passer des valeurs statiques aux variables enregistrées sur toutes les pages. Après cela, la mise à jour devient sans effort.

Apprenez tout sur les variables de conception de Divi

Prêt à mettre cela en pratique? Vous aurez besoin de Divi 5 pour utiliser à la fois la recherche et le remplacement et la conception des variables. Le constructeur a été complètement reconstruit pour des performances plus rapides et des workflows plus intelligents.

Comment remplacer les styles sur un pack de mise en page

Maintenant que vous savez comment la recherche et le remplacement fonctionnent et comment l'associer à des variables de conception, mettons-le en action sur un vrai pack de mise en page. Pour notre exemple, nous importerons le système de gestion de l'apprentissage, qui comprend plusieurs pages comme Home, About, Contact, Course Landing et Pricing.

Chaque page utilise les mêmes polices, couleurs et espaces, mais tout comme des valeurs statiques. Dans le tutoriel ci-dessous, nous les mettrons à jour sur toutes les pages, les transformer en variables et tout connecter à un système de conception central.

1. Audit les styles de conception de votre disposition

Avant de commencer à remplacer n'importe quoi, prenez quelques minutes pour revoir votre pack de mise en page. Ouvrez chaque page et énumérez rapidement tous les styles de conception qui se répètent, comme les tailles de police, les couleurs des bouton, l'espacement des texte, le rembourrage de section et les styles de bordure. Voici ce que j'ai trouvé après avoir examiné la disposition LMS:

• Tailles de police: 30px est utilisé pour tous les titres H3 et 48px pour H2S sur plusieurs pages
• Fonts: Poppins est utilisé de manière cohérente pour tous les titres
• Bouton primaire: la couleur de l'arrière-plan est # 4449e0 avec texte blanc
• Rembourrage: la plupart des sections utilisent 60 pixe et bas en haut
• Icônes du texte de présentation: la taille de l'icône est définie sur 24px
• Brôlements de présentation: aucune bordure n'est appliquée aux modules de texte
• Arrière-plans de la section: la couleur verte # 47BE68 apparaît sur la section de pied de page de presque toutes les pages

Ceux-ci sont tous entrés manuellement sous forme de valeurs statiques à l'intérieur de chaque module. Par exemple, le module Blurb utilise # 4449E0 pour la couleur de l'icône et une largeur de 24px.

Une fois que vous avez identifié des styles répétés comme ceux-ci, vous saurez exactement quoi convertir en variables de conception.

Cette étape d'audit crée la base de tout ce qui suit. Il vous aide à créer une approche systématique qui maintient votre mise en page cohérente et maintenable.

2. Enregistrez vos variables de conception

Une fois que vous avez audité votre mise en page et noté les styles répétitifs, l'étape suivante consiste à créer des variables de conception de vos valeurs préférées. Cela vous permet de transformer les styles codés en dur en jetons réutilisables, ce qui rend votre mise en page plus facile à mettre à jour plus tard. Après avoir enregistré toutes nos valeurs, nous remplacerons les actuels par les nôtres.

Création d'une variable de couleur

Dans l'exemple plus tôt, j'ai constaté que les icônes du texte de présentation utilisent la couleur # 4449e0, mais je veux passer à ma couleur de marque principale, # 6C012A. Pour ce faire, je vais créer une variable de couleur.

Accédez au gestionnaire variable de la barre latérale gauche, puis ouvrez la colonne de couleur .

Faites défiler vers le bas et cliquez sur l'option Color Global Add . Nommez votre variable et entrez une valeur. Cliquez sur Enregistrer les variables et c'est fait.

Création d'une variable numérique

Ensuite, je veux ajouter une bordure 2px autour des fleuves, donc j'aurai besoin d'une variable de nombre . Le processus est similaire, mais dans une colonne différente. Accédez à la colonne numérique . Cliquez sur + Ajouter un numéro global, nommez votre variable, attribuez une valeur et enregistrez.

Création d'une variable de police

Je veux aussi changer toutes les polices de cap vers Askhar, ma police de marque. Cela nécessite une variable de police . Accédez à la colonne de police , créez une nouvelle variable, attribuez un nom, choisissez une police et enregistrez.

C'est fait. Cette police sera désormais sélectionnable dans tous les champs de texte en titre tout au long de la disposition.

Suivez le même processus pour le reste de vos résultats d'audit, comme le rembourrage de section, les autres tailles d'en-tête ou les couleurs de marque supplémentaires. Chaque style répété de votre disposition peut (et devrait) devenir une variable.

De cette façon, vous n'avez pas à vous souvenir des codes hexadécimaux, des noms de police ou des valeurs spécifiques. Ils vivent dans votre gestionnaire variable et vous suivent à travers des modules et des pages. Et surtout, vous pouvez utiliser Find et remplacer pour les appliquer à l'échelle de la disposition, ce que nous ferons ensuite.

3. Utilisez la recherche et le remplacement pour appliquer des variables

Voici la partie la plus intéressante que nous attendions. Avec nos variables enregistrées, changer les styles de toute cette disposition est rapide et facile. Voyons comment.

Changer les couleurs des icônes

Tout d'abord, changeons la couleur des icônes en variable de couleur de marque primaire enregistrée. Accédez aux paramètres du Blurb> Conception> Image et icône. Maintenant, survolez l'option de couleur icône et cliquez sur les trois points. Choisissez trouver et remplacer .

Sur le panneau Rechercher et remplacer, tout ce que vous avez à faire est de survoler pour localiser l'icône du gestionnaire de variables et sélectionner votre variable.

Et juste comme ça, toutes les icônes ont une nouvelle couleur. J'aurais également pu le faire dans l'autre sens, en attribuant la couleur de ma marque en tant que valeur statique au lieu d'enregistrer une variable de conception, mais nous avons ajouté une étape supplémentaire pour simplifier les futures mises à jour.

Comment? Imaginez que vous avez modifié toutes vos pages de mise en page mais que vous souhaitez changer la couleur de votre marque. Pas besoin de se sentir dépassé de revoir toutes les pages ou de le faire du module par module. Étant donné que vous avez déjà enregistré une variable de conception de couleurs de marque, il vous suffit de modifier la valeur pour le mettre à jour à l'échelle du site.

Changer la police de toutes les titres

Ensuite, passons toutes les polices de cap vers ma police de marque. Accédez aux paramètres de tout en-tête> Conception> Titre Text. Souvrez sur la police de titre et ouvrez Find & Remplacer . Dans la colonne Remplacer la valeur , affectez la variable de police de votre marque .

Mise à jour de la largeur de la bordure de tous les modules de texte

Pour la mise à jour de la largeur de bordure, j'utiliserai ma variable de module de blocage . Le processus reste cohérent. Accédez aux paramètres de la bordure de n'importe quel Blurb, ouvrez trouver et remplacer, choisir votre variable et appliquer.

Après avoir changé toutes les valeurs statiques avec vos variables de conception, vous aurez lié vos styles de mise en page directement aux variables. Cela signifie que si vous souhaitez modifier la couleur de la marque, modifier la typographie de tête ou ajuster les largeurs de bordure, vous n'aurez pas à refaire les remplacements. Il suffit de mettre à jour la variable et tous les éléments liés s'ajusteront instantanément.

Étape bonus: créer et enregistrer des préréglages (facultatif)

Bien que la recherche et le remplacement et la conception des variables vous donnent une base solide, il existe une étape facultative qui s'appuie encore sur ce système. Les préréglages vous permettent de compléter les styles compléter et de les réutiliser n'importe où en un seul clic.

Une fois que vous êtes satisfait de vos variables de base, vous pouvez le prendre un pas plus profondément et créer des préréglages pour un style plus granulaire. Ce n'est pas nécessaire pour le processus de base que nous venons de suivre, mais cela vaut la peine d'explorer si vous voulez une efficacité maximale.

Disons que vous aimez ajouter un effet d'ombre à tous vos exposés, vous avez donc conçu le style d'ombre parfait pour votre module de texte de présentation. Au lieu de copier manuellement ce style à chaque fois, vous pouvez l'enregistrer en préréglage.

Fait. Ce préréglage apparaît désormais dans la liste déroulante des préréglages de chaque module. Vous pouvez l'appliquer instantanément à d'autres modules; Il n'est pas nécessaire de refaire l'espacement, les bordures, les ombres ou tout autre ajustement de conception.

Ce qui rend les préréglages encore plus puissants, c'est leur flexibilité. Vous pouvez créer des groupes prédéfinis pour différentes combinaisons de paramètres pour une meilleure optimisation du flux de travail et un contrôle granulaire. Par exemple, vous pouvez avoir un groupe prédéfini pour les styles de bouton avec des variations comme la lumière primaire, le contour primaire et la lumière primaire, chacune contenant différentes combinaisons d'horizons, de frontières et d'espacement.

De cette façon, vous maintenez la cohérence tout en ayant des options pour différents contextes. Les préréglages sont particulièrement utiles lorsque votre mise en page a plus de 10 modules en utilisant le même style. Au lieu de compter sur la mémoire ou les modifications manuelles, vous normalisez tout dès le départ.

Apprenez tout sur les préréglages du groupe d'options de Divi

Après avoir appliqué toutes les variables de conception enregistrées, voici à quoi ressemblent les versions avant et après:

4. Appliquer le même processus à d'autres pages

Une fois que vos variables et préréglages de conception sont configurés, la mise à jour du reste de votre pack de mise en page devient beaucoup plus rapide.

Prenez la page de destination du cours, par exemple. Vous verrez les mêmes valeurs statiques utilisées ici, des polices de cap, des couleurs de bouton, des bordures de texte de présentation, des couleurs d'icône, etc. Encore une fois, au lieu de peaufiner manuellement chaque paramètre, ouvrez le module pertinent, déclenchez-vous et remplacez et affectez la variable de conception correspondante.

Répétez ce processus pour chaque style répétitif sur toutes vos pages. Lorsque vous avez terminé, votre pack de mise en page sera connecté à des variables et aux préréglages, ce qui rend les futures modifications presque sans effort.

Page de destination de cours mise à jour en utilisant les variables de recherche et de remplacement et de conception de Divi

Faire des modifications de la disposition en secondes avec Find et remplacer

La configuration des variables de conception et l'apprentissage de la recherche et du remplacement dans Divi 5 pourraient prendre un temps initial. Mais une fois que vous l'avez fait pour un pack de mise en page, vous ne voudrez jamais revenir en cliquant manuellement à travers des dizaines de modules.

Nous avons transformé un pack de mise en page entier à partir de valeurs statiques diffusées en un système de conception connecté. Ce qui nous a pris quelques minutes avec Find & Remplace aurait pris des heures à le faire l'ancienne façon, module par module, page par page.

Il ne s'agit pas seulement de gagner du temps sur ce projet. Vous construisez un système de conception qui rendra chaque futur projet Divi plus rapide et plus cohérent.