Avada theme tutorial: using Search Element, let the site search more intelligent, practical, convenient

Avada ThemeNot only does it inherit WordPress' built-in search capabilities, but it also provides an easily customizable Search ElementIt can be inserted into theAnywhere on the siteRealizationReal-time search,Filtering content typesand other advanced features. This article will take you through the complete Avada search elementsrole and provides detailed setup steps to help you quickly achieve professional-grade search forms.

What is Avada Search Element?

Avada Search Element is a component of the Avada Builder Element that provides a website withSearch ContentThe search bar can be inserted into any area of the page, for example:

• Page content area
• Header Layout
• Footer Layout
• Customized Layout Section

It supports WordPress Global SearchThe following are also availableExcellent features::

• Live Search
• Support for searching specific content types (articles, portfolios, etc.)
• Display meta information such as featured image, post type, category, etc.
• Full design customization (borders, fonts, backgrounds, colors, etc.)

II. How to add and set up search elements

Adding a Search Element

• Go to the page editor (Avada Live Builder).
• Find where you want to insert the search box.

• Click Add Element (+) to search and select the SearchThe

• commander-in-chief (military)Search elementsInsert the page and you can start configuring its parameters.

Configuring the General tab

1. Search Results Content

• Select the type of content to be searched, the default is empty indicating that the entire site will be searched.
• For example, if your video content is of the Portfolio type (Portfolio), you can specify that only that type should be searched.

2. Enable Live Search

Whether or not to enable the "Real-time search", which is recommended to be turned on. The following options appear when turned on:

• Live Search Minimal Character Count: How many characters the user enters before the real-time search is triggered, default is 3.
• Live Search Number of Posts: How many suggestions are displayed, default is 100, can be set to 10-500.
• Display Featured Image: Whether to display thumbnails of search suggestion results (default is yes).
• Display Post Type: Whether to display content type tags (e.g., posts, pages, etc.).
• Limit Search to Post Titles: Whether to search only the title (the default is no, which means to search the full text).

3. Placeholder

The text in the search box, for example, can be set to "Search for videos".

Configuring the Design tab (Style Appearance)

1. Search Form Design

Steps: Search -> Design

Optional styles are:

• Clean
• Classic

You can choose one of them depending on the style of the website.

2. Fonts and Colors

• Default font size 16px
• font colorAvada's color 7 is used by default
• Background color, border color, focus color can be freely customized (using Avada color presets)

3. radius of a rounded corner

Field Border Radius defaults to 6px, which is a slightly rounded effect.

4. Live Search Dropdown Box Style

Customizable:

• background color
• Link Color
• Meta information color (e.g. article categories)
• Maximum container height (e.g. 500px)
• Scroll bar style (default, hidden, customized)

Extras tab (advanced settings)

You can add a Loading Animation to the search bar like:

• slide in
• fade in
• bouncy
• Magnification and 7 other effects

Can be set to None if no animation is needed.

test effect

1. Save the page and refresh the front-end page.
2. Scroll to the inserted search bar area.
3. Enter a keyword (e.g. "tutorials" or "Video") to see the real-time suggestion results drop down.
4. Clicking on one of these will take you directly to the corresponding page; pressing enter will take you to the standard WordPress search results page.

Suggestions for Use and Practice Tips

• If your content is categorized as articles, products, videos, etc., it is recommended that you pass the Search Results Content Precise control of search types.
• Enabling Live Search improves the sense of interaction, and it is recommended to set a reasonable maximum number of results and trigger characters.
• The search box is placed in the header orProminent position on the home pagethat helps boost visitor engagement.
• The search bar can be added to the Header, Sticky Bar or Off-canvas area in conjunction with the Layout Builder.

summarize

Avada Search Element is a powerful and highly customizable component that not only enhances the user search experience, but also enables visual unity and interaction optimization through rich styling and content control options. To learn more about WordPress and Avada TutorialWelcome to followPhoton fluctuation networkThe daily sharing of practicalWebsite Building TipsExperience with website optimization.