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
tabs-container class is required. The others 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 some 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 you can style in CSS.
Add a Custom HTML module inside your Tabs Container 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 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:
<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:
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>