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.,Search for:,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Search ElementThe Search Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Search from the Elements List.
Step 4. 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.
Step 5. Once you have completed selecting your options, click on Save.
Read below for a detailed description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab
Enable Live Search – Turn on to enable live search results on menu search field and other fitting search forms.
Search Results Content – Controls the type of content that displays in search results.
Limit Search to Post Titles – Turn on to limit the search to post titles only.
Placeholder – Controls the placeholder text in the search bar.
Element Visibility – Allows you to control the column』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
Element Sticky Visibility – (Only visible if parent Container is set to Sticky). 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 – Allows you to add a class for the column.
CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Search Form Design – Controls the design of the search form. Choose from Classic or Clean.
Height – Controls the height of form input field. Enter value including CSS unit (px, em, rem), ex: 50px. Leave empty for default value.
Field Background Color – Controls the background color of search field. Leave empty for default value.
Field Font Size – Controls the size of the search field text. Enter value including any valid CSS unit, ex: 16px. Leave empty for default value.
Field Text Color – Controls the color of the search text in field. Leave empty for default value.
Field Border Size – Controls the border size of the search field. In pixels.
Field Border Color – Controls the border color of the search field. Leave empty for default value.
Field Border Color On Focus – Controls the border color of the search input field when it is focused. Leave empty for default value.
Field Border Radius – Controls the border radius of the search input field. Also works, if border size is set to 0. In pixels.
Margin – Controls the margin around the element. Enter values including any valid CSS unit, ex: 4%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsNote: The Default setting will use the global settings assigned for this element in the Global Options. This Element does not have any Global Options in the Avada Builder Element section, but instead uses the Search Form section of the Global Options to control global options for the Element as well.