Page Resultat Divi Thumb

Customise your site's search results page with Divi

Published on 19/01/2021 | 31 comments

1,688 words


It's so easy to customize the search results page on your Divi site! In fact, this tutorial will only take you 5 minutes to complete, but will allow you to deliver a more "professional" site.

If you don't know what the search results page is, it's very simple: it's the results presented when a user uses the "magnifying glass" icon to search your site. The page displayed then shows the results of their search for a given query. It is therefore a dynamic page whose results will vary according to the user.

To test this Divi Tips blogIf you want to search for a keyword, don't hesitate to enter it using the magnifying glass on the main menu (top right)... You will then see that my search page is customized and doesn't look like the basic page proposed by the Divi theme, as you can see on the following image :

Page de resultats de recherche Divi - basique
Divi Basic vs. Custom Search Results Page

In the image above, you can see that the basic search results page (top) is much less attractive and much less optimised than the custom search results page (bottom).

In this tutorial, I explain how to do it but I also give you 2 other tips... You won't regret going through it 😉 !

1 - Why customise your site's search results page?

If you look at the image below, you can see that just over 1% of visitors to the Divi Tips blog search via the magnifying glass icon...

Site Search Google Analytics
On-site search statistics with Google Analytics

In the last 30 days, 348 people have searched my blog to find answers to their questions...

1% of visits is very low, but if I hadn't personalised this page in the search results, 348 people would have visited an unoptimised and unbranded page. This does not reflect the image I would like my blog to have.

This is a good reason to customize this page in the search results: it will match your brand image and will not stand out from other pages....

Read also: How to add a real-time Ajax search to your Divi site

2 - Composition of the layout of the search results page

If you look at my search results page, it is composed of 5 elements:

Composition d'une page de résultats de recherche Divi
Composition of a Divi search results page
  • A - The dynamic title of the page
  • B - The results of the user's search in the form of thumbnails
  • C - A new section with a title
  • D - A possibility to restart the search if the first one was unsuccessful
  • E - Other elements or calls to action, i.e. content that you would like to highlight on this page...

And if you look at this layout in grid form, these elements could have been set up using these modules:

Layout Page de Recherche en version Grille
Layout of a Search Page in Grid version
  • A - The dynamic title of the page = Text module
  • B - The results of the user's search in the form of thumbnails = Blog module
  • C - A new section with a title = Text module (again)
  • D - A possibility to restart the search if the first one was unsuccessful = Search module
  • E - Other elements or calls to action, i.e. content that you would like to put forward on this page... = all the modules you want!

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

3 - Creating the search page template with the Theme Builder

There is only one way to customise this dynamic page: use the Divi Theme Builder ! Here's how to do it:

Construire la template Page de Résultats
Building the Results Page template with the Divi Builder
  1. Go to the Divi > Theme Builder
  2. Click on "Add a new template
  3. Assign the template to it "Search results
  4. Validate by clicking on Click on "Create a template".
  5. Click on "Building a personalised body

3.1 - Construction of the layout of the search result page

Once the template has been created, all you have to do is to design the page without forgetting the essential modules:

Ajouter un titre dynamique
Add a dynamic title within the results page template
  1. Within the layout, insert a new line (also called a "row")
  2. Then insert a Text module
  3. In the Content tab of the Text module, click on the database icon to using dynamic content proposed by Divi
  4. Choose "Post / Title of the archive
Titre Dynamique - suite
Adding the dynamic title - continued
  1. This dynamic title will show : "Your dynamic publication title is displayed here. Do not attempt to change its text.
  2. However, you can change its appearance from the Style tab. Feel free to change its size, colour, font, etc. to suit your taste.

3.2 - Showing search results

When the user enters a keyword using the magnifying glass, the native WordPress system will find results for them. Here's how to make them appear on your search results page:

Ajouter un module Blog
Add a Blog module to display search results
  1. Add a new row
  2. Add the Blog module
  3. In the settings of this module, in the tab Contenttab, select YES for the option "Message for the current page.
  4. In the tab Content > Elementstab, you can define what you want to display.
  5. Then, in the Style > Modeltab, you can choose the model Grid which is much nicer than the Full screen template...
  6. Finally, still from the Style tab, you can use all the options at your disposal to design the appearance of this module (colour, size, shadow, animation, etc.).

3.3 - Propose to renew the research (optional)

Imagine that your reader did not find what they were looking for on their first search, you can improve their experience by offering them the option of repeating this action without having to go through the magnifying glass icon again. This part is optional, but if you wish, here is how to do it:

Ajouter un nouveau Titre
Add a new title
  1. Add a new section
  2. Insert a Text module to explain to the user that he can renew his search.
  3. For example "Start a new search".
Ajouter le module Chercher
Add the Search module to the template
  1. Below, add a Search module
  2. In the settings of this module, from the Contenttab, you will be able to enter the placeholder text (i.e. the default text in the search bar). For example: What are you looking for?
  3. From the Contents tab > Exceptionsthis module allows you to exclude certain content from the results, for example pages, articles or certain categories of articles. Unfortunately, you cannot exclude specific URLs, we will see later in this article how to do this...
  4. Then, in the Style tabyou can define the appearance of the search bar (colour, etc.)
  5. Now your search bar is ready.

