Elementor et les éléments atomiques : une nouvelle façon de construire ses pages WordPress

Quand on travaille avec Elementor depuis quelque temps, on finit souvent par rencontrer le même problème : le site reste facile à modifier, mais son apparence devient peu à peu moins cohérente. Un bouton n’a pas tout à fait le même arrondi que les autres, une marge change d’une page à l’autre, une couleur a été copiée à la main… Rien de spectaculaire, mais l’ensemble perd en régularité.

Avec Elementor 4 et l’arrivée des éléments atomiques, le constructeur prend une nouvelle direction. Il ne s’agit plus seulement d’empiler des widgets pour fabriquer une page. Elementor propose désormais une façon plus structurée de travailler, inspirée des systèmes de design utilisés par les professionnels du web.

Le terme peut sembler un peu abstrait. Dans la pratique, l’idée est assez simple.

Un élément atomique, qu’est-ce que c’est ?

Un élément atomique est une petite unité de construction : un titre, un texte, une image, un bouton ou un conteneur, par exemple. Chaque élément remplit une fonction précise et peut être associé à d’autres pour former une section complète.

La comparaison avec des briques fonctionne plutôt bien. On part de pièces simples, puis on les assemble selon les besoins. La différence avec certains widgets Elementor historiques tient surtout à leur conception : ces derniers regroupent parfois de nombreuses options dans un même bloc, alors que les éléments atomiques sont plus légers et plus faciles à combiner.

Ce découpage donne davantage de contrôle sur la structure de la page. Il prend surtout tout son sens lorsqu’on l’associe aux classes et aux variables, qui permettent de réutiliser les mêmes règles graphiques à plusieurs endroits du site.

Quelle différence avec les modèles Elementor Pro ?

Là encore, les usages se complètent. Un modèle Elementor Pro définit une structure réutilisable, comme un en-tête, un pied de page, une fiche produit ou un modèle d’article. Le contenu dynamique indique quelles données WordPress afficher dans cette structure : le titre, l’image mise en avant, l’auteur ou un champ personnalisé.

Les éléments atomiques concernent plutôt la manière dont l’interface est construite et stylisée. En résumé, le modèle décide où une structure apparaît, le contenu dynamique fournit les informations à afficher et les éléments atomiques permettent de composer l’interface avec des règles cohérentes.

Tutoriel : créer un bloc d’appel à l’action réutilisable

Pour comprendre la logique atomique, le plus simple est de construire quelque chose. Nous allons créer un petit bloc destiné à une page de formation, avec un titre, un court texte et un bouton « Demander un devis ».

Pourquoi cet exemple ? Parce qu’un appel à l’action revient souvent sur un site : en bas d’une page, dans un article ou à la fin d’un programme. C’est donc un bon candidat pour tester une mise en forme réutilisable. L’objectif n’est pas seulement d’obtenir un joli bloc, mais de pouvoir changer ensuite sa couleur ou son bouton sans reprendre chaque exemplaire à la main.

Avant de commencer

• Effectuez une sauvegarde si vous travaillez sur un site déjà en ligne.
• Créez une page de test et ouvrez-la avec Elementor.
• Vérifiez que les éléments V4 apparaissent dans le panneau des éléments. Ils sont regroupés dans la catégorie des éléments atomiques et possèdent une icône spécifique.

Sur une nouvelle installation d’Elementor 4, les fonctions atomiques sont actives par défaut. Sur un site existant, ouvrez l’administration de WordPress, puis Elementor > Éditeur > Réglages > Atomic Editor. Activez la nouvelle expérience si nécessaire. Les éléments classiques et atomiques peuvent cohabiter : il n’est donc pas nécessaire de convertir toute la page.

Étape 1 — Préparer les couleurs avec des variables

Une variable associe un nom facile à retenir à une valeur. Nous pourrions saisir directement un code hexadécimal dans chaque élément, mais ce serait revenir à une mise en forme page par page. En nommant les couleurs, on pourra les modifier plus tard depuis un seul endroit.

