Improve usability and content organization with beautiful and responsive tabs.

Act2 Tabs Sample

This component is available as a custom module (up to 10 tabs, Rich Text content, very easy to use) or entirely drag and drop for more content choices and better customization.

Custom Module

The custom module is named Act2 Tabs.

Act2 Template Builder Tabs Custom Module

You can simply drag and drop this module into your template:

Act2 Template Builder Tabs Custom Module in Template

Then you can edit its content at the page level (when you create your actual page). Click the Tabs area in the page preview, or find it in the modules sidebar on the left:

Act2 Page Editor Tabs

Important Notes:

Please keep in mind that the content of individual custom modules is only editable in the page editor and NOT from the template. So you would need to create and edit your actual page in order to add your own content to these modules.

Module Options

These options are repeating for each tab and there are up to 10 tabs that you can use with this custom module.

Tab name

This is the name of the tab. It will appear in the tab navigation. If you don't want to use a tab just leave this blank. The first two tabs are required.

Act2 Page Editor Tab Name

Tab content

This is the content of the tab. It's Rich Text and pretty easy to edit.

Act2 Page Editor Tab Content

Tab id

You can leave this blank for the default ID (e.g. tab1, tab2, etc). If you, however, need to add your own tab ID, please make sure it is unique. No spacing or special characters are allowed, except alpha-numeric and - or _ (e.g. inbound_marketing_2018).

By default this is blank.

Act2 Page Editor Tab ID

Tabs Animation

Uncheck this box if you want to disable the default tab content animation.

Act2 Page Editor Tabs Animation

Custom Class

Use this box if you want to add a custom class to your module.

Act2 Page Editor Tabs Custom Class

Drag and Drop

Tabs Container

Add a group with these classes: tabs-container responsive styled

Act2 Template Builder Tabs Container Edit CSS

Act2 Template Builder Tabs Container CSS Classes

tabs-container class is required. The others are optional and can be removed if your design requires it.

The responsive class is responsible for cloning and adding each tab link before its related content, to form some kind of accordion navigation on mobile. It is not styled by default, so this alone will look like this on mobile:

Act2 Tabs Container Responsive Not Styled

However, if you also add the styled class it will look like this:

Act2 Tabs Container Responsive Styled Sample

Or, you can use your own class you can style in CSS.

Everything should be placed in this group, your tabs navigation and content.

Tabs Nav

Act2 Tabs Nav Sample

Add a Custom HTML module inside your Tabs Container with these classes: tabs-nav mb80 list-type-tabs sm-hidden

Act2 Template Builder Tabs Nav Edit CSS

Act2 Template Builder Tabs Nav CSS Classes

The first class tabs-nav is required, the others are modifiers for space, list styling and hidding this module on small screens, where we'll display the reponsive navigation instead.

If you choose not to use the responsive tabs feature (Tabs Container doesn't have the responsive class), you can also remove the sm-hidden class from your Tabs Nav, to keep showing the initial navigation on mobile.

Edit this module and add a plain Unordered List with the tab links:

    <li><a href="#tab_1">What's new</a></li>
    <li><a href="#tab_2">Features</a></li>
    <li><a href="#tab_3">FAQs</a></li>
    <li><a href="#tab_4">Something</a></li>
    <li><a href="#tab_5">Ask</a></li>

Act2 Template Builder Tabs Nav Edit HTML

Act2 Template Builder Tabs Nav HTML Code

tab_1, tab_2, tab_3, etc are the IDs of your tabs, as shown in the Content section below.

Instead of a Custom HTML module you can use a Rich Text if you don't want to use code, but please keep in mind this may be hard to edit inline in the page editor.

Content (Tab Group)

Add a group for each of your tab content with the class tab-group and a unique ID:

Act2 Template Builder Tab Groups

Act2 Template Builder Tab Group Edit CSS

Act2 Template Builder Tab Group CSS Class and ID

The class sm-p20 for space on mobile and the animation class fade-up in this example are optional. For more utility classes please read this article. For more animations please go here.

The ID should be unique per page. Also, please make sure your tab links in the Tabs Nav point to the correct IDs. For example, if you have this ID on one of your Tab Group: my_new_tab_1, the anchor that links to this tab content in your Tab Navs should be: <a href="#my_new_tab_1">My Label</a>