Design search results page with Elementor

Search Results Page template with Elementor thumbnail - websitelearninglab tutorial for beginners

Because I have added a Search bar widget on the homepage visitors are able to search for relevant information on the website that I have created for this course.

The results will be shown on a Search Results page. You can design this very easily with Elementor, just like the other site-parts I have showed you in the previous tutorials.

It works the same way and to be totally clear I will explain everything step by step again.

Table of Contents

Create Search Results page template

To start off I go to the Theme Builder and in the menu you can select the option Search Results.

After that I click on Add New.

Now I go to My templates and select the template for the archive page which I have created in the previous tutorial.

Click on Insert and then on Yes.

Everything is already OK so we don’t have to adjust anything here.

The reason that you do not see an image with some cards is because no featured image have been set for the Pages yet and I will add those in a minute.

 

Save settings

I save the changes by clicking on the green button.

Now I go back to the WordPress dashboard over to the overview with all Pages.

For all pages, I right-click the Edit option on the left to load them in a new browser tab.

 

Add Featured Images to Pages

When the pages are loaded you will see the option Set Featured Image on the right and over here you can select an image. 

I select an image for the homepage and after that I click on Set featured image.

Then I click the blue Update button and after the changes are saved I close the tab and move on to the next one.

After the Featured Images have been added to the Pages I go to Templates in the left menu and then I click on All.

You can find the template directly in the overview or you can use the tabs and there you will also see the Search Results tab. 

Click on it and you will find all your templates for Search Results pages here.

If you have multiple templates, you can see which one is currently enabled at Instances.

Now I click on Edit with Elementor to open the editor.

You can see that all cards now have an image so if they appear for a relevant search term it looks good.

So now you know how to customize the Search Results pages for your WordPress website!

You can watch the video tutorial on YouTube over here.

Check out this tutorial to learn the Elementor basics in 7 minutes.

In other tutorials I have explained how to design:

Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!