V4 Early Bird: up to 25% off Annual, up to 30% off Lifetime, and 2x site activations on every plan. Ends Oct 17.V4 Early Bird: up to 30% off + 2x sites · ends Oct 17. See plans →
Get Animation Addons Pro
Classic Elementor widget · Free

Tabs Widget for Elementor Tabbed content with icons, saved templates and a mobile accordion

Build Elementor tabbed content without code: give each tab an icon and a title, write the content or drop in a saved Elementor template, and place the tab menu above, below or beside it. On phones the tabs can turn into an accordion. Free, on Elementor Free.

Try it free See the live demos
  • Free on WordPress.org
  • Saved template in any tab
  • Vertical or horizontal
  • Accordion on phones

Classic widget · Elementor 3 and 4Updated

Live demos

Six tab designs, live

Six tabbed sections, each on a small site: a product tour, an integration list, an app marketplace, a service page, a report and a clinic directory. Click or tap a tab and the panel fades in. On a phone each one switches to the accordion layout.

NorthlightProductPricingLog in
Product tour

One workspace for every team

Sprint boardMiaAmaZoe
Week 42 · 12 open tasks
  • Homepage copyMia · due FridayReview
  • Pricing tableAma · due MondayTo do
  • Launch emailZoe · due TuesdayTo do

Turn every request into a clear task.

Add an owner, a due date and the files they need, right from the conversation. Nobody has to ask twice.

SaaS product tour

Product tour with icon tabs

The product page of a team app. Three tabs with large round icons sit on a light card. The open tab turns white, and each panel shows a screen of the app with a short pitch. The card fades up as it scrolls into view (Animation tab, Pro).

Click a feature

In the panel, set Content Type to Saved Templates, Icon Position to Before, Icon Size to 44 px and Breakpoint to Mobile Portrait (> 767px).

HaldenPlatformIntegrationsDocs

Connect the tools you already use

Groups support tickets by topic, so the right team sees them first.

Connect

Keeps plans, seats and invoices in step with your billing.

Connect

Shows a product tour to new users the moment they sign up.

Connect

Sends every event to your warehouse, clean and ready for reports.

Connect

Books meetings from shared calendars without the back and forth.

Connect

Collects feature requests and links them to work in progress.

Connect

Turns call recordings into notes, tasks and follow-up emails.

Connect

Moves files between drives and keeps folder access as it was.

Connect
Integration directory

Integrations by category

An integrations page with outlined pill tabs: All, Operations and Product. The open pill fills lime. Each tab shows its own set of tool cards with a Connect button.

Click a category

In the panel, set Content Type to Saved Templates, Alignment to Center and Distance from content to 30 px. In the Style tab, set Border Radius to 50 px and the Hover/Active background to lime.

Shally DevDocsMarketplacePricing
Marketplace

Apps that plug into your stack

PulseCRM

Every deal, call and email in one timeline, synced both ways.

Explore integration

TunewaveOnline platform

Playlists for stores and studios, licensed and ready to play.

Explore integration

BoxlyStreaming

Stream large video files to clients without a download.

Explore integration

FlowpipeSocial media

Post to five networks at once and see replies in one inbox.

Explore integration

Orbit AIStreaming

Live captions and chapters for every stream, in 30 languages.

Explore integration

SnapfoldSocial media

Shared photo albums your whole team can add to and tag.

Explore integration
App marketplace

Marketplace with rounded tabs

A marketplace of apps for developers. Small rounded tabs filter the cards by type, and the open tab turns coral. A card border turns coral when you point at it.

Click a tab, hover a card

In the panel, set Content Type to Saved Templates and Alignment to Center. In the Style tab, set Gap between tabs to 7 px, Border Radius to 12 px and the Hover/Active background to coral.

RosterEmployersHiringPricing

Hire across borders, without the paperwork

Hire full-time talent in 40 countries

We handle contracts, local rules and onboarding, so your new hire starts on day one.

  • Local employment contracts
  • Onboarding in one week
  • Laptop shipped to their door
Learn more
Three colleagues reviewing work at a desk with two monitors
Service pages

Services as underlined tabs

The hiring page of an HR company. Four serif text tabs sit on a thin line, and the open one is underlined in white. Each panel is a white card with a short checklist and a photo.

Click a tab

In the panel, set Content Type to Saved Templates and Alignment to Center. In the Style tab, add a bottom Border of 1 px and set the Hover/Active border colour to white.

Sahara FilmsFilmsStudioContact
Studio report

The numbers behind this year’s films

2015
2018
2020
2023

ScriptShootPostBudget, $k per film

Reports

Yearly report with three charts

A studio report with three small dark tabs: Development, Economy and Uploading. Each one swaps the chart in the same space. The block fades up as it scrolls into view (Animation tab, Pro).

