Part 2 — Créer une page avec les éléments atomiques d’Elementor

Pour créer une page avec les éléments atomiques d’Elementor, commencez par un contenant, ajoutez ses contenus, puis réglez leur style et leur affichage mobile. Un Bloc Div ou une Flexbox organise la page ; les titres, paragraphes et boutons transmettent l’information. Les classes permettent ensuite de partager une présentation entre plusieurs éléments.

Vous allez construire une page d’ateliers de pâtisserie : un titre, une présentation, un bouton vers la section « Nos ateliers » et deux cartes. Trois vidéos commentées, des captures et leurs transcriptions vous permettent de reproduire chaque contrôle.

Ce qu’il faut ouvrir et préparer

Ouvrez l’administration de votre site WordPress d’exercice. Elementor doit être installé et actif, et la famille des éléments atomiques disponible dans votre version. Pour cette page, vous n’avez besoin ni de champs ACF ni de modèles Theme Builder. Préparez une nouvelle page en brouillon ; aucun contenu du site existant ne doit être remplacé.

Si vous découvrez le principe, lisez aussi la présentation générale des éléments atomiques. Le présent tutoriel se concentre sur les gestes et le résultat à vérifier.

Repère de version : les captures et vidéos ont été réalisées en octobre 2026. Les libellés peuvent apparaître en français ou en anglais et varier selon votre version. Repérez le rôle du réglage et contrôlez le résultat visible avant de poursuivre.

Commencer par le contenant et le contenu

Une page est composée de contenants et de contenu. Le contenant est une boîte : il organise ses éléments, leur laisse de l’espace et détermine comment ils s’alignent. Le contenu correspond aux informations que le visiteur lit ou utilise : titres, paragraphes, images, liens et boutons.

Une boîte peut elle-même en contenir d’autres. La section « Nos ateliers » peut contenir deux cartes ; chaque carte peut contenir un titre, une description et un bouton. On appelle parent la boîte qui contient les autres éléments et enfants les éléments placés à l’intérieur. Ces mots décrivent leur relation, pas leur taille ni leur importance.

Dans Elementor, le contenant peut apparaître sous le nom Conteneur ou Bloc Div, selon la famille d’éléments utilisée. Un Bloc Div atomique est une boîte dont vous pouvez régler la disposition et l’apparence. Un Bloc Div vide ne présente pas votre offre : il faut y placer du contenu. À l’inverse, ajouter des textes sans organiser leur contenant rend les alignements et les espaces difficiles à maîtriser.

Le mot atomique signifie ici que vous partez d’éléments simples pour composer un ensemble. Un élément Titre porte un titre, un Paragraphe porte un paragraphe et un Bouton porte un bouton. Vous n’avez pas besoin d’écrire du code pour les utiliser, mais vous devez comprendre ce que chaque élément fait et où vous le placez.

La page particulière reste distincte des modèles du constructeur de thème. Vous construisez ici son contenu et ses contenants internes. Son en-tête et son pied de page peuvent venir du thème WordPress ou de modèles Elementor, comme expliqué dans la leçon sur le constructeur de thème.

Ouvrir une page et reconnaître les éléments atomiques

1. Créer une page de formation

Partez de l’administration WordPress de votre site de formation. Elementor doit être actif et les éléments atomiques disponibles.

2. Ouvrir la page dans Elementor

Ouvrez Pages → Ajouter une page. Saisissez Atelier pâtisserie – Démo Elementor, enregistrez le brouillon, puis cliquez sur Modifier avec Elementor. Vous travaillez ainsi sur une nouvelle page identifiable.

L’éditeur comporte un panneau d’éléments et de réglages à gauche, le canevas au centre et une barre d’outils en haut. Le canevas est la représentation de la page que vous êtes en train de construire. Le bouton + de la barre permet de retrouver la liste des éléments lorsque vous êtes entré dans les réglages d’un élément particulier.