Dans la barre supérieure de l’éditeur, cliquez sur l’icône Design System, puis ouvrez l’onglet Variables. Cliquez sur Créer une variable ou sur le bouton +, choisissez le type Couleur et ajoutez les variables suivantes :

Ces valeurs ne sont que des exemples. Utilisez bien sûr les couleurs de votre charte graphique. Préférez des noms qui décrivent le rôle de la couleur plutôt que son apparence : couleur-accent restera compréhensible même si l’orange devient un jour du bleu, contrairement à un nom comme orange-bouton.

Étape 2 — Construire la structure du bloc

Revenez au panneau des éléments et ajoutez un élément atomique Flexbox sur la page. Il servira d’enveloppe à notre appel à l’action. À l’intérieur, déposez successivement :

1. un élément Heading pour le titre ;
2. un élément Paragraph pour le texte ;
3. un élément Button pour le lien.

Dans l’onglet General de chaque élément, saisissez par exemple :

Besoin d’un conseil pour choisir votre formation ?
Parlez-nous de votre projet et de vos objectifs. Nous vous aiderons à identifier le parcours le plus adapté.
Demander un devis

Ajoutez enfin l’adresse de destination dans le champ Link du bouton. À ce stade, concentrez-vous sur la structure et le contenu ; la mise en forme vient juste après.

Étape 3 — Créer une classe pour le bloc

Sélectionnez le Flexbox, puis ouvrez l’onglet Style. En haut du panneau, le champ des classes contient déjà une classe nommée local. Elle appartient uniquement à l’élément sélectionné.

Dans ce même champ, saisissez cta-formation, puis choisissez Créer une nouvelle classe. Vérifiez que cette nouvelle classe est sélectionnée avant de régler les propriétés suivantes :

• Layout : direction verticale et alignement au début ;
• Spacing : un espace de 16 px entre les éléments et un padding de 32 px autour du contenu ;
• Background : sélectionnez la variable couleur-principale grâce à l’icône des variables ;
• Border : ajoutez un rayon de 12 px si vous souhaitez des angles légèrement arrondis.

Pourquoi créer une classe au lieu de modifier local ? Parce que cta-formation pourra être appliquée à d’autres Flexbox. Une modification de cette classe concernera alors tous les blocs qui l’utilisent. C’est précisément le comportement recherché.

Étape 4 — Mettre en forme le titre et le texte

Sélectionnez le titre, ouvrez Style et créez une classe cta-titre. Dans les réglages de typographie, choisissez la taille et la graisse adaptées à votre charte, puis utilisez la variable texte-clair pour la couleur. Une base de 32 px sur ordinateur constitue un bon point de départ, à ajuster selon la police employée.

Faites la même chose avec le paragraphe en créant une classe cta-texte. Appliquez également texte-clair, puis choisissez une largeur ou une taille de caractères qui conserve une lecture confortable. Évitez de multiplier les réglages dans la classe locale : sinon, les futures modifications de la classe globale pourront sembler ne pas fonctionner.

Étape 5 — Créer le bouton principal

Sélectionnez le bouton et créez la classe bouton-principal. Cette classe ne doit pas décrire le texte « Demander un devis », mais le rôle visuel du bouton. Vous pourrez ainsi l’utiliser plus tard pour « Nous contacter » ou « Voir le programme ».

Avec la classe bouton-principal active, appliquez par exemple :

• la variable couleur-accent pour l’arrière-plan ;
• la variable texte-clair pour le libellé ;
• 14 px d’espace vertical et 22 px d’espace horizontal ;
• une graisse de texte de 600 et un rayon de 6 px.

Ajoutons maintenant un effet au survol. Dans le champ des classes, ouvrez le menu représenté par les trois points à côté de bouton-principal, puis choisissez l’état Hover. Dans Background, remplacez la couleur par la variable couleur-accent-survol. Revenez ensuite à l’état normal et passez la souris sur le bouton pour contrôler le résultat.

