Collection Tabs

Collection tabs help you display multiple collection inside a single section of a page as a Tab, usually on the home page landing page.

1. Add Collection Tabs to Your Page

To add this element to your page, open the EComposer editor -> Go to Elements -> Basic -> Search for Collection Tabsd -> Drag and drop the element to your desired position on the page.

2. Content Settings

The Content tab controls what information is generated inside the Collection Tabs and how it works.

2.1 General

This element comes with 2 tabs by default, you can click Add new tab to add more slides. Also, you can duplicate (clone), remove or move slides. Please watch the below video.

Note: The maximum tab on this element you can add is 10

• Into each item tab, you can change the title (it is the name of the tab and will only appear on the left side of the editor so you can distinguish between the slides), and you can change the image instead of using image of the collection. You can also add Description and Button Label as well as Button style.

• Display style: You can choose to show the element as a Accordion or Tabs:

• Tab behavior: You can choose an option to change the tab when visitor hover or click into the tab title.

• Disable effect animate: if you want to change the tab instantly without animation, you can tick this option.

• Show title action: Tick this option will show the icon action to let visitor know that the collection title can be clickable. You can also adjust the Icon of it right below it and choose either to open the link in the new tab or not.

• Show ordered number: Tick this option will show the order number of the collection on the left side of the title

• Autoplay: This option will let the tab play automatically without needed any action from the visitor. You can adjust the time delay with Change slide every (s) option, and show the pause button as well as Pause button position.

• Image Ratio: adjust the ratio of the image. We have 4 options: Adapt to image, Square, Portrait, Landscape (4:3)

2.2 Desktop Layout

Note: This setting on this tab will be applies to desktop. On tablet the image width is fixed at 50%. On mobile the image stacks above the content at full width and content alignment is ignored.

You can adjust the Image position, Image width and Content Alignment on this tab setting:

3. Design settings

The Design tab lets you customize the appearance of the Collection Tabs element. In this tab, we have an option to change style for Title row, Content panel, Image, Description, Title action icon and Button.