Search Element

Last Update: March 13, 2024

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.

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.

General

HeadingDescription
Search Results ContentControls the type of content that displays in search results. Leave empty for all.
Enable Live SearchTurn on to enable live search results on menu search field and other fitting search forms.
Live Search Minimal Character CountSet the minimal character count to trigger the live search.
Live Search Number of PostsControls the number of posts that should be displayed as search result suggestions.
Live Search Display Featured ImageTurn on to display the featured image of each live search result.
Live Search Display Post TypeTurn on to display the post type of each live search result.
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.
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.

Design

HeadingDescription
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.
Live Results Background ColorControls the background color of live search results.
Link ColorControls the link color of the live search results.
Meta ColorControls the meta color of the live search results.
Live Results Container HeightControls the height of live results container.
ScrollbarTurn on enable scroll for live search results.
Scrollbar BackgroundControls the background color of the scrollbar of the live search results.
Scrollbar Handle ColorControls the color of the scrollbar handle in live search results.
Live Results Border SizeControls the border size of the live results.
Live Results Border ColorControls the border color of the live search results.
MarginEnter values including any valid CSS unit, ex: 4%.

Extras

HeadingDescription
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.

In this article