When visitors search your Divi based website, you want to make sure they find exactly what they’re looking for in a well-presented search results page. Creating a custom search results page with the Divi Theme Builder is a great way to ensure that happens. In this tutorial, I’ll show you step-by-step how to design a search results page using the Divi Builder, along with some optional improvements you can make with our Divi Search helper plugin. Whether you’re new to Divi or have been using it for a while, this guide will be helpful, and I’m sure you will learn something new, especially some tricks you can do with our plugin to make the Divi search results page better.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Search Helper!
Why work so hard? You can do this easily with a setting in our Divi Search Helper plugin!
1. Assign The Divi Search Results Template In The Divi Theme Builder
To set up the search results page, we will utilize the Divi Theme Builder. With this amazing feature, we have the capability to build a dynamic template and customize the layout and appearance according to our preferences using the Divi Builder.
The initial step is to access the Divi Theme Builder. You can locate it in the WordPress Dashboard under the Divi menu, by navigating to Divi>Theme Builder.
Create a new template by clicking on “Add New Template.”
Select the “Build New Template” option.
In the “Template Settings” popup, scroll down to the bottom and select “Search Results.”
Then click the blue button at the bottom of the popup that says “Create Template.”
Depending on whether you have a Global Header and Global Footer assigned, the screen may look different for you. The important part now is to build the Custom Body area of the template by clicking on “Add Custom Body.”
This will bring up a new popup again. In that popup, click on “Build Custom Body.”
FINALLY! I know that was a lot of steps, but you are finally ready to build your actual search results page with the Divi Builder.
2. Add A Dynamic Search Results Page Title
At this point, you can design the layout however you want, as long as you have a dynamic title text and dynamic Blog module. Other than that, you can create any layout or design style you want, just remember that this layout is for search results. So any time someone enters a search term in one of the search bars, this will be the layout they see.
First, add a Divi Text module to your layout. Open the settings, locate the Body text area, hover over the text to reveal the Dynamic Content icon in the top right corner of the textarea, and click the icon.
After clicking the dynamic content icon, a list of options will appear in a popup. At the very top, select the “Post/Archive Title” option.
Great, this step was important in order to show the dynamic text. You can style this however you want with the design settings.
FYI: If you want it to be an H1 heading, please check our tutorial How To Change The Divi Post/Archive Title To An H1 Heading.
The dynamic Post/Archive Title text always begins with the phrase “Results for” followed by the search keyword that was typed into the Divi Search module. For example, if the search keyword was “Divi” then the title text would read Results for “Divi”
Want to improve your Divi website search results? Check out our Divi Search Helper plugin!
To make your search results page even more powerful and user-friendly, consider using our Divi Search Helper plugin. This plugin adds tons of valuable features to upgrade the existing Divi Search module and improve the search results pages (or even choose to use live AJAX search results instead).
Here are some key features in the plugin related to the Divi Theme Builder search results page that can improve your website’s search functionality:
Search Results Order
- Choose the order of search results: by publish date, alphabetically by title, or randomly.
- Set the order to be ascending or descending for publish date and alphabetical sorting.
Search Results Per Page – Pagination
- Default is 10 results per page, but you can set it to any number.
- Automatically adds pagination links if results exceed the set value.
Search Results Heading Text
- Customize the search result page heading text with merge tags, like:
- “We found ({number_of_results}) search results for “{search_term}””
- “Showing <strong>{start_from} – {end_at}</strong> of <strong>{number_of_results}</strong> results for your query: <strong>”{search_term}”</strong>”
No Results Replacement Layouts
- Replace the default “No results found” message with a custom Divi Library layout.
- Use anything from a simple text module to a fully designed section.
By integrating Divi Search Helper, you can make your search results page more dynamic and user-friendly, providing a better experience for your visitors.
3. Add The Blog Module To Dynamically Display The Post Type Search Results
If you are searching for posts, pages, or other similar custom posts types, you need to add the Divi Blog module to the Search Results Theme Builder template. The important step here is to make sure you turn on the toggle called “Posts For Current Page.” This setting is important so that it can dynamically display the relevant search results within the layout of the Blog module.
If you are searching for WooCommerce products (which is possible when using our Divi Search Helper plugin), you would need to use the Divi Woo Products module instead of the Blog module.
You can design the Blog module and the rest of your layout however you want to fit in with the same branding and style as the other pages.
0 Comments