a page in KHub+ is MORE than a web page
KHub+ enables content creators to design their feature-rich content with the built-in support of web technology and the Bootstrap standard. Following are examples of such in-page features. KHub+ make it possible for content creators to make their own design making use of all these features without coding.
No Codes, No Pains
Coding is the job of programmers. As a content contributor, you should focus in your creativity of rich content without coding.
These feature-rich in-page structures eliminate the barriers for content-focused contributors with greatly improved productivity. No more reliance on programmers as the middle men.
All features below can be created without coding.
Special Editor Features
Drop Cap
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Tooltips
Lorem Ipsum is simply
Abbreviations
Abbreviated terminologies are presented in short form such as abbr and becomes a standard in some industries. Insert its full terminology and make it perfect.
Fontawesome Icons
Numbered Lists
- One
- Two
- Three
- One
- Two
- Three
- One
- Two
- Three
- One
- Two
- Three
Featured Bullets
- One
- Two
- One
- Two
- One
- Two
- One
- Two
- One
- Two
- One
- Two
Smileys
😃😂😅😍😜😠🙋♂️🙋♀️👌👍👏💪
🍺🍻🎂🍰🌹🌻🌺💐🏅🎁⬆⬇⬅➡
▶◀🔼🔽📶🔄✅❎✔✖🔆
⭕❌🉐🈲㊙㊗🆗🔴🔘🔲💯
Editor Templates
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Buttons & Badges
Badges
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Theme
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Dark
- Theme
Columns
Learn from the Professionals
Have you noticed how newspapers, magazines and journals are printed? They are normally printed in small paragraphs separated in columns. Do you know why?
This is a little secret of the journalists.
Why Short Paragraphs?
For the readers, it is quicker and easier to read. This allows them to pause and think, and digest a smaller trunk of content at a time.
In fact, for the writers, it is much easier writing in short paragarphs too.
Create Columns
Creation of columns is easy in KHub+. No coding is required. Columns of equal width, or uneven columns can be selected. On top, it's not only text in each column. It can be anything else at the design of the author.
Tabs
Horizontal tabs make segmentation possible within a single page. It is actually a way of classification. The secret is to embed a structure inside a single page. Instead of writing in a long page, tabs segment content into sessions.
Tabs allow breaking down of complicated content into a structured manner, making it much easier to read and understand. Instead of reading a long page, readers can enter each individual tab of their choice accordingly.
An advantage using tabs is on-demand reading, which allows users to select only the part of content they need for their job. Without this, users will have to search the appropriate content from within long pages. This is a matter of user-experience. The page is more likely to be used, and users will rely more on the information provided when it really helps them at a lower operation cost. They'd prefer this for their own benefits.
Another advantage is provide a better logic to the content structure. In real life, there are many different situations and alternatives. The tabs inherently provide a mechanism to include logic in a page. When readers find it more logical, they will be more willingly to use the content.
Finally, it is also a matter of space. Tabs helps to shorten the length of a page, making it seemingly less complicated.
There are mainly 2 types of tabs. The horizontal and vertical tabs. Horizontal tabs structure is a more popular type, and is what available in this system.
Vertical tabs on the other hand is more complicated. It still can be created but requires coding. In addition, Vertical tabs takes up about 1/3 of the space on the side too. As a result, space utilitisation goes down. On mobile device, it is even more difficult to read due to the inherent narrow width of the display.
There is no limitation on the number of tabs, but authors should pay attention how to make good use of tabs, including use of shorter terms. To fit for mobile devices, 2 or max 3 is more suitable.
Tabs structure is available as a paragraph section, therefore it can be embedded in any part of a page in the unlimited paragraph section structure.
Tabs structure is also available from within the Simple text editor, alongside with other text content.
An example of shortcodes required to create this feature if not using this KHub+ system.
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
<a class="active mt-style-custom-tr mt-style-custom-tl nav-link" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation" class="nav-item">
<a class="mt-style-custom-tr mt-style-custom-tl nav-link" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation" class="nav-item">
<a class="mt-style-custom-tr mt-style-custom-tl nav-link" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home">
<p><strong>Home</strong> ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, exercitationem, quaerat veniam repudiandae illo ratione eaque omnis obcaecati quidem distinctio sapiente quo assumenda amet cumque nobis nulla qui dolore autem.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<p><strong>Profile</strong> ipsum dolor sit amet, consectetur adipisicing elit. Ut odio facere minima porro quis. Maiores eius quibusdam et in corrupti necessitatibus consequatur debitis laudantium hic.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">
<p><strong>Messages</strong> ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, optio error consectetur ullam porro eligendi mollitia odio numquam aut cumque. Sed, possimus recusandae itaque laboriosam nesciunt voluptates veniam aspernatur voluptate eaque ratione totam ipsa optio aliquam incidunt dolorum amet illum.</p>
</div>
</div>
</div>
Accordions
Accordion is the proper technical term. It is often known as FAQ - Frequently Asked Questions. It is very common on websites. It contains collapsed content captioned with a question or title, and will be expanded when readers click on the captioned title.
The biggest advantage of FAQ is to provide on-demand answers suitably classified according to questions most people would concern. When it is not needed, it collapses and save a lot of space on the page.
Content will be expanded only on-demand, and help to space space instead of reading entire long page.
Use of the accordion makes readers feel more organized, and improve user-experience.
An example of shortcodes required to create this feature if not using this KHub+ system.
<div class="collapse-group" id="accordion-example1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header card-header--trigger-icon" role="tab" id="headingOne">
<div class="card-title">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span>1.</span> Home
</a>
</div>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion-example1" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header card-header--trigger-icon" role="tab" id="headingTwo">
<div class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span>2.</span> Configure
</a>
</div>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion-example1" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">...</div>
</div>
</div>
<div class="card">
<div class="card-header card-header--trigger-icon" role="tab" id="headingThree">
<div class="card-title">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span>3.</span> Download
</a>
</div>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion-example1" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">...</div>
</div>
</div>
</div>
Organize Audios, Videos, Document in Media Library
Upload document of references, or allow users to download
Construction of More Complex Structures from Simple Ones
Slideshows
- It is sometimes also called carousel. It rotates from one slides to another automatically at a speed selected by author. It stops on "mouse-over" at the choice of the readers.
- Each slide can be a simple piece of content, or in a complex or nested structure
- It can be applied in front end website to draw attentions, or in the back end intranet as a culture wall for example.
| Button | Easily add buttons to your presentation |
Does it looks like a PowerPoint ?
- Make a presentation using Slideshow instead of using PowerPoint
- Access from any internet-connected computer
- No worry about display or any unexpected surprises
- No worry of connection to the projectors
- Click on the picture, it will pop-up on screen full-scaled
Have you ever thought about making presentation using a webpage instead of PowerPoint?
When Video is More Effective
- Choice of pictures of videos whatever is more appropriate at your choice
- No unexpected surprises in the setup of playing videos during presentation
- Click on the video and pop-up to full-screen
When a mini-Gallery is more Appealing
- Show a few photos in your storytelling
- Group all relevant pictures together in a mini-gallery
- Click on individual pictures to pop-up to full screen
- Become an outstanding presenter
Product One
Card structure is very popular on websites
Product Two
Card structure is very popular on websites
Product Three
Card structure is very popular on websites
Product Four
Card structure is very popular on websites
Orci, a scelerisque purus semper eget duis at tellus. Sit amet mauris commodo quis imperdiet massa tincidunt. Ac odio tempor orci dapibus. Facilisi cras fermentum, odio eu feugiat pretium, nibh ipsum. Egestas quis ipsum suspendisse ultrices. In massa tempor nec feugiat nisl. Aliquam faucibus purus in massa tempor. Turpis egestas integer eget aliquet nibh praesent tristique magna. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus. Velit egestas dui, id ornare.
Condimentum vitae sapien pellentesque habitant morbi tristique senectus. At varius vel, pharetra vel turpis nunc eget lorem. Tempor nec feugiat nisl pretium fusce id velit ut. Est placerat in egestas erat. Nisl pretium fusce id velit ut. Mauris augue neque, gravida in fermentum et, sollicitudin ac. Amet massa vitae tortor condimentum. Non diam phasellus vestibulum lorem. Pharetra convallis posuere morbi leo urna, molestie at elementum. Venenatis urna cursus eget nunc. Neque sodales ut etiam sit amet nisl purus, in. Quis risus sed vulputate odio ut. Congue nisi, vitae suscipit tellus mauris a diam. Amet, consectetur adipiscing elit pellentesque habitant morbi.
Cursus turpis massa tincidunt dui ut ornare lectus sit. Nibh sit amet commodo nulla facilisi nullam. Sit amet facilisis magna etiam. Lobortis elementum, nibh tellus molestie nunc, non blandit massa. Odio eu feugiat pretium, nibh ipsum consequat nisl, vel. Accumsan in nisl nisi, scelerisque eu. Est ultricies integer quis auctor elit sed. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Tortor consequat id porta nibh venenatis cras sed felis. Molestie at elementum eu, facilisis sed odio morbi. Porttitor massa id neque aliquam vestibulum morbi blandit.
Viverra nam libero justo, laoreet sit amet cursus. Nunc sed velit dignissim sodales ut eu sem. Et malesuada fames ac turpis egestas sed. Dui, id ornare arcu odio. Dui, id ornare arcu odio. Morbi non arcu risus, quis varius. Tincidunt vitae, semper quis lectus nulla at volutpat diam. Ultricies integer quis auctor elit sed. Ullamcorper malesuada proin libero nunc, consequat interdum. Eget velit aliquet sagittis id consectetur purus.
Et ultrices neque ornare aenean euismod. Suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget. Nunc lobortis mattis aliquam faucibus purus. Accumsan tortor posuere ac ut consequat semper viverra nam. Ut etiam sit amet nisl purus. Morbi non arcu risus, quis varius quam quisque. Maecenas ultricies mi eget mauris. Adipiscing tristique risus nec feugiat. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Interdum posuere lorem ipsum dolor sit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Orci, a scelerisque purus semper eget duis at tellus. Sit amet mauris commodo quis imperdiet massa tincidunt. Ac odio tempor orci dapibus. Facilisi cras fermentum, odio eu feugiat pretium, nibh ipsum. Egestas quis ipsum suspendisse ultrices. In massa tempor nec feugiat nisl. Aliquam faucibus purus in massa tempor. Turpis egestas integer eget aliquet nibh praesent tristique magna. Nulla facilisi morbi tempus iaculis urna, id volutpat lacus. Velit egestas dui, id ornare.
Condimentum vitae sapien pellentesque habitant morbi tristique senectus. At varius vel, pharetra vel turpis nunc eget lorem. Tempor nec feugiat nisl pretium fusce id velit ut. Est placerat in egestas erat. Nisl pretium fusce id velit ut. Mauris augue neque, gravida in fermentum et, sollicitudin ac. Amet massa vitae tortor condimentum. Non diam phasellus vestibulum lorem. Pharetra convallis posuere morbi leo urna, molestie at elementum. Venenatis urna cursus eget nunc. Neque sodales ut etiam sit amet nisl purus, in. Quis risus sed vulputate odio ut. Congue nisi, vitae suscipit tellus mauris a diam. Amet, consectetur adipiscing elit pellentesque habitant morbi.
Cursus turpis massa tincidunt dui ut ornare lectus sit. Nibh sit amet commodo nulla facilisi nullam. Sit amet facilisis magna etiam. Lobortis elementum, nibh tellus molestie nunc, non blandit massa. Odio eu feugiat pretium, nibh ipsum consequat nisl, vel. Accumsan in nisl nisi, scelerisque eu. Est ultricies integer quis auctor elit sed. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Tortor consequat id porta nibh venenatis cras sed felis. Molestie at elementum eu, facilisis sed odio morbi. Porttitor massa id neque aliquam vestibulum morbi blandit.
Viverra nam libero justo, laoreet sit amet cursus. Nunc sed velit dignissim sodales ut eu sem. Et malesuada fames ac turpis egestas sed. Dui, id ornare arcu odio. Dui, id ornare arcu odio. Morbi non arcu risus, quis varius. Tincidunt vitae, semper quis lectus nulla at volutpat diam. Ultricies integer quis auctor elit sed. Ullamcorper malesuada proin libero nunc, consequat interdum. Eget velit aliquet sagittis id consectetur purus.
Et ultrices neque ornare aenean euismod. Suspendisse interdum consectetur libero, id faucibus nisl tincidunt eget. Nunc lobortis mattis aliquam faucibus purus. Accumsan tortor posuere ac ut consequat semper viverra nam. Ut etiam sit amet nisl purus. Morbi non arcu risus, quis varius quam quisque. Maecenas ultricies mi eget mauris. Adipiscing tristique risus nec feugiat. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Interdum posuere lorem ipsum dolor sit. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Use FAQ at the Right Spot
Use a FAQ right at the location to clear your clients' potential queries, and help them to make a fast decision. Their actions are your reward.
Questions You May Have
Metus vulputate eu scelerisque felis imperdiet proin. Tristique sollicitudin nibh sit amet commodo nulla. Semper viverra nam libero justo, laoreet. Dignissim diam quis enim lobortis scelerisque fermentum dui. Odio euismod lacinia at quis risus sed. Euismod elementum nisi, quis eleifend quam adipiscing vitae. Dignissim sodales ut eu sem integer vitae. Iaculis urna, id volutpat lacus. Auctor urna nunc id cursus metus. Morbi tincidunt augue interdum velit. Ultrices tincidunt arcu, non sodales. Mauris sit amet massa vitae tortor condimentum lacinia. Commodo, ullamcorper a lacus vestibulum. Scelerisque eu ultrices vitae, auctor eu augue ut lectus. Pretium quam vulputate dignissim suspendisse.
Eget dolor morbi non arcu risus, quis varius. Leo, vel fringilla est ullamcorper eget nulla facilisi etiam. Netus et malesuada fames ac turpis egestas integer eget. Iaculis urna, id volutpat lacus laoreet non curabitur gravida. Ante metus, dictum at tempor. Enim neque, volutpat ac tincidunt vitae, semper. Pulvinar sapien et ligula ullamcorper malesuada proin. Tortor posuere ac ut consequat. Tincidunt augue interdum velit euismod in. Odio tempor orci dapibus ultrices in iaculis nunc sed. Non quam lacus suspendisse faucibus interdum posuere lorem. Nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis. Et tortor at risus viverra adipiscing. In arcu cursus euismod quis viverra nibh cras. Quam viverra orci sagittis eu volutpat odio. At risus viverra adipiscing at in tellus integer feugiat.
Massa tempor nec feugiat nisl pretium fusce. Odio tempor orci dapibus ultrices in iaculis nunc. Vivamus arcu felis, bibendum ut tristique et, egestas. Consectetur lorem donec massa sapien. Et tortor consequat id porta nibh. Ut placerat orci nulla pellentesque dignissim enim, sit. Viverra accumsan in nisl nisi, scelerisque eu ultrices vitae. Venenatis a, condimentum vitae sapien pellentesque habitant morbi tristique. Nunc sed id semper risus in hendrerit gravida. In cursus turpis massa tincidunt dui ut ornare. Sit amet, consectetur adipiscing elit ut aliquam, purus sit. Feugiat in fermentum posuere urna nec tincidunt praesent. Vitae purus faucibus ornare suspendisse sed nisi lacus. Et malesuada fames ac turpis egestas integer. Aliquam etiam erat velit, scelerisque in. Tellus in hac habitasse platea dictumst vestibulum. Maecenas accumsan, lacus vel facilisis volutpat, est velit egestas.