Switch the chart

In the panel, set Content Type to Content and Alignment to Start. In the Style tab, set Border Radius to 10 px and give the Hover/Active tab a dark background with white text.

Medica ClinicDepartmentsDoctorsBook
Our departments

Find the right care, on the right floor

Floor 2 · Room 204

Cardiology

Heart checks, ECG and blood pressure care, with results explained the same day.

  • Mon to Fri8:00 to 18:00
  • Saturday9:00 to 13:00
Dr. Lena OrtizHead of cardiologyBook a visit
Clinic directory

Clinic departments as vertical tabs

The departments page of a clinic. Elementor vertical tabs sit on the left with a line icon before each name, and the open tab turns teal. The panel shows the floor, the opening hours and a Book a visit button.

Pick a department

In the panel, set Direction to Before, Title Alignment to Left and Icon Position to Before. In the Style tab, set Navigation Width to 34%.

Features

Key features of the Tabs Widget

Every feature below is a real setting in the widget panel. Nothing needs custom code.

Elementor tabs saved template

Set Content Type to Content and write in the text editor, or pick Saved Templates and choose one in Save Template. A tab can hold cards, images and buttons.

Elementor vertical tabs

Direction puts the tab menu Above, Below, Before or After the content. Before and After give you vertical tabs, sized with Navigation Width.

Elementor tabs accordion on mobile

Elementor responsive tabs: pick a Breakpoint. Below it the tab menu hides and each panel gets its own title, like an accordion. Choose None to keep tabs.

Elementor tabs with icons

Give each tab an Icon, then set Icon Position (above, below, before or after the title), Icon Gap and Icon Size.

Align the tab menu

Alignment sets the menu to Start, Center, End or Stretch, and Title Alignment sets the text inside each tab.

Smooth tab switching

The Elementor tabs animation is a fade: a click hides the open panel and fades in the new one. Hover and active colours change over 0.3 s.

Dynamic tab titles

The Title field takes Elementor dynamic tags, so a tab can show a post title or a custom field.

Elementor tabs style for every state

Normal and Hover/Active text, background (classic or gradient) and border colour, plus border, radius, padding, Gap between tabs, Distance from content and the content box.

Step by step

How to add tabs in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install and activate Animation Addons for Elementor, then turn on Tabs under Animation Addons, Elements.

  2. Open your page in Elementor, search the panel for Tabs and drag the Animation Addons Tabs widget onto the page.

  3. In Tabs Items, set an Icon and a Title for each tab, then choose Content Type: write in Content, or pick a template in Save Template.

  4. Set Direction and Alignment, then in Settings choose Title Alignment, Icon Position and the Breakpoint for the accordion layout.

  5. Style the titles (Normal and Hover/Active) and the content box in the Style tab, check the page on a phone and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Tabs Widget

How do I add tabs in Elementor?

Install the free Animation Addons plugin, turn on Tabs under Animation Addons, Elements, and drag the Tabs widget onto your page. Add your tabs in Tabs Items, give each one a title and content, and set where the tab menu goes with Direction.

Can I put a saved template inside a tab?

Yes. Set the tab’s Content Type to Saved Templates and pick any published Elementor template in Save Template. The tab then shows that design, with its images, cards and buttons.

How do I make vertical tabs in Elementor?

Set Direction to Before or After. The tab menu then sits to the left or right of the content as a column, and Navigation Width (10 to 50%) sets how wide it is.

What happens to the tabs on a phone?

Below the Breakpoint you choose, the tab menu hides and each panel gets its own title above it, like an accordion. One panel stays open. Set Breakpoint to None to keep the tab menu on every screen.

Can I add icons to the tab titles?

Yes. Each tab has an Icon field. Icon Position puts it above, below, before or after the title, and Icon Gap and Icon Size set the spacing and size.

How does tab switching work?

A click or tap on a title hides the open panel and fades the new one in. Hover and active colours change smoothly. The scroll entrances on the product tour and the report come from the Animation tab of Animation Addons Pro.

Elementor tabs vs accordion: which one?

Use tabs to compare a few equal panels side by side. Use an accordion, such as Advanced Accordion, for a long list of questions. On phones this widget turns into an accordion anyway.

Is it free, and does it work in Elementor 4?

Yes, it is free in the Animation Addons plugin on WordPress.org and works with Elementor Free. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it keeps working.

Is content inside tabs bad for SEO?

No. The widget writes every panel into the page HTML and only hides the inactive ones, so search engines can read all of your tabbed content.

Animation Addons Pro · Elementor 4

More content, less scrolling

Tabs with icons, saved templates and a mobile accordion, free on Elementor Free.

Get Animation Addons Pro Try it free
  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license