TAB ELEMENT
Tabs allow content to be organized and displayed in a space–saving and organized manner. It is also used to present different sections of content within a limited amount of screen space, making it easier for users to navigate the access information without overwhelming them with a long list of options.
How to use the tab element?
STEP 1: Simply drag and drop the element inside your section.
STEP 2: Click the section wrapper to display the settings for tabs.
STEP 3: This will automatically show you the pop-up settings bar of your tab element.
TAB ELEMENT SETTINGS
1. FLEX
This functionality enables you to adjust/change or edit the position, colors, text, etc. Of your tab using this design.
2. TAB SETTINGS
This setting allows you to adjust/change your tab’s orientation number, tabs and data.
3. Access the gear icon, in this field to configure the size, gap, and padding of your element:
Size: Modify the dimensions (width and height) of individual elements on your webpage.
Gap: Define the spacing between rows and columns in grid or flex layouts.
Padding: Set the space between an element's content and its border.
4. COLOR
Color is a powerful design element used in a wide range of contexts. With this option you color various design elements, including text, buttons, links, backgrounds and more.
5. Active Tab Settings
Refer to the tab that is currently selected or open. You can make your active tab different by changing their colors. This is different from tab color.
6. TRANSFORM
The transformations property can be used alongside transitions to create visually appealing interactions.
7. ANIMATION
Employ this feature to infuse dynamic and visually engaging moments or changes into elements on your webpage. It captures user attention, enhances the user experience, and makes your website more interactive and attractive.
8. Toggle Free Form Drag Positioning:
This enables you to move elements by clicking and dragging them with a mouse cursor. The term "freeform" indicates that users have greater flexibility and control over the positioning of these elements, often without predefined alignment or snapping.
9. Center
This option allows you to align your text to the left, right, center, or justify it.
10. Select Parent Element
Use the "Arrow Up" button to select the parent element, targeting the container or enclosing element that holds a specific HTML element within the webpage's document structure.
11. Clone
Easily duplicate or copy your element/layout.
12. Trash Bin Icon:
Delete a specific element/layout when it's no longer needed.
These comprehensive instructions and explanations should empower you to effectively utilize and customize forms within the Web Builder for your project.