3.4 - Adding calls to action (optional)

Your search results page is now functional, but there's nothing to stop you from adding various calls to action to encourage users to visit other pages or discover your shop's top products!

After all, this page is yours to do with as you please!

Visuel de la Page de Recherche personnalisée
Visual of the Custom Search Page
  1. Add for example a row with buttons, or your last 3 blog posts, or a contact form...
  2. Save your model.
  3. Exit the template and make sure you save again in the builder theme...

4 - Configuring the Google Analytics "Site Search

At the beginning of this article, I told you that 348 people visited my search results page last month... If I know this number, it's because I activated a small option in my account Google Analytics.

If you also want to collect this type of statistics, you must activate it...

In addition to knowing the number of visitors who use your internal search engine, you will also know the keywords that have been entered in this search bar... This is therefore important information that can tell you what your visitors' needs are.

Here's how to activate this feature:

Activer le suivi Site Search de Google Analytics
Enable Google Analytics Site Search tracking
  1. Go to the Administration tab of your Google Analytics account
  2. Select your account
  3. Select your property
  4. Click on View settings
  5. At the bottom of the page, activate the Site Search Monitoring
  6. In the Parameter query field, enter " s". This is the parameter used in the URL by WordPress sites when users do a search.
  7. Record it.

That's it, from now on, your Google Analytics account will record visits and queries to this page (see the official documentation for configure Site Search).

5 - Exclude certain pages from the search

Finally, to perfect this page, you can exclude certain search results on a case by case basis. For example, if your site has private pages or pages that are of no interest to the user (shopping cart page, my account page, etc.) you could decide to exclude them from the results.

For this, you can use the free extension Search Exclude.

Exclure certains résultats
Exclude certain results from the search

This extension is very easy to use:

  • All you have to do is install it and activate it...
  • Go to the list of your pages or articles
  • Click on Quick change
  • Check the option "Exclude from Search Results if you do not want this publication to appear in the search results page of your site.
Search Exclude Option

If you want to exclude certain pages without using a plugin, just add a few lines of code, read this article.

6 - In conclusion...

You are now the proud owner of a great search results page and it only took a few minutes!

You can also download a free pre-built template for create your search results page more quickly (available on the official blog).

Did you already customise it? Do you have any other ideas to improve this page? Tell us in comments.

Page Result Divi Pin
Page De Recherche Pin

Want to customize Divi like a pro? Check out all the tutorials!

obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

