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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae magna tortor. Duis a viverra lorem. Nullam eu iaculis massa. Aenean venenatis sed turpis eleifend consectetur. Pellentesque blandit sit amet purus in blandit. Vestibulum lobortis tempor elit, et cursus felis maximus vel. Nulla aliquet ultrices porttitor. Duis lacinia est eget augue eleifend gravida. Morbi feugiat nisi in vehicula faucibus. Donec vel magna molestie, porttitor sem sed, hendrerit nisl. Nulla sit amet eros fermentum, rhoncus lorem sit amet, ornare nibh. Quisque condimentum at ante eget vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc cursus nisl at diam lobortis fringilla.
Donec eget eleifend est. Aenean molestie tellus ut facilisis elementum. In sit amet eros enim. Curabitur eleifend erat velit, sed fermentum magna sodales eu. Fusce imperdiet ante non nisi hendrerit venenatis. Duis elementum arcu augue, quis pellentesque leo ornare id. Aenean nulla mauris, imperdiet vitae maximus vitae, elementum sed odio.
Cras maximus mattis dolor id eleifend. Nam ultricies urna efficitur sollicitudin faucibus. Aenean pulvinar risus non laoreet pellentesque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut maximus hendrerit nunc non feugiat. Duis suscipit suscipit massa, id rutrum ex eleifend sed. Aenean sodales diam in tristique porttitor. Ut ullamcorper nisi sapien, ut fringilla erat fermentum tristique. Phasellus ultrices, magna ultrices molestie ullamcorper, felis elit commodo erat, ut ultrices ex sem rutrum mauris. Cras arcu lectus, pretium ac laoreet et, blandit et lectus. In lacinia, metus at vulputate tempor, dui velit laoreet tortor, quis suscipit mi turpis eu velit.
Vestibulum nec ligula vel enim accumsan dignissim. Sed pellentesque metus sed sapien luctus, non aliquet felis porta. Aenean commodo diam urna, sit amet convallis sem cursus eget. Mauris vehicula dignissim tincidunt. Maecenas arcu orci, aliquet vel faucibus quis, scelerisque ac justo. Nullam tempor metus sapien, ac sollicitudin risus fringilla sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget massa libero. Morbi ornare nisi velit, sit amet efficitur elit aliquam eu. Maecenas at risus et est facilisis blandit. Vivamus fermentum diam quis neque pellentesque pellentesque. Fusce sit amet purus a purus finibus vulputate in non erat. Nam quis neque lobortis, rutrum sem a, vehicula urna. Maecenas ultricies molestie felis.
Morbi efficitur mauris a turpis rhoncus, a gravida neque dapibus. Mauris quis ornare leo. Vestibulum vitae sem vitae erat accumsan tristique. Pellentesque quis orci eros. Morbi sapien enim, dignissim at viverra vel, maximus et mauris. Vivamus justo risus, fermentum a porta eget, elementum in turpis. Maecenas vitae nisl dictum, pellentesque felis ac, aliquam felis.
Horizontal Tabs
Display tabs on top or at the bottom with left, right and center alignment.
Vertical Tabs
Display tabs on the left or right with left, right and center alignment.
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.
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.
