How To Add Elementor Search Icon Into Website Menu

How do you search for your desired product on an eCommerce site? Mostly use the search box.

A search box gives users the right direction. Typically an online store has a wide range of products in different categories. Having a well-optimized search bar helps customers find their desired things faster.

Your eCommerce website is beautifully designed with Elementor and has tons of exclusive products. But without the search function, customers will face difficulty to get the right products. Even it can make them highly disappointed, thereby they’ll leave the site.

To get it out today we’ll show you how to add Elementor Search Icon to your website menu. Why wait?

Let’s get in.

Why You Should Add the Search Option to Your Website

A search bar is one of the essential website features that you find on most modern websites. As a website owner, you can add this feature to your website in case of different purposes like finding necessary content, searching for products, ensuring better website navigation, and more. However, a visitor can use the search functionality to get the right data in real-time. Apart from this here are some benefits of using a search bar on your website.

• Improve visitors user-experience
• Helps visitors quickly find their desired information/products
• Increase conversion rate
• Keeps visitors on your website longer
• Helps you to understand what people looking in your site

How to Add Elementor Search Icon To Your Website Menu

It’s time to show you how to add a search form/icon to our Elementor website navigation menu. We’ve used our predesigned page for the demonstration. Also, we’ve created a navigation menu using the Elementor free & pro widgets.

Before diving into the tutorial, you need to install and activate the following plugins on your WordPress website.

Prerequisites:

• Elementor (Free)
• Elementor Pro

Let’s get started:

Step 1: Add Elementor Search Form Widget

The menu of our website doesn’t have any search option you notice. We want to add a search icon to the navigation bar so we’ve added a new Column to the menu area.

First, you find the Search Form widget from the left-side Elementor widgets area. Then you need to drag & drop the widget into the right-size column of the navigation menu.

Also, learn how to create a menu in WordPress.

Step 2: Set Search Skins

After adding the widget, you will get all the essential options to manage the search form content in the Content area.

There are three different Skins you can use to set the form design. The Skins are.

• Classic
• Minimal
• Full Screen

Check the below image and find which skin you like most.

You can write the Placeholder text in the Content section.

Step 3: Manage Search Button Content

The Content area allows you to manage the search form Button content. You can set the Button Type as Icon and Text. Here, we’ve defined Icon as our Button. You can also change the Icon and manage the icon Size in your own way.

Step 4: Style Form Input Fields

To customize the default search form style, you need to go to the Style section. You can restyle the Input field of your search form. You can change the Input’ Typography, Text Color, Background Color, Border Color, Box Shadow, Border Size, and Border Radius.

Here, we’ve customized the Text Color & added Border Radius and kept the other settings as default.

Step 5: Style Button

The Style->Button area comes with the necessary options for decorating the search form button. You change the Text Color, Background Color, icon Side, and Icon Width.

To make the Button catchy, we’ve changed its Background Color.

Step 6: Add Margin Into The Layout Area

You can get the other settings offered by Elementor by going to the Advanced section. We’ve also used this option to change the Layout.

Here, we’ve added an extra ‘12px‘ Margin at the Top of our widget so that the widget easily aligns with the other menu content.

Final Preview of Search Form

After customizing the widget here is the final outlook of our new navigation menu that has a beautiful Elementor search icon/form.

That’s it.

FAQs on Adding Elementor Search Icon To The Menu

If you still have some questions in your mind regarding this blog then you should check out below FAQs section. We’ve picked some of the common questions and answered them so that you can clarify your idea.

Conclusion

A search option is an ideal website element that every website must have. It not only helps to find the website’s contents or products but also ensures a better user experience. Now, you know the importance of having a search bar on a website and know how to implement it right away.

If you are still confused about where and how to start adding the search form to your website, you can follow the above steps.

Enjoy reading? Share this blog on your social channels and stay with our social networks Twitter & Facebook.