Si l’effet ne doit concerner que ce bouton précis, appliquez l’état Hover à la classe local. Si tous les boutons principaux doivent réagir de la même façon, travaillez bien sur la classe globale bouton-principal.

Étape 6 — Vérifier que le système est vraiment réutilisable

Ajoutez un second élément Button ailleurs sur la page. Dans son onglet Style, ouvrez le champ des classes et sélectionnez bouton-principal. Le nouveau bouton doit reprendre immédiatement l’apparence du premier, sans que vous ayez à ressaisir la couleur, les espacements ou la bordure.

Faites ensuite un test simple : modifiez la variable couleur-accent dans le gestionnaire de variables. Les deux boutons doivent changer de couleur. Remettez enfin la valeur souhaitée. Cette vérification permet de comprendre la répartition des rôles :

• la variable conserve une valeur réutilisable ;
• la classe globale regroupe plusieurs règles de style ;
• la classe local sert aux exceptions propres à un seul élément.

Étape 7 — Contrôler la version mobile

Utilisez les commandes de la barre supérieure pour passer en affichage tablette, puis mobile. Sur petit écran, réduisez si nécessaire le padding de la classe cta-formation de 32 à 20 px et la taille de cta-titre. Vérifiez aussi que le bouton reste facile à toucher et que son texte ne se coupe pas.

Attention au niveau sur lequel vous effectuez ces corrections. Une adaptation responsive faite sur une classe globale s’appliquera à tous les éléments qui utilisent cette classe. C’est souvent souhaitable, mais mieux vaut le savoir avant de valider.

Les erreurs les plus fréquentes

• La modification ne touche qu’un seul élément : vous avez probablement travaillé sur la classe local au lieu de la classe globale.
• Une classe semble sans effet : un réglage local ou une autre classe peut avoir la priorité. Ouvrez le gestionnaire de classes depuis Design System > Classes pour examiner et réorganiser leur hiérarchie.
• Une modification change trop d’éléments : la classe globale est utilisée ailleurs sur le site. Le gestionnaire de classes permet de repérer les pages concernées. Utilisez une classe locale pour une véritable exception.
• Les éléments atomiques n’apparaissent pas : vérifiez l’activation de l’Atomic Editor et la version d’Elementor installée.
• La classe ne peut pas être appliquée à un ancien widget : les classes et variables V4 sont conçues pour les éléments atomiques. Un widget classique V3 continue d’utiliser ses propres réglages globaux.

Une fois ce premier bloc terminé, créez un deuxième style de bouton, par exemple bouton-secondaire, puis une variante de bloc sur fond clair. Vous aurez déjà les bases d’un petit système de design réellement utilisable, sans avoir construit une usine à gaz.

Ce que cela change au quotidien

Jusqu’ici, une méthode courante consistait à créer une section, puis à la dupliquer sur d’autres pages. C’est rapide et cela fonctionne très bien au début. Les écarts apparaissent plus tard, quand une copie est modifiée sans que les autres le soient.

Imaginons les boutons « Demander un devis », « Voir le programme » et « Prendre rendez-vous » d’un site de formation. Ils ont des libellés différents, mais jouent tous le même rôle. Avec une classe commune, ils peuvent partager leur couleur, leur typographie, leurs espacements, leur bordure et leur effet au survol.

Le jour où l’identité visuelle évolue, il suffit de modifier cette règle commune. Il n’est plus nécessaire d’ouvrir chaque page pour retrouver tous les boutons concernés. C’est un détail sur un petit site ; sur plusieurs dizaines de pages, le gain devient vite évident.

Les variables suivent la même logique. Elles servent à enregistrer des valeurs réutilisées, comme une couleur ou une police. Au lieu de saisir le même code couleur à chaque fois, on utilise une variable nommée. Si cette couleur change, la mise à jour peut se répercuter partout où elle est employée.

