11.1 Tabs/Pills

This chapter will show you how to create a set of tabs or pills with information on your website. Below you can see the difference between the design of tabs and pills (img 11.1.1). 

To add the Tabs/Pills layout, click to create a new element on a page and go to the Layout tab. Select "Tabs/Pills with content elements"  (img 11.1.2). 

Save the element before it is possible to add new tabs (img 11.1.3). 

On the tab Display, you can select between having the tab or pill design. It is also possible to select the positioning of the tabs/pills, and adjust them to the left or right (img 11.1.4). 

Moving on to the "Tabs"-tab, click "Add new: Tab" to add a new tab/pill (img 11.1.5). 

Information fields for the tab is added, which contains the "Tab title" displayed in the frontend, the option of having the tab active when loading the page and the option to enable a fading animation to the tab, when transitioning between the tabs/pills. At the bottom you can click to add more tabs/pills (img 11.1.6). 

Each tab/pill has a field set of information, and it is possible to toggle all tab/pills field sets to close/expand them. On the right, each tab/pills has an icon for dragging and dropping the tabs/pills in order and a trash can to remove them. Please note that if you are re-arranging the order, efter putting content in the tabs/pills, save in between each move (img 11.1.7). 

When you Save and close, there will be a set of columns in the backend, one for each tab/pill, where you can place any type of content you wish (img 11.1.8). For example, if you are creating a product view you might add one tab for General information, one with Technical data and finally one with Instruction videos (img 11.1.9).