Dans la liste, repérez la famille Éléments atomiques, ou Atomic Elements. Un titre atomique et un ancien widget Titre peuvent coexister. Ils remplissent une fonction proche, mais leurs réglages de style diffèrent. Pour suivre ce tutoriel, choisissez les éléments de la famille atomique.

3. Choisir le modèle de page

Ouvrez Réglages de la page dans la barre supérieure. Dans Modèle de page, choisissez Elementor pleine largeur. Ce choix retire le titre automatique que le thème pouvait afficher au-dessus du contenu, afin d’éviter deux titres principaux. Il conserve les zones d’en-tête et de pied de page. Si vous avez suivi le tutoriel sur le constructeur de thème, ses modèles ciblent les actualités ; cette page utilise donc les zones du thème. Le choix du modèle de page ne modifie pas les conditions de ces modèles.

Si cette famille est absente, revenez à l’administration et consultez Elementor → Éditeur → Réglages → Éditeur atomique, dont le nom anglais est Atomic Editor. La disponibilité dépend de la version et de l’activation de cette expérience. Sur un site existant, faites ce choix sur votre environnement de formation avec une sauvegarde ; vous n’avez pas à reconstruire toutes les anciennes pages pour suivre l’exercice. Ne cherchez pas les réglages de classes atomiques dans un ancien widget.

Avant de construire, préparez ces trois informations : le titre Un atelier pour réussir vos premières pâtisseries, le paragraphe Apprenez les gestes essentiels et repartez avec une recette que vous pourrez refaire chez vous., et le bouton Découvrir les ateliers. Nous utiliserons seulement du texte pour ce premier écran ; aucune image à rechercher n’est nécessaire.

Construire une première section, élément par élément

Le premier écran doit répondre à deux questions : que propose cette page et comment continuer ? Nous allons disposer les trois informations les unes sous les autres. Cela permet de comprendre la structure avant de travailler les couleurs.

1. Placer le contenant. Depuis la liste des éléments atomiques, ajoutez une Bloc Div à la zone vide du canevas. Ouvrez la fenêtre Structure depuis la barre supérieure. Elle présente les éléments de la page comme une liste hiérarchique. Sélectionnez le Bloc Div dans cette liste pour vous assurer que vous réglez le contenant.
2. Placer le titre. Revenez aux éléments avec le +, ajoutez Titre dans le Bloc Div et sélectionnez-le. Dans Général → Contenu, remplacez le texte d’exemple par Un atelier pour réussir vos premières pâtisseries. Dans Général → Réglages → Étiquette, choisissez H1. Cette balise signale le titre principal de la page ; elle n’est pas simplement un bouton pour rendre le texte plus gros.
3. Ajouter l’explication. Ajoutez Paragraphe sous le titre, toujours dans le même Bloc Div. Saisissez le paragraphe préparé. Sélectionnez le paragraphe et vérifiez son texte dans le panneau : le contenu à gauche doit correspondre à celui du canevas.
4. Ajouter l’action. Ajoutez Bouton sous le paragraphe. Saisissez Découvrir les ateliers dans son texte et #ateliers dans Général → Réglages → Lien, champ Link URL. Ce lien conduit à une zone de la même page. Nous allons créer cette zone ensuite.
5. Lire la structure. Dans la fenêtre Structure, vérifiez que le titre, le paragraphe et le bouton sont indentés sous le Bloc Div. Si un élément est au même niveau que le Bloc Div, il est à l’extérieur. Déplacez-le dans le contenant plutôt que de compenser son mauvais emplacement avec des marges.

Dans la démonstration, le premier Bloc Div est déjà placé et la section des cartes est préparée. Observez l’ajout de ses trois contenus puis l’identifiant de la section. Les étapes écrites donnent l’ordre complet pour votre propre page.

Avant cette vidéo : Ouvrez votre page d’exercice dans l’éditeur Elementor avec la famille des éléments atomiques disponible. La vidéo reprend un premier Bloc Div déjà posé et une section « Nos ateliers » préparée ; suivez les étapes écrites pour les créer si nécessaire.

