Personnalisez votre page de résultats de recherche avec Divi
La page par défaut qui affiche les résultats de recherche n’est pas particulièrement sympa. Voici comment la rendre plus avenante, et plus pratique pour l’utilisateur !
A la découverte du theme builder
Nous allons utiliser la fonctionnalité apportée fin 2019 par l’équipe de Elegant Themes au célèbre thème DIVI, à savoir le Theme Builder. Cette fonctionnalité géniale vous permet de créer des templates, des patrons de pages, pour tous les types de contenus : catégories, étiquettes, pages de résultats de recherche, article ou projet, etc… mais aussi et surtout pour un seul type de catégorie, un type d’étiquette ou un seul article !
Il est ainsi possible de créer des modèles pour :
les Pages : Toutes les Pages – Page d’accueil – Pages spécifiques – Enfants de Pages spécifiques
les Articles : Tous les Articles – Blog – Articles de Catégories spécifiques – Articles d’Étiquettes spécifiques – Articles spécifiques
les Pages d’Archive :Pages Catégorie De Projet spécifiques – Pages Catégorie spécifiques – Pages Étiquettes de Projet spécifiques – Pages Étiquettes spécifiques – Pages d’Auteur selon son rôle – Toutes les Pages Catégories De Projet – Toutes les PagesCatégorie – Toutes les Pages d’Étiquettes de Projet – Toutes les pages d’archives – Toutes les pages de date – Toutes les pages de l’auteur – Toutes Pages d’Étiquettes
les Projets : Tous les Projets – Page d’Archive de Projets – Projets dans des Catégories De Projets spécifiques – Projets avec des Étiquettes de Projet spécifiques – Projets spécifiques
les Autres : Page Résultats de recherche – Page 404
Le pas à pas
01Rendez vous dans votre Tableau de Bord > Divi > Theme Builder
02Créez un nouveau template en cliquant sur le bloc Ajouter un nouveau modèle
03Dans la fenêtre, sélectionnez Résultats de recherche (tout en bas de la liste de modèles)
04Validez en cliquant sur le bouton Créer un modèle
05Cliquez sur la ligne du milieu : Ajouter un corps personnalisé puis sur :
Construire un corps personnalisé (si vous souhaitez partir d’une page blanche)
Ajouter de la bibliothèque (si vous avez un modèle ou si vous souhaitez parcourir les modèles de DIVI)
06Quels contenus proposer ? Pour rendre cette page belle et pratique, voici mes conseils :
Insérez un titre sur votre page : insérer un module Divi Texte et réglez-le en niveau Header 1
Rappelez le terme qui vient d’être recherché. Le Theme Builder vous permet de l’ajouter de façon dynamique : Insérez un nouveau module Texte puis cliquez sur l’icône de contenu dynamique située en haut à droite pour insérer le titre de l’archive (ci-dessous près de la flèche rouge).
Dans le menu déroulant qui apparait, cliquez sur le 1er élément : Poster / Titre de l’archive (chez moi, très mauvaise traduction !…) ce qui signifie en bon français « Titre de l’article ou de l’archive ». Laissez le reste vide, le contenu va se construire automatiquement.
Résultat : un texte apparaitra automatiquement, commençant par « Résultats pour » suivi du terme recherché encadré de guillemets.
Proposez un champ de recherche, ainsi votre visiteur pourra réitérer sa recherche sans changer de page. Pour cela, un module Divi existe aussi !
Enfin, insérer un nouveau bloc qui va afficher les résultats de la recherche : Il s’agit du module Blog que l’on va régler pour afficher les articles pour la page en cours :
Soignez la présentation des résultats : avec DIVI, vous pouvez définir le nombre de résultats à afficher, la présence ou non d’un extrait, des métadonnées, etc.. Vous pouvez également afficher les contenus sous la forme de grille ou de liste (depuis l’onglet Style), créer des effets graphiques et rendre cette page beaucoup plus agréable à l’œil sans trop d’effort.
07Lorsque vous êtes satisfait, vous pouvez enregistrer votre travail et refermer cette fenêtre. De retour sur l’écran d’accueil du Divi Theme Builder, enregistrez maintenant votre modèle de page 404 en cliquant sur le bouton vert en haut à gauche : Sauvegardez les changements
08Admirez le résultat en effectuant une recherche, ou en ajoutant par exemple /?s=lemotdevotrechoix à la fin de votre url.