You can improve the way your visitors experience your website by adding tabs to your pages. It’s possible to create any number of tabs using the Tab module of the page designer.
You can layouts inside your tabs.
You can place any layout inside a tab by using the element’s shortcode. Just copy this code, that you can find on the layout’s sidebar and paste it inside the text content of the tab. Find more about how to find the shortcode and paste it inside a module on this guide.
This is where you adjust the settings of your content.
You can add as many tabs as you wish, by clicking on the gray plus button. Then, you can customize the individual tabs by clicking on the settings icon. This icon is sided by a duplicate icon if you want to repeat the same tab, and a delete button on the other side to erase the tab.
Inside the content options of each tab, adjust the title of the tab, that will appear on top of it and the content, which shows inside. By selecting the black Add Media button, you can include an image or video inside the tab.
Inside the design settings for the tab, you can customize the appearance of the tag title, the text, the spacing, and the color filters.
If you want that the element opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
It’s possible to select different colors for the background of the active and inactive tab to make it easier for users to see which one they have selected.
Adjust the appearance of the body text.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color, and width.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Let’s add a tab module with a different picture of an event in each tab. We selected the following design options:
Active tab background color: #01876e
Inactive tab background color: #00c97f
Tab text color: #ffffff
Body text alignment: center
Body text color: #0C71C3
Anytime the tab is selected it changes to the active tab background color.