Lire la transcription de la démonstration

Le premier Bloc Div est déjà placé. C’est le contenant. La section Nos ateliers est préparée plus bas. Ajoutons maintenant les contenus dans le bloc du haut.

Dans les Éléments atomiques, ajoutez un Titre. Écrivez Un atelier pour réussir vos premières pâtisseries. Dans Général, choisissez H1 pour l’Étiquette : c’est le titre principal de la page.

Ajoutez un Paragraphe sous le titre, avec l’explication de l’atelier.

Ajoutez le bouton Découvrir les ateliers. Dans Link URL, saisissez dièse ateliers : ce lien pointe vers une section de la page.

Sélectionnez la Flexbox de Nos ateliers. Son ID est ateliers, sans dièse. Le bouton contient le lien ; la section porte l’identifiant.

Dans Structure, les niveaux distinguent les contenants et leurs contenus.

Sur le canevas, un cadre de sélection ne représente pas une bordure qui sera forcément visible sur le site. C’est un repère de l’éditeur. Si vous avez du mal à cliquer sur une boîte vide ou à distinguer deux boîtes imbriquées, utilisez Structure : sélectionner le bon niveau est souvent plus fiable que cliquer au hasard dans la page.

Mettre en forme sans confondre information et apparence

Le contenu répond à « que dit cet élément ? ». Le style répond à « comment est-il présenté ? ». Modifier le texte d’un titre doit changer les mots ; modifier sa taille doit conserver les mots et changer leur apparence. Sélectionnez un élément avant de toucher aux réglages et relisez son nom en haut du panneau.

Les éléments atomiques partagent un onglet Style. Vous y retrouvez notamment la mise en page, les dimensions, l’espacement, la typographie, l’arrière-plan et les bordures. Vous apprendrez progressivement leur rôle ; pour cette page, seuls quelques réglages suffisent.

1. Organiser le Bloc Div. Sélectionnez le contenant de la première section. Dans Style → Mise en page, utilisez une disposition Flex et la direction Colonne. Flex organise les enfants selon une direction commune. Une direction verticale place ici le titre, le paragraphe et le bouton de haut en bas. Dans Écarts, laissez les valeurs liées et saisissez 20 px dans l’écart de rangée. Une liste verticale utilise cet écart pour séparer ses enfants.
2. Créer une respiration autour du contenu. Dans Style → Espacement, dans Marge interne, laissez les quatre côtés liés et saisissez 32 px dans Haut. L’espacement intérieur, ou padding, sépare le contenu des bords de sa boîte. La marge extérieure, ou margin, sépare cette boîte des éléments voisins. N’ajoutez pas des paragraphes vides pour simuler ces espaces.
3. Régler le titre. Sélectionnez Titre, ouvrez Style → Typographie et réglez une taille de 40 px sur ordinateur. Vérifiez que le texte reste entier et que sa balise est toujours H1. La taille visuelle et le niveau du titre sont deux réglages distincts.
4. Régler le paragraphe. Sélectionnez Paragraph et choisissez une taille de 18 px. Conservez une couleur qui se lit clairement sur le fond. Un texte gris très clair peut être difficile à lire même si l’ensemble semble élégant.
5. Régler le bouton. Sélectionnez Bouton. Dans Style → Typographie → Couleur du texte, saisissez #ffffff. Le bleu de fond par défaut de cet exemple est #375EFB. Vérifiez que le libellé reste entier et lisible. Un bouton étiré est permis ; pour le ramener à la largeur de son libellé, utilisez Style → Mise en page → Enfant Flex → Auto alignement → Commencer. Contrôlez ensuite le texte et le lien dans l’onglet Général : le style n’a pas créé la destination du bouton.

Ces valeurs sont des points de départ pour l’exercice, pas des tailles obligatoires pour tous les sites. Vous pourrez les adapter en observant le résultat et en conservant une hiérarchie lisible. Pour un premier essai, vous pouvez travailler dans la classe locale, qui décrit le style propre à l’élément sélectionné.

