Le constructeur de thème Elementor permet de créer les parties communes d’un site WordPress et les modèles qui affichent ses contenus. Vous construisez une présentation une fois, puis WordPress y affiche les informations de chaque article. Dans ce tutoriel, vous allez créer un petit espace d’actualités : en-tête, pied de page, modèle d’article et archive, avec deux champs ACF.
Le fil conducteur est un site fictif de pâtisserie, « Doux et moelleux ». Vous pouvez reproduire ses contenus pour apprendre, puis adapter les modèles à votre activité. Cinq démonstrations commentées et leurs transcriptions accompagnent les manipulations.
Ce qu’il faut préparer avant de commencer
Utilisez un site WordPress d’exercice, avec accès à son administration, Elementor, une offre Elementor Pro donnant accès au Theme Builder, et l’extension ACF active. Les champs Texte utilisés ici ne nécessitent pas ACF Pro. Prévoyez de savoir créer un article et une catégorie ; les étapes utiles sont reprises ci-dessous.
ACF est nécessaire pour reproduire les champs personnalisés de cet exercice. Il n’est pas obligatoire pour utiliser le constructeur de thème en général : un modèle peut déjà afficher le titre et le contenu natifs de WordPress. ACF ajoute ici le lieu et le public de chaque atelier.
Le Theme Builder règle les parties affichées par le thème actif et leurs conditions ; il ne produit pas un thème WordPress traditionnel à exporter en ZIP. Consultez la présentation officielle du Theme Builder pour son périmètre.
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.
Reconnaître le contenant et le contenu
Le contenant organise les informations : largeur, ordre des zones, emplacement du titre, couleurs et espaces. Le contenu apporte les informations à lire : le titre d’une actualité, son texte, son lieu ou le public auquel elle s’adresse. Une présentation peut rester identique tout en recevant des informations différentes.
Imaginez un journal. Sa présentation prévoit une place pour le titre et une autre pour le texte. Chaque nouvelle actualité apporte son titre et son texte. Écrire le même titre directement dans la présentation commune ferait apparaître ce titre sur toutes les actualités. Relier son emplacement au titre WordPress permet au contraire d’afficher celui de l’article consulté.
Dans Elementor, un conteneur est une boîte de mise en page qui contient d’autres éléments. Le mot contenant a un sens plus large : il peut aussi désigner tout le modèle d’un article. Le thème WordPress fournit la base d’affichage du site. Il reste actif lorsque vous utilisez le constructeur de thème Elementor Pro.
L’en-tête, nommé Header dans le constructeur, est la partie située en haut : identité du site, logo éventuel et navigation. Le pied de page, ou Footer, se trouve en bas : coordonnées, liens utiles, mentions et rappel de l’identité. Leur répétition aide le visiteur à se repérer. Ils ne contiennent pas le texte principal d’une actualité.
Un modèle Article individuel, ou Single Post, organise une actualité complète. Un modèle Archive présente une liste d’actualités. Cliquer sur un titre dans cette liste conduit à l’article individuel. Ce sont deux écrans différents, même s’ils utilisent les mêmes articles comme sources.
Une page de présentation, de contact ou d’accueil répond à un autre besoin : elle possède son propre contenu. Vous pourrez construire cette page avec notre tutoriel consacré aux éléments atomiques. Retenez dès maintenant le parcours d’un visiteur : l’en-tête permet de trouver les actualités, l’archive permet d’en choisir une, l’article permet de la lire, et le pied de page reste un repère en bas.
Préparer les contenus avant leur présentation
Commencez dans le tableau de bord de votre site de formation. Vous devez savoir créer un article, lui attribuer une catégorie et enregistrer vos changements. Les ressources Pages, Articles et le glossaire WordPress peuvent vous aider à revoir ces bases. Elementor, Elementor Pro avec accès au constructeur et ACF doivent être actifs.
1. Vérifier les extensions
Ouvrez Extensions → Extensions installées. Le lien Désactiver sous une extension indique qu’elle est active. Activer indique qu’elle est installée mais inactive. Les champs Texte utilisés ici existent dans la version gratuite d’ACF ; vous n’avez pas besoin d’ACF Pro pour cet exercice. Si ACF manque, utilisez son installation officielle, avec l’autorisation de la personne qui administre le site. Ne confondez pas ACF Pro et Elementor Pro : ils répondent à deux besoins différents.
2. Créer la catégorie
Dans Articles → Catégories, créez la catégorie Actualités démo, avec l’identifiant actualites-demo, puis cliquez sur Ajouter une catégorie. Cet identifiant sert à construire son adresse.
3. Conserver l’adresse de la liste
Dans la liste des catégories, le lien Voir permet d’ouvrir son archive. Conservez cette adresse : elle servira au lien de navigation de notre en-tête.
4. Préparer les deux actualités
Créez ensuite deux articles avec Articles → Ajouter un article. Le premier s’intitule DEMO – Un nouvel atelier biscuits. Son contenu est « Nous ouvrons un atelier pour découvrir la préparation d’une pâte et les repères d’une cuisson réussie. » Son extrait est « Découvrez notre nouvel atelier biscuits. »
5. Rédiger la seconde actualité
Le deuxième s’intitule DEMO – La tarte de saison arrive. Son contenu est « Un nouvel atelier permet de préparer une pâte à tarte et de disposer une garniture de saison. » Son extrait est « Un atelier pour apprendre les bases de la tarte. »
6. Publier les articles de démonstration
Dans les réglages Article de chacun, cochez uniquement la catégorie Actualités démo pour cet essai. Publiez les deux articles sur le site de formation. Des brouillons ne figurent pas dans une archive publique. Ces exemples ne sont pas des annonces à recopier sur votre site professionnel ; vous pourrez les adapter à deux actualités de votre activité.
Conservez la mise en page Par défaut pour les articles. Le contenu principal est rédigé dans l’éditeur WordPress. Vous allez dessiner sa présentation une fois dans Elementor, au lieu de refaire toute la fiche pour chaque actualité. Aucune modification des réglages Lecture n’est nécessaire pour consulter l’archive de notre catégorie.
Construire l’en-tête et sa navigation
Ouvrez Elementor → Theme Builder, aussi nommé Constructeur de thème. Le tableau présente Header, Footer, Single Post, Single Page et Archive. Repérez ces noms avant de créer un modèle : Header correspond au haut du site, et Single Post au corps d’une actualité. Un en-tête ne doit pas servir à écrire tout un article.
1. Créer le modèle d’en-tête
Dans la carte Header, cliquez sur Add New. Si une bibliothèque de compositions apparaît, fermez-la avec sa croix pour commencer avec une zone vide.
2. Nommer le modèle
Le modèle reçoit éventuellement un nom automatique. Dans la barre supérieure, ouvrez Réglages de Header, puis remplacez le champ Titre par DEMO – En-tête actualités.
3. Ajouter le contenant
Dans l’éditeur, le panneau permet d’ajouter des éléments, tandis que la zone centrale montre leur résultat. Utilisez le bouton + de la zone vide pour ajouter un conteneur. Choisissez Flexbox, puis Ligne de direction.
4. Disposer ses éléments
Dans Structure, sélectionnez cette Flexbox. Dans Style → Mise en page, vérifiez la direction Ligne et choisissez Espace entre pour séparer l’identité et la navigation.
5. Créer de l’espace autour des éléments
Dans Style → Espacement → Marge interne, laissez les quatre côtés liés et saisissez 24 px dans Haut : cet espace sépare les éléments du bord, il ne change pas leurs textes.
6. Ajouter le nom du site
Sélectionnez la Flexbox, ouvrez Ajouter un élément dans la barre du haut et ajoutez le Titre de la famille Éléments atomiques. Dans Général → Contenu, saisissez Doux et moelleux. Il s’agit ici du nom de notre site de démonstration.
7. Choisir le niveau du titre
Dans Général → Réglages → Étiquette, choisissez H2, pour conserver le H1 de l’actualité.
8. Ajouter le bouton de navigation
Sélectionnez à nouveau la Flexbox dans Structure et ajoutez un Bouton atomique. Dans Général, donnez-lui le texte Les actualités et collez dans Réglages → Lien, champ Link URL, l’adresse de l’archive Actualités démo obtenue dans WordPress. Le libellé du bouton dit au visiteur où il va ; le champ Lien détermine sa destination.
Un véritable site peut employer son logo et un menu WordPress avec plusieurs entrées. Dans cet essai, un lien suffit pour comprendre la navigation. Il doit ouvrir la liste d’actualités, plutôt qu’un article choisi au hasard. Pour le vérifier, comparez l’adresse du lien à celle de l’archive et testez-le côté visiteur après publication du modèle.
9. Régler les couleurs du bouton
Pour rendre le bouton lisible, sélectionnez-le, puis ouvrez Style → Typographie → Couleur du texte et saisissez #ffffff. Dans Arrière-plan, le bleu de cet exemple est #375EFB. Les couleurs ne changent ni son texte ni son lien.
10. Adapter l’en-tête au téléphone
Dans le mode Portrait mobile, sélectionnez la Flexbox et vérifiez Style → Mise en page → Direction : Colonne. Revenez sur Ordinateur pour conserver la direction Ligne.
La vidéo reprend un en-tête préparé et montre ses réglages, le lien, le mobile et les deux conditions. Les instructions ci-dessus vous permettent de le créer depuis la zone vide.
Avant cette vidéo : Ouvrez votre administration WordPress et Elementor → Theme Builder → Header. Gardez l’adresse de votre archive « Actualités démo » à portée de main. La vidéo commence dans l’éditeur du modèle ; les étapes écrites ci-dessus expliquent sa création.
Lire la transcription de la démonstration
Reprenons cet en-tête déjà préparé dans Elementor. Nous allons comprendre son contenant, vérifier ses contenus, puis choisir où il doit apparaître.
Ouvrez Structure dans la barre supérieure. La Flexbox est le contenant ; le titre et le bouton sont ses contenus.
Sélectionnez la Flexbox. Dans Style, ouvrez Mise en page. La direction Ligne place les éléments côte à côte. Espace entre les répartit vers les deux bords.
Dans Espacement, la marge interne de vingt-quatre pixels éloigne les contenus du bord. Elle change leur espace, pas leurs textes.
Sélectionnez le Titre dans Structure. Son texte est Doux et moelleux. L’étiquette H2 réserve le H1 au titre principal de l’actualité.
Sélectionnez le Bouton. Son texte annonce Les actualités. Le champ Link URL contient l’adresse de l’archive de notre catégorie.
Passez en Portrait mobile. Avec une direction Colonne, le titre et le bouton se placent l’un sous l’autre. Revenez ensuite sur Ordinateur.
Enregistrez, puis ouvrez les options de sauvegarde. Display Conditions permet de choisir où cet en-tête s’affiche.
La première inclusion vise les articles : Singular, puis In Catégorie. Sélectionnez Actualités démo sur cette ligne.
La seconde inclusion vise l’archive : Archives, puis Catégories. Sélectionnez la même catégorie. Vérifiez les deux noms avant de fermer.
Sur une actualité, l’en-tête donne accès à la liste. Le nom du site reste distinct du titre de l’article.
11. Choisir le périmètre du modèle
Cliquez sur Publier pour ouvrir les conditions. Une condition indique où Elementor doit utiliser ce modèle. Sur un site que vous créez entièrement, Site entier peut convenir à l’en-tête commun. Pour notre démonstration, choisissez des inclusions limitées aux articles de la catégorie Actualités démo et à l’archive de cette catégorie.
12. Inclure les actualités
Sur la première ligne, choisissez Include → Singular → In Catégorie, recherchez Actualités démo et sélectionnez le résultat Catégories: Actualités démo.
13. Inclure aussi leur archive
Cliquez sur Add condition. Sur la seconde ligne, choisissez Include → Archives → Catégories, puis recherchez et sélectionnez Actualités démo.
14. Enregistrer les deux conditions
Attendez que le nom de la catégorie remplace All sur chaque ligne, puis cliquez sur Save & Close.
15. Retrouver les conditions plus tard
Pour retrouver ces règles sur un modèle déjà publié, utilisez la flèche Enregistrer les options → Display Conditions.
Le choix de catégorie pour les articles vise les actualités qui appartiennent à cette catégorie ; le choix de l’archive vise la liste qui les regroupe. L’une de ces règles ne remplace pas l’autre. Si un conflit est signalé avec un en-tête existant, annulez la publication et comparez les conditions. Ne modifiez pas la portée d’un modèle existant pour faire disparaître l’avertissement sans en comprendre la conséquence.
Ajouter le pied de page commun
1. Créer le modèle de pied de page
Retournez dans Elementor → Theme Builder. Cette fois, cliquez sur Add New dans la carte Footer. Fermez la bibliothèque si nécessaire.
2. Ajouter son contenant
Dans la zone vide, cliquez sur + → Flexbox → Colonne de direction. Le pied de page doit rester lisible sans concurrencer le texte principal de l’actualité.
3. Ajouter l’identité et le lien de retour
Ajoutez un titre ou un texte Doux et moelleux, puis le paragraphe Des ateliers pour apprendre les gestes de la pâtisserie. Ajoutez un lien Retour aux actualités vers la même archive.
4. Régler l’espace intérieur
Donnez au conteneur un espacement intérieur de 24 px. Vous pouvez choisir un fond légèrement différent du contenu central pour que le visiteur reconnaisse la fin de la page.
Sur votre propre site, les coordonnées et les liens utiles doivent correspondre à votre activité. Ne placez pas une adresse électronique inventée dans la démonstration. Une mention légale est un contenu à préparer, pas un texte décoratif qui devient exact parce qu’il se trouve dans un pied de page.
5. Nommer et publier le pied de page
Dans Réglages de Footer → Titre, nommez le modèle DEMO – Pied de page actualités. Publiez-le avec le même périmètre de démonstration que l’en-tête : les articles de la catégorie Actualités démo et l’archive de cette catégorie. L’en-tête et le pied de page encadreront ainsi la liste et les articles individuels.
6. Régler le contraste du bouton
Sélectionnez le bouton du pied de page. Dans Style → Typographie → Couleur du texte, saisissez #ffffff. Dans Style → Arrière-plan → Couleur, saisissez #2447d6.
7. Adapter sa largeur au texte
Dans Mise en page → Enfant Flex → Auto alignement, choisissez Commencer pour que le bouton ne s’étire pas sur toute la ligne. Ces derniers réglages sont montrés dans la seconde partie de la démonstration.
Avant cette vidéo : Ouvrez Elementor → Theme Builder → Footer sur votre site d’exercice. Préparez le nom de votre site et l’adresse de l’archive de catégorie : le bouton du pied de page devra y conduire.
Lire la transcription de la démonstration
Construisons le pied de page commun aux actualités et à leur archive. Fermez la bibliothèque avec sa croix pour partir d’un modèle vide.
Dans la zone vide, cliquez sur le plus. Choisissez Flexbox, puis une structure verticale. Elle accueillera les contenus du pied de page.
Dans Style, ouvrez Espacement. Réglez la marge interne à vingt-quatre pixels. Les quatre côtés liés gardent le même espace.
Ajoutez un Titre et écrivez Doux et moelleux. Le texte du panneau apparaît dans le canevas.
Ajoutez un Paragraphe de présentation : Des ateliers pour apprendre les gestes de la pâtisserie.
Ajoutez le bouton Retour aux actualités avec l’adresse de l’archive dans son lien. Dans Réglages de Footer, nommez le modèle DEMO – Pied de page actualités.
Publiez le modèle. Dans la fenêtre des conditions, ajoutez une inclusion pour définir où ce pied de page apparaît.
Choisissez Singular, puis In Catégorie, et sélectionnez Actualités démo. Cette première règle concerne le bas des articles de notre catégorie.
Ajoutez une seconde inclusion. Choisissez Archives, puis Catégories et Actualités démo. Elle concerne la liste des actualités. Vérifiez que le nom de la catégorie est bien sélectionné sur les deux lignes.
Enregistrez et fermez. Le pied de page apparaît dans la liste et sous une actualité. Le bouton est présent ; améliorons maintenant sa lisibilité.
Revenons dans l’éditeur et sélectionnons le Bouton. Vérifiez son libellé et son lien, puis ouvrez Style pour travailler son apparence.
Dans Typographie, choisissez un texte blanc. Dans Arrière-plan, choisissez le bleu soutenu affiché à l’écran. Vérifiez que le libellé se lit sur ce fond.
Dans Mise en page, ouvrez Auto alignement et choisissez Commencer. Le bouton garde une largeur adaptée à son texte, au lieu de prendre toute la ligne.
Enregistrez la modification. Ouvrez ensuite une actualité côté visiteur pour contrôler le résultat.
Cliquez sur Retour aux actualités. Le lien doit vous ramener à la liste. Vous y retrouvez le même pied de page et les deux actualités.
Ouvrez un article côté visiteur pour reconnaître ces deux parties. Le corps peut encore utiliser la présentation du thème : nous n’avons pas construit son modèle. Cette étape permet de vérifier les liens et le périmètre avant d’ajouter d’autres réglages. Sur une page qui ne fait pas partie de l’essai, nos deux modèles ne doivent pas apparaître.
Ajouter les informations d’une actualité avec ACF
ACF, Advanced Custom Fields, ajoute des cases de saisie à WordPress. Le titre et le contenu existent déjà : nous ne les recréons pas. Nous ajoutons deux informations courtes, Lieu et Public, pour que la personne qui publie une actualité sache où les renseigner.
ACF fournit la structure de saisie et enregistre les valeurs. Elementor organisera leur affichage. Un groupe de champs rassemble les cases et indique sur quels écrans elles apparaissent. Les valeurs sont ensuite enregistrées dans chaque article. Créer une case Lieu ne remplit pas automatiquement tous les lieux.
Un champ possède un libellé, visible pour la personne qui saisit, un nom, qui identifie la donnée, et un type, qui précise la forme de saisie. Nous utiliserons Texte pour écrire des informations courtes sans calcul. Une image ou un montant à calculer demanderaient un autre type. Le nom doit rester stable après la liaison au modèle.
1. Créer le groupe ACF
Ouvrez ACF → Groupes de champs → Ajouter. Nommez le groupe DEMO – Informations actualité. Si un premier champ vide est déjà ouvert, remplissez-le ; sinon cliquez sur Ajouter un champ.
2. Créer le champ Lieu
Sélectionnez Texte, donnez-lui le libellé Lieu et vérifiez que son nom est demo_lieu_actualite.
3. Créer le champ Public
Ajoutez un second champ Texte, libellé Public, avec le nom demo_public_actualite. Si ACF a proposé automatiquement un autre nom, remplacez-le.
4. Choisir les articles qui recevront les champs
Dans Réglages → Règles de localisation, choisissez successivement Catégorie de publication → est égal à → Actualités démo, puis cliquez sur Enregistrer les modifications. Cette règle fait apparaître les cases sur les articles de la catégorie de démonstration. Elle ne décide pas de la présentation publique. Vérifiez le groupe dans la liste ACF, puis retournez à l’édition du premier article.
5. Renseigner l’actualité biscuits
Dans l’article biscuits, recherchez le panneau DEMO – Informations actualité. Si les boîtes méta sont repliées en bas de l’éditeur, ouvrez leur flèche pour voir les cases. Saisissez Atelier du centre dans Lieu et Débutants dans Public, puis enregistrez.
6. Renseigner l’actualité tarte
Dans l’article tarte, saisissez Cuisine pédagogique et Adultes, puis enregistrez.
7. Vérifier les valeurs enregistrées
Rechargez chaque écran pour vérifier que les valeurs sont conservées.
La vidéo reprend un groupe déjà créé : elle montre où retrouver ses champs, lire leur règle et renseigner un article. Suivez les étapes écrites ci-dessus pour créer votre propre groupe.
Avant cette vidéo : Ouvrez WordPress avec ACF actif et les deux articles de démonstration dans la catégorie « Actualités démo ». Vous utiliserez le menu ACF pour créer les champs, puis Articles pour renseigner leurs valeurs.
Lire la transcription de la démonstration
Reprenons le groupe de champs déjà créé dans ACF, pour Advanced Custom Fields. Il ajoute des cases de saisie à WordPress. Notre groupe contient deux champs Texte : Lieu et Public.
Ouvrez Lieu. Le libellé aide la personne qui remplit l’article. Le nom du champ identifie la donnée pour le modèle. Conservez le nom affiché : changer cette clé peut rompre le lien avec Elementor.
Descendez vers les règles de localisation. Catégorie de publication, est égal à, Actualités démo : cette règle fait apparaître les cases sur les articles de cette catégorie. Elle décide où saisir les informations. L’affichage pour les visiteurs sera réglé dans le modèle Elementor.
Le champ Public fonctionne de la même façon. Son propre nom le distingue du champ Lieu. Les deux données restent séparées.
Vérifiez de nouveau la catégorie choisie. Si les cases n’apparaissent pas dans un article, contrôlez cette règle et la catégorie de l’article.
Retournez dans Articles et ouvrez l’actualité sur les biscuits. Retrouvez le panneau DEMO – Informations actualité sous l’éditeur.
Lieu contient Atelier du centre et Public contient Débutants. Enregistrez l’article pour conserver ces valeurs, puis ouvrez-le côté visiteur.
Les deux informations apparaissent dans l’actualité. Le modèle les affiche grâce aux clés ACF. Si une valeur manque, vérifiez la saisie enregistrée et le champ choisi dans le modèle.
Si les cases manquent, vérifiez le groupe actif, sa règle et la catégorie réellement cochée dans l’article. Si elles sont présentes mais vides après rechargement, vérifiez l’enregistrement de l’article. ACF est nécessaire à l’exercice de cette leçon ; le constructeur de thème peut aussi fonctionner avec les seules données natives de WordPress.
Construire le modèle d’une actualité complète
1. Créer le modèle d’actualité
Dans le constructeur, choisissez maintenant Single Post, Article individuel, puis Add New. Fermez la bibliothèque pour commencer simplement. Nommez ce modèle DEMO – Modèle actualité. Vous dessinez le corps d’une actualité, sans recopier l’en-tête et le pied de page déjà construits.
2. Ajouter le titre dynamique
Ajoutez un conteneur vertical avec 32 px d’espacement intérieur. Recherchez Post Title, ou Titre de la publication, dans le panneau des éléments, et placez-le en haut. Utilisez le niveau H1 : il désigne le titre principal de l’actualité.
3. Ajouter le texte de l’article
Ajoutez ensuite Post Content, Contenu de la publication. Il affichera le texte rédigé dans WordPress.
Ces éléments sont dynamiques : ils récupèrent une information de l’article consulté. Ils n’inventent pas le contenu. Pour observer le résultat, ouvrez les réglages du modèle puis la section de prévisualisation, choisissez le type Article et sélectionnez DEMO – Un nouvel atelier biscuits. Appliquez la prévisualisation. Vous devez reconnaître son titre et son paragraphe.
4. Choisir le Titre classique pour ACF
Pour le lieu, ajoutez le widget Titre classique, celui de la famille Basique. Dans cette version, il ouvre les onglets Contenu, Style et Avancé ; le Titre atomique ouvre Général, Style et Interactions. Nous utilisons ici le widget classique, dont la liaison ACF est disponible dans le champ Titre.
5. Relier le titre au champ Lieu
À côté du champ qui reçoit le texte, cliquez sur l’icône des balises dynamiques, sélectionnez ACF Field, Champ ACF, puis cliquez sur la balise pour ouvrir ses réglages.
6. Sélectionner la clé ACF
Dans Key, Clé, choisissez Lieu, correspondant à demo_lieu_actualite.
7. Ajouter le libellé devant la valeur
Ajoutez l’intitulé fixe Lieu : devant la valeur, dans Avancé → Avant, à l’intérieur de la fenêtre de réglage de la balise ACF. Conservez une espace après les deux-points.
8. Afficher cette information en paragraphe
Fermez cette petite fenêtre, puis choisissez p dans Contenu → Balise HTML : cette information est un paragraphe, pas un nouveau titre principal.
9. Afficher aussi le champ Public
Répétez la liaison pour Public, correspondant à demo_public_actualite, avec l’intitulé Public :. Une valeur seule comme « Adultes » serait moins compréhensible sans son intitulé. Les mots Lieu et Public restent fixes ; leurs valeurs proviennent de l’article. Si aucune valeur n’apparaît, vérifiez que la prévisualisation vise un article de démonstration dont les champs sont remplis.
Avant cette vidéo : Ouvrez Elementor Pro → Theme Builder → Single Post. Vérifiez que les champs ACF « Lieu » et « Public » existent et sont renseignés dans vos deux articles. Choisissez l’un d’eux pour la prévisualisation.
Lire la transcription de la démonstration
Construisons le corps d’une actualité. L’en-tête et le pied de page restent séparés. Ici, le modèle affichera les informations de l’article consulté.
Ajoutez une Flexbox verticale. Ce contenant accueillera le titre, le texte et les informations complémentaires de l’article.
Ajoutez Post Title. Il récupère le titre WordPress de l’article choisi pour l’aperçu.
Ajoutez Post Content. Il récupère le texte rédigé dans WordPress. Le modèle organise ces données sans les recopier.
Pour le lieu, ajoutez le Titre classique de la famille Basique. Dans son champ Titre, ouvrez les balises dynamiques et choisissez ACF Field.
Ouvrez les réglages de cette balise. Dans Key, choisissez Lieu. Dans Avancé, ajoutez Lieu suivi de deux-points dans Avant. Le préfixe indique au lecteur ce que représente la valeur.
Recommencez pour Public, avec sa propre clé et son intitulé. Ces deux informations utilisent deux champs différents.
Publiez le modèle. Son inclusion vise les articles de la catégorie Actualités démo. Sélectionnez cette catégorie : le modèle doit s’appliquer à nos actualités, pas à toutes les pages du site.
Enregistrez la condition. L’aperçu des biscuits montre le titre, le texte, le lieu et le public provenant de cet article.
Sur l’actualité de la tarte, les données changent. Le contenant reste commun ; chaque article fournit son contenu.
Publiez le modèle. Dans les conditions de Single Post, gardez Include, choisissez In Catégorie, puis recherchez et sélectionnez Catégories: Actualités démo. Le type Single Post vise déjà un article individuel ; vous n’avez pas à chercher le sélecteur Singular utilisé pour l’en-tête. Vérifiez que vous n’avez sélectionné ni toutes les pages ni tous les articles du site. Enregistrez les conditions et ouvrez les deux articles côté visiteur. Ils doivent utiliser la même présentation tout en affichant leurs propres titres, textes, lieux et publics.
Un même lieu sur les deux articles peut révéler un texte fixe saisi dans le modèle. Une valeur absente conduit d’abord à sa saisie dans l’article, puis à la clé ACF choisie. Si le texte principal manque, recherchez l’élément Contenu de la publication. Si un article extérieur à notre catégorie utilise ce modèle, vérifiez sa condition.
Construire l’archive qui mène aux actualités
Une archive regroupe les articles qui répondent à un critère : catégorie, date ou auteur, par exemple. Elle n’est pas un dossier de fichiers anciens. L’archive Actualités démo doit présenter nos deux articles publiés. Elle permettra de passer de la liste à la lecture d’une actualité.
1. Créer le modèle d’archive
Dans Elementor → Theme Builder → Archive, cliquez sur Add New. Nommez le modèle DEMO – Archives actualités.
2. Ajouter son titre dynamique
Ajoutez un conteneur vertical, puis Archive Title, Titre de l’archive, au niveau H1. Cet élément reprend le titre de la catégorie consultée, au lieu d’afficher un titre d’article.
3. Créer la liste des actualités
Ajoutez Archive Posts, Articles de l’archive. Dans son onglet Contenu → Layout, gardez Skin: Classic et choisissez Columns: 2 sur ordinateur.
4. Adapter le nombre de colonnes sur mobile
Cliquez ensuite sur Portrait mobile dans la barre supérieure et choisissez Columns: 1, puis revenez sur Ordinateur.
5. Choisir les informations affichées
Affichez le titre et l’extrait de chaque article, ainsi qu’un lien pour le lire. Dans cette démonstration sans image mise en avant, choisissez Image Position: None pour éviter une zone vide.
6. Régler les titres et les métadonnées
Gardez Title HTML Tag: H2 et Excerpt: Show. Dans Meta Data, retirez Date et Comments avec leurs petites croix.
7. Nommer le lien de lecture
Dans Read More Text, saisissez Lire l’actualité. Le modèle peut évoluer plus tard avec des photographies adaptées.
L’élément d’archive utilise les articles de l’archive en cours. Ne le remplacez pas par deux titres et deux liens saisis à la main : une troisième actualité devrait alors vous obliger à modifier le modèle. Si vous utilisez un élément de liste qui propose une source de requête, la requête actuelle signifie « les contenus correspondant à l’archive consultée ». Une source Tous les articles pourrait afficher des contenus d’autres catégories.
8. Prévisualiser la liste
Dans Réglages de Archive → Preview Settings, choisissez le type Catégories archive, puis Apply & Preview. Si la liste ne propose pas le choix d’une catégorie, ne cherchez pas un champ caché : le contrôle décisif sera l’adresse de l’archive obtenue dans Articles → Catégories → Voir. Vous devez voir les deux titres et leurs deux extraits.
9. Publier sur la bonne archive
Publiez le modèle ; dans ses conditions, choisissez Include → Catégories, recherchez et sélectionnez Actualités démo, puis Save & Close. Le type Archive vise déjà une archive. Le titre peut porter le préfixe Category dans l’interface de démonstration ; l’information dynamique reste le nom de la catégorie. Cette condition concerne la liste ; elle ne remplace pas celle du modèle Article individuel.
Avant cette vidéo : Ouvrez Elementor Pro → Theme Builder → Archive. Vos deux articles doivent être publiés sur votre site d’exercice dans « Actualités démo ». Gardez l’adresse de cette archive pour tester les liens ensuite.
Lire la transcription de la démonstration
L’archive est la liste des actualités d’une catégorie. Elle permet de parcourir les titres et les extraits avant d’ouvrir un article complet.
Ajoutez une Flexbox verticale pour accueillir le titre de la liste et les articles.
Ajoutez Archive Title. Il reprend le nom de la catégorie consultée. Ici, l’aperçu montre Actualités démo.
Ajoutez Archive Posts. Dans Layout, choisissez Classic et deux colonnes sur ordinateur. Sans image dans cet exercice, choisissez Image Position, None. Gardez les titres en H2 et les extraits.
Retirez Date et Comments des métadonnées. Remplacez Read More Text par Lire l’actualité. Sur Portrait mobile, choisissez une colonne.
Publiez le modèle. Sa condition doit viser notre archive de catégorie, au lieu de toutes les archives du site.
Choisissez Catégories et sélectionnez Actualités démo. Vérifiez que le nom est réellement sélectionné. Cette règle concerne la liste ; le modèle du corps d’un article est réglé séparément.
Enregistrez. Dans l’aperçu, les deux titres et leurs extraits restent visibles. Les titres et les liens Lire l’actualité servent à ouvrir les articles correspondants.
Côté visiteur, la liste retrouve l’en-tête et le pied de page. Une nouvelle actualité de cette catégorie pourra rejoindre la liste automatiquement.
Ouvrez l’adresse de l’archive conservée depuis Articles → Catégories. Cliquez sur le premier titre : vous devez arriver sur l’article biscuits avec son lieu et son public. Utilisez Retour aux actualités dans le pied de page pour retrouver la liste. Répétez avec l’article tarte. Ce trajet vérifie à la fois les liens, le modèle de liste, le modèle individuel et les parties communes.
Si la liste est vide, vérifiez les articles publiés et leur catégorie avant de modifier le modèle. Si le mauvais contenu apparaît, vérifiez la prévisualisation et la source de liste. Si les cartes ne conduisent pas aux articles, vérifiez leurs liens. Une archive de catégorie existe sans créer une page WordPress du même nom ; les deux objets ne doivent pas être confondus.
Vérifier la portée et retrouver où modifier
Comparez maintenant quatre endroits : l’archive, les deux actualités et une page extérieure à l’essai. L’en-tête et le pied de page doivent rester communs à notre démonstration, l’archive doit contenir les bons articles, et chaque actualité doit recevoir ses propres données. La page extérieure sert à vérifier que les conditions n’ont pas débordé du périmètre choisi.
Dans WordPress, changez uniquement le lieu de l’article biscuits en Atelier du jardin, puis enregistrez. Seul cet article doit afficher le nouveau lieu. Dans le modèle Article individuel, changez ensuite l’espacement intérieur de 32 à 40 px et enregistrez. Les deux articles doivent adopter ce changement de présentation. Remettez les valeurs initiales si vous voulez garder l’exemple.
Pour modifier les informations, ouvrez l’article WordPress. Pour modifier les cases de saisie, ouvrez son groupe ACF. Pour modifier la présentation commune, ouvrez le bon modèle Elementor. Pour modifier le périmètre de cette présentation, ouvrez ses conditions. Ces quatre endroits expliquent la plupart des hésitations de débutant.
Notez les noms des quatre modèles, du groupe ACF et de la catégorie. Vous pourrez les retrouver dans le constructeur sans ouvrir plusieurs brouillons au hasard. Pour retirer un modèle de l’essai, retirez ses inclusions ou replacez-le en brouillon, puis vérifiez le résultat. Supprimer des champs ACF pour masquer un pied de page ne correspondrait pas au bon rôle.
Pour poursuivre, suivez le tutoriel de création d’une page avec les éléments atomiques. Vous y construirez le contenu d’une page et réglerez son contenant. L’en-tête et le pied de page restent des parties distinctes, dont les conditions déterminent les pages qu’ils encadrent.
Questions fréquentes
Faut-il Elementor Pro pour suivre ce tutoriel ?
Oui : les modèles Theme Builder et les liaisons dynamiques présentés ici utilisent Elementor Pro. Vérifiez les fonctionnalités incluses dans votre offre avant de commencer.
ACF est-il obligatoire pour créer un en-tête ou un pied de page ?
Non. Il sert ici à ajouter les informations Lieu et Public aux actualités. L’en-tête, le pied de page et les données natives des articles peuvent fonctionner sans ces champs.
Où modifier le texte d’une actualité ?
Ouvrez l’article dans WordPress pour son titre, son texte et ses valeurs ACF. Ouvrez le modèle Single Post dans Elementor pour changer la présentation commune. Les conditions du modèle déterminent les contenus auxquels cette présentation s’applique.
Pourquoi mon modèle ne s’affiche-t-il pas ?
Contrôlez son état publié, ses conditions et la catégorie réelle de l’article ou de l’archive consultée. Vérifiez aussi qu’un autre modèle ne vise pas le même périmètre. Pour les champs vides, contrôlez la valeur enregistrée et la clé ACF sélectionnée.
Pourquoi utiliser un widget classique pour ACF dans la vidéo ?
La démonstration emploie le widget qui permet cette liaison dans l’interface filmée. Les fonctions des éléments atomiques évoluent selon la version. Utilisez un élément proposant la balise dynamique ACF Field dans votre installation, puis sélectionnez la bonne clé ; ne recopiez pas une valeur fixe à sa place.
Pour continuer
Passez au tutoriel pour construire une page avec les éléments atomiques. Pour revoir les bases de l’administration et la logique des contenus, retrouvez le parcours WordPress et le glossaire WordPress.
Documentation de référence
Les manipulations ci-dessus suivent notre démonstration. Pour vérifier les fonctions et les liaisons disponibles dans votre version, consultez l’intégration officielle ACF dans Elementor et le contenu dynamique dans Elementor.
À retenir
Créez un en-tête, un pied de page, un modèle d’article et une archive avec Elementor Pro et ACF. Tutoriel illustré, cinq vidéos et exercice guidé.
