Meet Our New Innovation

Grab It at Flat 50% OFF

How to Create a Custom Search Result Page in Elementor

How to Create a Custom Search Result Page in Elementor

A well-designed search result page plays a crucial role in enhancing user experience. It enables visitors to quickly navigate to the relevant content they are looking for. It not only saves time in navigating content but also encourages them to explore further.

Elementor is a go-to page builder for millions of WordPress websites. It provides a theme builder and useful widgets by which you can easily create a search results page. In this tutorial post, we’ll explain to you how to create a custom search result page in Elementor.

Remember, the search box is the main element of any search results page. It’s where people type their keywords to find relevant posts and products. So, we’ll first create a dynamic search box using Elementor. Then, we’ll finish the page by adding an archive widget, making it a blog archive page.

What Is a Custom Search Result Page in Elementor?

A search result page is a dedicated web page that enables users and visitors to quickly navigate to specific types of content, such as blog posts, eCommerce products, and portfolio items. Such pages are mandatory for heavy content-based websites.

A custom search results page allows you to incorporate various elements like featured images, custom headings, filters, etc., as you want so the page looks good. This not only improves user experience but also helps shoot up conversions.

Use Cases of the Custom Search Result Pages in WordPress

Before jumping into the tutorial, let’s take a look at some use cases of the custom search result pages in WordPress. Skim through the list below.

  • eCommerce Websites

Display product search results page with filters. Visitors can use the search bar to find the exact product or filters to sort them by prices, ratings, and categories.

  • Blog Sites

Blog posts and articles are displayed based on tags and categories. Users can sort them by author, date, and other queries.

  • Knowledge Base Page

Knowledge base pages usually cover DIY documentation guides and helpful resources. The search feature is a must on these pages to quickly explore the helpful content.

  • Service-Based Businesses

Users can sort their desired services based on ratings, price ranges, offerings, and other relevant details before booking or filling out a contact form.

  • Educational Websites

Advanced search and filtering options let you search for courses, lessons, and study materials so students and learners can easily find the content they need.

How to Create a Custom Search Result Page in Elementor

The theoretical part is over. In this section, we’ll now cover the tutorial part on how to create a custom search result page in Elementor. Make sure you have the following plugins available on your site.

Once you have them on your site, follow the tutorial explained below.

Step 01: Go to Elementor Theme Builder

Log into your WordPress dashboard. Then, navigate to Templates > Theme Builder.

Go to Elementor Theme Builder

Select the Search Results option under Site Parts. Then, click the + Add New button.

Select Search Results on Theme Builder

This will open up the Elementor canvas, where you will be able to add any widget you want to create the custom search result page.

Elementor canvas is opened to create a custom search result page

Step 02: Create a New Section for Adding the Search Widget

Click the plus (+) icon on the canvas. Then, select a column structure you want.

Create a new section to add the Elementor Search widget

You must write a title for the section. This is helpful for SEO.

So, drag and drop the Heading widget in the section. This will allow you to write a title for the section.

Write the section title

Come to the Styles tab. You’ll get options to change the color, typography, font size, alignment, and more of the heading text. Do it yourself.

Customize the heading widget

Similarly, drag and drop the Text Editor widget in the section under the heading text. Then, write your desired text and customize it as shown above.

Write a description for the section

Step 03: Add the Search Widget in the Section

Find the Search widget. Drag and drop it in the section under the Text Editor widget in the same way as displayed above.

Add the Search Widget in the Section

Step 04: Customize the Search Widget

By default, the search widget will be displayed across the entire width of the canvas. Come to the Advanced tab to reduce its width.

You’ll see the Margin section. Place your desired values in the section boxes on the right and left. You’ll see the width of the search widget has been reduced.

Customize the width of the search widget

Next, come to the Style tab. You’ll get options to change the placeholder text typography, search box background color, border type, and more. Do this yourself according to the requirements of your website design.

What we have done here is added a radius value to the search box. We have placed value in the Top and Left boxes under the Border Radius.

Add radius only to the search box

Similarly, we have added a radius to the search button. To do this, expand the Submit Button section under the Style tab. Place values in the Right and Bottom boxes under Radius.

You’ll see the changes instantly. If you want to add a hover effect, background color, box-shadow, etc., explore the options there.

Add radius to the search button

Explore how to create a blog post template with Elementor.

Step 05: Configure the Results Option

We hope you have an idea about the Ajax search feature. Whenever a user starts typing something into it, several results instantly display right under the search box.

The Results option of the search widget allows you to enable this feature and configure the total number of instant results you want to display under the search box.

Go to the Content Tab. Then, expand the Results section.

Toggle on the Live Results option. The feature is now enabled.

Configure the Results Option

Step 06: Create a Template for Live Results

Elementor allows you to create a live results template through which you can specify how the content will be displayed whenever the user types in the search box.

Click the Create template button under the Results section.

Create a Template for Live Results

This will take you to a new canvas. Here, you have to create a layout for the live search results and save it as a template.

Canvas for designing search results template

Select a column structure as you want. We have selected the Directional Row. It will continue to show on the right side as you add to this section.

Select a column structure

We want to use this search box to showcase blog posts. So, whenever someone types a blog topic, the search box must show a list of relevant blog posts. To do this, we have to add recommended post widgets.

Drag and drop the Featured Image widget to the section.

Add a featured image to the search results template

