A well-designed search results page helps visitors quickly locate targeted content, saving time and inspiring more in-site browsing.

Elementor Pro It is the core tool for realizing such pages. It supports theme builder, custom templates and advanced controls to make the whole search experience more flexible. The next step is to explain how to do it.

What is a customized search results page?

Customized search result page is used to display blogs, products, articles, services and other content matching with keywords. You are free to add titles, images, filters and other modules to make the page more visually appealing and functional.

Common Usage Scenarios

• E-commerce: Combine search + filters to quickly display targeted products
• Blogs: filter posts by tag, category or author
• Knowledge Base: Provides a quick access to document search
• Service Platform: Filter services with different prices, ratings, and regions
• Educational websites: search for courses, textbooks, learning resources

Preparation tools

Make sure the site is installed:

• Elementor
• Elementor Pro

The creation operation begins next.

Step 1: Open Elementor Pro Theme Builder

• Log in to the backstage
• Go to "Templates > Theme Builder".

• Find the "Search Results" module and click "Add New Template".

The system will enter a blank canvas for subsequent components.

Step 2: Add Title & Description Block

• Click on the plus sign to create a new region

• Drag and drop the "Title" component into the input page.caption

• Adjusting fonts, colors and positions in Styles

Then add the "Text Editor" component, enter the description text, also set in the "Style".typeThe

Step 3: Add a search box

• Drag in the "Search Form" component.

• Set the left and right margins in "Advanced > Margins" to control the width.

• Adjust fonts, backgrounds, borders and rounded corners in Styles.

The rounded corners of the search button and search box can be set separately to achieve a unified visual style.

Step 4: EnableReal-time searchfunctionality

• Switch to the "Content" tab
• Open the "Live Results" option in the "Results" section.
• Set the maximum number of matches to display

Step 5: Create a Live Results Template

• Click on "Create Template" to enter the new canvas.

• Selection of horizontal row structures

• Drag in the Featured Image component, set it to medium size and adjust the rounded corners.

• Drag in the "Article Title" component and set the font and color.

• Save Template

This template determines the format of each item of content displayed during a search.

Step 6: Apply the template to the search results

Go back to the main page and select the template you just saved in the Live Results module.

At this point, you can set the number of items to be displayed, the sorting method, and so on.

Step 7: Customize Real-time Result Styles

Set in Style > Result:

• contextscolor
• Borders and rounded corners
• inner margin
• Column width and project spacing

Test enter the keyword when you are done and the real-time display results will appear below the input box.

Step 8: Add the Article Archiving component

• Create a new paragraph area
• Drag in the "Archive Posts" component.

This component displays the content of all published articles on the current site.

Step 9: Configure how articles are displayed

Set in "Contents":

• Number of columns, image position and resolution

• Showing title, summary, meta information and "Read more"
• Number of characters vs. meta-information fields (e.g., dates, comments, etc.)

• set uptab window (in a web browser etc)Mode and Alignment

Step 10: Beautify the article list

Set in "Style":

• Column spacing and alignment

• Image Margins and Rounded Corners

• Fonts and colors for titles, abstracts and meta information

• The pagination button style is the same as thehoverquality

After all the settings are completed, the page content will be closer to the overall style of the website.

Step 11: Save and Preview

Save and go to the frontend preview, enter a keyword and click search, you will see real-time search results appearing above and a list of full article archives displayed below.

Frequently Asked Questions: Confusing page display?

Sometimes the page is blank or mis-structured after clicking search because there is no setting for theArchive PageTemplate.

Solution:

• Return to "Templates > Theme Builder".
• Creating an "archive" template
• Set the presentation, save and enable to fix it

summarize

utilization Elementor Pro It's easy to build a fully functional and professional looking search results page. Whether it's a search box, real-time results display or article archive content, it's highly customizable to suit your site's needs. With proficiency, you can also extend the application scenarios, such ascatalogsCreation of pages such as pages, filter pages, knowledge centers, etc.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off