By Uzzal Raz Bongshi on Wednesday, 06 December 2017
Category: News & Updates

How To Create Beautiful Documentation Site with Joomla & xDocs

From landing page to sales page, every page is important. We spent our most of the times creating and designing these pages but forget about the documentation page. A documentation page contents all the documentation items related to your product.

Some of us might think that it might be difficult or time-consuming. However, it can be created very quickly.

Therefore today I am going to show you how to create beautiful documentation site quickly in Joomla using xDocs. 

        <h2> <span>What is xDocs?</span></h2>       <p>xDocs is a very powerful documentation management extension for Joomla&nbsp;which allows you to organize all the documentation of your website in a proper manner.</p><p><span>Let's start, just follow the&nbsp;the&nbsp;steps below. <br></span></p><p><span>At first, download <a href="" title="">xDocs</a>&nbsp;and install it on your Joomla site using native&nbsp;Joomla installer.&nbsp;If you have any issues regarding installation, you can take help from <a href="">here</a>.<br></span></p>
        <h2> <span>Creating Category</span></h2>        <amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_1st-pic.png"></amp-img>
        <div class="alert alert-info" role="alert">Go to components &gt; Documentation. From left menu choose "categories."<span class="redactor-invisible-space">​</span></div>        <amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_2nd-pic.png"></amp-img> Now click on <strong data-redactor-tag="strong" data-verified="redactor">New</strong>&nbsp;button to add a new category. Give the suitable title and type your description of the category, below in Category tab.<span class="redactor-invisible-space">​</span> <amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_3rd-pic.png"></amp-img><p>Including Category tab, there are three more tabs <code data-redactor-tag="code" data-verified="redactor">options, publishing, and permissions.</code></p><p>From options tab, you can change the layout and can change the image for your category. By default, there is no image with a new category. </p><p>Publishing tab allows you to edit creation date, modification date, meta description along with meta keywords and also allows you to select the author. You can set permission for each type of user using permissions tab. </p><p>Customize the new category as you need. You can create as much category you need. For creating a bunch of new categories faster, you can use "Save &amp; New" button.&nbsp;</p><p>After creating one category click "Save &amp; Close" or "Save" button. If you exit directly, no changes will be saved.&nbsp;</p>
        <h2> <span>Creating Article</span></h2>     <amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_4th-pic.png"></amp-img><amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_5th-pic.png"></amp-img><p>After writing all the content of article, from the right side choose the category you want to publish under. It is very important to choose the category carefully because your article will only show on the chosen category. </p><p>In Publishing tab, provide the details of your publisher, meta description &amp; keywords, and other details.</p><p>According to your need create the documentation under the specific category. When finished creating, click save &amp; close. </p><p>Now you have successfully created documentation page with the default layout. If you want to customize more, you can add your custom CSS in the page. </p><p>Wait, now you might be thinking "where is my documentation? Why can I not see it?"</p><p>Till now we have just created the documentation page but haven't placed it on the website. You can place the documentation in anywhere, under any menu. </p><p>For you, I am putting the documentation on the homepage in the main menu.&nbsp;</p><amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_6th-pic.png"></amp-img>
        <div class="alert alert-info" role="alert">Go to Menus &gt; Main Menu &gt; Add New Menu Item. Give the title you want. <span class="redactor-invisible-space">​</span><span class="redactor-invisible-space"></span></div>      <amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_7th-pic.png"></amp-img><p>Then from "Menu Item Type" select the type of the menu. I have selected "Landing page for Category" and left other settings untouched. If you want a different setting, you can customize it in your way. </p><p>After you finish click "save &amp; close."</p><amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_8th-pic.png"></amp-img>Now go to the front end of your site and check out the content you just made. <span class="redactor-invisible-space">​</span><amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_9th-pic.png"></amp-img>At here you can check how many contents are under your category. You can also see how many times it has been read. <span class="redactor-invisible-space">​</span><span class="redactor-invisible-space"></span><amp-img width="1280" height="626" layout="responsive" src="images/easyblog_articles/507/b2ap3_large_10th.png"></amp-img>This is a specific documentation for content. For quick scrolling, you have the option on the right side. <span class="redactor-invisible-space">​</span><span class="redactor-invisible-space"></span><span class="redactor-invisible-space"></span>
        <h2> <span>Conclusion</span></h2>       <p>So you must have known that creating documentation site is not a tough task. Even a newbie can create a beautiful Documentation site with the help of xDocs extension. </p><p>Share your thoughts and queries with us through comments.&nbsp;</p><span class="redactor-invisible-space"></span>
Leave Comments