Tabs Element

Separate Your Information In Tabs

Buy Avada
Discover More
Prebuilt Websites

Tabs Element

Tabs are perfect for displaying a bunch of organized information in a small area. Avada includes 2 different design styles for tabs; clean and classic. Both design styles can be vertical or horizontal, can use any of the other Avada Builder elements inside of them, use icons next to the titles, easily drag and drop each tab item into different locations, insert images, icons, checklists and much more.

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.

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

Learn More
Purchase Avada

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.

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

Learn More
Purchase Avada

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.

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

Learn More
Purchase Avada

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.

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

Learn More
Purchase Avada

2 Design Layouts To Select From

Choose from two tab styles to better suit your website design. Each design layout has multiple customization options to go along with it!

Classic

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Clean

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Choose Between Horizontal or Vertical Tabs

Tabs on the side, or tabs on top? Our tab boxes are already fully responsive, but this customization option gives them the extra edge where your design composition is concerned.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Integer eu nisl nec metus ultricies tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis turpis, tincidunt in purus quis, faucibus sollicitudin dolor. Nulla diam sem, tincidunt sit amet arcu quis, iaculis gravida erat. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse laoreet justo nec turpis suscipit, eget pellentesi. Integer eu nisl nec metus ultricies tincidunt.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse laoreet justo nec turpis suscipit, eget pellentesque magna scelerisque. Curabitur vitae dictum purus. Duis viverra rutrum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis turpis, tincidunt etra uns. Integer eu nisl nec metus ultricies tincidunt.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis turpis, tincidunt in purus quis, faucibus sollicitudin dolor. Nulla diam sem, tincidunt sit amet arcu quis, iaculis gravida erat. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse laoreet justo nec turpis suscipit, eget pellentesi.

Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse laoreet justo nec turpis suscipit, eget pellentesque magna scelerisque. Curabitur vitae dictum purus. Duis viverra rutrum aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis turpis, tincidunt etra uns.

Customize Settings

Select whether or not to justify the content inside the tabs, change the background color, the inactive tab color, set the border color, integrate a Font Awesome 5 icon into the tab, set the size of the icon and much more with the customization settings.

Use Them With Columns

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets.

  • Fully responsive so your content looks great

  • Loaded with lots of amazing shortcodes

  • Unlimited color options via global options

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Fusce sollicitudin nisi aliquet tellus tincidunt consequat. Integer lobortis gravida elit porta elementum. Donec consequat ligula enim, id dignissim enim fermentum quis. Nam vel malesuada orci. Ut malesuada feugiat nisl eget pretium.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Fusce sollicitudin nisi aliquet tellus tincidunt consequat. Integer lobortis gravida elit porta elementum. Donec consequat ligula enim, id dignissim enim fermentum quis. Nam vel malesuada orci. Ut malesuada feugiat nisl eget pretium.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Fusce sollicitudin nisi aliquet tellus tincidunt consequat. Integer lobortis gravida elit porta elementum. Donec consequat ligula enim, id dignissim enim fermentum quis. Nam vel malesuada orci. Ut malesuada feugiat nisl eget pretium.

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Nam accumsan libero odio, quis dapibus risus rutrum vitae. Quisque a fringilla lorem, et aliquam metus. Proin quis fringilla ligula. Praesent efficitur et tellus non vehicula. Ut finibus pellentesque lectus eu lobortis. Aenean gravida risus id elit efficitur placerat. Suspendisse quis varius ligula, et rhoncus ex. Vivamus fringilla, risus quis egestas tincidunt, elit risus euismod quam, eget consectetur odio sapien in leo. Cras lacinia quam vel orci aliquam, nec dictum turpis auctor. Nam at venenatis magna, vitae pretium sem. Aliquam gravida sodales consectetur. Quisque scelerisque dolor in purus venenatis sollicitudin. Curabitur aliquet turpis sit amet tellus vulputate blandit. Fusce ipsum leo, eleifend non lobortis non, gravida pulvinar nibh ut non rutrum .

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Nam accumsan libero odio, quis dapibus risus rutrum vitae. Quisque a fringilla lorem, et aliquam metus. Proin quis fringilla ligula. Praesent efficitur et tellus non vehicula. Ut finibus pellentesque lectus eu lobortis. Aenean gravida risus id elit efficitur placerat. Suspendisse quis varius ligula, et rhoncus ex. Vivamus fringilla, risus quis egestas tincidunt, elit risus euismod quam, eget consectetur odio sapien in leo. Cras lacinia quam vel orci aliquam, nec dictum turpis auctor. Nam at venenatis magna, vitae pretium sem. Aliquam gravida sodales consectetur. Quisque scelerisque dolor in purus venenatis sollicitudin. Curabitur aliquet turpis sit amet tellus vulputate blandit. Fusce ipsum leo, eleifend non lobortis non, gravida pulvinar nibh ut non rutrum .

