The Vertical Tabs element was released in the OptimizeBuilder version 1.1.52 in May 2023.
How to Add the Vertical Tabs Element to Your Page
Adding the Vertical Tabs Element is as simple as adding any other element. Just click either the + icon in the page, or click the “+ Elements” link at the top left of the editor. Type in the search “Vertical Tabs” and you will see the element. Then just drag the element into the page.
Vertical Tabs Design Presets
After you add the element you’ll see on the left sidebar some element presets that you can use. You can also click the presets icon to see these.
You can also come back to those presets later by clicking the Styles & Presets icon.
Adding and Removing Vertical Tab Items
You can add and/or remove Vertical Tab items. To add one simply click the + icon in the Navigation toolbar.
To remove a Vertical Tab item, make sure you have the item selected, and then click the Trash icon to remove that item. The corresponding content in the tab will also be removed with the tab item.
IMPORTANT: Item Navigation While in the Editor
The Vertical Tabs element incorporates a new way to navigate between items while in the OptimizeBuilder page editor. This is due to how complex the element is. It’s important to understand that unlike tabs, toggle, or FAQ elements, clicking on the item will not navigate to the options for that item.
Instead, we have added a checkmark icon to do this. You can see an example below of what happens before we click the checkmark icon. You can see the top tab is still selected, and the content for that tab still shows on the right side.
Now, to navigate to that 2nd Vertical Tab item, we are going to click the checkmark icon in the item toolbar.
Now once we click the checkmark icon to activate the Vertical Tabs Item (the one in the darker blue border on the left with the title in the example “Augue netus”), you will now see the tab content, and the main content area (on right) for that tab’s content show up. In this example, we used the same name for the Tab and the main content’s Header text just to illustrate how this works, but those do not always have to be the same.
You can always tell what tab you are on if you see the tab item’s intro content opened up in the navigation panel (outlined in red above).
Vertical Tabs Navigation Options
There are a few options available if you wish to put the Vertical Tabs Navigation panel in another location. The navigation can be placed on the top, bottom, left, or right sides of the element.
You may also turn on a Navigation Title to appear above the tab navigation.
For User Navigate options, you can choose, for example under “Action” to automatically open the content for the tab when they are clicked or hovered over (or both). The “Target” and “Scroll to content” options are most useful when editing the element for mobile and tablet devices.
You can choose the Auto Navigate feature if you would like to automatically load the next tab after a certain period of time and whether to “loop” them, meaning it would start from the first tab again automatically after the last one is shown. This would be kind of like a content slider which is quite unique.
You may also Animate the Vertical Tabs element when it comes into focus.
