Tabs in Flex
Adding Tabs in Flex
There are many ways you can use the tabs functionality for your website. You can use the tabs element to create an FAQ block, to showcase multiple client testimonials or to present your team for example.
To add tabs into you flex block, click on the Add Element icon in your top bar - the "+" sign, and click on the Tabs element in the expanded window.
The tabs element includes 2 main sections:
- the Tabs Content
- the Tab Switcher
Each 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.
This is the main element where you add content for both - the tabs 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.
The Tabs element includes 3 layout 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, on the right or on the left. You can also adjust the image size and the text paddings:
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:
How to Remove Scroll in Front End (Client Side)
The scroll effect will appear when in the Flex editor, a part of your content appears to be cut. To get rid of the scroll effect make sure to reposition the content within the borders of the orange frame, as shown in the visual below:
New Predesigned Blocks with Tabs
We've created a collection of new layouts which use the new tabs element (available for Flexthemes users only).
You can find all these new blocks in the popup with predesigned blocks, under the Tabs tag.