Tabs

Display a bunch of organized content in different tabs to save space and bring a nice user experience.

How Tabs Works

Tabs element allows separating different categories of content in responsive tabs. This way, you can display as much information as wanted without worrying about too much space being taken up.

Tabs element includes tab titles for easy navigation and content area where you can add any of 50+ Magezon Page Builder elements.

No matter how many tabs you want to create, the element will satisfy. Arrange tabs quickly using drag & drop. Display them as vertical or horizontal with 4 positions: top, bottom, left and right.

Tabs element also gives you freedom to design its look and feel with custom options for text, border and background. In addition, you can easily insert icons next to tab titles from 2 icon libraries.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla sapien. Class aptent tacitiaptent taciti sociosqu ad lit himenaeos. Suspendisse massa urna, luctus ut vestibulum necs et, vulputate quis urna. Donec at commodo erat. Sed egestas consequat augue eu iaculis sadips ipsums dolores nonsi etra un. Donec elementum pellentesque. Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa. Duis sodales eleifend sem, nonsi semper dui consectetur on roin leoi.

Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa.

Tempus eget urna id, maximus commodo odio. Lorem ipsum dolor sit amet, consectetur elits sadips. Praesent alis lacus. Nunc at vulputate justo.

LEARN MORE

BUY NOW

Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa.

Tempus eget urna id, maximus commodo odio. Lorem ipsum dolor sit amet, consectetur elits sadips. Praesent alis lacus. Nunc at vulputate justo.

LEARN MORE

BUY NOW

Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa.

Tempus eget urna id, maximus commodo odio. Lorem ipsum dolor sit amet, consectetur elits sadips. Praesent alis lacus. Nunc at vulputate justo.

LEARN MORE

BUY NOW

Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa.

Tempus eget urna id, maximus commodo odio. Lorem ipsum dolor sit amet, consectetur elits sadips. Praesent alis lacus. Nunc at vulputate justo.

LEARN MORE

BUY NOW

Horizontal Tabs

Display tabs on top or at the bottom with left, right and center alignment.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Vertical Tabs

Display tabs on the left or right.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Customization Options

Tabs element offers tons of custom options to design tabs' appearance. Set the gap between tab titles and content area and between tab titles, define active tab on page load, hide empty tabs and open tabs by hovering.

Easy to customize border width, radius and style. Choose color and hover colors for title text, background and border. Set title font size and add icons next title from Awesome 5 and Open Iconic libraries.

Fill content area with color or leave it transparent. Easy to add other elements inside content area of each tab like text, image, heading, slider, etc.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Tab 1

Tab 2

First Tab Content

This is first tab element with a row divided into 2 columns each containing it’s own content elements.

Second Tab Content

This is second tab element with a row divided into 2 columns each containing it’s own content elements.

Product Slider and Tabs

Product sliders and tabs, why not? While your online store gets tons of products to be shown, this smart combination will be a perfect solution!

With the help of Tabs element, you can display as many product sliders as wanted in a neat, concise space. Product sliders contain products sharing certain attributes. Tabs are used to separate these sliders and let them be recognized by tab titles. Everything now is organized wisely and neatly.

NOTE: Here we use images to show you how product slider looks like instead of using Product Slider element in the backend because our website doesn't have such products to insert. For real demo of combining Product Slider and Tabs elements, please refer to: Frontend Demo | Backend Demo.

Women

Men

Bags