31 Commentaires

  1. Jess


    Merci pour ce tutos ma page recherche est bien plus belle ! Par contre je rencontre un soucis avec le module « chercher », mon site est un site de vente en ligne, j’ai configurer le bouton recherche dans le menu pour avoir uniquement la liste de mes produits avec les termes rechercher mais quand j’utilise le module « chercher » cela ne me retourne aucun résultat. Y aurait-il quelque chose que j’ai oublié de faire ?

    Merci d’avance

  2. Lycia Diaz

    Salut Jess. Il faut regarder au niveau des paramètres du module peut-être ?

  3. lucquin


    Merci pour le tuto,

    Comment afficher le prix de mes produit sur la page de recherche ?

  4. Lycia Diaz

    Hum Lucquin c’est une bonne question…

  5. Lucas


    Merci pour ce tuto ! Cependant après avoir suivi les étapes du tutoriel, je me rends compte que lorsque j’effectue une recherche sur mon blog divi, l’apparence n’a pas changé. C’est-à-dire que l’apparence de la recherche de mon blog se décrit de la façon suivante : une colonne à droite et une colonne à gauche contenant les articles de ma recherche les un à la suite des autres. Il s’agit de la recherche de base de divi. Or, en suivant votre tuto, j’ai bien créé un module de recherche avec un modèle de blog en grille mais ce dernier ne figure pas comme vous.

    Y-a-t-il un moyen d’éviter d’obtenir la colonne à droite et avoir le même affichage que vous ? J’imagine qu’il y a une configuration à effectuer pour modifier l’apparence de la recherche en amont.

    Je ne sais pas si vous voyez ce dont je parle. En espérant que vous puissiez m’aider 🙂

  6. Bk

    Bonjour, je souhaite n’afficher les résultats de recherche que d’une seule page.
    J’ai listé des documents PDF à télécharger et je souhaite que les internautes puissent rechercher rapidement le document sur cette même page. Comment faire ? Merci !!

  7. Lycia Diaz

    Salut BK, je ne sais pas. Si tu utilises le plugin d’exclusion ça devrait marcher mais du coup, ça va marcher pour tout ton site et non que pour la page que tu désires.

  8. Lycia Diaz

    Salut Lucas, heu tu as peut-être mal paramétré ton modèle dans le Thème Builder. Il faut l’attribuer à la bonne page et tu dois aussi sauvegarder 2 fois pour que ça fonctionne.

  9. Romano

    Hello, j’ai le même problème que Lucas, et j’ai vérifié le paramétrage qui pointe sur la pages « Résultats de recherche ». Donc ok, enregistré deux fois, mais rien à faire : la recherche tombe toujours sur la page WordPress…
    Merci de ton retour !

  10. Romano

    Cela fonctionne maintenant, il fallait que je me log une nouvelle fois 😉
    Merci pour cette page !

  11. Lycia Diaz

    Ah super

  12. Lucas


    Je ne parviens pas à vous écrire un email alors j’écris ici.

    Je souhaite intervenir sur mon précédent commentaire. L’affichage de la recherche s’est finalement mise à jour.
    Il a fallu que je me déconnecte de WordPress, je ne sais pas pourquoi mais en tout cas je confirme que votre tuto a bien fonctionné.

    Veuillez m’excuser pour ce double commentaire.


  13. Lycia Diaz

    Super Lucas, merci du retour !

  14. cindy

    Bonjour Licia, j’ai un souci j’ai bien la barre de recherche sur mon site mais lorsque je fais une recherche il n’y a aucun résultat. Je ne comprends pas pkoi. Pouvez vous m’aider ?

  15. Lycia Diaz

    Salut Cindy. As-tu essayé plusieurs requêtes pour voir si rien ne marche, car ça me parait bizarre, le moteur de recherche natif de WordPress a toujours bien fonctionné.

  16. Mike

    Hi, helpful blog, thanks. How do I edit the existing search results page? I can’t see the page in the Pages section of WordPress. And do I need to create a new page for ‘no results’? Currently, if there are no results, my users get a blank page. Cheers

  17. Lycia Diaz

    Hello Mike ! No, you just have to create a Search Result Page like that… if there is no result, you might have a page with « no result found »… you should don’t have a blank page, it seems to be wrong, I think…


    Bonjour Lycia,
    Je découvre ton tuto qui m’a drôlement aidé à personnaliser ma page de résultat de recherche.
    Y a-t-il un moyen d’intervenir sur le format de l’image?
    Dans les résultats de recherche les photos sont horizontales alors que sur mon site elles sont toutes verticales…
    Encore merci !

  19. Lycia Diaz

    Ah aucune idée ! Dans les options du module tu as regardé ?

  20. Vincent d'Eaubonne

    Bonjour Lycia, et bravo pour votre travail.

    Pour info, je suis sur votre tuto relatif à la page recherche. Il propose de cliquer sur la loupe de votre site pour ce faire une idée de la configuration, mais voilà, je ne trouve pas votre loupe en haut à droite. Une évolution récente sans doute 🙂

  21. Lycia Diaz

    Ah bizarre. Il faut que je regarde…

  22. juan puyol

    Bonsoir à vous . Je travaille sur un projet de site web et j ai besoin de votre aide. j’ai crée une rangé avec divi dans laquelle j’ai mis un module texte pour mettre un titre , puis un module recherche. Ensuite j’ai crée trois rangés dans lesquelles j’ai mis des modules bascules avec des fichiers pdf à l’intérieur téléchargeable. Lorsqu’on fait la recherche rien ne s’affiche . Svp comment lier le module recherche au module bascule qui contient les pdf téléchargebles pour qu’il soit affiché et téléchargé par celui qui visite la page . Merci

  23. Lycia Diaz

    Je ne sais pas si c’est possible

  24. Marie-Noëlle

    Hello Lycia, Merci pour ce tuto ! Une question : comment faire apparaitre le résultats de recherche (cf 3.2) quand la recherche s’effectue dans une boutique woocommerce et non dans un blog ? En gros, il faudrait que ça soit des produits qui apparaissent et non des articles de blog. Merci d’avance.

  25. Marie-Noëlle

    Merci Lycia, je vais tester. Bonne journée,

  26. Graines de référenceur


    sympa mais le seul problème est que le contenu Google Analytics est obsolète, la version UA cessera de traiter des données à compter du 1er juillet 2023 et remplacée par le G4… étant déjà sur G4, je ne sais pas continuer.

  27. Jean


    lorsque vous appuyez sur l’icone de la, loupe dans le menu, le mot rechercher est en mauve comme le reste de la police du menu, comment avez-vous fait?


  28. Lycia Diaz

    Jean, il y a plein d’option, j’ai juste paramétré cela.

  29. Solène

    Bonjour Lycia et merci pour ce tuto. J’ai pu l’adapter pour renvoyer uniquement mes produits Woocomerce en choisissant ‘woo produits » au lieu de « blog » mais par contre j’ai un souci de taille. Ma recherche à fonctionné la première fois mais ne se réactualise pas. Je me suis déconnectée, j’ai essayé en navigation privée, avec un autre navigateur. Quoi que je saisisse j’obtiens toujours les memes résultats. Si quelqu’un à une idée?? merci!

  30. Lycia Diaz

    Ah oui c’est bizarre. Là comme ça je vois pas…

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.