How To Configure BetterDocs Category Box & BetterDocs Category Grid In Gutenberg?

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:

Nota: 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. 

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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. 

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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:

Dal 'Generale' 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. 

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

On the other hand, you can configure BetterDocs Category Box 'Impostazioni' 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. 

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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.

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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:

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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 o 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:

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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. 

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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 'Stile' tab. There you can see four options: ‘Grid’, ‘Title’, ‘Count’, ‘List’ & ‘Button’.

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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.

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

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:

BetterDocs Category Box & BetterDocs Category Grid Gutenberg

By using BetterDocs Category Box o 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 Team di supporto for any assistance.

Offerto da BetterDocs