Lid est laborum dolo rumes fugats untras. Etha rums ser quidem rerum facilis dolores nemis onis fugats vitaes nemo minima rerums unsers sadips amets. Ut enim ad minim veniam, quis nostrud Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci amets uns. Etharums ser quidem rerum. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit auti. Nam accumsan libero odio, quis dapibus risus rutrum vitae. Quisque a fringilla lorem, et aliquam metus. Proin quis fringilla ligula. Praesent efficitur et tellus non vehicula. Ut finibus pellentesque lectus eu lobortis. Aenean gravida risus id elit efficitur placerat. Suspendisse quis varius ligula, et rhoncus ex. Vivamus fringilla, risus quis egestas tincidunt, elit risus euismod quam, eget consectetur odio sapien in leo. Cras lacinia quam vel orci aliquam, nec dictum turpis auctor. Nam at venenatis magna, vitae pretium sem. Aliquam gravida sodales consectetur. Quisque scelerisque dolor in purus venenatis sollicitudin. Curabitur aliquet turpis sit amet tellus vulputate blandit. Fusce ipsum leo, eleifend non lobortis non, gravida pulvinar nibh ut non rutrum .

The Avada: Website Builder

CREATE THE LAYOUTS YOU WANT

The Avada Website Builder gives you the ability to design and build any layouts for your Avada website. Choose to customize the Footer, single posts, Portfolio posts, archives, search results, and more. With the power of Layouts, Layout Sections, Conditional Logic, Layout Section Elements, and Avada’s massive range of Design Elements, the sky is the limit. Custom design a global footer or only apply the custom Footer to a single page or post.

avada-theme-builder
EXPLORE THE AVADA WEBSITE BUILDER

Header Builder

Whatever your design requirements are, getting the job done could not be any easier. You can decide how many columns to use when designing and building the header, with a vast array of styling options to perfect the layout. What’s more, is you can now choose to create and display as many different headers as you want for different pages and posts throughout your website.

Footer Builder

Free from any constraints of Global Options, anything you can imagine and design, you can build and implement as your Footer, either globally or in a conditional layout on a Custom Post Type, a post category, or any number of other possibilites. With the Avada Footer Builder, we have introduced a tool of unparalled design power and flexibility, and you are now limited more by your imagination than anything else.

The #1 Selling WordPress Theme Of All Time

625,000+

Individuals & Businesses Trust Avada

BUY AVADA

Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.

Documentation

Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Avada Global Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global global options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.

General

  • Design – Choose the design style for the Tabs. Choose from: Classic, Clean.
  • Layout – Choose between a Horizontal or Vertical layout.
  • Justify Tabs – Choose to Justify the Tabs.
  • Background Color – Set the Tabs Background Color.

  • Inactive Color – Set the Inactive Tab Color.

  • Border Color – Set the Border Color.

  • Icon – Choose an icon from the Font Awesome Library.

  • Icon Position – Set the position of the Icon: Default, Left, Right, Top.

  • Tabs Icon Size – Set the icon size.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

Children

  • Add Content Box – Add a new Tab.
  • Tab Controls – Choose to Edit, Duplicate or Remove Tab.

Child Element

  • Tab Title – Add Your Tab Title
  • Icon – Choose an icon from the Font Awesome Library.
  • Tab Content – Set content for the Tab.