Search Element

Last Update: February 15, 2023

The Search Element offers you a way to add a search bar anywhere in your content. It’s very easy to use, and even supports live search. See below for a live example, and more details! And don’t forget to watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Search Element

The Search Element is easy to add anywhere in your content. Follow these simple steps below. To start, add the element into your desired column.

There are three tabs, containing a number of options which affect how the search element will function and display. Go through the options and make your selections. You can enable Live Search, change layout design, control what content it searches, and add a placeholder and more.

Read below for a description of all element options.

Element Options

Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.


Enable Live SearchTurn on to enable live search results on menu search field and other fitting search forms.
Search Results ContentControls the type of content that displays in search results. Leave empty for all.
Limit Search to Post TitlesTurn on to limit the search to post titles only.
PlaceholderSearch placeholder
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.


Search Form DesignControls the design of the search form.
HeightControls the height of form input field. Enter value including CSS unit (px, em, rem), ex: 50px.
Field Background ColorControls the background color of search field.
Field Font SizeControls the size of the search field text. Enter value including any valid CSS unit, ex: 16px.
Field Text ColorControls the color of the search text in field.
Field Border SizeControls the border size of the search field.
Field Border ColorControls the border color of the search field.
Field Border Color On FocusControls the border color of the search input field when it is focused.
Field Border RadiusControls the border radius of the search input field. Also works, if border size is set to 0. In pixels.
MarginEnter values including any valid CSS unit, ex: 4%.


Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.

In this article