Search Element

28/02/2020

The Search Element is brand new in Avada 6.2, and 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 more details!

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

How To Use The Search Element

The Search Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Search Element into. Click on Add new Element, at the bottom of the content in the Column.

Step 3. Choose Search from the Elements List.

Step 4. There are 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. If you wish to make further customization, there are options for Element Visibility, as well as fields for a CSS Class, and CSS ID. There is also an Extras tab, if you wish to customize how the Search Element will load on the page. Once you have completed selecting your options, click on Save. Preview the page to view, and you can always come back and edit the Element to fine tune its look and function.

Read below for a detailed description of all element options.

Element Options

Location: 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.

General Tab

  • Enable Live Search – Turn on to enable live search results on menu search field and other fitting search forms.

  • Search Form Design – Controls the design of the search form. Choose from Classic or Clean.

  • 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 searchbar.

  • Margin – Controls the margin around the element. Enter values including any valid CSS unit, ex: 4%.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • 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 Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • 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 1.

  • 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 Screen

Global Options

Note: The Default setting will use the global settings assigned for this element in the Theme Options. This Element does not have any Global Options in the Fusion Builder Element section, but instead uses the Search Form section of the Theme Options to control global options for the Element as well.

Element Parameters

Copy to Clipboard
  • live_search – Enables Live Search. Options are yes or no.

  • design – Controls the design of the search bar. Options are classic or clean.

  • search_content – Controls what content will be searched. Options are post, page, avada_portfolio, avada_faq, product, tribe_events. 

  • search_limit_to_post_titles – You can limit the search to Post Titles. Options are yes or no.

  • placeholder – Controls the placeholder text on the searchbar.

  • margin_top – Controls the margins around the element. Enter values including any valid CSS unit, ex: 4%.

  • margin_right – Controls the margins around the element. Enter values including any valid CSS unit, ex: 4%.

  • margin_bottom – Controls the margins around the element. Enter values including any valid CSS unit, ex: 4%.

  • margin_left – Controls the margins around the element. Enter values including any valid CSS unit, ex: 4%.

  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.

  • class – Add a custom class to the wrapping HTML element for further css customization.
  • id – Add a custom id to the wrapping HTML element for further css customization.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.

  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.