Introduction

The Search widget by Xpro Elementor is an outstanding and valuable widget that helps your site visitors find the articles or website material they seek. After you’ve added a search widget to your website, all your visitors have to do is enter the query they want to view on your site and they will be displayed with relevant posts.

The Xpro Elementor Search widget is really simple to use, and you will be able to implement and customize this tool on your site in no time. This free Xpro Elementor widget offers a variety of customization and layout choices for you to create the widget layout to your preferences.

How to Install Xpro Search Widget for Elementor

Requirement

You need to install and activate the free version of Xpro Elementor Addons. If you already have the plugin installed, just ensure the Search Widget is ‘Enabled’ from the Xpro Elementor Addons dashboard so you can find it in the Elementor editor.

To enable the widget, follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Search widget, and then toggle the button ‘ON’ to enable it.

How to Use the Xpro Search widget for Elementor

The Search widget for Elementor is an important tool to be added to your website platform. Your website users might not be aware of the location of the material on your site. Help them to find the piece of information they are looking for by letting them search for it through the search widget.

All you need to do is add the widget to your site and we will take care of the rest. Design the front display of the widget and we will take care of the complexity of the widget. Let’s further talk about how you can utilize this widget.

Step 1

Click on the Xpro Theme Builder section available in the Elementor Editor.

Step 2

From the Xpro Theme Builder section, find the Search widget, and simply drag and drop it to your desired page location.

The widget default view will look like this after you drag and drop it into the page builder.

Content Section

How to Change the Layout of the Xpro Search widget for Elementor

The Xpro Search widget for Elementor comes with five different layouts to choose from. All these layouts are unique and attractive. Select the layout that you believe will look perfect with your website theme.

How to Select the Source for Search widget for Elementor

What section of searches do you want to be appeared as the user type and enter the search query? You can select the search source from the source option. This drop-down menu shows all the sections you uploaded on your website. Select which one you want to be displayed.

You can change the display text in the search bar to anything you like. Just type in the Placeholder option to write creative text and make your visitors understand the functionality of the widget.

Set the alignment of the widget to left, right, or middle of the screen. Moreover, you can change the icon in the display from the icon library or upload it from desktop. Xpro Icon Library offers a wide range of stunning icons that you can choose from.

How To Style the Search widget for Elementor

Edit the text in the search display with the typography option. Change the text’s font, size, style, letter and word spacing, and much more.

Adjust the height and width of the search bar with their respective options. Furthermore, you can adjust the size of the icon according to your liking.

Change the color of the text and background for Normal and Focus. In this way, the appearance of the search bar will change as the user type in it.

How to Design the Border of Search Widget for Elementor

You can also change the border of the search bar to make them more visually appealing. You can choose from five different types of borders.

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Change the width and radius of the border to match your preferences. You can also change the border color.

Best Post Meta Widget for Elementor

This is all from the Elementor Search widget by Xpro. We hope you fully understand the functionality and implications of this superb widget and will be able to construct a fantastic blog page.

Xpro Elementor has a wealth of widgets and theme builders to assist you in creating a completely operational website without the need for complex coding. Check out our premium version of the Ajax Search widget for Elementor, which, in addition to displaying the results, displays a drag-down menu with relevant information.