La gestion des couleurs tient en une seule option, mais ses effets en aval sont considérables. Bien la régler avant de convertir vous évitera beaucoup de retouches de style par la suite.
Les deux modes
- Conserver les couleurs HTML — 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.
- Hériter des couleurs du site cible — 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 texte courant à Texte, les arrière-plans de bouton à Accent, et ainsi de suite.
Quand utiliser chaque mode
Choisissez Hériter des couleurs du site cible lorsque vous importez un bloc dans un site existant qui a déjà sa propre identité visuelle. 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 durablement sur votre site.
Choisissez Conserver les couleurs HTML lorsque le design est l’essentiel — une maquette client, une page d’atterrissage ponctuelle, ou lorsque la palette source est volontairement différente du reste du site.
Quelles valeurs de couleur sont conservées
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 prend en charge qu’une seule ombre. Si votre CSS superpose plusieurs ombres, celle de premier plan 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 vous appuyez sur des variables pour gérer vos thèmes de couleurs, passez aux couleurs du site et pilotez plutôt 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 précis de votre palette :
- Titres → Primaire
- Texte courant → 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 texte courant 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 de titrage dont le design dépend. Réglez-les séparément plutôt que de les traiter comme un seul interrupteur.
Pourquoi le lien est dynamique, et non une copie
C’est la partie qui mérite d’être comprise, car elle explique pourquoi ce choix compte tant par la suite. Le mode site ne va pas chercher votre couleur Primaire pour 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.
La liaison reste donc active. Modifiez la couleur Primaire dans les Paramètres du site dans six mois et chaque titre converti en mode site changera avec elle, sur toutes les pages, sans que vous ayez à en ouvrir une seule. Une page convertie devient un élément à part entière de votre système de design plutôt qu’un corps étranger qui, par hasard, y 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 prend souvent les gens au dépourvu. Le mode site se lie à ce que contiennent actuellement vos Couleurs globales — il ne les crée ni ne les devine. Convertissez vers un site dont la palette est encore celle d’Elementor par défaut et votre section adopte fidèlement cette palette par défaut, ce qui donne l’impression que la conversion a échoué.
Passez cinq minutes dans Paramètres 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 s’intègre 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 l’élément qui l’englobe. 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 : traquer douze widgets Icône après avoir changé l’arrière-plan d’une section, parce qu’ils ont tous gardé 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 : pour tout ce qui va sur votre propre site, utilisez les couleurs du site. Pour tout ce qui reproduit le design de quelqu’un d’autre en vue d’une validation, utilisez les couleurs d’origine. Lorsqu’une maquette est validée et devient une vraie page, convertissez-la à nouveau en mode site plutôt que de la recolorer à la main.