Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Tabs Module with the Website Page Designer

Tabs Module with the Website Page Designer

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.

Content settings

This is where you adjust the settings of your content.

Tab Title

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.

Link

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.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Design settings

Tab Text

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.

Body Text

Adjust the appearance of the body text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color, and width.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

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.

Use Case

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.

Was this article helpful to you? Yes No

How can we help?