Le Design System global Elementor Pro : une seule source de vérité
Le Design System global d’Elementor Pro centralise vos variables de design : couleurs, typographies, espacements, et boutons. Quand vous définissez une couleur « Accent » et que vous l’utilisez sur 200 éléments de votre site, changer la couleur dans le Design System met à jour les 200 éléments instantanément. C’est la fin des modifications page par page.
Couleurs globales
Accédez aux couleurs globales via le panneau de style Elementor (icône palette). Définissez vos couleurs de marque une seule fois : couleur principale, secondaire, accent, texte, fond. Si votre client change sa charte graphique, vous modifiez 4-5 couleurs globales et l’ensemble du site se met à jour en 2 minutes.
Typographies globales
Définissez vos typographies globales pour chaque niveau de titre (H1 à H6) et pour le corps de texte. Pour chaque niveau, spécifiez la famille de police, la taille (desktop, tablette, mobile indépendamment), le poids, l’interlignage et l’espacement des lettres. Les polices Google Fonts sont intégrées directement dans l’interface.
L’Atomic Editor et les composants réutilisables
Avec l’Atomic Editor (2025-2026), Elementor Pro va encore plus loin avec les composants réutilisables. Un composant est un bloc de design (par exemple, une « carte service ») qui peut être instancié partout sur le site. Quand vous modifiez le composant maître, toutes les instances se mettent à jour. C’est la logique des « Symbols » dans Figma, appliquée directement en production.
Variables CSS et custom properties
Elementor Pro génère des variables CSS custom pour chaque couleur et typographie globale. Votre couleur « Primaire » est accessible en CSS comme var(--e-global-color-primary). Cela permet d’utiliser vos variables Elementor dans du CSS custom pour des personnalisations avancées tout en restant cohérent avec le Design System.
Bonnes pratiques
- Définissez toujours le Design System AVANT de commencer le design des pages
- Limitez-vous à 4-5 couleurs globales maximum : primaire, secondaire, accent, texte, fond
- Utilisez systématiquement les couleurs et typographies globales — jamais de valeurs en dur
- Nommez vos couleurs par leur rôle (Accent, Texte) et non par leur valeur (Bleu, Gris)