Skip to content

WP Vibes | Manage Account

Elementor Addons
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
Elementor Addons
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us

How To Create Attractive Search Template Using AnyWhere Elementor Pro

November 30, 2020
/
Akanksha Soni

If you have lots of posts and products on your website, then it becomes challenging for you to navigate through them. Imagine you are browsing through an eCommerce website, and you are looking for a specific product. Since the site will be loaded with lots of products so navigating through each product is not possible.

So there has to be an easy way out where you can get exactly what you are looking for.  So in such scenarios, where you know exactly what you want, search Pages play an important role.

So what is a Search Page? The answer is pretty simple. It is an archive, with all your content in it like blogs, products, catalogs, etc. The Search page filters your content and looks for the content that matches the searched text.

You need to enter your search keywords, and it displays all the content related to the typed keyword.

In today's world Search pages plays a vital role, as it saves your time and energy by providing you with your choice in just one click.

So in this tutorial, we are going to cover, how to create a simple and elegant Search Page, Template using the AnyWhere Elementor Pro plugin. We will be adding all the necessary elements that are needed to design a fully functional search page.

Here is the sneak peek of what we will achieve

Search Template

Getting Started 

To get started you will need to install Anywhere Elementor Pro and Elementor plugins.

You will also need some posts/pages created for testing purposes to have the search results page show actual results.

After that, you are ready to go.

Creating Block Layout 

Before creating a Search template, we need to design the layout for our search result page. For this

1. First, navigate to your WordPress admin dashboard and select AE - Template >> Add New to create a new template.

2. Then under the AnyWhere Elementor Settings, you need to perform some configuration. Select Render Mode as Block Layout and a Preview Post to be used in creating the block layout.

Block Layout

3. Then edit the template using Elementor. Then add the dynamic widgets to get the content from the post. Give appropriate styling to the layout.

The block layout looks like this.

Search Template

Creating a Search Template

 After you are done with the block layout, next, we will be creating the Search Template

1. Go to WordPress dashboard AE Template>> Add new create a new template which will be used for the search layout.

2. Now configure the Anywhere Elementor Settings. Since we are creating a Search template select render mode as Search template and set your template settings. Then edit the template with Elementor page builder.

AnyWhere Elementor Settings

3. In Elementor editor add a section and then drag the AE - Search Form widget in it. Enter the default search label and give a text to the search button. Style the widget accordingly.

AE - Search Form

4. If you want to display the searched text, and the result count, you can add a Text Editor widget, with the following text in it.

  • Search Key: to show search keyword
  • 0: to show search result count

Search Template

Displaying Search results

To display the search result, you need to add the AE - Post Block widget, and then do the configuration settings for the blocks.
In the Source, select Current Archives. In The Block layout option, select the block layout you have created. Set the pagination and layout options and give some styling to the blocks.

Search Template Results

That it, you are done with creating your own customizable Search Template. Now you just simply need to go to your website, and type in a keyword in the search field and there you go!

PrevPrevious
NextNext

Leave a Reply Cancel reply

  • About Us
  • Terms of Service
  • Contact Us
© 2021 WebTechStreet
  • Home
  • Products
    • AnyWhere Elementor Pro
    • Elementor Addon Elements
    • Anywhere Elementor
    • Form Vibes
  • Blog
  • Contact Us
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider for Elementor
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar
Menu
  • Timeline
  • Info Circle
  • Comparison Table
  • Thumbnail Slider for Elementor
  • Content Switcher
  • Filterable Gallery
  • Flip Box
  • After Before Image Compare
  • Particle Background
  • Animated Gradient Background
  • Background Image Slider
  • Dual Button
  • Modal Popup
  • Animated Text
  • Google Map
  • Post List
  • Price Table
  • Shape Separator
  • Split Text
  • Text and Icon Separator
  • Twitter feed
  • Progress Bar