Style natif : reprendre un site depuis Elementor

Avec ellô-wp, le style d'un site (couleurs, polices, fonds, espacements) passe par les réglages d'Elementor et par les couleurs et typographies globales du kit. Ce que vous voyez dans l'éditeur est ce que voit le visiteur, et vous pouvez tout reprendre à la main, au même endroit.

Ce que fait l'IA

• Elle règle chaque widget et chaque conteneur par ses contrôles (onglets Style et Avancé), avec les couleurs et typographies globales du kit.

• Quand un style revient plusieurs fois, elle crée une typographie ou une couleur globale plutôt que de répéter la valeur.

• Pour une partie colorée ou en italique d'un titre, elle écrit le titre ainsi, avec la couleur du kit :

  Le temple<br>du <em style="color: var(--e-global-color-hera_terracotta); font-style: italic;">mouvement.</em>
  

  C'est le seul style en ligne qu'elle pose sans vous demander. Avec le bouton « Éditer », vous modifiez le texte du titre, y compris dans la partie colorée : elle garde sa couleur et son italique.

• Elle n'écrit pas dans la CSS personnalisée du kit ce qu'un réglage Elementor sait faire : ellô-wp le refuse (native_style_required) et lui indique la technique native.

• Si un besoin n'a vraiment aucun réglage (un effet sur un pseudo-élément, une animation), elle vous explique ce qu'elle mettrait en CSS, où, et comment l'annuler. Elle n'écrit qu'après votre accord. Le bloc est alors placé, dans cet ordre :

  1. avec Elementor Pro, dans la CSS personnalisée de l'élément concerné (onglet Avancé) ;
  2. avec Elementor Free, dans « CSS additionnel » du Customizer (Apparence › Personnaliser) ou dans un extrait WPCode nommé ellô-wp — <utilité> — <page> ;
  3. en dernier, dans la CSS personnalisée du kit (Réglages du site › CSS personnalisée).

  Chaque bloc commence par un commentaire que vous retrouverez facilement :

  /* ellô-wp | Utilité : soulignement animé des liens du pied de page | Page : Accueil (id 12) | 2026-09-23 */
  

  Pour un bloc qui agit partout, la page s'écrit « tout le site » ; plusieurs pages se séparent par des virgules (Planning (id 54), Tarifs (id 53)) et un modèle se nomme (modèle Carte cours (id 676), pied de page). Tout nouveau bloc de la CSS du kit sans ce commentaire est refusé (css_comment_required) ; la CSS déjà présente n'est jamais bloquée et la retirer reste toujours permis.

  Il est journalisé et figure dans la liste des éléments codés en dur, dans l'admin du plugin et dans le dashboard.

Quelle technique pour quel besoin

Typographies globales et responsive

Une typographie globale porte aussi ses valeurs tablette et mobile : taille, interlignage, espacement des lettres et des mots. L'IA les écrit avec update_global_styles (size_tablet, size_mobile, line_height_mobile…), en px, em, rem, vw, ou en valeur libre comme clamp(2rem, 5vw, 3rem) (unité « personnalisée » d'Elementor).

Un widget n'est relié à une typographie globale que si toutes les valeurs qu'il fixe sont égales à celles de la globale, tailles tablette et mobile comprises. Sinon ses valeurs restent telles quelles, jamais perdues, et ellô-wp le signale (typography_near_global:<id>, avec les propriétés qui diffèrent) : utilisez la globale si l'écart n'est pas voulu, ou créez une nouvelle typographie globale.

Casse (majuscules), style (italique) et soulignement d'une typographie globale se règlent sur ordinateur seulement : Elementor n'a pas de valeur tablette ou mobile pour eux. Ils comptent dans la comparaison dans les deux sens : un widget sans majuscules n'est jamais relié à une globale en majuscules, qui changerait son affichage.

Survol, grilles et mobile