Deux cartes, un style partagé

1. Créer la section visée par le bouton

Nous allons ajouter la section que vise notre bouton. Cliquez sur le + de la zone vide située sous la première section, puis choisissez Flexbox → Colonne de direction. Ce contenant est au même niveau que le premier Bloc Div.

2. Donner un identifiant à cette section

Dans Général → Réglages → ID, saisissez ateliers, sans #. Le bouton possède le lien #ateliers ; la zone visée possède l’ID ateliers.

3. Ajouter le titre de section

Dans cette Flexbox, ajoutez un Titre atomique, saisissez Nos ateliers et choisissez l’étiquette H2.

4. Créer le contenant des cartes

Sélectionnez à nouveau la Flexbox, puis ajoutez une seconde Flexbox à l’intérieur. Dans Style → Mise en page, choisissez Ligne pour son affichage sur ordinateur, avec un écart de 20 px. Cette boîte sera le parent des deux cartes.

5. Construire la carte biscuits

À l’intérieur de cette seconde Flexbox, ajoutez un Bloc Div. Dans ce Bloc Div, ajoutez un Titre H3 : Les biscuits du mercredi, puis un Paragraphe : Préparez une pâte simple et découvrez les repères de cuisson.

6. Construire la carte tarte

Ajoutez un second Bloc Div au même niveau que cette carte, dans la Flexbox des cartes. Placez-y un Titre H3 La tarte de saison et le paragraphe Étalez votre pâte et composez une garniture de saison.

7. Vérifier l’emplacement des éléments

Dans Structure, dépliez les niveaux avec Déplier tous les éléments. Vous devez lire : une Flexbox pour la section, son titre Nos ateliers et sa Flexbox des cartes ; sous cette dernière, deux Bloc Div ; sous chacun, un titre et un paragraphe. Si les cartes sont dans le premier Bloc Div d’accueil, déplacez-les avant de régler leur apparence.

Une classe rassemble des réglages d’apparence. Une classe réutilisable permet de partager ces réglages entre plusieurs éléments. Les textes des deux cartes restent différents, mais leurs fonds, leurs bordures et leurs espaces peuvent être communs. Si vous modifiez le fond dans leur classe partagée, les deux cartes changent. Si vous modifiez le texte de la première, le texte de la seconde ne change pas.

1. Sélectionnez la boîte de la première carte. Dans l’onglet Style, repérez le champ Classes, qui contient déjà local.
2. Saisissez demo-carte-atelier et choisissez la proposition Create « demo-carte-atelier » pour créer cette classe. Sélectionnez bien cette classe avant de définir ses réglages. Relisez son nom pour savoir ce que vous êtes en train de modifier.
3. Dans cette classe, ouvrez Arrière-plan → Couleur et saisissez #f4f6fa. Dans Espacement → Marge interne, saisissez 24 px avec les quatre côtés liés. Dans Bordure → Rayon, saisissez 8 px. Sur le canevas, la première carte doit immédiatement prendre cette apparence.
4. Sélectionnez la seconde boîte. Dans son champ Classes, recherchez demo-carte-atelier et choisissez la classe existante. Ne créez pas une seconde classe presque identique.
5. Revenez à la première carte, sélectionnez la classe partagée et changez légèrement son fond. Les deux cartes doivent changer ensemble. Modifiez ensuite seulement le titre de la seconde : ce texte doit rester propre à cette carte.

La vidéo reprend la classe demo-carte-atelier déjà appliquée aux deux cartes. Elle montre la modification de leur fond commun, après les réglages du titre, du paragraphe et du bouton. Créez la classe avec les étapes écrites, puis reproduisez ce contrôle sur vos cartes.

Avant cette vidéo : Ouvrez Elementor, votre page d’exercice et le panneau Structure. Préparez les deux cartes et la classe partagée demo-carte-atelier selon les étapes ci-dessus : la vidéo montre ensuite le contrôle de leur style commun.

