Services II

Live demo

This template's main content design and structure is pretty much based on the Tabs drag-and-drop component. The cards in the left column are forming the navigation:

Act2 Services II Tabs Navigation Sample

Act2 Template Builder Services II Tabs Nav

While the groups in the right column represent the content of those tabs:

Act2 Services II Tabs Navigation Sample Act2 Template Builder Services II Tabs Nav

How to add new tabs?

Use our Coscopy extension to duplicate the last card in the left column and the last tab in the right column. Then update the tab ID and anchor. This video shows the entire process:

In the same way, if you want to remove a tab, you can delete the last card group in the left column and the last tab group in the right column.

How to change the labels on mobile and the tab anchors?

The navigation on mobile is simplified. Instead of the Content Cards placed at the top, it injects simple responsive tabs right before each tab content, more like an accordion menu, and these links have their own text labels:

Act2 Services II Responsive Tabs Sample

Because this whole section is a drag-and-drop layout, the number of tabs and their IDs can only be changed at the template level. The links in the tab navigation use those IDs, so they are directly depended on them. That's why it makes sense to keep them locked in the template:

Act2 Template Builder Services II Link (Editable in the Template)

This way you can change the tab IDs (tab1, tab2, tab3, etc) with something more inboundy, like the name of the service or product:

Act2 Template Builder Tab Edit CSS

Act2 Template Builder ID

Then change the link, too:

Although this text appears only on the mobile tab buttons, the anchor itself is used by the tab navigation on both mobile and desktop.

Since the existing number of elements don't always match your content, you will probably have to use a unique template clone for each page with this design. But if you want to keep it for multiple pages with the same number of tabs and generic anchor names (e.g. tab1, tab2, tab3), you can unlock the links:

Act2 Template Builder Services II Unlock Link Module

Using Act2.1 with the new Design Tools? Read this documentation.