• Survol : soulever ou agrandir un élément au survol se fait avec Avancé › Transformer, onglet Survol (_transform_translateY_effect_hover, _transform_scale_effect_hover…), jamais en CSS. ellô-wp active lui-même l'interrupteur du réglage (_transform_translate_popover_hover…) sans lequel Elementor n'applique rien ; même chose pour les Motion Effects d'Elementor Pro.
• Grille : un conteneur passé en grille par l'IA a des lignes automatiques (hauteur du contenu) au lieu des deux lignes égales d'Elementor. Sur tablette, une grille de 4 colonnes ou plus passe à 2 colonnes ; sur mobile, Elementor affiche 1 colonne (cartes empilées). Des valeurs tablette ou mobile données par l'IA ou la personne sont toujours gardées ; l'avertissement grid_columns_mobile rappelle le réglage mobile.
• Largeur d'un conteneur : Elementor n'applique pas la largeur ordinateur sur mobile (100 %, pour empiler les colonnes). Pour garder une largeur sur mobile, il faut la donner (width_mobile) ; l'avertissement width_mobile le signale.
• Titre d'un accordéon imbriqué : Elementor écrit sa typographie et sa couleur avec une priorité nulle (:where()) ; avec une balise de titre h1 à h6, les styles de titre du kit l'emportent. Choisir la balise div (défaut d'Elementor) ; ellô-wp le signale (accordion_title_tag).

Styles globaux modifiés en parallèle

Une copie brouillon du kit garde l'état du kit en ligne au moment de la copie. À la mise en ligne (promote_draft), ce qui a changé en ligne depuis (autre agent, personne dans Elementor) est gardé ; si le même réglage a changé des deux côtés, rien n'est écrit et kit_conflict liste les réglages en cause : relisez-les, puis choisissez la copie (conflict: "draft") ou le site (conflict: "live"). Une copie faite avec une ancienne version du plugin est mise en ligne comme avant (kit_base_unknown).

Pièges courants lors d'une migration

• Interlignage sans unité : line_height: 1.65 reste sans unité (unité « personnalisée » d'Elementor, line-height: 1.65). Il était converti en 1.65em, qui fige la valeur pour les enfants et avait cassé 31 widgets. Écrire em seulement quand c'est voulu.
• CSS d'une extension ou d'un shortcode : une règle qui vise un balisage qu'Elementor ne produit pas (bannière Complianz .cmplz-*, formulaire Contact Form 7, contenu d'un widget Shortcode ou HTML) n'est plus refusée par native_style_required ; elle garde le commentaire d'en-tête. Une classe personnalisée inconnue reste présumée posée sur un élément Elementor.
• Valeurs des réglages à choix : une valeur hors des options d'une liste, d'un choix à icônes ou d'un interrupteur (tablette et mobile compris) est refusée avec les valeurs possibles, au lieu d'être enregistrée sans effet. Un interrupteur activé reçoit sa propre valeur : la pleine largeur du menu déroulant enregistre stretch, pas yes.
• Images d'un loop item : modifier un modèle loop item ne donne plus la hauteur de 240 px aux images déjà présentes ; seules les images ajoutées par l'appel la reçoivent.

Polices : jamais de @font-face en CSS

Une police personnalisée ne s'ajoute jamais par un bloc @font-face écrit dans la CSS du kit, la CSS additionnel ou un extrait de code : c'est l'outil manage_fonts qui l'ajoute, par la voie que votre site expose déjà (module des polices personnalisées d'Elementor Pro, ou extension Custom Fonts sur Elementor Free — voir le guide Importer des fichiers et exporter le kit). Une police posée en CSS est invisible pour Elementor : impossible de la retrouver dans le panneau, de changer sa graisse depuis un contrôle, ou de savoir où elle est utilisée.

Si un site a un @font-face déjà présent dans une CSS (site repris, migration), manage_fonts from_css le lit, télécharge ou décode le fichier de police qu'il désigne, crée la police par la voie native, puis propose de retirer le bloc devenu inutile de la CSS — jamais en silence, toujours après votre accord (comme toute écriture de CSS).

Reconnaître un style hors du panneau

Signes qu'un site a du style en dehors du panneau Elementor :

• l'éditeur montre une couleur ou une police, le site en ligne une autre ;
• changer une couleur dans le panneau ne change rien sur la page ;
• changer une couleur globale ne change pas certains éléments ;
• les widgets ont des classes CSS (Avancé › Classes CSS) et Réglages du site › CSS personnalisée contient beaucoup de règles (plusieurs kilo-octets) ;
• des textes portent des attributs style="…" ailleurs que sur une partie de titre.

ellô-wp le signale aussi : quand l'IA modifie ou construit une page, un avertissement style_outside_panel nomme la classe en cause, les propriétés qu'elle reçoit de la CSS du kit et la technique native à utiliser ; un avertissement inline_style signale un style en ligne hors d'un titre. get_global_styles avec l'usage demandé parcourt toutes les pages et tous les modèles Elementor (par tranches de 60 contenus, avec next_offset). Il compte les valeurs en dur restantes, la CSS personnalisée propre à un élément (custom_css) et les classes CSS des éléments, contenu par contenu. Dans le plan de get_elementor_tree, le repère css signale ces éléments, et find_text cherche aussi dans leur CSS et leurs classes. Dans la CSS d'un élément (Pro), une règle qui porte le commentaire d'en-tête ellô-wp et vise un balisage intérieur qu'aucun contrôle ne règle (label d'acceptation d'un formulaire, hauteur minimale de ses champs, svg de l'icône d'un bouton) ne déclenche plus style_outside_panel ; l'avertissement reste pour une CSS sans en-tête, ou qui vise l'élément lui-même (selector) ou une partie que son onglet Style règle (titre, bouton, icône…).

Migrer un site existant

À faire d'abord sur une copie ou un staging, jamais directement sur le site d'un client.

1. Faire l'état des lieux. Demandez à l'IA de lire la charte (get_global_styles avec l'usage) et la CSS du kit : couleurs et typographies globales, valeurs en dur, classes qui portent du style.
2. Compléter les globales. Chaque couleur et chaque style de texte répété de la CSS devient une couleur ou une typographie globale, avec un nom clair.
3. Migrer page par page. Pour chaque classe signalée par style_outside_panel, l'IA reporte le style dans les réglages des éléments qui la portent, avec $global, puis retire la classe. Les modifications passent en copie brouillon selon vos droits ; relisez l'aperçu avant de publier.
4. Retirer la CSS devenue inutile. Retirer des règles de la CSS du kit est toujours permis ; faites-le quand plus aucune page n'utilise la classe.
5. Garder et commenter l'inévitable. Ce qui n'a aucun réglage reste en CSS, déplacé à la bonne place (élément, Customizer ou WPCode, kit en dernier) avec son commentaire d'en-tête.
6. Contrôler. Comparez l'éditeur et le site en ligne sur ordinateur, tablette et mobile ; changez une couleur globale pour vérifier qu'elle se propage.

Chaque écriture crée une révision WordPress : une page se restaure si le résultat ne convient pas.