How to create a search results page with Elementor

Would you like to learn how to build a search results page with Elementor?

Whether you have a personal blog, an eCommerce website, or a large website with multiple users, adding a search feature is crucial enough. It makes it easier for your visitors to find the content they are looking for, rather than clicking here and there in the navigation menu.

In WordPress, the appearance (layout) of the search results page is controlled by a template on the theme you are using (the file search.php in most of the cases). If the default layout does not suit you, you can create a custom template to replace it.

If you don't have PHP skills, you can use Elementor (or other page builder plugins that have theme builder functionality like Divi Builder et WPBakery) to create a custom WordPress search results page template.

To be able to create a search results page template using Elementor, you must use the pro version of Elementor as the Theme Builder feature is only available in Elementor Pro.

How to create a search results page with Elementor

When you create a custom search results page using Elementor, you can add any element you like when you create a page. There are over 90 items (called widgets) that you can add.

Read also: How to manage form submissions in Elementor

Elementor itself offers pre-built search results page templates to streamline your workflow. Or, if you have your own design concept, you can also create the search results page yourself.

In this article, we'll show you how to build a search results page template from scratch. Here is the screenshot of the search results page we want to create.

We're going to use two sections to create the above search results page:

• Section 1: To place the header (the description of the search results)
• Section 2: To place the search form and search results

Before you start, make sure you've upgraded your version of Elementor to the pro version in case you haven't. Once you are ready, go to Templates -> Themes Builder on your WordPress dashboard.

See also: How to Use Elementor: The Complete Guide

Click on the button Add to create a new template (or you can click the button Try it now to try Elementor's Themes Builder).

Set the model type to Search results, give your model a name and click on the button CREATE A MODEL to start creating the latter.

Since we want to create the search results page from scratch, you can just close the template library window that appears.

Read also: How to add point effect to a column in Elementor

Before you start adding a widget, you can first set the page layout. To do so, click on the gear icon on the bottom side of the settings panel (panel on the left side). You can set the layout in the Page Layout option from the block General Settings under the tab Settings.

Section 1

As shown above, we will use this section to place the header to display the description of the search results page. Just click the plus button in Elementor's edit box to add a new section. You can select the single column structure. Once the section is added, drag the Title widget to it.

Go to the left panel. In the block Title under the tab Content, click on the database icon in the field Title and select Archive title.

You can then access the tab Style to customize the header. You can set things like text color, typography (font family, font size, font style, etc.). You can also apply blend mode and text shadow if you want.

If you want to set the background of the section, add a separator, or set the margin, you can click the section handle to switch it to edit mode.

Section 2

Click on the button More to add a new section like you did on section 1 above. You can also select the single column structure. Once the section is added, drag the Search Form widget.

You can then access the settings panel to make the settings. In the block Search form under the Content tab, you can define the Skin, the placeholder, the icon, the size of the icon, etc ...

To customize the form, you can open the tab style. There are two parameter blocks you can open: Input et Button. From the block Input, you can set typography, text color, background color, border color, border size and border radius.

From the block button, you can set button text color, background color, typography, icon size and button width.

Once the styling of the Search Form widget is in place, you can add the Archives Posts widget. You can place it right under the Search Form widget.

Once this widget is in place, navigate to the left panel. Under the block Layout, tab Content, you can define the skin, the number of columns, the position of the image, the length of the extract, the metadata, etc ...

On the block Paging, you can set the pagination type, page limit and alignment.

On the block Advanced, you can set the message to display when WordPress cannot find the search query provided.

Once the basic settings of the tab Contents completed, you can switch to the tab Style to customize the appearance of the Archive Posts widget. There are 6 blocks you can open on this tab.

• layout

You can open this block to define the alignment of the textual content of the posts (post title and meta). You can also define the gap between columns and rows.

• Image

You can open this block to set the border radius of the post thumbnails. You can also set the spacing and apply CSS filters.

• Content

You can open this block to set the typography, text color, and spacing of text content for posts.

• Pagination

If you enable pagination, you can open this block to customize pagination. You can set things like typography, text color, and space between numbers.

• Nothing Found Message

You can open this block to customize the error message when WordPress cannot find the content based on the search query provided. You can define the typography and the color of the text on this block.

You can add more widgets if you need them. Once you are done editing the page, you can click the button PUBLISH OR UPDATE at the bottom of the settings panel.

If you are prompted to add a display condition, just add one by clicking the button ADD A CONDITION. Since you are creating a search results page, set the display condition to Search Results. Click on the button SAVE & CLOSE to apply the change.

And There you go !

Every WordPress based website has a unique search results page, depending on the theme used by the website. If the layout of the search results page offered by the theme you're using doesn't look appealing to you, you can customize it.

Unless you have PHP skills, you can use Elementor to create a custom search results page on your WordPress website. Everything is drag and drop. No need to manipulate PHP code.

Besides, you can also use Elementor to create custom header, custom footer, custom 404 page and other parts of your WordPress theme.

Get Elementor Pro Now!

1. WooCommerce Autoresponder

WooCommerce Autoresponder is a WordPress Plugin which allows you to subscribe your customers to your autoresponder. This WordPress Plugin also displays a newsletter subscription box to easily integrate WooCommerce to the auto-responder.

As features you will find among others: full integration with WooCommerce, support for 9 auto-responders, no coding knowledge required, easy to install, and much more.

Read also: MailChimp tutorial in English: the complete guide to creating a newsletter

Download | Demo | Web hosting

• 9 WordPress plugins to send emails via SMTP
• 7 WordPress plugins to embed a Google Maps on your website
• How to set up a multisite network on WordPress
• How to add meta sections on posts and pages

Conclusion