Tabs in Flex

Adding Tabs in Flex

Tabs are a fairly complex element (just like Slideshow) because of the variety of options it offers, along with its dynamic nature. This is also the reason why we've grouped the Slideshow element with the Tabs element. Both are now available via the "+" sign, under the Sliders/Tabs element.

There are a few ways you can get started with Tabs in Flex: 

• Through a pre-built Flex Block (available for all Flextheme and Pronto users, inside the Flex Blocks library, under the Tabs tag).

• By clicking on the "+" sign, choosing the Sliders/Tabs element and clicking on the predefined Tabs composition. This will insert a ready-made layout that you can start with, and build on top of. 
• By building tabs from scratch. You'll also need to click on the "+" sign, choose the Sliders/Tabs element, then add  the "Tabs Content" and "Tabs Switcher".  

Element Settings

The tabs element includes 2 main components:

• Tabs Content -  this is the section that includes the content. It works similar to Slideshows, you have Items, where you can customize your image, title, short description (text), tab name and link options for each item.
• Tabs Switcher - here you set the the layout options for the tabs switcher (image or text), active tab style, as well as the color and font for Tab text. Note that the Tab text is set inside the Tabs Content -> Items.

Each component works as a separate element that can be moved and customized independently. Double-click on any element to expand its settings that will appear on your right or left side.

You can also move these 2 elements and position them as you wish. Note that to reposition the switcher you need to click the icon in the right top corner of the element.

Tabs Content

This is the section where you add content for both -tabs content and the tab switcher. Also, here you can select and adjust the layout structure (image, text or image & text).

• How to add content (Items Section)

Use the Items area to start customizing your tabs content.

All the items have the same layout (text, image, image & text). You can customize the individual elements inside an Item - such as text and images, but the design always stays the same.

If you choose a layout with image & text, yet for a certain slide you want to show text only -  simply don't upload an image.

• Layout Options 

The Tabs element has 2 layout options (one slide and visible nearby):

Also it comes with 3 Content Type options: Text, Image, Image & Text. 
With the Image & Text layout, you can also change the position of the image, so it's displayed at the top, right or left side. 

• Image Options

Note: Minimum Flex Block version you need to use image options is Flex 4.4.2

When it comes to Image Options you have 2 to choose from - Crop & Fit. Choosing Crop will crop the image to fill the frame while choosing Fit will let the image keep its aspect ratio, but will resize to fit the given dimension.

• Spacing Options 

Note: Minimum Flex Block version you need to use the advanced spacing options is Flex 4.4.2

Spacing Options give you control over the gap between the image and title, the title and the description, the description and lower title, as well as the paddings for all the text area.

• Link Options

Note: Minimum Flex Block version you need to use the link options is Flex 4.4.2

The link options are set inside each Item. With the Link Options you can add a button to your tabs, link the entire tab area or don't use any link.

Tab Switcher

For the Tab Switcher you can specify the direction (horizontal or vertical) & the position of the tabs inside the element.

Space Evenly  - with this option enabled the tabs will be distributed evenly along the width of the element. If you disable it, you can use the Gap option to adjust the spacing between the tabs.

Also, inside the Tab Switcher settings you can adjust:

Active Tab Style - this allows you to highlight your active tab, by customizing its color, adding an underline or adding a background.

Use Tab Name - when you enable this option, the tab switcher will show the text you added to the Tab field (inside the Item section). If you disable this option, the tab switcher will show the same title you use inside the content.

Shorten Titles - this will shorten the tab titles and add "..." to each. 

When you add the Tabs element into your mobile site, it will have the desktop sync disabled, allowing you to adjust the layout options, so everything looks and works according to your preferences. 

Know that the content and styling settings (typography & colors) are still the same as on Desktop until you try to adjust them, for example by changing the font style of the title.  

If you decide to have different content displaying on mobile, enable "Use Different Items on Mobile" and add the new content which will appear on mobile only:

My text content is cut off in Front End (Client Side)

To make the text display properly make sure to reposition the content within the borders of the orange frame, as shown in the visual below. Make sure to reposition it based on the item with the longest text.