Constructeur de thème

Créer la page blog et les archives avec Elementor

La liste de vos articles, vos pages de catégories et vos résultats de recherche, à votre design : le guide complet pour débutants.

Par Gregory, fondateur d’Expertor4 min de lectureMis à jour le

Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).

Illustration : Créer la page blog et les archives avec Elementor

Vous avez écrit vos premiers articles de blog, mais la page qui les liste a l’air de sortir d’un autre site : la présentation de votre thème, pas la vôtre. C’est normal : cette page n’est pas une page comme les autres, c’est une archive. Avec Elementor Pro, vous allez lui donner exactement le design que vous voulez, une fois pour toutes.

C’est quoi, une « archive » ?

Dans WordPress, une archive est une page qui liste des articles automatiquement. Il en existe plusieurs sortes :

  • la page blog (tous vos articles, du plus récent au plus ancien) ;
  • les pages de catégories (tous les articles de la catégorie « Recettes », par exemple) ;
  • les pages d’étiquettes, d’auteurs et de dates ;
  • la page de résultats de recherche.

Vous ne créez pas ces pages une par une : WordPress les génère tout seul. Ce que vous créez avec Elementor, c’est leur modèle, c’est-à-dire leur mise en page.

Avant de commencer

  • Elementor Pro (constructeur de thème).
  • Au moins trois ou quatre articles publiés, avec une image à la une et une catégorie, pour juger du résultat.

Étape 1 : désigner la page blog dans WordPress

C’est WordPress, pas Elementor, qui décide quelle page affiche vos articles. Cette étape est souvent oubliée :

  1. Dans l’administration, Pages › Ajouter. Créez une page nommée Blog (ou Actualités, Conseils…), laissez-la vide et publiez-la.
  2. Allez dans Réglages › Lecture.
  3. Dans La page d’accueil affiche, choisissez « Une page statique » si ce n’est pas déjà fait, puis sélectionnez votre page Blog dans Page des articles.
  4. Cliquez sur Enregistrer les modifications.

Ne construisez pas la page Blog avec Elementor. Elle doit rester vide : son contenu sera remplacé par le modèle d’archive. Et vos articles eux-mêmes peuvent très bien être écrits avec l’éditeur normal de WordPress.

Étape 2 : créer le modèle d’archive

  1. Ouvrez Elementor › Constructeur de thème.
  2. Cliquez sur le + à côté de Archive.
  3. Choisissez un modèle tout prêt dans la bibliothèque (Insert), ou fermez-la pour partir de zéro.
  4. Dans l’éditeur, cliquez sur l’icône d’engrenage en bas à gauche, puis ouvrez Preview Settings : choisissez une archive à prévisualiser (une de vos catégories, par exemple) et appliquez. Vous travaillerez ainsi avec vos vrais articles sous les yeux.

Étape 3 : construire la mise en page

Une page blog classique se compose de trois parties :

  1. Un titre : widget Archive Title, qui affiche automatiquement « Blog » sur la page blog et le nom de la catégorie sur une page de catégorie. Ajoutez en dessous la description de la catégorie si vous en avez écrit.
  2. La liste des articles : widget Archive Posts. C’est le cœur de la page : sans lui, aucun article ne s’affiche. Réglez le nombre de colonnes (3 sur ordinateur, 1 sur mobile), ce qui s’affiche sur chaque carte (image, titre, extrait, date, lien « Lire la suite ») et la pagination en bas.
  3. Éventuellement, une barre latérale : une colonne avec un champ de recherche, la liste des catégories, un encadré « À propos » ou un appel à l’action.

Pour des cartes d’articles entièrement libres (badge de catégorie sur l’image, temps de lecture, design très personnalisé), remplacez Archive Posts par un Loop Grid.

Étape 4 : publier au bon endroit

  1. Cliquez sur Publish.
  2. Une fenêtre demande où appliquer le modèle : cliquez sur Add Condition.
  3. Choisissez Include › All Archives pour l’appliquer à toutes les archives (page blog, catégories, auteurs…). Vous pouvez aussi cibler une seule catégorie si vous voulez un design spécial pour elle.
  4. Cliquez sur Save & Close.

Les conditions sont expliquées en détail dans les conditions d’affichage d’Elementor.

Étape 5 : la page de résultats de recherche

Elle mérite son propre modèle, pour soigner le cas où rien n’est trouvé :

  1. Dans le constructeur de thème, cliquez sur Search Results, puis Add New.
  2. Construisez la page avec Archive Title et Archive Posts, comme ci-dessus.
  3. Pour la prévisualiser : engrenage › Preview Settings, tapez dans Search Term un mot présent dans vos articles, puis Apply & Preview.
  4. Testez ensuite un mot absent du site : Archive Posts affiche alors un message « rien trouvé » que vous pouvez personnaliser. Proposez une nouvelle recherche ou des liens vers vos catégories.
  5. Publiez avec la condition Include › Search Results.

Les erreurs fréquentes

  • La page Blog reste vide ou affiche autre chose : vérifiez le réglage Réglages › Lecture et la condition du modèle (All Archives).
  • La barre latérale du thème a disparu : c’est normal, les modèles d’archive Elementor remplacent toute la mise en page du thème. Recréez une colonne latérale dans votre modèle.
  • Des articles sans image laissent un trou : ajoutez une image à la une à chaque article, ou une image par défaut dans les réglages du widget.
  • Trop d’articles par page : 9 ou 12 articles avec une pagination, c’est plus agréable et plus rapide qu’une page interminable.

Questions fréquentes

Et mes types de contenu personnalisés (réalisations, événements) ?

Ils peuvent avoir leur propre modèle d’archive. Vérifiez que l’option Has Archive est activée dans l’extension qui crée ces contenus (Custom Post Type UI, par exemple), sinon Elementor ne peut pas leur appliquer de modèle.

Quelle différence entre Archive Posts et Posts ?

Archive Posts affiche automatiquement les articles de l’archive consultée (la bonne catégorie, la bonne recherche) : c’est celui qu’il faut dans un modèle d’archive. Posts affiche une sélection que vous choisissez vous-même, sur une page normale (« nos 3 derniers articles » sur l’accueil, par exemple).

Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.