Lire la transcription de la démonstration

Conservons les informations et travaillons leur présentation. Sélectionnez le Titre. Dans Style, ouvrez Typographie pour modifier son apparence.

Donnez au titre une taille de quarante pixels sur ordinateur. Les mots restent identiques.

Sélectionnez le Paragraphe et choisissez dix-huit pixels. Vous changez sa taille, pas le texte qu’il contient.

Sélectionnez le Bouton. Dans Typographie, choisissez une couleur de texte blanche. Le libellé doit se lire sur le fond bleu.

Sélectionnez la première carte, puis la classe demo-carte-atelier déjà préparée. Travaillez sur cette classe, plutôt que sur le style local de la seule carte.

Dans Arrière-plan, modifiez le fond clair. Les deux cartes utilisent cette classe : elles partagent donc la même présentation.

La seconde carte retrouve cette classe. Son texte reste différent : un style partagé ne remplace pas son contenu.

Si une carte ne suit pas la modification, comparez les noms des classes appliquées. Vérifiez aussi si un réglage local impose une autre valeur à cette carte. Ajouter plusieurs couches contradictoires peut cacher la cause du problème. Pour vous corriger, retirez uniquement le réglage local concerné et observez ce que la classe partagée fournit.

Une classe réutilisable peut concerner d’autres pages. Donnez donc un nom explicite à vos classes d’essai et vérifiez les éléments qui les utilisent avant de les modifier. Il existe aussi des variables, qui partagent une valeur comme une couleur ; cette notion prolonge celle des classes, mais elle n’est pas nécessaire pour réussir votre première page.

Vérifier sur téléphone et conserver votre travail

Une page réussie sur un grand écran peut devenir difficile à utiliser sur téléphone. Le mode responsive sert à adapter certains réglages à la largeur d’écran. Il vous permet de vérifier une même page dans plusieurs formats ; il ne crée pas plusieurs copies indépendantes de son contenu.

1. Passer au format téléphone

Dans la barre supérieure, choisissez Portrait mobile (jusqu’à 767px). Relisez la première section, les deux cartes et le bouton. Le titre doit rester complet, les éléments ne doivent pas dépasser sur le côté et le bouton doit être facile à repérer.

2. Réduire le titre sur mobile

Si le titre prend trop de place, sélectionnez-le et ouvrez Style → Typographie → Taille de police et saisissez 30 px pour le format mobile.

3. Empiler les cartes sur mobile

Si deux cartes sont côte à côte et deviennent trop étroites, sélectionnez leur contenant et ouvrez Style → Mise en page → Direction et choisissez Colonne pour ce format.

4. Réduire l’espace intérieur

Si l’espacement est excessif, réduisez le padding mobile du contenant, par exemple de 32 à 20 px.

Un réglage hérité vient d’un format plus large ou d’un style commun. Avant de modifier une valeur, vérifiez l’appareil sélectionné et la classe active. Après chaque correction, revenez à l’aperçu ordinateur pour voir si le grand écran conserve l’effet attendu.

Avant cette vidéo : Ouvrez votre page dans Elementor, avec son titre, son bouton et les deux cartes. Vous utiliserez les aperçus Ordinateur et Portrait mobile, puis l’aperçu WordPress pour tester le lien #ateliers.

Lire la transcription de la démonstration

La page doit rester lisible sur téléphone. Les icônes de la barre supérieure permettent de changer le format de prévisualisation.

Choisissez Portrait mobile. Sur le Titre, ouvrez Style, puis Typographie. Réglez trente pixels pour ce format et vérifiez que tous les mots restent visibles.

Sélectionnez le premier Bloc Div. Le cadre indique le contenant du titre, du paragraphe et du bouton. Vous adaptez sa présentation, sans modifier leurs textes.

Sélectionnez la Flexbox des deux cartes. La direction Colonne les place l’une sous l’autre sur téléphone.

