We search for information on a daily basis on the Internet, and our websites should be able to be searched as well. Avada offers a range of search features and functionality, which we will go over in this document. In Avada 5.9, we added new functionality to search, including a whole new tab in the Avada Global Options, and in Avada 6.2, we added the Search Element. We have also added options for filtering what content is searchable, a range of ways of displaying that content, and a ‘live search’ feature. Try it below…
How To Enable Search
To enable search on your Avada website, there are several options.
Enable the Search Icon on the Main Menu – In the Global Options, at Avada > Options > Main Menu, there is an option to enable a Main Menu Search Icon. This places a search icon at the far right of your existing main menu.
Use the Search Bar Option in a Page Title Bar – If you use a Page Title Bar, you can replace the Breadcrumbs with a Search Bar, either globally at Avada > Options > Page Title Bar > Breadcrumbs / Search Bar, or on a page by page basis in the Page Title Bar tab of the Avada Page Options.
Add a Search Element – You can place a Search Bar anywhere in your content by placing the Search Element into your page content (as in the example search bar above).
Main Menu Search Overlay
If you wish to change the Main Menu Search layout, from a Drop-Down to a Menu Overlay., there is also an option in the Main Menu Options (Avada > Options > Menu > Main Menu) to achieve this.
When this is enabled, clicking on the search icon in the Main Menu triggers a search overlay, which goes the full length of the menu and covers it completely. This is a design option and works whether Live Search is enabled or not.
See the screenshots below for where to find the options, how the menu looks initially with this option turned on, how the overlay displays once the search icon is clicked, and how the menu results display if Live Search is enabled.
The settings for Live Search can be found in the Options > Search > Search Form tab. If you turn it on, you will see many options underneath it to control its appearance and functionality. You can set a minimal Character count for it to kick in, limit the number of posts the live search will suggest, control the height of the Live Search Results Container, and control whether the featured image and post type are displayed in the results.
Results show as soon as the minimum number of characters is reached (see image below). However, if the user hits Enter after they type, the search page will load instead.
Search Global Options
These are found in the Global Options, at Avada > Options > Search.
Search Form Options
Limit Search Results Post Type – Turn on to limit the search results to specific post types you can choose.
Search Results Content – Controls the type of content that displays in search results. This is a multi-select option. Choices are Pages, Posts, Portfolio Items, FAQ Items, WooCommerce Products, and Event Calendar Posts.
Limit Search to Post Titles – Turn on to limit the search to post titles only.
Search Form Design – Controls the design of the search forms. Choose from Classic or Clean.
Enable Live Search – Turn on to enable live search results on the menu search field and other 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 Results Container Height – Controls the height of the container in which the search results will be listed. In pixels.
Live Search Display Featured Image – Turn on to display the featured image of each live search result. Choose from Yes or No.
Live Search Display Post Type – Turn on to display the post type of each live search result. Choose from Yes or No.
Search Page Options
Search Results Layout – Controls the layout for the search results page. Choose from Large, Medium, Large Alternate, Medium Alternate, Grid, or Timeline.
Number of Search Results Per Page – Controls the number of search results per page.
Search Pagination Type – Controls the pagination type for the search results page.
Number of Columns – Controls the number of columns for grid and masonry layouts. IMPORTANT: Masonry layout does not work with 1 column.
Column Spacing – Controls the column spacing for search results. In pixels.
Search Content Display – Controls if the search results contents display as an excerpt or full content or are completely disabled. Choose from Excerpt, Full Content, or No Text.
Search Excerpt Length – Controls the number of words (or characters) in the search results excerpts.
Search Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for the search results page.
Featured Images for Search Results – Turn on to display featured images for search results.
Search Results Meta – Select the post metadata you want to be displayed in the individual search results. Possible metadata options are Author, Date, Categories, Comments, Read More Link, Tags, and Post Type.
Search Field Position – Controls the position of the search bar on the search results page. Choose from Above Results, Below Results, or Hide.