Search Element

Last Update: August 30, 2025

The Avada Search Element allows you to add a search bar anywhere in your content. It’s very easy to use, and even supports live search.

Watch the video below for a visual overview of the Element, view the Avada Search Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Search Element

The Search Element is easy to add anywhere in your web page or post content. Follow these simple steps below. To start, add the Element to your desired column.

There are three tabs, containing several options that 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, 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.

General

Heading		Description
Search Results Content		Controls the type of content that displays in search results. Leave empty for all.
Include Terms		Select one or more terms to which the search results should be limited to or leave blank for all.
Exclude Terms		Select one or more terms to exclude from search results or leave blank to exclude none.
Enable Live Search		Turn on to enable live search results on menu search field and other fitting search forms.
Live Search Minimal Character Count		Set the minimal character count to trigger the live search.
Live Search Number of Posts		Controls the number of posts that should be displayed as search result suggestions.
Live Search Display Featured Image		Turn on to display the featured image of each live search result.
Live Search Display Post Type		Turn on to display the post type of each live search result.
Limit Search to Post Titles		Turn on to limit the search to post titles only.
Search for Woo Product SKUs		Turn on to also search for WooCommerce product SKUs. This will only work, if products have been added to the search results content.
Placeholder		Search placeholder
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky Visibility		Choose 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 Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Search Form Design		Controls the design of the search form.
Height		Controls the height of form input field. Enter value including CSS unit (px, em, rem), ex: 50px.
Field Background Color		Controls the background color of search field.
Field Font Size		Controls the size of the search field text. Enter value including any valid CSS unit, ex: 16px.
Field Text Color		Controls the color of the search text in field.
Field Border Size		Controls the border size of the search field.
Field Border Color		Controls the border color of the search field.
Field Border Color On Focus		Controls the border color of the search input field when it is focused.
Field Border Radius		Controls the border radius of the search input field. Also works, if border size is set to 0. In pixels.
Live Results Background Color		Controls the background color of live search results.
Link Color		Controls the link color of the live search results.
Meta Color		Controls the meta color of the live search results.
Live Results Container Height		Controls the height of live results container.
Scrollbar		Turn on enable scroll for live search results.
Scrollbar Background		Controls the background color of the scrollbar of the live search results.
Scrollbar Handle Color		Controls the color of the scrollbar handle in live search results.
Live Results Border Size		Controls the border size of the live results.
Live Results Border Color		Controls the border color of the live search results.
Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.