Detailed tutorial on adding a search icon to a website menu with the Elementor plugin

In this article, we'll give you a detailed overview of how you can use the Elementor plugin to convert theSearch icon added to site menuThe

What is the Elementor search icon?

The Elementor search icon is actually a file provided by the Elementor plugin called "Search form" widget. With this widget, it's possible to add a new widget anywhere on the site (such as theHeader, footer or sidebar) Create a search bar. By placing it in the header or footer of the site, users can access this feature from any page of the site, greatly facilitating navigation and search.

The widget is highly flexible and can be customized with its placeholder text, icons, box shadows, borders, icon positions, typography settings and more. In addition, it can be customized for different screen sizes (Desktops, tablets and cell phones) are optimally configured to ensure that on all devicesgood indicatorThe

How to add the Elementor search icon to your website menu

This tutorial will use the free version of Elementor and theProfessional Editionwidgets, and demonstrated through a pre-designed page.

Step 1: Add the Elementor Search Form Widget

First, make sure you don't have any search options in your site menu yet. We'll place the search icon by adding a new column to the menu area.

1. Open the Elementor editor: From the widget panel on the left, find "Search Form"Widgets.

2. Drag and drop widgets: Drag and drop the search form widget into the right column of the navigation menu.

In this way, a search form has been successfully added to the menu.

Step 2: Set the search skin

Elementor can choose from three different skins to design the appearance of the search form:

1. scriptures: This is the most basic design and usually applies to clean layouts.
2. minimal: This skin emphasizes simplicity and sophistication, perfect for modern websites.
3. full screen: This skin allows the search box to expand to a full-screen display when the user clicks on it, perfect for content-rich websites.

Depending on the style of your website, choose the appropriate skin and add placeholder text to the content section.

Step 3: Manage Search Button Content

In the content area, you can choose to set the search button as an icon or as text. In this example, we have set the button as an icon, with the ability to customize the size and position of the icon.

1. Select icon type: In the button content section, icons are chosen as the main form of presentation for the buttons.
2. Resize Icons: Based on the menu design, the icons are resized to harmonize with other menu items.

Step 4: Customize the style of the form input fields

To further embellish the search form, go to "type" section to adjust the style of the input field.

1. arrange the layout (of a book): Change the font, font size, and text color of input fields to match the overall design of the site.
2. Setting the background and border: You can customize the background color, border color, box shadow, etc. of the input field.
3. Add border radius: By setting the border radius, you can make the corners of the search box more rounded to enhance the visual effect.

Step 5: Style buttons

The style of the search button can also be customized in the "Style" section.

1. Change button color: Set the text color and background color of the button to make it stand out on the page.
2. Adjust icon position: Adjust the position of the button icons as needed to harmonize with the overall form design.

Step 6: Add margins to the layout area

In the advanced settings, you can adjust the layout of the widget, such as adding margins or inner margins, to ensure that the search form is aligned with other menu items.

• Adding Margins: Add an appropriate margin at the top of the widget so that the search form can be better aligned with the rest of the menu content.

Step 7: Make the Elementor search icon mobile-responsive

To ensure that the search form behaves consistently across devices, you can use Elementor's "Response Mode"Options.

1. Switching Screen Size: At the top of the Elementor panel, switch between different screen sizes to optimize the layout of the search form for each.
2. Resize and reposition widgets: Adjust the size and position of the widgets according to the screen size to ensure good display on phones, tablets and desktops.

Note: Do not delete any widget as it will disappear in all screen sizes after deletion. There is an option to hide a widget for a specific screen size instead of deleting it.

Step 8: Preview the search bar

Preview the newly designed navigation menu after all settings have been completed. Ensure that the search form looks and functions as expected on all devices.

Frequently Asked Questions

1. Is the Elementor search form widget free?
   • No. The Search Form widget is an advanced widget in Elementor that is only available in theProfessional EditionOffer.
2. How to customize the search bar in WordPress?
   • It is possible to add and customize the search bar in your WordPress website through Elementor or other plugins. Please refer to the related tutorials for detailed steps.
3. How do I create and edit a search results page in Elementor?
   • Search result pages can be easily created and edited through Elementor's theme builder feature. Go toTemplates -> Theme Builder -> SearchAs a result, it is sufficient to choose a ready-made template.

reach a verdict

Search functionality is an important tool to enhance the user experience of your website. By adding a search icon to your site's menu, users can find what they are looking for more easily, thus improving ease of use and conversions.Elementor provides powerful search form widgets that can be customized to meet specific needs, ensuring that the search form is consistent with the overall style of the site.