BetterDocs lets you easily manage your BetterDocs knowledge base documentation on WordPress Gutenberg Editor with three ready Gutenberg blocks ‘BetterDocs Search Form’, ‘BetterDocs Category Box’ & ‘BetterDocs Category Grid’. You can design a complete knowledgebase documentation site in Gutenberg having complete customization facilities.
Follow this step by step guideline below to find out how to create a knowledgebase site with ready BetterDocs Gutenberg Blocks:
Note: If you want to know how to configure BetterDocs Search Form documentation, you can check this detailed doc.
Step 1: Open Up WordPress Gutenberg Posts or Pages #
Make sure you have installed & activated BetterDocs on your WordPress site and create online documentation for your knowledgebase.
If you have already installed and created a knowledgebase site with BetterDocs, you can directly navigate to your desired Gutenberg site posts or pages.

Click on the ‘+’ sign from your Gutenberg Editor and search for ‘BetterDocs’. It will show up in the three available Gutenberg blocks. Here, you will get to know how to configure ‘BetterDocs Category Box’ & ‘BetterDocs Category Grid’ to design your knowledgebase in WordPress.

Step 2: Configure BetterDocs Category Box #
BetterDocs Category Box lets you showcase all your knowledgebase docs categories in a box layout. There you will get three options consisting of ‘General’, ‘Style’ & ‘Advanced’ tabs to make changes to your knowledge base design. Let’s explore one by one below:
From the ‘General’ tab, you will get two options called ‘Query’ & ‘Settings’. If you configure the Query option, you are able to ‘Include’ or ‘Exclude’ your preferable docs category in BetterDocs Category Box layout.

Besides you can decide your docs post per page, order by name, or order like ascending or descending as per your preference.

On the other hand, you can configure BetterDocs Category Box ‘Settings’ option to choose the ready layout with ‘default’ or ‘layout 2’. Also, can enable or disable docs category box icon, title, change heading, show count, configure prefix, suffix, or suffix singular accordingly.

Moreover, BetterDocs Category comes with a separate ‘Style’ option to customize the outlook of your knowledge base. It comes with Box, Icon, Title & Count, these four styling options.

You can configure each styling options-related feature to make the changes on your online Gutenberg site documentation outlook the way you want.

Moreover, BetterDocs provides a Full Site Editor compatible block, and pattern Category Box feature where you can get different category box layouts. It allows you to make changes to the category box design and layout as per your preference. You can now choose different designs directly using BetterDocs compatibility for the WordPress full-site editor.

Final Outcome of BetterDocs Category Box #
If you make the changes following the above guideline, your BetterDocs Category Box outcome can be like the image below:

Step 3: Configure BetterDocs Category Grid #
BetterDocs Category Grid is another format that helps you represent your website knowledgebase documentations title with category on top and in a grid layout. You can choose BetterDocs Category Box or BetterDocs Category Grid or both design forms as per your website environment.
There you will get three options ‘General’, ‘Style’ & ‘Advanced’ to design your knowledge base as per your preference. Let’s explore one by one below:

From the ‘General’ tab, you will get two options called ‘Query’ & ‘Settings’. If you configure the ‘Query’ option, you are able to ‘Include’ or ‘Exclude’ your preferable docs showing from BetterDocs Category Grid layout.

Besides, you can decide your docs post per page, order by name, or order like ascending or descending as per your preference. Even if you want, you can ‘Enable Nested Subcategory’ feature to showcase your docs subcategory with your category list.

On the other hand, you can configure BetterDocs’ Category Box ‘Settings’ option to ‘Select Layout’ with ‘default’ or ‘layout 2’.

You can even change the ‘Layout Mode’ in default ‘Grid’ or ‘Masonry’. Each of the layout modes consists of related configuration features to make the changes on your online documentation outlook.

Besides, your BetterDocs Category Grid ‘Button Text’ on each category button can be changed as per your requirement.
After making all changes to your BetterDocs Category Grid in Gutenberg Editor, you can start changing the appearance of it with a separate ‘Style’ tab. There you can see four options: ‘Grid’, ‘Title’, ‘Count’, ‘List’ & ‘Button’.

You can design each section and make the changes according to your preferences.

Besides, you can have an ‘Advanced’ design tab to change your knowledgebase design ‘Wrapper’ or by adding additional CSS.

Moreover, BetterDocs provides a Full Site Editor compatible block, and pattern Category Grid feature where you can get different category grid layouts. It allows you to make changes to the category grid design and layout as per your preference. You can now choose different designs directly using BetterDocs compatibility for the WordPress full-site editor.

Final Outcome of BetterDocs Category Grid #
If you follow the above guideline and make the changes accordingly, your BetterDocs Category Grid design can be like the image below:

By using BetterDocs Category Box or BetterDocs Category Grid, this is how you can design an amazing knowledge base on your Gutenberg website and reduce the pressure on your support channel.
Getting stuck? Feel free to contact our amazing Support Team for any assistance.