{"id":2409,"date":"2021-03-03T17:57:05","date_gmt":"2021-03-03T11:57:05","guid":{"rendered":"https:\/\/betterdocs.co\/?post_type=docs&p=2409"},"modified":"2022-02-17T19:19:37","modified_gmt":"2022-02-17T13:19:37","password":"","slug":"betterdocs-category-grid","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/betterdocs-category-grid\/","title":{"rendered":"How to Configure & Style BetterDocs Category Grid In Elementor?"},"content":{"rendered":"

BetterDocs Category Grid<\/b><\/a> lets you add the Grid layout of <\/span>BetterDocs<\/b><\/a> landing page documentation in your Elementor pages. You can easily customize it and style the layout as per your preference inside Elementor. It can come in very handy to display your knowledge base on any page you want. <\/span>Check out this guideline below to see how to configure & style BetterDocs Category Grid:<\/span><\/p>\n

How to Activate BetterDocs Category Grid<\/b><\/h2>\n

To use this<\/span> <\/b>element, find the \u2018BetterDocs Category Grid \u2018<\/strong> element from the Search option under the \u2018ELEMENTS\u2018<\/strong> tab. Simply just Drag & Drop the \u2018BetterDocs Category Grid\u2019 into the \u2018Drag widget here\u2018<\/strong> or the \u2018+\u2019<\/strong> sezione.<\/span><\/p>\n

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

After you are successfully done with step 1, this is how the element is going to look like.<\/span><\/p>\n

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

How To Configure the Content Settings\u00a0<\/b><\/h2>\n

You will get two featured sections in BetterDocs Category Grid <\/span>'Soddisfare' <\/b>settings, \u2019Query\u2019 and \u2018Layout Options\u2019. You can configure both to organize your online documentation following some steps on the website.<\/span>
\n<\/strong><\/a><\/b><\/p>\n

Query Settings<\/b><\/h3>\n

After getting all your documents in the grid layout, you can pick and display your desired document categories on the website through <\/span>\u2018Include\u2019 or \u2018Exclude\u2019 <\/b>features.<\/span><\/p>\n

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

Besides, you can organize your document by <\/span>\u2018Grid Per Page\u2019, \u2018Offset\u2019, \u2018Order By\u2019 <\/b>them with the name, slug, id, etc, and <\/span>\u2018Order\u2019<\/b> with ascending or descending. Moreover, you can change the posts per page, order by and others from ‘Grid List Posts’<\/strong> sezione.
\n<\/span><\/p>\n

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

Layout Options<\/b><\/h3>\n

Once you have done with the Query settings, you can configure the <\/span>\u2018Layout Options\u2019 <\/b>settings next to pick the \u2018Default\u2018 or \u2018Layout 2\u2019 design and accordingly change the \u2018Layout Mode\u2019<\/strong> to Grid, Fit to Screen, or Mansory.\u00a0<\/span>
\n<\/strong><\/a><\/p>\n

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

Besides, you can choose how many <\/span>\u2018Grid Column\u2019<\/b> you want to create that would showcase your document in the grid layout. Afterward, you can enable the header, icon, title, select the preferred title tag, show count, list, or button to make it well-organized and manageable for both ends. Moreover, you can change the content for \u2018Button Text\u2019<\/b> anche.<\/span><\/p>\n

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

How To Style BetterDocs Category Grid<\/b><\/h2>\n

Dal<\/span> ‘Style’<\/b> tab, you can style the<\/span> BetterDocs Category Grid <\/b>anyway you want and get your expected outcome.
\n<\/span><\/p>\n

Grid\u00a0<\/b><\/h3>\n

Il <\/span>‘Grid’ <\/b>layout style allows you to add background to the BetterDocs Category Grid layout. If you want, you can add a background image or change its color as you wish. Besides, you can add borders, change the border-radius, grid padding, and spacing of the category grid layout as well.<\/span><\/p>\n

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

Others<\/b><\/h3>\n

There are several customization options presented in the <\/span>'Stile' <\/b>tab. You can customize the ‘Title’ style by changing the typography and appearance of \u2018Normal\u2019, \u2018Hover\u2019 or both title styles color, background type,\u00a0 and more to make each document title interactive for readers.<\/span><\/p>\n

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

You can change the outlook of your grid layout total document number that appears on the top by using the <\/span>\u2018Count\u2019<\/b> style. Besides, you can configure <\/span>\u2018List\u2019<\/b> e\u00a0 <\/span>Button <\/b>both styles to give your document category grid a unique look.\u00a0\u00a0<\/span><\/p>\n

Esito finale<\/b><\/h2>\n

By following the basic steps and a bit more modifying, you can style your <\/span>BetterDocs Category Grid <\/b>as per your preference in Elementor.<\/span><\/p>\n

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

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

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

BetterDocs comes with an exclusive BetterDocs Category Grid element for Elementor to display your knowledgebase documentation beautifully on your Elementor site. <\/p>","protected":false},"author":8,"featured_media":2433,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[10,14,89,18,19,43,17],"knowledge_base":[282],"class_list":["post-2409","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-betterdocs","doc_tag-configuration","doc_tag-docs-page-with-elementor","doc_tag-documentation","doc_tag-drag-drop-builder","doc_tag-elementor","doc_tag-knowledge-base","knowledge_base-wordpress"],"year_month":"2026-04","word_count":550,"total_views":"10600","reactions":{"happy":"11","normal":"3","sad":"8"},"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","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs\/"},{"term_name":"configuration","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/configuration\/"},{"term_name":"Docs Page With Elementor","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/docs-page-with-elementor\/"},{"term_name":"documentation","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/documentation\/"},{"term_name":"drag & drop builder","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/drag-drop-builder\/"},{"term_name":"Elementor","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/elementor\/"},{"term_name":"knowledge base","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/knowledge-base\/"}],"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\/2409","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":8,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/2409\/revisions"}],"predecessor-version":[{"id":2459,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/2409\/revisions\/2459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media\/2433"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=2409"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=2409"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=2409"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=2409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}