Improve usability and content organization with beautiful and responsive tabs.
The custom module is named Act2 Tabs.
You can simply drag and drop this module into your 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:
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.
These options are repeating for each tab and there are up to 10 tabs that you can use with this custom module.
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.
This is the content of the tab. It's Rich Text and pretty easy to edit.
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
_ (e.g. inbound_marketing_2018).
By default this is blank.
Uncheck this box if you want to disable the default tab content animation.
Use this box if you want to add a custom class to your module.
Add a group with these classes:
tabs-container responsive styled
The other classes are optional and can be removed if your design requires it.
responsive class is responsible for cloning and adding each tab link before its related content to form a kind of accordion navigation on mobile. It is not styled by default, so this alone will look like this on mobile:
However, if you also add the
styled class it will look like this:
Or, you can use your own class that you can style differently in CSS.
Inside your Tabs Container group, right at the top, add a Custom HTML module with these classes:
tabs-nav mb80 list-type-tabs sm-hidden
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 use 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 this on mobile as well.
Edit this module and add a plain Unordered List with the tab links:
<ul> <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> </ul>
tab_1, tab_2, tab_3, etc are the IDs of your tabs, as shown in the Content section below.
Add a group for each of your tab content with the class
tab-group and a unique ID:
sm-p20 for space on mobile and the animation class
fade-up in this example are optional.
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>