By default, the featured image will be large in size. First, from the Image Resolution option, select the Medium size.

Select a featured image size

Then, come to the Style tab. Use options like alignment, width, and radius, you can further reduce the featured image size, as seen in the screenshot attached below.

Stylize the featured image for the live search results

In the same way, place the Post Title widget next to the featured image.

Add the Post Title widget to search results template

You can see that we have reduced the font size and changed its color.

Note: At this stage, save the template. You may add more elements to it if wished.

Customize post title for the search results

Learn how to create a resume website with Elementor.

Step 07: Add the Template to the Result

Come to the main page of what we were designing. By clicking the dropdown icon under the Results section, choose a template you designed just a while ago.

Add the template to the live search results

Once a template is selected, several new options will appear underneath it. Using them, you can configure the total number of items that will be displayed under the search box.

Configure the search results item

Step 08: Stylize the Live Results Layout

Come to the Style tab again and expand the Results section. You can stylize the background type, border type, radius, padding, distance from the search field, column height, width, and the gap between rows & columns.

Stylize the Live Results option of the Search widget

Preview Live Results

Now, type something in the search box. You’ll see a list of three items relevant to the typed topic will appear beneath below.

This ensures the search widget is working perfectly.

Preview live results

Note: Your search widget is ready and fully functional. You can create search boxes anywhere on your website, such as in the header, footer, and pages in the same way. Such search boxes are usually placed in the header and archive post pages.

Step 09: Add the Archive Posts Widget

Create a new section under the search box section. Then, drag and drop the Archive Posts widget to the new section.

Add the Archive Post Widget

This will show up all the blog posts in the grid format you have published on your website.

The Posts Archive widget is added to Elementor

Step 10: Configure Settings of the Archive Posts Widget

Now is the time to customize the Archive Posts widget and make its layout as you want it. The widget has numerous customization options. First, configure the basic settings. Come to the Content tab and expand the Layout section.

Choose the number of columns, image position, and image resolution. We have selected 2 columns, set image position top, and resolution full.

Customize the Archive Posts Widget

After that, toggle on the Title, Excerpt, Meta Data, and Read More options. But if you don’t want any option, keep it toggled off.

To define the excerpt length, set the number of characters next to it. Besides, specify the type of meta data you want to display. We have selected Data and Comments meta data options for the widget.

Configure title, excerpt, and meta data

Pagination divides your posts into multiple pages. Expanding the pagination section allows you to configure the pagination type, alignment, page limit, and shorten.

Customize the pagination

Learn how to create a contact form with Elementor.

Step 11: Stylize the Archive Posts Widget

Come to the Styles tab. Here, you’ll find several options. First, expand the Layout section.

You can customize the Columns Gap, Rows Gap, and Alignment.

Stylize the layout of the Archive Posts Widget

Expanding the Image section will let you set the border-radius and spacing between images and other elements.

Stylize the Image layout of the Archive Posts Widget

In the same way, by expanding the Content section, you can stylize the typography, color, and spacing for the Title, Meta, Excerpt, and Read More texts.

Stylize the content layout of the Archive Posts Widget

Finally, expand the Pagination section. This will allow you to customize the typography, colors, hover effects, and spaces for the pagination items.

Stylize the pagination option for the Archive Posts widget

Note: Indeed, there are many more options for each Elementor widget, including the Archive Posts widget. In the above tutorial, we have tried to give you a basic idea of the customizations you can do for the Archive Posts widget. Hope you can explore and use the options other than these.

Step 12: Save and Preview the Search Results Page

Now, come to the preview mode of the page. Type something in the box and hit the Search button. You’ll see the related blog posts appearing below in the grid format.

Preview the search results page

Any Error? Search Results Page Seems Broken!

After hitting the search button, you may get scared if you see the related blog posts appearing like the image below. You may feel like the page is broken.

Don’t worry! It’s very easy to solve the problem.

Search results page got broken

You just have to create an Archive page in the Elementor theme builder. The way you design the Archive Page will affect how the related blog posts are displayed after clicking the Search button.

Add an archive page to the theme builder

If you want us to create a separate tutorial post on how to create an archive page with Elementor, let us know through the comment section. We will consider designing such a page based on your expectations.

So, this is the end of the tutorial part of the post. Thus, you can create a search results page using Elementor on WordPress.

Bonus Point: Use HappyAddons to Get More Widgets for Elementor

HappyAddons for Elementor

HappyAddons is a prominent addon with a great collection of powerful widgets for Elementor. If you ever feel the available Elementor widgets aren’t enough and are in search of more, you can try the HappyAddons plugin.

HappyAddons comes with 120+ widgets and dozens of features that can take your Elementor site to a new level. The plugin has both a free and premium version. You can first try with the free version. If satisfied, you can upgrade to the premium version anytime and do something great.

Get the plugin by clicking the buttons attached below.

Conclusion

Creating a search result page is not a luxury today but is mandatory to enhance the user experience. It helps you uphold the appeal and brand value of your website. If your site is mainly for eCommerce products, affiliate marketing, and blogging, it’s never sufficient without a search result page.

Hopefully, by following the tutorial explained above, you can create stunning search result pages on your Elementor site. However, don’t forget to optimize the search widget for tablets and mobile devices so all types of people can use this element.

Share this post

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *

Day
Hrs
Mins
Secs

are you Sure?

Price increases in… 👇

Days
HOUR
MIN
SEC