Tabs split long content into sections that open one at a time, so a page stays short. Product details, pricing plans, service lists and step-by-step guides are typical uses.
The Tabs/Tours widget in The Plus Addons for Elementor adds vertical layouts, templates, icons, hover, autoplay, swipeable titles, columns and phone-friendly modes on top of basic tabs.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free, with extra features in Pro. The table below shows which.
- Widget to enable: Tabs/Tours, switched on under The Plus Addons > Widgets.
- Elementor (free) installed and activated.
How to Activate the Tabs/Tours Widget
Go to The Plus Addons > Widgets, search for Tabs/Tours and turn on its switch.
Free or Pro?
| Feature | Free | Pro |
|---|---|---|
| Horizontal and vertical layouts, title position and alignment | Yes | Yes |
| Text content or an Elementor template per tab | Yes | Yes |
| Font Awesome and Font Awesome 5 icons before the title | Yes | Yes |
| Force Accordion on phones | Yes | Yes |
| Icons Mind and image icons, outer icon, Description, Hint, Unique ID | — | Yes |
| On Hover Tab, Second Click Closed, Arrow, Autoplay | — | Yes |
| Active Tab, Swiper Effect, Tab Columns, Carousel Connection ID | — | Yes |
| Full Width and One By One on phones, Force All Close / First Tab Active per device | — | Yes |
In the free plugin, some Pro options are still listed with a PRO badge, but turning them on only shows an upgrade notice, and the page ignores them.
Layout
- Layout: click the Horizontal picture (titles in a row) or the Vertical picture (titles in a column). See vertical tabs.
- Alignment: Left, Center or Right alignment of the titles.
- Position: Top or Bottom for horizontal tabs, Left or Right for vertical tabs.
Content
Add a tab with + Add Item. Each tab has:
- Title: the clickable title. It accepts an HTML link; see links in tab titles.
- Type: Content for text, or Page Template to show an Elementor template (free). See templates inside tabs.
- Description and Hint (Pro): a line of text under the title and a small label on it.
- Show Inner Icon and Show Outer Icon (Pro): icons before and after the title. See icons.
- Unique ID (Pro): lets a link open this tab. See anchor links.
Special Option (Pro)
| Option | What it does | Guide |
|---|---|---|
| On Hover Tab | Opens a tab when the mouse moves over its title | Hover |
| Second Click Closed | Clicking the open tab’s title closes it; clicking again reopens it | — |
| Arrow | Adds a small arrow to the active and hovered title. Type offers In and Out | — |
| Autoplay | Opens the next tab every few seconds, with an optional play/pause button | Autoplay |
Extra Option (Pro)
| Option | What it does | Guide |
|---|---|---|
| Active Tab | Which tab is open on page load, or All Close | Active tab |
| Swiper Effect | Keeps many titles in one row that visitors drag (Swipe) or move with arrows (Slide). Horizontal only | Swipe or slide |
| Tab Columns | Places the titles in 1 to 6 equal columns per row | Columns |
| Carousel Connection ID | Links the tabs to a Carousel Anything widget with the same ID | Carousel |
Style
The Style tab has sections for the Inner Icon, Outer Icon (Pro), Title Bar, Description (Pro), Tab Hint (Pro), Underline (Pro), Title Bar Background, Arrow Style (Pro), Navigation Area Background, Swiper Slide (Pro), Content and Extra Option. In the free plugin some are named differently: Main Icon, Tab Title Bar and Tab Title Bar Background.
Phones and Tablets
Style > Extra Option > Tab Navigation Responsive changes the titles on small screens:
| Option | What it does |
|---|---|
| None | Keeps the normal tabs. Titles wrap onto more lines when they do not fit |
| Full Width (For Less tabs) (Pro) | Keeps the titles in one full-width row. Only for a few short titles: four titles overflowed a 390 px phone screen in our test |
| One By One (Pro) | Stacks the titles one below the other, full width |
| Force Accordion | Turns the tabs into an accordion on screens up to 600 px wide (free) |
The same section has Force All Close in Tablet, Force All Close in Mobile, First Tab Active in Tablet and First Tab Active in Mobile (Pro); see the Active Tab doc.
Description Field Show on Active Tab (Pro) shows the description of the open tab only.
How It Behaves
- Only one tab is open at a time. By default the first tab is open when the page loads.
- Clicking the open tab’s title keeps it open, unless Second Click Closed is on.
- With Force Accordion, one accordion item is open at a time, and clicking the open item keeps it open.
Limitations
- Arrow Type In and Out currently look the same.
- With Force Accordion and an Active Tab other than 1, the phone view highlights the first title while another tab’s content is open.
- The default icon of a new tab uses the older Font Awesome library, which the widget does not load; it can show as an empty space. Use Font Awesome 5 or turn the icon off.
- A link to
#idon the same page does not switch the tab; see anchor links.
Troubleshooting
A Pro option only shows an upgrade notice
That option needs The Plus Addons for Elementor Pro. See the table above.
An option I read about is missing
Some options depend on others: Swiper Effect is hidden for vertical tabs, Center Mode needs Mode Slide, and the Force All Close and First Tab Active switches depend on the Active Tab value.
