BetterDocs Pro allows you to make your knowledgebase search panel more advanced with the popular or category-wise searches in Elementor to help your site visitors more. Follow this step by step guideline below to configure BetterDocs Advanced Search in Elementor:
Note: If you want to configure this BetterDocs Doc Search Form advanced search features in Elementor, then make sure you have installed and activated BetterDocs Pro on your WordPress site.
Step 1: Configure BetterDocs Doc Search Form In Elementor #
First, navigate to your Elementor Editor and open up your doc page to configure BetterDocs Doc Search Form.
Afterward, just look for BetterDocs ‘Doc Search Form’ element in your Elementor Editor ‘Search’ panel and drag & drop the element in the ‘+’ sign section.
Note: If you want to know in detail about creating a doc page in Elementor with BetterDocs, just go through the link.
From BetterDocs Doc Search Form, you will get three advanced search options ‘Enable Category Search’, ‘Enable Search Button’ & ‘Enable Popular Search’.
BetterDocs Enable Category Search option is there to help you add a category-based advanced search in your Knowledgebase in Elementor. This will help you sort documentation with any required keywords with available categories you have created.
From the Enable Search Button, you can search the knowledgebase and hit the keywords ‘Search Button’ to get all related results.
With Enable Popular Search, you can showcase the most popular keywords on your BetterDocs Advanced Search panel. It can help visitors to go to your most searched documentation right away.
Note: This BetterDocs Popular Search feature is functional for a particular doc when it is searched a minimum of five times. Otherwise, it will not visualize any of your popular search terms in BetterDocs Doc Search Form panel.
Step 3: Add Style To BetterDocs Advanced Search #
As you have fully configured your BetterDocs Doc Search Form advanced search features in Elementor, you can now ‘Style’ your doc search form the way you want.
BetterDocs Doc Search Form comes with four separate styling options Search Box, Search Field, Search Result Box, Search Result List, and exclusive Advanced Search options.
Search Box #
From Search Box, you can customize your doc search panel ‘Background Type’ into ‘Classic’ & ‘Gradient’. Accordingly make the changes with background color, fonts, add a background image, and others.
Others #
From Search Field, you can change the placeholder, field background, or text color, typography, field padding, margin, and border-radius. You can even change the search icon and close the size and color.
From Search Result Box, you can change search results box width, background type with Classic & Gradient. And experiment with color, add a background image, border types, and more in advance.
From this Search Result List, you can configure the Normal & Hover option. You can customize the ‘Normal’ search result list typography, item color, border type, padding, doc category, and more.
Moreover, you can change ‘Hover’ over your doc search result transition speed, item background type, color, border type, count, and more as per your preference.
Advanced Search #
From Advanced Search, you can style all BetterDocs Doc Search Form advanced styling options like category search, search button, and popular search. You can change the doc category typography and font color. Also can style the doc search typography, font color, background color, hover padding, and more.
Besides, if you want, you can modify the placeholder content, color, keyword typography, background color, hover color, text color, and more in advance.
Final Outcome #
By following the basic steps and a bit more modifying, you can configure your BetterDocs Advanced Search as per your preference in Elementor.
By using BetterDocs Doc Search Form, this is how you can organize an amazing knowledgebase advanced search panel for visitors to improve user experience.
Getting stuck? Feel free to contact our amazing Support Team for any assistance.
