Nous vous parlions récemment de toutes les possibilités offertes par l’arrivée du Theme Builder de Divi (constructeur de thème en français) et nous allons donc voir un cas concret aujourd’hui avec la création d’une page de résultats de recherche personnalisée.

Nous l’avons modifiée sur Divi Community et allons vous expliquer étape par étape comment procéder.

À quoi ressemble la page de résultats de recherche originale de Divi ?

Avant de commencer, il est bon de savoir d’où nous allons partir.

Pour lancer une recherche sur Divi, différents moyens sont disponibles :

  • L’icône de recherche affiché dans le menu de votre site (si vous l’avez activé)
  • Le widget “Recherche” de WordPress que vous pouvez utiliser dans la barre latérale de votre blog

Une fois votre recherche effectuée, vous arriviez sur une page de ce type :

ancienne page recherche de Divi Community
Pas beaucoup d’infos et un design très sommaire.

On est d’accord, ce n’est pas très pro et on reconnait beaucoup trop WordPress et Divi.
Qu’à cela ne tienne, nous allons en créer une de toutes pièces !

Paramétrer le modèle de page dans le Theme Builder de Divi

La première chose à faire et de créer son modèle depuis le Theme Builder.
Pour ceci, rendez-vous dans Divi -> Theme Builder .

Cliquez ensuite sur Ajouter un nouveau modèle et assignez votre modèle à la page Résultats de recherche tout en bas dans la catégorie Autre.

Créer un template dans le Theme Builder de Divi pour la page de résutats de recherche

NB : je ne traiterai pas ici la partie “Header” ou “Footer” du modèle, nous partirons du principe que la page utilisera ceux en place sur votre site.

Notre modèle de page est maintenant prêt, mais complètement vide, et vous devriez avoir un bloc de ce type dans la liste de vos modèles de pages construits avec le Theme Builder :

Préparer un template dans le Theme Builder de Divi

Nous allons donc voir quels sont les modules à ajouter à votre modèle pour afficher toutes les données nécessaires.

Construire son modèle de page dans le Theme Builder de Divi

Notre page est paramétrée correctement, mais il nous reste maintenant à ajouter tout son contenu.

Voici les modules que nous vous suggérons d’utiliser :

  • Une section d’entête avec le titre principal de votre page. Il reste important pour le visiteur de savoir où il se trouve.
  • Un module Texte avec la valeur dynamique Poster / Titre de l'archive. On y revient juste après.
  • Un module Chercher pour ajouter une barre de recherche à votre page. Ce n’est pas nécessaire mais cela peut faire gagner du temps à vos visiteurs s’ils ont plusieurs recherches à effectuer.
  • Un module Blog pour afficher le résultat de la recherche.

Ces modules sont à mon sens le strict minimum pour avoir une page efficace et utile pour vos visiteurs.
N’oubliez pas que vous pouvez ajouter n’importe quel module de votre choix en plus de ceux cités.

Passons maintenant au rôle et paramètres de chaque module.

L’entête de la page

Elle n’est pas indispensable mais vous permettra d’insérer un titre h1 à votre site pour faire comprendre au visiteur qu’il se trouve sur votre page de résultats de recherche.

Vous pouvez la créer simplement avec un module Texte dans une section pleine largeur.

La nôtre ressemble à ceci :

Entête de la page des résultats de recherche de Divi Community

Le module Texte

Le module Texte va nous permettre d’afficher une donnée dynamique utile pour votre visiteur, à savoir le terme qu’il a recherché pour arriver sur votre page.

Pour l’afficher, il va donc falloir choisir Poster / Titre de l'archive dans les réglages de votre champ.

Cette valeur vous permet d’afficher le texte suivant sur votre page :

Afficher le terme recherché avec le contenu dynamique de Divi
Exemple de recherche avec l’occurence “divi”

Le texte de cette donnée dynamique n’est malheureusement pas éditable depuis le module et il vous faudra modifier les traductions de Divi si vous voulez afficher une phrase un peu plus user-friendly.
Vous pouvez cependant ajouter un prefixe ou suffixe à ce texte via les réglages du champ dynamique.

Le module Chercher

Le module Chercher ajoute une barre de recherche à votre page.

Celle-ci est entièrement paramétrable et permettra à vos utilisateurs de faire différentes recherches depuis la même page.
Ce n’est pas un module obligatoire à ajouter mais il facilitera la navigation et pourra optimiser votre taux de rebond.

Une barre de recherche Divi

Nous l’avons ajouté sous l’entête et personnalisé l’affichage et les couleurs directement depuis le Visual Builder.
Le texte compris à l’intérieur de la barre est entièrement personnalisable.

Le module Blog

Le module Blog permettra d’afficher les résultats de recherche de vos visiteurs.

Il fonctionne comme celui que vous utilisez habituellement, à l’exception d’une option très importante pour que votre page soit fonctionnelle.

Un module blog Divi pour afficher les résultats des recherches

Pensez à cocher absolument la case Messages pour la page en cours .

Elle permet d’afficher des résultats pour la requète en cours, à savoir la recherche de votre visiteur.
Si vous ne la cochez pas, le module vous affichera une liste des derniers articles comme d’habitude.

Stylisez ensuite l’affiche des articles comme vous le voulez, en grille ou en liste et personnalisez le contenu, les couleurs ou polices via le Visual Builder.

NB : Vous pouvez adapter ces options au module Boutique si vous souhaitez afficher des produits WooCommerce plutôt que des articles de blog.

Notre page est maintenant complètement fonctionnelle et personnalisée avec le Theme Builder de Divi.
Pensez à bien enregistrer vos modifications depuis l’interface du Theme Builder pour ne pas perdre vos modifications ! 😉

Modules additionnels

Suivant votre site ou le parcours utilisateurs que vous souhaitez créer, vous pouvez ajouter différents modules additionnels supplémentaires sur votre page pour faciliter les actions des internautes.

Par exemple, nous avons choisi sur Divi Community d’ajouter un bouton d’appel à l’action sous les résultats de recherche permettant aux visiteurs de nous soumettre une demande s’ils ne trouvent pas ce qu’ils cherchent sur le site :

Ajouter un bouton d'appel d'action sur la page des résulats de recherche de Divi

D’une part cela permet d’avoir une action à effectuer une fois la page entièrement défilée, et d’autre part cela nous aide à savoir quel type de contenu souhaitent nos visiteurs.

C’est donc une action facile et utile pour tout le monde.

Voici ce que donne notre page de recherche une fois tous les modules en place :

La nouvelle page de résulats de recherche de Divi Community

Conclusion

La construction et la personnalisation de templates de pages avec le nouveau Theme Builder de Divi reste très rapide et pratique.
Elle vous permettra de rendre l’expérience utilisateur bien plus poussée et d’adapter chaque contenu au design de votre site en quelques clics.

La seule difficulté que vous pouvez rencontrer reste la traduction assez aléatoire de Divi en français et peut rendre la compréhension de certaines options délicates.
Si vous souhaitez disposer d’une traduction impeccable de Divi en vrai français, n’hésitez pas à jeter un oeil à ce que propose FXBenard.