# Comment l’éditeur atomique d’Elementor range ses classes globales en JSON

> Une lecture pédagogique du principe de stockage des classes globales atomiques, sans entrer dans l'édition manuelle de ce fichier.

- Auteur : Clément Hadrot
- Publié le : 2025-08-02
- Mis à jour le : 2025-08-02
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/classes-atomiques-v4-structure-json/

## L’essentiel

- Les classes globales atomiques vivent en dehors du contenu de chaque page
- Chaque classe regroupe des propriétés par état (normal, survol, focus)
- Le kit du site reste le conteneur logique de cet ensemble de classes

Depuis l'arrivée de l'éditeur atomique d'Elementor, les classes globales ne sont plus de simples réglages de style appliqués widget par widget : elles deviennent des objets à part entière, définis une seule fois puis référencés partout où ils sont utilisés. Comprendre comment ces classes sont réellement stockées aide à mieux saisir pourquoi elles se comportent différemment des anciens styles globaux de la version précédente d'Elementor.

Cette lecture s'adresse à un développeur curieux de comprendre la logique interne du système, pas à quelqu'un qui chercherait à éditer ce format à la main : ce n'est ni supporté ni nécessaire, l'interface graphique couvrant l'intégralité des cas d'usage courants.

## Où vivent les classes globales dans l'architecture du site

Avant l'éditeur atomique, un style appliqué à un widget restait généralement rattaché au contenu de la page elle-même, sous forme de réglages CSS embarqués dans la structure JSON de l'élément. Les classes globales atomiques changent cette logique : elles sont désormais rattachées au kit du site, l'entité qui centralise déjà les réglages de style par défaut, les couleurs globales et les polices globales depuis les versions précédentes d'Elementor.

Concrètement, cela signifie qu'une classe globale existe indépendamment de toute page qui l'utilise : la supprimer depuis le gestionnaire de classes retire son application partout où elle était référencée, sans qu'il soit nécessaire de parcourir chaque page une par une.

## La structure interne, simplifiée pour la pédagogie

> L'essentiel à retenir : Les classes globales atomiques vivent en dehors du contenu de chaque page ; Chaque classe regroupe des propriétés par état (normal, survol, focus) ; Le kit du site reste le conteneur logique de cet ensemble de classes

Sans prétendre reproduire le schéma exact et complet utilisé en interne par Elementor, qui évolue au fil des mises à jour, le principe général peut se résumer par une structure simplifiée de ce type, à but purement illustratif :

```
{
  "id": "e-bouton-principal",
  "label": "Bouton principal",
  "variants": {
    "normal": {
      "background-color": "var(--e-global-color-accent)",
      "border-radius": "8px",
      "padding": "12px 24px"
    },
    "hover": {
      "background-color": "var(--e-global-color-accent-dark)"
    },
    "focus-visible": {
      "outline": "2px solid var(--e-global-color-accent)"
    }
  }
}
```

Ce qui compte ici n'est pas l'exactitude au caractère près de ce schéma, mais le principe qu'il illustre : chaque classe globale regroupe plusieurs variantes, une par état d'interaction, plutôt que de dupliquer des règles CSS séparées comme c'était le cas dans l'ancien système de styles.

## Le rôle central du kit du site

Le kit du site agit comme un conteneur logique unique pour l'ensemble des classes globales, au même titre qu'il centralise déjà les variables de couleur et de typographie. Cette centralisation permet l'export et l'import complet d'un système de style cohérent d'un site à un autre, via l'export de kit déjà disponible dans Elementor, désormais enrichi de ces nouvelles classes atomiques.

## Cas d'usage concrets de cette architecture

- Modifier la couleur de fond d'un bouton présent sur cinquante pages différentes en une seule action, depuis le gestionnaire de classes globales.
- Dupliquer un kit de style complet vers un nouveau projet client, classes globales comprises, sans reconstruire chaque style un par un.
- Auditer l'ensemble des classes définies sur un site pour repérer les doublons ou les classes devenues orphelines, non utilisées par aucun élément.

## Les pièges à connaître malgré tout

Le principal piège de cette architecture centralisée est justement sa force : une modification de classe globale se répercute partout instantanément, y compris sur des pages qu'on avait oublié d'auditer avant le changement. Une classe mal nommée dès sa création, ou trop générique, finit souvent par être réutilisée dans des contextes où elle n'était pas prévue, rendant son renommage ou sa suppression plus délicats a posteriori.

> Une bonne pratique consiste à préfixer chaque classe globale selon son rôle (bouton, carte, en-tête de section) dès sa création : cela évite la confusion quand la liste des classes dépasse la trentaine d'entrées sur un projet mature.

## En résumé

Comprendre que les classes globales atomiques vivent désormais au niveau du kit du site, indépendamment du contenu des pages, éclaire directement leur comportement en cascade : une modification centralisée, un impact immédiat partout où la classe est appliquée. C'est un changement d'architecture plus profond qu'il n'y paraît au premier abord, hérité de la logique déjà en place pour les couleurs et polices globales, mais désormais étendu à l'ensemble des propriétés de style.