Fancy Elements Fancy Tabs Fancy Tabs
Parent / child element
Fancy Tabs Tabbed content with an icon, heading and caption on every tab button. Each tab holds its own rich content, background colour and background image, in six design styles.
Six design styles: Default, Minimal, Pills, Vertical Left, Card and Boxed
Icon image, title and caption on every tab button
Per-tab content background colour or image
Choose the tab that opens by default
Colour controls with hover states
Keyboard and screen-reader friendly tablist
H1 to H6, caption p to H6
Icon image, background image
Step 01 · Strategy
Understand the problem before we design anything
We interview your stakeholders, audit your analytics and study your competitors, so every decision that follows is grounded in evidence instead of opinion.
✓ Stakeholder workshops
✓ Analytics and SEO audit
✓ Competitor teardown
✓ Prioritised project brief
Deliverable: Strategy brief
Step 02 · Experience
Wireframes to pixel-perfect screens
Low-fidelity wireframes become a polished, on-brand design system. Every key screen is prototyped and tested with real users before a line of code is written.
✓ Information architecture
✓ Responsive wireframes
✓ UI design system
✓ Clickable prototype
Deliverable: Figma prototype
Step 03 · Development
Fast, accessible and easy to edit
We build on Avada with clean, reusable components, so your team can update content without calling a developer. Performance and accessibility are checked on every release.
✓ Avada Builder layouts
✓ Core Web Vitals tuning
✓ WCAG 2.2 AA checks
✓ Staging site for review
Deliverable: Staging website
Step 04 · Go live
A calm, zero-downtime launch
We handle DNS, redirects and monitoring, then train your team and stay on call for 30 days, so launch day feels like any other day.
✓ Redirect and SEO migration
✓ Uptime monitoring
✓ Team training session
✓ 30 days of priority support
Deliverable: Live website
Aurora ANC Wireless Headphones
Studio-grade sound, adaptive noise cancelling and a featherweight frame you’ll forget you’re wearing. Aurora adjusts to your environment in real time, so you only hear what you choose to.
Drivers 40 mm dynamic, beryllium-coated
Frequency response 5 Hz – 40 kHz
Connectivity Bluetooth 5.3, multipoint
Codecs LDAC, AAC, SBC
Charging USB-C, 10 min = 5 h playback
Weight 248 g
Everything you need, packed in a recycled-fibre case.
✓ Aurora headphones
✓ Hard-shell travel case
✓ USB-C charging cable
✓ 3.5 mm audio cable
✓ Flight adapter
✓ Quick-start guide
4.9 ★★★★★ from 2,184 reviews
★★★★★
“The noise cancelling is unreal. My open-plan office finally sounds like a library.”
Priya S. · Verified buyer
★★★★★
“Comfortable for a full transatlantic flight, and the battery still had juice to spare.”
Marcus T. · Verified buyer
Pro Monthly
$19 / month
Billed monthly. Cancel any time.
✓ Unlimited elements
✓ All Pro design styles
✓ 1 website
✓ Email support
Get started
Save 20%
Pro Yearly
$182 / year
Equivalent to $15.17 a month.
✓ Unlimited elements
✓ All Pro design styles
✓ 5 websites
✓ Priority support
Get started
Best value
Pro Lifetime
$399 one-time
Pay once, own it forever.
✓ Unlimited elements
✓ All Pro design styles
✓ Unlimited websites
✓ Lifetime updates
Get started
Service
Websites that turn visitors into customers
Conversion-focused Avada websites designed around your customers’ journey, from the first impression to the final click.
✓ Custom, on-brand page layouts
✓ Mobile-first and accessible
✓ Built-in SEO foundations
Starting at $2,400
Book a call
Service
A brand people remember
Logo, colour, typography and voice, packaged into a practical guide your whole team can use with confidence.
✓ Logo suite and brand marks
✓ Colour and type system
✓ Brand guidelines PDF
Starting at $1,800
Book a call
Service
Get found by the right people
Technical fixes, schema markup and a content plan built around what your customers actually search for.
✓ Technical SEO audit
✓ Schema and Core Web Vitals
✓ Quarterly content roadmap
Starting at $900
Book a call
Service
Your site, always in great shape
Updates, backups, uptime monitoring and small edits each month, handled by a team that answers within two hours.
✓ Weekly updates and backups
✓ 24/7 uptime monitoring
✓ 2 hours of edits each month
Starting at $149/mo
Book a call
Ship client sites twice as fast
Reusable, on-brand elements mean your team spends time on ideas, not on rebuilding the same sections for every client.
Product pages that sell
Tabs, tables and offers that keep shoppers on the page, with specs, reviews and shipping details one click away.
Explain complex products simply
Turn long feature pages into scannable sections, with pricing, comparisons and FAQs your visitors actually read.
“We build tools that let small teams ship websites as polished as the world’s biggest agencies, without the agency price tag.”
Sarah Lin · Founder & CEO
A web that is fast, accessible and a joy to edit
By 2030 we want every small business website to load in under a second, meet accessibility standards out of the box and be editable by anyone on the team.
✦
Craft over speed
We would rather ship one great element than three average ones.
◎
Clarity first
Plain words, clean code and settings that explain themselves.
♥
Support like a colleague
Real people who answer quickly and actually fix the problem.
All six design styles share the same tab and colour settings. Switch between them with the Design Style option.
Example of fancy tabs with rounded tab buttons, H5 headings and tab 3 open by default…
Week 1 · 4 lessons · 1h 40m
Avada foundations
1 Welcome and course overview Free preview 08:12
2 Global options that matter 24:30
3 Containers, columns and spacing 31:05
4 Typography and colour systems 36:40
Week 2 · 4 lessons · 2h 05m
Building layouts that convert
1 Anatomy of a landing page 22:18
2 Hero sections that work 29:44
3 Social proof and trust 33:10
4 Responsive fine-tuning 40:02
Week 3 · 4 lessons · 2h 20m
Reusable components with Fancy Elements
1 Fancy Tabs in depth Free preview 34:15
2 Advanced tables and comparisons 36:20
3 Timelines and process sections 31:48
4 Saving a component library 37:30
Week 4 · 3 lessons · 1h 30m
Performance and launch
1 Core Web Vitals checklist 28:40
2 SEO and schema essentials 32:15
3 Launch day playbook 29:05
Example of fancy tabs with a content background image and per-tab background colours…
New season
The Ocean Collection
Fluid shapes and cool blues inspired by the Atlantic coast. Twelve layouts, ready to drop into any Avada page.
Explore the collection →
Coming soon
The Forest Collection
Deep greens, natural textures and calm, editorial typography for brands that want to feel grounded.
Join the waitlist →
In the studio
The Ember Collection
Warm rust and amber tones with bold headlines, designed for hospitality, food and lifestyle brands.
Get a sneak peek →
Example of fancy tabs with a bordered, rounded content box and custom heading colours…
How fast do you ship?
Orders placed before 2 pm ship the same business day. Standard delivery takes 3–5 days, and express takes 1–2 days.
Do you ship internationally?
Yes, to over 60 countries. Duties and taxes are calculated at checkout, so there are no surprises on delivery.
How can I track my order?
You’ll get a tracking link by email as soon as your parcel leaves our warehouse.
What is your return window?
You can return any unused item within 30 days of delivery for a full refund.
Who pays for return shipping?
We do. Download a prepaid label from your account and drop the parcel at any post office.
When will I get my refund?
Refunds are issued within 3 business days of your return reaching us.
Which payment methods do you accept?
All major credit cards, PayPal, Apple Pay and Google Pay.
Is my payment information secure?
Yes. Payments are processed by PCI-DSS Level 1 providers and we never store your card details.
Can I pay in instalments?
Orders over $100 can be split into four interest-free payments at checkout.
Use cases 01
Service or process switcher that shows each step with its own icon, heading and caption.
02
Pricing plans compared side by side as pill tabs, with the most popular plan open by default.
03
Product page sections such as overview, specifications and reviews, grouped in minimal tabs.
Key features What the element does, in plain terms. Every individual control is listed in the settings reference below.
Default arrow tabs plus five Pro styles: Minimal, Pills, Vertical Left, Card and Boxed. Each one keeps your accent colours.
On small screens each tab heading stacks above its own panel, and Pro styles wrap their tab buttons into two columns.
Icon, heading and caption
Each tab button can show an uploaded icon image, a title and a caption line, with a selectable HTML tag for each.
Each tab holds its own rich text content and can override the content background colour or image.
Colour controls with hover states
Inactive, active, arrow, heading, caption and content background colours, each with its own hover colour.
Padding on all four sides, border width, border colour and border radius for the content area.
Choose which tab opens first by its number.
Rendered as an ARIA tablist with tab and tabpanel roles, and supports keyboard navigation.
Settings reference Every setting the element exposes, grouped by builder tab. Options are listed where the setting offers a fixed set of choices.
Default · Minimal · Pills · Vertical Left · Card · Boxed
The visual style of the tab buttons and content panel. Minimal, Pills, Vertical Left, Card and Boxed come with Pro.
Add, reorder, clone or remove tabs. Each tab has its own settings, listed below.
H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for tab titles, so the tabs fit the page heading outline. Default H3.
p · H1 · H2 · H3 · H4 · H5 · H6
The HTML tag used for tab captions. Default H5.
A background image for the content area of every tab. It overrides the content background colour.
Pixel value, for example 10px
Rounds the corners of the tab buttons.
Border Radius for Tab Icon Image
Percentage, for example 50%
Rounds the icon images in the tab buttons. Use 50% for circles. Default 0.
The tab that is open when the page loads.
Adds a class to the wrapping HTML element.
Adds an ID to the wrapping HTML element.
Tabs Child element, one per tab
The heading shown on the tab button.
A short line shown under the title on the tab button.
An image shown above the title on the tab button.
The background colour of this tab’s content area, overriding the parent colour.
A background image for this tab’s content area. It overrides the background colour.
The body of the tab, which accepts formatted text, media, links and shortcodes.
Colour, with hover. Default #292d32
The background of tab buttons that are not selected. The hover colour also applies to every tab button.
Colour, with hover. Default #81c893
The background of the selected tab button, and the accent colour of the Pro styles.
Upper Arrow Diamond Color
Colour, with hover. Default #292d32
The top half of the diamond arrow under the active tab in the Default style.
Lower Arrow Diamond Color
Colour, with hover. Default #81c893
The bottom half of the diamond arrow under the active tab in the Default style.
Colour, with hover. Default #ffffff
The colour of the tab titles.
Colour, with hover. Default #ffffff
The colour of the tab captions.
The background colour of the content area for every tab.
Top · Right · Bottom · Left
Inner spacing of the content area, for example 20px or 1.5em. Leave empty to use the default.
Pixel value, for example 1px
The border width of the content area.
The border colour of the content area. Shown once a border width is set.
Pixel or percentage value
Rounds the corners of the content area, for example 8px.
