Are you wondering how to create a Divi search results page template?
By creating a custom search results page, you can deliver more relevant search results to your visitors and encourage them to explore more of your content.
One of the easiest ways to do that is to use Divi. This powerful WordPress page builder plugin allows you to create a custom search results page without being tech-savvy.
In this step-by-step tutorial, we’ll show you how you can create a custom search results page with Divi and improve it using SearchWP.
You can use this table of contents to quickly navigate through it:
Let’s get started!
Why Create a Divi Custom Search Results Page Template?
When visitors use the search bar on your site, they expect to see relevant results.
If they see a blank page after entering a search query, there’s a good chance they’ll leave your site right away.
Thankfully, you can easily avoid such situations by customizing your search results page.
First, you can use proven methods to keep visitors on your site even when there are no search results.
The most popular ones are adding a block with related posts and offering “Did you mean it?” suggestions.
It’ll help encourage visitors to explore your site further and improve their user experience. Also, by showing related posts, you can promote them and get more pageviews.
Secondly, you can change the appearance of your search results page to make it user-friendly and more aligned with your website’s needs.
For instance, you can manage the number of results on the page, specify information about the posts’ authors, add a newsletter signup form, and much more.
Beyond that, creating a custom search results page will also help you to:
- Boost your content discoverability
- Increase the number of views per visit
- Reduce your site’s bounce rate
Now that you know why you need to create a custom search results page on your site, let’s talk about how you can do that next.
How to Create a Search Results Page with Divi and SearchWP
The easiest way to create your own unique search results page is to use a WordPress page builder plugin like Divi.
And if you also want to make search on your site smarter, you can use Divi together with SearchWP.
What is SearchWP and Why Use It?
SearchWP is the most powerful and easy-to-use WordPress search plugin on the market.
It allows you to fully customize how search works on your site even if you’re not a tech-savvy person.
For example, with SearchWP, you can exclude any pages from search results, make post tags searchable, and many more.
This way, you can give your visitors more relevant search results and boost your content discoverability.
The best thing is that SearchWP is fully compatible with Divi and automatically integrates with your theme.
After installing the plugin, you can immediately start customizing your search to make it better.
Here are a few more amazing things you can do with SearchWP:
- Add live autocomplete search. Install the SearchWP Live Ajax Search extension to enable live search on your site in a few clicks, without coding.
- Enable search for partial matches. Make WordPress look for partial matches if there are no exact ones to help your visitors find the right content, even if they made a typo.
- Limit search to specific post types. Give your visitors more relevant search results by narrowing them to specific post types, categories, or something else.
- Manage the order of search results. If you’re not happy with the current order of the search results on your site, you can change it the way you want with just a few clicks.
After you’ve learned how SearchWP helps make your site search better, let’s see how you can use it with Divi to create a search results page.
Step 1: Install and Activate SearchWP
To get started, you’ll need to grab your copy of SearchWP here.
Then, sign in to your SearchWP account and click Downloads.
Once on the Downloads page, click Download SearchWP and save the ZIP archive with the plugin’s file to your computer.
After downloading the plugin, copy your SearchWP license key on the same page.
The next step is to install SearchWP on your site. To do that, you’ll need to upload the downloaded ZIP file to it.
If you need help with that, you can check out the how to install the WordPress plugin step-by-step guide.
Once you’ve installed SearchWP, you’ll need to activate your plugin copy with your license key.
To get started, go to your WordPress dashboard, point a cursor over the SearchWP button at the top panel, and click Activate License.
Then, paste your SearchWP license key into the license field and click Activate.
After the plugin activation, SearchWP automatically integrates with any search field on your site.
This way, you can immediately start delivering more relevant search results to your visitors. You can also check out the how to customize your WordPress search results page with SearchWP detailed tutorial to make your search even better.
Now let’s move on and see how you can create a search results page using the Divi page builder.
Step 2: Create Your Custom Search Results Page Template
To get started, navigate to Divi » Theme Builder in your WordPress dashboard.
Create a new template
Once you get to the theme builder page, click Add New Template.
Then, tick the box next to the Search Results option at the bottom of the drop-down menu and click Create Template.
As you can see, our new Search Results page template has now appeared among other templates.
To start customizing it, click Add Custom Body.
Then, choose the Build Custom Body option.
It’ll take you to the page where you can choose whether you want to build a page from scratch or use one of the pre-made templates.
In this tutorial, we’ll build a search results page from scratch, so click the Start Building button.
Add the Blog module
After that, you can choose a row for your future page. For example, we’ll select the first one.
Then, we can add the first module to our new page.
To display search results on this page, we need to add the Blog module.
To get started, enter “Blog” in the search box and click on the Blog module.
Then, toggle the Posts for Current Page switch in the appeared Blog module settings. It ensures that this module will only display search results.
Step 3: Customize the search results layout
Now you can customize your search results page like any other Divi page.
For example, let’s change the search results layout to Grid. To do that, go over to the Design tab in the Blog module settings.
Then, click on the Layout item to expand its settings.
After that, change the module layout from Fullwidth to Grid.
When you’re finished, click the button with the checkmark to save the changes you made to the Blog module.
Add a heading
Now let’s also add a heading to our search results page.
To do that, click Plus at the bottom of the Blog module section to add a new module.
Then, search for the Text module and click on it to add it to the page.
To change the text within the module, click on it and type whatever you want in the appeared setting window.
For example, we’ll change it to “Search results”.
To transform the text to the heading, click Paragraph and choose the Heading 1 item from the drop-down menu.
Let’s also margin the heading to the center. To do that, click on the Center button.
Don’t forget to save the changes when you’re finished editing the heading.
The last step is to change the heading’s position to be above the search results, not below them.
To do that, hover your cursor over the heading until the gray toolbar appears and drag it to the top of the page.
Here’s what the results look like on our test site:
Add a search bar
Let’s also add a search bar to our page so that visitors can search again if there are no results for their query.
To get started, click on the Plus button that appears when you hover your cursor over your heading.
Then, search for the Search module and click on it to add it to the page.
You can add text to the search form by entering it in the Input Placeholder field.
For example, we’ll enter “Try another search”.
When you’re happy with how your search form looks, click the green checkmark button to save the changes you made to it.
Here’s the final result of what the Divi search results page looks like on our test site:
Save your new search results page
When you’re done customizing the search results page, you’ll need to save it.
To get started, click the purple three-dot button at the bottom of the Divi page editor.
Then, press the Save button at the bottom right corner to save your new search results page.
The next step is to close the page editor and go back to the Theme Builder page. To do that, click the cross in the upper right corner.
Once there, click Save Changes at the top left corner to save your new template.
The final step is to check out how your search results page looks on your site.
Step 4: Check Out Your New Search Results Page
The fastest way to do that is to press the Visit site button under your site’s name at the top left corner of your WordPress dashboard.
Once you get to your site, enter a search query in the search field to see the search results for it.
For example, we’ll search for “WooCommerce”.
As you can see, the search page on our site looks like the way we customized it with Divi.
In this article, you learned how to create a Divi search results page template and make your search smarter with SearchWP.
Customizing the appearance of your search results page will help you encourage visitors to view more of your content and grow your business.
If you’re ready to boost search on your site, you can grab your copy of SearchWP here.
Can’t find your posts by tags? Check out the how to fix WordPress tags not searchable detailed tutorial.
Looking for a way to hide a specific category from search? Follow the how to exclude category from WordPress search step-by-step guide.
