/* Fancy Tabs */
[Tabs]
Build tabbed sections in Avada with icons, captions, and six design styles built in.
- yoursite.com/pricing
Demo shown with the Default style. All six styles share the same options.
Examples
One element, three very different tab sets.
Each example uses the same element
with different options turned on.
- yoursite.com/drills/compare
4 of 11 models
Example 01
Service switcher
Each tab has its own icon and caption, and you can set which one is active by default when the page loads.
- yoursite.com/events/autumn-talks
Autumn talks, October 2026. All times local.
Example 02
Agenda switcher
No page reload when visitors switch days, and each panel can hold a full session list without crowding the layout.
Example 03
Six design styles, one element
Pick a style from the dropdown and every tab on the page updates, no separate layout or shortcode needed for each one.
9:41 yoursite.com
Compare drills
Swipe the table to see every column.
Style: Boxed
Boxed switchers
Short, high-contrast pill buttons work well for pricing plans or short category lists where every label needs to be read at a glance.
9:41 yoursite.com
Compare drills
Each row becomes its own card.
Style: Vertical
Vertical cards
Each row turns into a card with the header labels beside each value. Needs a header row.
See it working on a real Avada site.
What you can build
Tabs visitors click through.
Pricing plan switchers
Pills style sets the active plan apart with its own background color, so the current choice is obvious at a glance.
Features
What is in the element.
Icon, heading, caption
Every tab button can show an icon, a heading, and a short caption line, all set per tab.
6 design styles
Default, Minimal, Pills, Vertical Left, Card, and Boxed, switchable from a dropdown.
Per-tab backgrounds
Give any tab its own background color or image, independent of the others.
Responsive stacking
On small screens, tabs stack into a single scrollable column at a breakpoint you set.
Accessible by default
ARIA tablist markup and full keyboard navigation out of the box, no extra setup required.
Rich tab content
Links, bold text, media, and shortcodes all work inside a tab, just like a normal content area.
Color controls
Separate color settings for inactive buttons, the active button, arrows, and heading text.
Default active tab
Choose which tab is open when the page loads, and visitors can still click through to any other one.
Global colors and typography
Pick colors and fonts from your Avada global settings so tabs match the rest of the site automatically.
Works the Avada way
Built like the elements Avada already ships.
No separate dashboard and no second styling system. You build the tabs where you build everything else.
[ ]
Avada Builder
Add it from the Element Kit category like any other element.
[ ]
Global colors and typography
Pick from your Avada global colors and typography so tabs match the site.
[ ]
Avada Live
Build and edit the table on the front end, in context.
[ ]
Live option updates
Changes to options show in the preview while you edit.
FAQ
Tabs questions
Related elements
EK Cost Calculator
Live estimates without a spreadsheet
Sliders, dropdowns, and checkboxes update a formatted total as visitors change inputs.
View element →
EK Calendar
Month and week grids with real event days
Date-specific entries with popups and today highlighting in the visitor’s browser.
View element →
EK Schema Markup
JSON-LD from builder fields
Output Product, FAQ, LocalBusiness, and other schema.org types from fields you fill in.
View element →