Tabs
Element Overview
The Tabs Element allows you to easily to organize and present large amounts of information within a small space. Add as many Tabs as you need and customize the layouts within them using the same fully-featured Row and Column configurations, and Elements that you would use elsewhere on your page. Like Rows & Columns, Tabs are responsive and will adapt to whatever browser or Column width they are being displayed in by wrapping to new lines as is necessary.
Adding a New Tab
1. To add a new Tab, simply click the plus button to the right of the last individual Tab below the outermost horizontal Element bar on each Tab Element. Clicking this button will add a new Tab beside the existing one.
2. Once added, you may drag-and-drop it anywhere throughout the group of Tabs.
Editing an Individual Tab
Click the pencil icon on the far right of the grey bar connected to the currently selected tab. This will open a modal window containing options for editing the Individual Tab.
Tab Element Options
Type
Choose the Tab type using this dropdown. “Default” will generally be the only Type available. However, it is possible for developers to add in more Types, so depending on which website you are editing, there could be more with options that are different in style or in terms of options than the Default Type.
Fade
Check this to enable fade transitions between tabs.
Individual Tab Options
Title
Input the title to be displayed for the tab here.
Tab ID
Input Tab custom ID here. Can be used to target the Tab with CSS and Javascript for customization.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.