To access and use a widget:
In Elementor Editor, click +.
All available widgets are displayed.
Click or drag the widget to the canvas. For more information, see Add elements to a page.
A search bar helps users find information on your website. This is especially important as your website grows and incorporates more content.
Existing Search Form widgets are not affected by this change. You can still use and edit existing Search Form widgets as described in this article.
Rowan is webmaster of a large law firm Their site is quite large with a blog, lists of lawyers, Press Center and other content. They decide to add a search widget to the website header to make it easier for visitors to find the information they’re looking for.
See a video demonstrating the widget in action.
Hunter is building a website for his company. While the search form widget is normally added to the header of a website, they decide they want to create a full page search form.
A full page search opens up.
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
Add, delete, and edit menu items and controls.
Search forms can have three skins:
Text that will appear in the Search box.
Determines the size and content of the search button. Does not appear if you select a Minimal skin and is replaced by a Toggle section if Full Screen skin is selected. Options include:
Type: The classic search bar has a button that triggers the search. Use the dropdown menu to determine if the button will be represented by:
Size: Use the slider to increase and decrease the button size.
Determines the size and content of the search toggle. Does not appear if you select a Minimal skin and is replaced by a Button section if Classic skin is selected.
Options include:
Determine the look and feel of menu items and controls.
Control the look and feel of the text visitors enter in the text box:
Control the look and feel of the search button:
Set the look and feel of the icon in the search box, the placeholder text and the text entered in the search box:
Control the look and feel of the text visitors enter in the text box:
Set the look and feel of the toggle that will open the full screen search form:
Normal: How the toggle will appear by default.
Hover : How the toggle will appear when visitors mouse over it.
Color: Set the color for the toggle. For details, see Choose a color or Use global fonts and colors.
Background Color: Set a background color for the toggle. For details, see Create a Background.
Icon Size: Control the size of the toggle
Border Width: Set the width of the border around the toggle.
Control the placement of your widget, insert links, add custom code and more.
Learn more about the Advanced tab settings.
You have nothing to lose – but a great deal!