La gestion des couleurs est une option unique qui a un effet considérable en aval. Bien la régler avant de convertir vous évitera beaucoup de remises en forme par la suite.
Les deux modes
- Conserver les couleurs d’origine — chaque couleur de texte, d’arrière-plan, de bordure et d’ombre est écrite dans le widget sous forme de valeur explicite. Le résultat correspond exactement à la source.
- Utiliser les couleurs du site — les couleurs propres à chaque widget sont ignorées et les couleurs globales d’Elementor sont référencées à la place : les titres correspondent à Primaire, le corps de texte à Texte, les arrière-plans de bouton à Accent, et ainsi de suite.
Quand utiliser chaque mode
Choisissez les couleurs du site lorsque vous importez un bloc dans un site de marque existant. La section adopte immédiatement votre palette, et lorsque vous modifierez plus tard une couleur globale, la section importée changera avec elle. C’est le choix le plus facile à maintenir pour tout ce qui restera sur votre site à long terme.
Choisissez les couleurs d’origine lorsque le design est l’essentiel — une maquette client, une page de destination ponctuelle, ou lorsque la palette source est volontairement différente du reste du site.
Quelles valeurs de couleur survivent
Les couleurs unies sont converties directement. Les dégradés linéaires à deux arrêts sont reconnus et deviennent des arrière-plans en dégradé Elementor, avec l’angle et les deux arrêts préservés. Les arrière-plans plus complexes — dégradés radiaux, dégradés à arrêts multiples — ne peuvent pas être exprimés dans le même contrôle ; la première couleur unie est donc utilisée comme solution de repli raisonnable plutôt que de produire un arrière-plan vide.
Les ombres portées sont également reprises, mais le contrôle d’ombre d’Elementor ne conserve qu’une seule ombre. Si votre CSS superpose plusieurs ombres, la plus en avant est conservée et un avertissement vous indique que les autres doivent être ajoutées à la main.
Variables CSS
Les propriétés personnalisées comme var(--brand) sont résolues par le navigateur avant d’être lues : vous obtenez donc la couleur calculée finale, pas le nom de la variable. C’est généralement ce que vous voulez. Si vous dépendez de variables pour la thématisation, passez aux couleurs du site et pilotez la palette depuis les couleurs globales d’Elementor — c’est l’équivalent natif WordPress de la même idée.
Transparence
Les arrière-plans entièrement transparents sont traités comme « aucun arrière-plan » plutôt que d’être écrits comme une couleur transparente, ce qui garde le panneau de réglages propre. Les valeurs semi-transparentes comme rgba(255,255,255,.88) sont préservées telles quelles.
La correspondance complète
En mode couleurs du site, chaque type de widget est lié à un emplacement spécifique de votre palette :
- Titres → Primaire
- Corps de texte → Texte
- Arrière-plans de bouton → Accent
- Icônes → Primaire
- Séparateurs → Secondaire
Activer la typographie du site fait la même chose pour les polices : les titres prennent votre typographie Primaire et le corps de texte prend la typographie Secondaire.
Les deux options sont indépendantes. Les couleurs du site avec les polices d’origine forment une combinaison courante et judicieuse — le bloc adopte votre palette tout en conservant une police d’affichage dont le design dépend. Réglez-les séparément plutôt que de les traiter comme un seul interrupteur.
Pourquoi la connexion est vivante, pas une copie
C’est la partie qui mérite d’être comprise, car elle explique pourquoi le choix compte tant par la suite. Le mode site ne va pas chercher votre couleur Primaire et coller sa valeur hexadécimale sur le widget. Il écrit une référence vers la couleur globale — Elementor la stocke comme un pointeur vers l’entrée de la palette, pas comme une valeur.
Ainsi, la liaison reste vivante. Modifiez la couleur Primaire dans les réglages du site dans six mois et chaque titre converti en mode site changera avec elle, sur toutes les pages, sans ouvrir l’une d’elles. Une page convertie devient un citoyen normal de votre système de design plutôt qu’un corps étranger qui, par hasard, correspond aujourd’hui.
Avec les couleurs d’origine, la valeur est figée. C’est exactement ce qu’il faut pour une maquette client que vous devez reproduire fidèlement, et exactement ce qu’il ne faut pas pour une section que vous maintiendrez pendant deux ans.
Configurez d’abord votre palette
Un prérequis piège souvent. Le mode site se lie à ce que vos couleurs globales contiennent actuellement — il ne les crée ni ne les devine. Convertissez vers un site dont la palette est encore la valeur par défaut d’usine d’Elementor et votre section adopte fidèlement la valeur par défaut, ce qui donne l’impression que la conversion a échoué.
Passez cinq minutes dans Réglages du site → Couleurs globales à définir Primaire, Secondaire, Texte et Accent avant de convertir tout ce que vous comptez conserver. Tout ce qui est importé ensuite arrive correctement du premier coup.
Les icônes se comportent un peu différemment
Une icône convertie en mode site reçoit currentColor plutôt qu’une valeur fixe, ce qui signifie qu’elle hérite de tout ce qui l’entoure. Placez cette icône dans une section sombre et elle devient claire en même temps que le texte qui l’entoure, sans aucun réglage à retenir au niveau du widget.
C’est un petit détail qui évite une corvée précise et agaçante : rechercher douze widgets d’icônes après avoir changé l’arrière-plan d’une section, parce qu’ils ont tous conservé la couleur qu’ils avaient sur fond blanc.
Une recommandation pratique
Si vous hésitez, convertissez une fois avec les couleurs d’origine pour vérifier que la mise en page est fidèle, puis convertissez de nouveau avec les couleurs du site pour la version que vous publierez réellement. Comparer les deux prend deux minutes et rend la décision évidente.
Par défaut : tout ce qui va sur votre propre site, utilisez les couleurs du site. Tout ce qui reproduit le design de quelqu’un d’autre pour approbation, utilisez les couleurs d’origine. Lorsqu’une maquette est approuvée et devient une vraie page, convertissez-la à nouveau en mode site plutôt que de la recolorer à la main.