Revenez sur Ordinateur et vérifiez la direction Ligne. Les cartes restent côte à côte. Ce sont deux présentations de la même page.

Enregistrez le brouillon de la page et attendez la fin de l’enregistrement. Ouvrez ensuite Prévisualiser les changements pour vérifier le résultat sans les cadres de l’éditeur.

Dans l’aperçu, cliquez sur Découvrir les ateliers. Le lien dièse ateliers rejoint la section Nos ateliers. Dans cette page courte, elle est déjà visible.

Pour reprendre plus tard, retrouvez le brouillon dans Pages, puis Toutes les pages, et choisissez Modifier avec Elementor. Vous conservez les mêmes contenus et leurs réglages.

5. Enregistrer le brouillon

Dans la barre du haut, ouvrez la flèche Enregistrer les options, à côté de Publier, puis choisissez Enregistrer le brouillon. Attendez la fin de l’indicateur d’enregistrement.

6. Ouvrir l’aperçu

Ouvrez ensuite l’Aperçu : vous regardez la page sans les cadres de sélection d’Elementor.

7. Tester le bouton de la page

Testez le bouton Découvrir les ateliers ; il doit rejoindre la section Nos ateliers. Si rien ne se passe, vérifiez le lien #ateliers et l’identifiant ateliers. Un aperçu dans l’éditeur ne remplace pas ce contrôle du lien.

La commande Publier rend une nouvelle page visible sur le site, tandis que l’enregistrement du brouillon conserve un travail préparatoire. Sur votre site de formation, publiez seulement lorsque vous avez terminé les contrôles. Pour reprendre plus tard, retrouvez la page par son titre dans Pages → Toutes les pages, puis utilisez Modifier avec Elementor. L’historique de l’éditeur permet de revenir sur une action ; enregistrez un état stable avant de faire un nouvel essai important.

Questions fréquentes

Quelle différence entre un contenant et son contenu ?

Le contenant organise les éléments : ordre, direction, écarts et espace intérieur. Le contenu porte l’information, par exemple les mots d’un titre ou la destination d’un bouton. Dans Structure, les contenus apparaissent comme les enfants de leur contenant.

Pourquoi le lien #ateliers ne fonctionne-t-il pas ?

Le bouton doit avoir #ateliers comme destination. La section visée doit porter l’identifiant ateliers, sans dièse. Enregistrez puis testez dans l’aperçu visiteur, car sélectionner le bouton dans l’éditeur n’active pas nécessairement son lien.

Pourquoi une modification change-t-elle mes deux cartes ?

Vous modifiez probablement leur classe partagée : elle fournit les mêmes réglages aux deux éléments. Le texte reste propre à chaque carte. Vérifiez le nom de la classe active avant de changer le style.

Faut-il créer une deuxième page pour le téléphone ?

Non. Vous adaptez certains réglages de la même page au format mobile : taille du titre, espaces ou direction de la Flexbox. Revenez ensuite à l’aperçu ordinateur pour vérifier les deux présentations.

Puis-je mélanger éléments atomiques et widgets classiques ?

Ils peuvent coexister, mais leurs réglages diffèrent. Pour reproduire ce tutoriel, choisissez les éléments de la famille atomique. Les classes décrites ici ne se confondent pas avec le simple champ Classes CSS d’un widget classique.

Pour continuer

Pour comprendre les parties communes du site et l’affichage automatique des actualités, suivez le tutoriel du constructeur de thème Elementor avec ACF. Le parcours WordPress permet de replacer ces manipulations dans la construction d’un site complet.

Documentation de référence

Pour approfondir les styles partagés et les différences de priorité, consultez la documentation officielle sur les classes dans Elementor, les variables et les styles par défaut des éléments atomiques.

À retenir

Construisez une page avec les éléments atomiques Elementor : contenants, titres, boutons, classes et mobile. Trois vidéos et un exercice guidé pour débuter.