Tabs are a great way to add lots of information to a page and save space on the page by hiding some of the content until it is clicked on. You an use tabs for quite a lot of things, such as before/after images, videos, Pricing Tables, lesson content, etc.
It works very similar to our Content Toggle element where you can add most other elements inside of the content area of each Tab that you create.
Add the Tabs Element to Your Page
To add the Tabs Element, you can click the + icon or the +Elements link in the top left of the OptimizeBuilder.
To find the element quickly, just start typing in the search field and then drag the element over to the page
One you add the Tabs element, you will see the left sidebar open up with some pre designed styling options. You can choose one of those and customize it, or start customizing the element from the inline toolbar.
You can also close the sidebar if you decide not to use a preset by clicking the little arrow in the middle of the sidebar.
Overall Tabs Element Options
When you click on the Tabs Element, you may not be on the overall tabs options toolbar. For example if you click on one of the Tabs buttons at the top of the element, you may be looking at the “Item” inline toolbar. If that is the case, just click the up arrow in the toolbar or go to the top of the screen and click “Tabs” in the breadcrumb trail to get to the Tabs inline toolbar.
Now lets look at what editing options we have in the Tabs inline toolbar
The first option, the magic wand icon, will open up the left sidebar with the preset styles for the element (see example in previous section above).
The next icon in the inline toolbar will allow you to set the default tab, as well as the animation effect for the tab content.
The color icon is where you can set the background properties (color, image, overlay)
You an also add borders, border radius, and shadows to the Tabs element
You can also 1) Reposition the element, 2) Clone the element, or 3) delete the element
The Settings area in the inline toolbar will allow you to change the options for the spacing above and below the element, as well as the width and alignment (note that the alignment option will work only when the width of the element is less than the width of the row/column it is placed in).
You can also open the Advanced Options by clicking he blue “Advanced Options” button. In the Advanced Options sidebar, you can change the padding/margin, Responsive settings, Animation & Delay, as well as other advanced options
Customize the Tabs Element Header
Now lets customize the Tabs Header. click in the empty space to the left or right of the tab buttons and you’ll see the Tabs Header with the blue outline. This is where you can change the properties of that area.
Clicking the + icon will add another Tab, and also open the Tabs Item inline toolbar. To get back to the “Header” toolbar just click the up arrow or click “Header” in the editor breadcrumb trails
The color icon allows you to change the background color of the Tabs Header
Click on the Borders icon to setup borders, shadows, or edit shadow styles
You may use the alignment options to align the Tab Header buttons to Left, Center, or Right
You’ll find in the element settings, the options for the space between the tab buttons, space above and below, as well as Advanced Options.
To access the Advanced Options, click the blue “Advanced Options” button where you’ll see the advanced options sidebar.
In the sidebar you’ll be able to adjust the padding/margin for the header area of the Tabs element, as well as Responsive settings, and advanced settings where you’ll find other options for advanced users.
How to Edit the Tab Items
Tab items are the buttons (tabs) at the top of the Tabs element that allow switching between the different tabs. You can make them look like buttons, or just about however you want with all the options we have. Lets take a look at the options you have.
To open the Tab Item inline toolbar, just click on one of the Tab buttons and you’ll see the toolbar show up.
The padlock icon lets you unlock a single tab item to make changes only to that item. The locked icon means that all the tab items will be modified when changing most of the options.
You can add new tabs by clicking the + icon
The next option is to edit the Layout. You can use an image, an icon, or no media next to the text.
If you choose to use an image or icon next to the text, then spacing and placement options will show up for you to choose.
You can also edit the text in the tab like most other text elements where you can change the font family, font weight, size, and other styling.
Clicking the color pallet you’ll see you can adjust the background for the tab item, text color, and icon color for the active, inactive, and hover.
There are also border options for the active, inactive, and hover statuses.
It’s possible to even change the shadow styles for active, inactive, and hover states on the tab items.
You can reorder the tab items by holding and dragging the cross arrows icon which can be very handy if you are adding a new tab and need to adjust the placement of that specific tab.
You may also delete a tab if you no longer need it.
The tab item settings will allow you to change the gutter between the tabs, the space above and below the tab items, as well as the width and alignment of the text within the tab item.
Clicking the blue “Advanced Options” button will also open up the left sidebar for further customization where you may edit the Margin and Padding, Responsive settings, Shadow Styling, and other advanced options.
You can also select to edit these options for Normal, Active, and Hover states as well.
Tab Content Options
There are a few settings for the Tab Content area (within each tab).
1) You can set the background color of the content area
2) You can setup the borders and shadows for the content area of the tab
3) You can also access separate settings, and advanced settings sidebar for the content area in case you want to change the padding, margin, responsive, and other options.
Adding Tab Content
Adding content to the tab items is fairly straight forward. You can drag and drop content that already exists, or you can add new elements, sections, rows, columns to the tabs element just like it was its own page. You may click on each tab button to open the editor for that specific tab.
Each element you add to the Tab has the full editing options as if you added the element to the main page content area. Please refer to the guide for reach element if you need help understanding how to use the element. You may find our guides for OptimizeBuilder Elements here:
https://docs.optimizepress.com/category/2185-optimizebuilder-page-elements
If you need any help with the Tabs Element just reach out to our support team and they’ll be happy to help.