SearchWP

News

How to Create a Divi Search Results Page Template (For Newbies)

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.

how to create a Divi search results page template

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.

custom search results page

Beyond that, creating a custom search results page will also help you to:

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.

SearchWP logo

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.

go to the Downloads tab

Once on the Downloads page, click Download SearchWP and save the ZIP archive with the plugin’s file to your computer.

download SearchWP

After downloading the plugin, copy your SearchWP license key on the same page.

copy your license key

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.

press Activate License

Then, paste your SearchWP license key into the license field and click Activate.

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.

go to the theme builder

Create a new template

Once you get to the theme builder page, click Add New Template.

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.

create a search results template

As you can see, our new Search Results page template has now appeared among other templates.

here is your search results pages template

To start customizing it, click Add Custom Body.

click Add Custom Body

Then, choose the Build Custom Body option.

click Build Custom Body

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.

press Start Building

Add the Blog module

After that, you can choose a row for your future page. For example, we’ll select the first one.

insert a row

Then, we can add the first module to our new page.

insert module

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.

choose 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.

switch the toggle

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.

go over to the Design tab

Then, click on the Layout item to expand its settings.

click Layout

After that, change the module layout from Fullwidth to Grid.

change the layout

When you’re finished, click the button with the checkmark to save the changes you made to the Blog module.

click the checkmark icon

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.

click Plus

Then, search for the Text module and click on it to add it to the page.

click on the text module

To change the text within the module, click on it and type whatever you want in the appeared setting window.

edit your text

For example, we’ll change it to “Search results”.

enter your text

To transform the text to the heading, click Paragraph and choose the Heading 1 item from the drop-down menu.

change the text type

Let’s also margin the heading to the center. To do that, click on the Center button.

align text to the center

Don’t forget to save the changes when you’re finished editing the heading.

press the checkmark icon

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.

move your module

Here’s what the results look like on our test site:

the search results 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.

click Plus to add a new module

Then, search for the Search module and click on it to add it to the page.

add the Search module

You can add text to the search form by entering it in the Input Placeholder field.

enter the placeholder text

For example, we’ll enter “Try another search”.

we set the custom placeholder

When you’re happy with how your search form looks, click the green checkmark button to save the changes you made to it.

click Save

Here’s the final result of what the Divi search results page looks like on our test site:

that's how our search page looks

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.

click the three dots icon

Then, press the Save button at the bottom right corner to save your new search results page.

press Save to save your changes

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.

click the cross icon at the top right

Once there, click Save Changes at the top left corner to save your new template.

press the Save Changes button

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.

click Visit Site

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”.

click Search

As you can see, the search page on our site looks like the way we customized it with Divi.

the final results of our search page

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.

Want to make your search awesome right now?

More than 30,000 sites have chosen SearchWP!

You can utilize all of the content that’s gone unrecognized by native WordPress keyword search instantly with SearchWP.

Get SearchWP for just $99

  • Committed Support
    If you need help, support is fast, friendly, and here for you
  • Streamlined Setup
    Installation and setup that’s optimized for speed
  • Great Documentation
    Helpful, clear, and usable documentation is a priority

See what SearchWP customers have to say

  • “The plugin works exactly as promised. Any questions or issues I had were quickly responded to and had a fairly complex site up and running in hours.”

  • “I’ve used SearchWP for years. Recently I had a problem getting SearchWP to index on new hosting. After other troubleshooting, Jonathan cloned my site and confirmed that the problem was not the site. I moved to new hosting and it indexed.”

  • “We really love SearchWP. It is properly programmed, does what you expect from it and it’s very flexible. The extensions are a great addition and we often make use of them. Thanks for the great job.”

[wpforms id="3080"]