{"id":440,"date":"2020-01-08T11:02:39","date_gmt":"2020-01-08T05:02:39","guid":{"rendered":"http:\/\/betterdocs.co\/?post_type=docs&#038;p=440"},"modified":"2024-10-06T10:04:39","modified_gmt":"2024-10-06T04:04:39","password":"","slug":"configure-homepage-and-single-page","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/configure-homepage-and-single-page\/","title":{"rendered":"How to Configure Documentation Homepage &amp; Single Page in BetterDocs"},"content":{"rendered":"<p>Con l&#039;aiuto di <a href=\"http:\/\/betterdocs.co\/it\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>BetterDocs<\/strong><\/a><strong>, <\/strong>you can configure your documentation homepage &amp; single page by using its advanced doc page design features, and ready theme layouts without coding. Follow this step-by-step guideline below to find out how to configure the <strong>Documentation Homepage &amp; Single Page<\/strong> with BetterDocs.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Come utilizzare il modello pronto per progettare la pagina di destinazione della documentazione\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/OgkTRxkdwKc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Configure the Built-in Documentation Page&nbsp;<\/strong><\/h2>\n\n\n\n<p>Assuming, you have <a href=\"https:\/\/betterdocs.co\/it\/docs\/activate-betterdocs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>installed &amp; activated BetterDocs<\/strong><\/a> on your WordPress site. First, navigate to check the <strong>BetterDocs \u2192 Settings \u2192 General \u2192 Enable Built-in Documentation Page<\/strong>. However, you can choose to disable it at any moment and use your preferred layouts through shortcodes or page builder widgets.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1600\" height=\"751\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image.png\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13183\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 1\" srcset=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image.png 1600w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-300x141.png 300w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1024x481.png 1024w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-768x360.png 768w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1536x721.png 1536w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-18x8.png 18w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-360x169.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Configure Documentation Homepage &amp; Single Page<\/strong><\/h2>\n\n\n\n<p>Afterward, open your WordPress Dashboard and navigate to <strong>BetterDocs \u2192 Settings \u2192 Layout. <\/strong>From here you can see three separate sections for your documentation layouts, and these are <strong>Documentation Page, Single Doc &amp; Archive Page. <\/strong>You can make the changes to any or all of these documentation layouts as per your preference.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13184\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 2\" \/><\/figure>\n<\/div>\n\n\n<p>Under the \u2018<strong>Documentation Page<\/strong>\u2019 tab, you\u2019ll get three sections named \u2018<strong>General<\/strong>\u2019, \u2018<strong>Search<\/strong>\u2019, &amp; \u2018<strong>Order By<\/strong>\u2019 from where you have the full freedom to toggle on\/off any of the features like Live Search, Search Result Image, Enable Masonry, Order Docs Post\/Category Alphabetically, Number of Subcategories\/Columns\/Posts, Enable Post Count, Enable Explore More Button, and more. If you want to use any other Button label, simply write in the text inside the \u2018Button Text\u2019 field.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13185\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 3\" \/><\/figure>\n<\/div>\n\n\n<p>Once you are done tweaking the Documentation Homepage, you will have something like the below image. You can learn more by checking out this separate doc on the <a href=\"https:\/\/betterdocs.co\/it\/docs\/how-to-configure-doc-single-page\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Documentation Homepage<\/strong><\/a>.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1341\" height=\"583\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-2.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13186\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 4\" \/><\/figure>\n<\/div>\n\n\n<p>Next, configure the Documentation Single Page from <strong>BetterDocs \u2192 Settings \u2192 Layout \u2192 Single Doc. <\/strong>There you can get along with all the features like <strong>Enable Table of Contents (TOC)<\/strong>, <strong>TOC Hierarchy, TOC List Number<\/strong>, Enable Sticky TOC, Content Offset, TOC Supported Heading Tag, Enable Breadcrumb, Breadcrumb Home Text, Breadcrumb Home URL, and more in four different sections called \u2018General\u2019, \u2018TOC\u2019, \u2018Breadcrumb\u2019, &amp; Email Feedback.\u2019 These options here are self-explanatory and you can enable\/disable the features by using the toggle button.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"724\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-3.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13187\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 4\" \/><\/figure>\n<\/div>\n\n\n<p>Once you are done adjusting the layout of your Single Doc Page should look something like this. You can get more details by checking out this documentation on <a href=\"https:\/\/betterdocs.co\/it\/docs\/how-to-configure-doc-single-page\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Doc Single Page<\/strong><\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1341\" height=\"540\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-4.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13188\" title=\"How To Configure Documentation Homepage &amp; Single Page in BetterDocs 6\" \/><\/figure>\n<\/div>\n\n\n<p>Now, if you go to the next section of the <strong>BetterDocs Settings \u2192 Layouts \u2192 Archive Page<\/strong>. From there, you can enable\/disable \u2018Enable Sidebar Category List\u2019 and make the changes there.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"863\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-5.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13189\" title=\"\"><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Customize the Design of Documentation Page&nbsp;&nbsp;<\/strong><\/h2>\n\n\n\n<p>To customize the design of your <a href=\"https:\/\/wpdeveloper.net\/knowledge-base-documentations\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>knowledge base documentation<\/strong><\/a>, navigate to the <strong>BetterDocs \u2192 Settings \u2192 Design \u2192 Customize BetterDocs. <\/strong>You can now customize the design in both Gutenberg<strong> &amp; Elementor<\/strong>.<\/p>\n\n\n\n<p>However, if you have a block-based theme, the full functionality of this customizer will not work. So, make sure you are not using a block-based theme and hit \u2018<strong>Customize in BetterDocs<\/strong>\u2019 in the Legacy Customizer button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"900\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1.png\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13190\" title=\"\" srcset=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1.png 1600w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-300x169.png 300w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-1024x576.png 1024w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-768x432.png 768w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-1536x864.png 1536w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-18x10.png 18w, https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-1-360x203.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n<\/div>\n\n\n<p>Here, you have to choose <strong>BetterDocs <\/strong>which comes up with Doc Page, Single Page, Sidebar, Archive Page, &amp; Live Search options. You can make the changes to your overall documentation layouts from there.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"853\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-6.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13191\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>To change the outlook of your documentation homepage, go to the <strong>BetterDocs \u2192 Doc Page<\/strong>. You can choose from any of the seven BetterDocs layouts to change the documentation homepage outlook.&nbsp;<\/p>\n\n\n\n<p><strong><em>Nota: <\/em><\/strong><em>If you purchase <\/em><a href=\"http:\/\/betterdocs.co\/it\/#pricing\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>BetterDocs Pro<\/em><\/strong><\/a><em>, you can unlock all of these exclusive ready layouts, and other styling features to design your Documentation Doc Page, &amp; Single Page, and more in advance.<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"853\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-7.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13192\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>Next, you can configure the <strong>BetterDocs \u2192 Single Doc Page<\/strong> with this ready theme designs and other advanced styling options are present there to make the changes on your Single Doc Page layouts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"853\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-8.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13193\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>You can even change the entire outlook of the <strong>Sidebar, Category Archive, Breadcrumb, Live Search <\/strong>e<strong> FAQ<\/strong> with background color, text color, typography, margin, and more. Just go to each of these sections and make the changes according to your needs.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"853\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-9.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13194\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>By simply following all the above steps, you will be able to create and design your documentation Doc Page &amp; Single Doc Page with BetterDocs on your WordPress website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"826\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2020\/01\/image-10.gif\" alt=\"BetterDocs Documentation Homepage &amp; Single Page\" class=\"wp-image-13195\" title=\"\"><\/figure>\n<\/div>\n\n\n<p>That is how you can simply configure and design the Documentation Homepage &amp; Single Page with BetterDocs. Getting Stuck? Feel free to contact our dedicated <a href=\"https:\/\/wpdeveloper.com\/support\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>team di supporto<\/strong><\/a> for further assistance.<\/p>","protected":false},"excerpt":{"rendered":"<p>BetterDocs gives you the full freedom to configure and design your Documentation Homepage &amp; Single Page beautifully without coding.  <\/p>","protected":false},"author":6,"featured_media":2225,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[10,14],"knowledge_base":[282],"class_list":["post-440","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-betterdocs","doc_tag-configuration","knowledge_base-wordpress"],"year_month":"2026-04","word_count":715,"total_views":"14542","reactions":{"happy":"25","normal":"11","sad":"23"},"author_info":{"name":"akash","author_nicename":"akash","author_url":"https:\/\/betterdocs.co\/it\/author\/akash\/"},"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\/"}],"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\/440","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\/6"}],"version-history":[{"count":8,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/440\/revisions"}],"predecessor-version":[{"id":14980,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/440\/revisions\/14980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media\/2225"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=440"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=440"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}