You must have seen user manual pages or online documentation guides with index menu in left/right side and scrolling content on the other side. Some of the best examples of product documentations also follow similar design for easy navigation. A short text in the menu area allows you to reach to the content a particular section using DIV tag. The complete document or guide content remains on single page but can be easily accessed using the side menu.
In this article, I will help you to create a beautiful user manual for a product or service with single page content. It will have side menu with indexes and scrolling content.
In a simple 4 step process, you can create useful documentation with sticky menu. Here are the steps,
- Install and Activate Documentor plugin
- Create Guide and Sections
- Drag and Drop to Reorder
- Embed the Guide
For simple products with getting started guide, installation, use cases etc. such documentation is very helpful. Customers find it very easy to navigate the read. This type of documentation saves time as customers don’t need to load many pages on the browser.
Let’s get started with easy steps.
Step 1: Install and Activate Documentor Plugin
Download Documentor plugin from your account area. Follow the steps mentioned under the installation guide to install this plugin.
Step 2: Create Guide and Section
Click on “Add New” under Documentor menu to create a new guide. Give a name to the guide and start adding sections. Single guide is made of multiple sections where every section will have – Title, Menu Title and Content. Section title is the headline appearing above the section content. Menu title is the short text appearing in the fixed menu. Section content is the complete text including paragraph, images, videos etc. under that particular menu item. Second section starts from where the first section ends.
Step 3: Drag and Drop to Reorder
On edit guide panel, use drag and drop on section to reorder them. Menu title in the side menu will appear as per the order of the sections.
Step 4: Embed the User Guide on a Page
Create a page on WordPress where you like to showcase the user manual. For example, if you create a page named Docs, it will have permalink as http://xxx.xx/docs/. On the text editor of this page, paste the shortcode of the user manual. Now the single page user manual with scrolling content and sticky index menu will start appearing.
With the help of DIV as a unique identifier, the content will scroll to a section as clicked on the menu. The menu location can be shifted to left or right from Documentor setting panel. The design is responsive so this user manual will open properly on mobile devices to and the easy scroll works there too.
