{"id":4595,"date":"2021-12-14T17:12:41","date_gmt":"2021-12-14T11:12:41","guid":{"rendered":"https:\/\/betterdocs.co\/?post_type=docs&p=4595"},"modified":"2024-03-25T12:45:33","modified_gmt":"2024-03-25T06:45:33","password":"","slug":"betterdocs-category-grid-gutenberg","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/betterdocs-category-grid-gutenberg\/","title":{"rendered":"How To Configure BetterDocs Category Box & BetterDocs Category Grid In Gutenberg?"},"content":{"rendered":"

BetterDocs<\/b><\/a> lets you easily manage your BetterDocs knowledge base documentation on WordPress Gutenberg Editor with three ready Gutenberg blocks <\/span>\u2018BetterDocs Search Form\u2019, \u2018BetterDocs Category Box\u2019 <\/b>& <\/span>\u2018BetterDocs Category Grid\u2019. <\/b>You can design a complete knowledgebase documentation site in Gutenberg having complete customization facilities.<\/span> <\/b><\/p>\n\n\n\n

Follow this step by step guideline below to find out how to create a knowledgebase site with ready BetterDocs Gutenberg Blocks:<\/span><\/p>\n\n\n\n

Nota:<\/i><\/b> If you want to know how to configure <\/span><\/i>BetterDocs Search Form<\/i><\/b> documentation, you can check this detailed doc. <\/span><\/i><\/p>\n\n\n\n

Step 1: Open Up WordPress Gutenberg Posts or Pages<\/b><\/h2>\n\n\n\n

Make sure you have <\/span>installed & activated BetterDocs<\/b><\/a> on your WordPress site and create online documentation for your knowledgebase. <\/span><\/p>\n\n\n\n

If you have already installed and created a knowledgebase site with BetterDocs<\/strong>, you can directly navigate to your desired Gutenberg site posts or pages. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Click on the \u2018+\u2019 sign<\/strong> from your Gutenberg Editor and search for \u2018BetterDocs\u2019. It will show up in the three available Gutenberg blocks.  <\/span>Here, you will get to know how to configure <\/span>\u2018BetterDocs Category Box\u2019 & \u2018BetterDocs Category Grid\u2019<\/b> to design your knowledgebase in WordPress. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Step 2: Configure BetterDocs Category Box<\/b><\/h2>\n\n\n\n

BetterDocs Category Box<\/b> lets you showcase all your knowledgebase docs categories in a box layout. There you will get three options consisting <\/span>of \u2018General\u2019, \u2018Style\u2019 & \u2018Advanced\u2019<\/b> tabs to make changes to your knowledge base design. Let\u2019s explore one by one below:<\/span><\/p>\n\n\n\n

Dal <\/span>'Generale' <\/b>tab, you will get two options called \u2018Query\u2019 & \u2018Settings\u2019. If you configure the Query option, you are able to<\/span> \u2018Include\u2019 or \u2018Exclude\u2019 <\/b>your preferable docs category in BetterDocs Category Box layout. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Besides you can decide your docs post per page, order by name, or order like ascending or descending<\/strong> as per your preference.<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

On the other hand, you can configure BetterDocs Category Box <\/span>'Impostazioni'<\/b> option to choose the ready layout with \u2018default\u2019 or \u2018layout 2\u2019.<\/strong>  <\/span>Also, can enable or disable docs category <\/span>box icon, title, change heading<\/b>, show count, configure prefix, suffix, or suffix singular accordingly. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Moreover, BetterDocs Category comes with a separate <\/span>'Stile' <\/b>option to customize the outlook of your knowledge base. It comes with <\/span>Box, Icon, Title & Count,<\/b> these four styling options. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

You can configure each styling options-related feature to make the changes on your online Gutenberg site documentation outlook the way you want.<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

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.<\/p>\n\n\n

\n
\"BetterDocs<\/figure>\n<\/div>\n\n\n

Final Outcome of BetterDocs Category Box<\/b><\/h2>\n\n\n\n

If you make the changes following the above guideline, your BetterDocs Category Box outcome can be like the image below:<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Step 3: Configure BetterDocs Category Grid<\/b><\/h2>\n\n\n\n

BetterDocs Category Grid<\/b> is another format that helps you represent your website knowledgebase documentations title with category on top and in a grid layout. You can choose <\/span>BetterDocs Category Box<\/b> o <\/span>BetterDocs Category Grid<\/b> or both design forms as per your website environment. <\/span><\/p>\n\n\n\n

There you will get three options<\/span> \u2018General\u2019, \u2018Style\u2019 & \u2018Advanced\u2019<\/b> to design your knowledge base as per your preference. Let\u2019s explore one by one below:<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Dal <\/span>'Generale' <\/b>tab, you will get two options called <\/span>\u2018Query\u2019 & \u2018Settings\u2019<\/b>. If you configure the \u2018Query\u2019 option, you are able to<\/span> \u2018Include\u2019 <\/b>o<\/span> \u2018Exclude\u2019 <\/b>your preferable docs showing from BetterDocs Category Grid layout. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

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 <\/span>\u2018Enable Nested Subcategory\u2019<\/b> feature to showcase your docs subcategory with your category list. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

On the other hand, you can configure BetterDocs’ Category Box <\/span>'Impostazioni'<\/b> option to <\/span>\u2018Select Layout\u2019 <\/b>with \u2018default\u2019 or \u2018layout 2\u2019. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

You can even change the <\/span>\u2018Layout Mode\u2019<\/b> in default <\/span>\u2018Grid\u2019<\/b> o <\/span>\u2018Masonry\u2019<\/b>.  Each of the layout modes consists of related configuration features to make the changes on your online documentation outlook. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Besides, your BetterDocs Category Grid <\/span>\u2018Button Text\u2019<\/b> on each category button can be changed as per your requirement. <\/span><\/p>\n\n\n\n

After making all changes to your BetterDocs Category Grid in Gutenberg Editor, you can start changing the appearance of it with a separate <\/span>'Stile'<\/b> tab. There you can see four options: <\/span>‘Grid\u2019, \u2018Title\u2019, \u2018Count\u2019, \u2018List\u2019 & \u2018Button\u2019<\/b>.<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

You can design each section and make the changes according to your preferences. <\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

Besides, you can have an <\/span>\u2018Advanced\u2019 <\/b>design tab to change your knowledgebase design <\/span>\u2018Wrapper\u2019 or by adding additional CSS.<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

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.<\/p>\n\n\n

\n
\"BetterDocs<\/figure>\n<\/div>\n\n\n

Final Outcome of BetterDocs Category Grid <\/b><\/h2>\n\n\n\n

If you follow the above guideline and make the changes accordingly, your BetterDocs Category Grid design can be like the image below:<\/span><\/p>\n\n\n\n

\"BetterDocs<\/a><\/figure>\n\n\n\n

By using <\/span>BetterDocs Category Box<\/b> o <\/span>BetterDocs Category Grid<\/b>,  this is how you can design an amazing knowledge base on your Gutenberg website and reduce the pressure on your support channel.<\/span><\/p>\n\n\n\n

Getting stuck? Feel free to contact our amazing <\/span>Team di supporto<\/b><\/a> for any assistance.<\/span><\/p>","protected":false},"excerpt":{"rendered":"

Create a stunning knowledgebase with BetterDocs Category Box & BetterDocs Category Grid in Gutenberg and customize the design as per your preference.<\/p>","protected":false},"author":8,"featured_media":0,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[227,228,229,230,225,17,16],"knowledge_base":[282],"class_list":["post-4595","docs","type-docs","status-publish","hentry","doc_category-configurations","doc_tag-betterdocs-category-box","doc_tag-betterdocs-category-grid","doc_tag-betterdocs-gutenberg-blocks","doc_tag-betterdocs-knowledgebase-gutenberg","doc_tag-betterdocs-search-box","doc_tag-knowledge-base","doc_tag-wordpress","knowledge_base-wordpress"],"year_month":"2026-04","word_count":889,"total_views":"11300","reactions":{"happy":"27","normal":"6","sad":"14"},"author_info":{"name":"Afrin","author_nicename":"afrin","author_url":"https:\/\/betterdocs.co\/it\/author\/syeda-sanjida-afrin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/betterdocs.co\/it\/docs\/shopify\/configurations\/"}],"doc_tag_info":[{"term_name":"BetterDocs Category Box","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-category-box\/"},{"term_name":"BetterDocs Category Grid","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-category-grid\/"},{"term_name":"BetterDocs Gutenberg Blocks","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-gutenberg-blocks\/"},{"term_name":"BetterDocs Knowledgebase Gutenberg","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-knowledgebase-gutenberg\/"},{"term_name":"BetterDocs Search Box","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-search-box\/"},{"term_name":"knowledge base","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/knowledge-base\/"},{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/wordpress\/"}],"knowledge_base_info":[{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/it\/docs\/wordpress\/","term_slug":"wordpress"}],"knowledge_base_slug":["wordpress"],"_links":{"self":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/users\/8"}],"version-history":[{"count":9,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4595\/revisions"}],"predecessor-version":[{"id":11536,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4595\/revisions\/11536"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=4595"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=4595"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=4595"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=4595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}