Tabs

Tabs

TABS Interactive

The primary goal of Tabs Interactive is to present users with a grouped view of related data, which in turn allows content builders to modularize groups of information in a compact manner, saving valuable screen real estate.

Here is a short video on how Tabs Interactive works:

How to create Tabs Interactive:

To create a Tabs interactive, follow these steps:
  1. Click on the "Create" button located in the Tabs interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Tabs interactive.
 

 Once the form is open, you'll find the following fields to fill out:

Interactive Title: Input a title or name for the Tabs interactive.

Section Header: Enter a title for each section, which can be expanded or collapsed by users.

Section Body: Input content to be displayed when the section is expanded.
'Add Section' for Tabs Interactive:
  1. The Tabs interactive form has collapsible sections. To add a new section, click 'Add Section,' and a '+' icon will appear on the section line stating 'Add Section' below. Refer to the images.
  2. After adding a section, users can easily move it to their desired location using the arrow icons displayed in the image.
  3. To delete a section, click the 'Delete' icon on the Section Line and confirm the deletion by selecting 'Remove.'

Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).
Customize Options: Customization options allow for users to personalize and adjust visual aspects like fonts, colors, styles, and spacing to fit preferences or branding. They improve appearance and usability to meet user requirements, with options for Section Headers, Borders, and Icons provided.

Section Header: 

  1. The section header customization options allow users to tailor the appearance of headers or titles within their content: font family, font style, font size, font weight, alignment, font color, active tab background color, inactive tab background color, separator color, and separator size.

  2. You can customize headers for visually appealing and organized content presentation.
   


 


Border:

 1. A border outlines and separates content, adding structure and enhancing appearance.
 2. You can customize its color and thickness and choose from different border styles.
 3. The border radius allows for rounded edges.

Preview:

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.




THANK YOU