View Categories

How To Configure BetterDocs Search Box In Gutenberg?

BetterDocs Search Box lets you easily design your knowledge base search panel on WordPress Gutenberg Editor. Follow this step by step guideline below to configure BetterDocs Search Box in WordPress Gutenberg Editor:

Step 1: Open Up WordPress Gutenberg Posts or Pages #

If you have already installed and created a knowledgebase site with BetterDocs, you can directly navigate to your desired Gutenberg site posts or pages.ย 

Note: Make sure you have installed & activated BetterDocs on your WordPress site and create online documentation for your knowledgebase if you havenโ€™t.ย 

BetterDocs Search Box In Gutenberg

Click on the โ€˜+โ€™ sign from your Gutenberg Editor and search for โ€˜BetterDocsโ€™. It will show up in three available Gutenberg blocks โ€˜BetterDocs Search Formโ€™, โ€˜BetterDocs Category Boxโ€™ & โ€˜BetterDocs Category Gridโ€™.ย 

From there choose โ€˜BetterDocs Search Boxโ€™ block and it will then be available on your preferred Gutenberg Editor section.ย ย 

BetterDocs Search Box In Gutenberg

Step 2: Configure BetterDocs Search Box Designย  #

BetterDocs Search Form comes with Search Box, Search Filed, Search Result Box, Search Result List, and Advanced options. Letโ€™s check how you can configure each feature and make the changes on your BetterDocs knowledgebase search box in Gutenberg Editor.ย 

BetterDocs Search Box In Gutenberg

Search Box #

If you want, you can configure your BetterDocs Search Box background into โ€˜Normalโ€™ or โ€˜Hoverโ€™. Whatever design type you may choose, you will get related separate customization features.ย 

From there, you can choose โ€˜Background Typeโ€™ into โ€˜Classicโ€™ & โ€˜Gradient’ and accordingly make the changes with background color, fonts, add a background image, and others.ย 

BetterDocs Search Box In Gutenberg

Search Filed #

From Search Field, you can change the placeholder, field background, or text color, typography, and field padding.ย 

Besides, you can design Search Field โ€˜Borderโ€™ in Normal or Hover. You can even change the search icon and close the color.ย 

BetterDocs Search Box In Gutenberg

Othersย  #

From Search Result Box, you can change search results box width, background color, add a background image, border types, and more in advance.ย 

From Search Result List, you can configure the typography, item color, item hover color, padding, and border as per your preference.ย 

BetterDocs Search Box In Gutenberg

Besides, there you can get a separate โ€˜Advancedโ€™ tab option to margin and add an additional CSS class to make the changes.ย 

BetterDocs Search Box In Gutenberg

Final Outcome #

By following the basic steps and a bit more modifying, you can style your BetterDocs Search Box as per your preference in Gutenberg Editor.

BetterDocs Search Box In Gutenberg

By using BetterDocs Search Box, this is how you can design an amazing knowledge base on your website and reduce the pressure on your support channel.

Getting stuck? Feel free to contact our amazing Support Team for any assistance.

Powered by BetterDocs