Comment utiliser les couleurs globales de Divi ?

Il y a un an, Elegant Themes publiait une mise à jour de la version 4.9 de Divi qui introduisait une nouvelle fonctionnalité : le système de gestion globale des couleurs intégré au Divi Builder. Parmi les nouveautés apportées par cette update, il y a notamment la possibilité de modifier plus facilement la palette de couleurs du thème Divi, mais surtout, la possibilité de remplacer rapidement les couleurs globales de votre site à partir de n’importe quelle section, ligne ou module dans le Visual Builder.

Dans cet article, je vais vous expliquer pourquoi cette nouvelle fonctionnalité vous fera gagner beaucoup de temps et comment l’utiliser correctement.

Le système de couleurs globales de Divi, qu’est-ce que c’est ?

Le système de couleurs globales de Divi est une nouvelle façon de modifier les couleurs de n’importe quel élément dans le Divi Builder. Ce système permet d’aller plus loin qu’avec les préréglages. Au lieu de définir une même couleur sur plusieurs élements d’un site un par un, on peut la définir une seule fois, globalement. Donc pour résumer, si vous souhaitez changer la couleur de vos icones bleues pour les remplacer par du vert, vous pouvez toutes les changer instantanément. Plutôt pratique !

Pourquoi en avons-nous besoin ?

Utiliser les couleurs globales de Divi permet d’aller plus vite et d’être plus efficace dans la conception d’un site internet. Par exemple, si vous êtes en train de créer le design de votre site, il est fort probable que vous fassiez plusieurs essais de couleurs avant de trouver celles qui vous conviennent et qui collent le mieux à la thématique de votre site et à votre marque. En utilisant les couleurs globales, vous pouvez modifier une couleur sur l’ensemble des éléments qui utilisent cette couleur. Sans cette fonctionnalité vous auriez dû éditer chaque ligne, section et module utilisant cette couleur, les uns après les autres.

Comparaison du nouveau système de couleurs globales avec les fonctionnalités déjà existantes

Avant l’intégration du nouveau système de couleurs globales il était déjà possible de réaliser certaines actions sur les couleurs avec les fonctionnalités qu’Elegant Themes a développées pour Divi. Voici ce qu’il était déjà possible de faire et les différences entre ces fonctionnalités.

Les préréglages

Les préréglages permettent eux aussi de définir globalement des styles dans le Divi Visual Builder. Mais ils sont un peu différents du système de couleurs globales. En effet, les préréglages offrent la possibilité de définir n’importe quel paramètre globalement pour un module, une section, ou une ligne. Vous pouvez par exemple définir globalement la couleur du titre de tous les modules « blog », ou encore définir sa taille, les marges internes…

Vous l’aurez compris, les préréglages ne sont pas destinés uniquement aux couleurs et se limitent à un type de module ou à un type d’élément (ligne ou section) tandis que les couleurs globales s’appliquent partout sur le site.

La palette de couleurs

Bien avant l’apparition du système de couleurs globales il était déjà possible de définir une palette de couleurs statiques. Ces couleurs statiques peuvent être définies dans les options du thème Divi ou directement dans le Visual Builder. Ces deux systèmes sont complémentaires et il est possible de transformer des couleurs statiques en couleurs globales.

Mais quelle est la différence alors ? C’est simple, admettons que vous ayez uniquement défini une palette de couleurs statiques avec un bleu, un vert, et un gris. Un jour vous décidez de modifier la teinte de votre bleu partout où il est utilisé sur votre site. Vous modifiez donc votre palette de couleurs statiques dans les options du thème, mais ça ne remplacera pas automatiquement l’ancienne couleur par la nouvelle sur les pages de votre site. Vous devrez modifier un à un les paramètres de couleurs sur chaque élément de votre site. Autant dire que c’est fastidieux…

Rechercher et remplacer

La fonctionnalité rechercher et remplacer de Divi peut vous sauver la mise si vous êtes dans la situation que j’ai décrite dans le paragraphe précédent. Cet outil présent dans le Visual Builder de Divi est assez peu connu. Il permet par exemple de remplacer une couleur ou une police sur l’ensemble de la page que vous êtes en train d’éditer.

Partons du principe que vous souhaitez remplacer la couleur complémentaire (utilisée pour mettre en valeur certains éléments de la page). Dans cette page, il y a 24 éléments qui utilisent cette couleur. Étant donné que vous ne connaissiez pas encore le système de couleurs globales quand vous avez conçu votre site, vous pourriez soit modifier ces 24 éléments un par un (long et ennuyeux) soit utiliser la fonction rechercher et remplacer. En modifiant le premier élement puis en faisant un clic droit sur le sélecteur de couleurs, l’option vous serait proposée dans un menu contextuel. Il suffirait alors d’indiquer la couleur de remplacement et de demander à l’appliquer sur tout la page, la section, la ligne, ou la colonne.

Comment utiliser les couleurs globales ?

Passons maintenant aux choses sérieuses. Apprenons à utiliser cette fonctionnalité très pratique.

Ajouter et modifier des couleurs globales

Lorsque vous souhaitez éditer une couleur sur un élément Divi, vous trouvez par défaut la palette de couleurs statiques. Comme avant.

Juste en dessous se trouvent les trois onglets « Sauvegarder », « Global » et « Pourcentage ». Notez que Divi et les traductions en français ce n’est pas toujours au top… L’onglet « Pourcentage » affiche en réalité les couleurs récemment utilisées.

Pour différencier les couleurs statiques des couleurs globales, Elegant Themes a choisi de les afficher différemment. Ainsi, les couleurs globales sont représentées dans une bulle en forme de goutte.

Pour en ajouter une il suffit de cliquer sur le « plus » et de sélectionner la couleur de votre choix ou de copier/coller son code couleur.

En cliquant sur l’icône représentant une roue dentée vous aurez la possibilité de modifier les couleurs globales existantes.

Convertir des couleurs statiques en couleurs globales

Le problème avec un site conçu avant la sortie de cette fabuleuse fonctionnalité, c’est qu’il n’y a pas vraiment de solution pour convertir automatiquement les couleurs statiques en couleurs globales.

La meilleure solution est d’utiliser la fonction rechercher et remplacer. Page par page, sélectionnez un module sur lequel vous allez chercher et remplacer la couleur. Choisissez une couleur globale précédemment définie et appliquez-la en couleur de remplacement.