Et le thème ou les réglages globaux Elementor ?

Les éléments atomiques ne remplacent ni le thème WordPress ni les réglages globaux d’Elementor. Ils interviennent à un autre niveau.

Le thème fixe le cadre général du site : largeur des contenus, comportement de certaines zones, typographie de base ou mise en page globale. Les réglages Elementor permettent déjà d’harmoniser des couleurs et des polices. Les classes appliquées aux éléments atomiques vont plus loin dans le détail des composants créés dans les pages.

On peut ainsi prévoir un style pour les boutons principaux, un autre pour les boutons secondaires, ou encore une présentation commune pour les encadrés d’information. Le thème reste le socle ; la logique atomique aide à organiser ce que l’on construit par-dessus.

Quelle différence avec les modèles Elementor Pro ?

Là encore, les usages se complètent. Un modèle Elementor Pro définit une structure réutilisable, comme un en-tête, un pied de page, une fiche produit ou un modèle d’article. Le contenu dynamique indique quelles données WordPress afficher dans cette structure : le titre, l’image mise en avant, l’auteur ou un champ personnalisé.

Les éléments atomiques concernent plutôt la manière dont l’interface est construite et stylisée. En résumé, le modèle décide où une structure apparaît, le contenu dynamique fournit les informations à afficher et les éléments atomiques permettent de composer l’interface avec des règles cohérentes.

Un code plus léger, mais pas de miracle

Elementor présente également ces nouveaux éléments comme plus légers. Leur structure HTML comporte moins de couches inutiles, ce qui va dans le bon sens pour la lisibilité du code et les performances.

Il faut néanmoins garder les attentes raisonnables. Passer aux éléments atomiques ne suffit pas à rendre un site rapide. Le poids des images, la qualité de l’hébergement, les extensions, le cache et les scripts externes ont souvent bien plus d’impact. Cette évolution offre une base plus propre, pas un raccourci magique vers un excellent score Core Web Vitals.

Le bénéfice le plus immédiat se trouve sans doute dans la maintenance. Une structure claire et des styles partagés réduisent les retouches répétitives et les petites incohérences qui s’accumulent avec le temps.

Faut-il refaire son site ?

Non. Si un site fonctionne correctement, il n’y a aucune raison de le reconstruire dans l’urgence. Les widgets classiques et les nouveaux éléments peuvent cohabiter. La transition peut donc se faire progressivement, à mesure que de nouvelles pages sont créées ou que certaines sections sont retravaillées.

Pour se familiariser avec cette méthode, mieux vaut commencer par une page isolée ou une petite section d’appel à l’action. Cela permet de tester les classes, les variables et le comportement responsive sans intervenir sur l’ensemble du site. Comme toujours avant une modification importante, une sauvegarde et un environnement de test restent recommandés.

Sur un nouveau projet, en revanche, réfléchir dès le départ aux couleurs, aux typographies et aux composants réutilisables évite beaucoup de corrections par la suite. Il n’est pas nécessaire de concevoir un système très complexe : quelques règles bien nommées suffisent déjà à rendre le travail plus confortable.

Ce qu’il faut retenir

Les éléments atomiques font évoluer la manière de travailler avec Elementor. On continue à construire visuellement, mais on pense davantage à ce qui doit être réutilisé d’une page à l’autre.

Pour un indépendant, une TPE ou un organisme de formation, l’intérêt est très concret : le site reste cohérent plus longtemps et les changements graphiques sont plus simples à appliquer. La contrepartie est un petit temps d’apprentissage. Il faut prendre l’habitude de nommer ses classes et de réfléchir aux éléments qui partagent réellement le même rôle.

Cette méthode ne révolutionne pas chaque page du jour au lendemain. Elle apporte surtout quelque chose qui manque parfois aux constructeurs visuels : une façon plus rigoureuse de faire évoluer un site sans perdre leur simplicité d’utilisation.