BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Bright Addons
Download free
Guide

Interactive Tabs Pro

How to set up and style the Interactive Tabs widget in Elementor.

Interactive Tabs shows feature cards with an icon, a small label, a title and a text. The cards work as tabs: the active card is highlighted and its image shows next to, above or below the cards. Use it to explain product features or steps with a picture for each.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Add the Interactive Tabs widget with Elementor.

  2. Under Tabs, edit each card: Icon, Small Label, Title, Text and Image, and an optional Link Under the Image.

  3. Under Settings, choose the Image Position and the Card Columns.

  4. Pick Change Tab On, and switch on Move to the Next Tab by Itself for autoplay.

  5. Style the cards, the icon and the active state in the Style tab, then publish.

Content options

Tabs

Option What it does
Icon Icon of the card.
Small Label Short text above the title, for example Design.
Title Title of the card.
Text A short text under the title.
Image The image shown while this card is active.
Image Description (for screen readers) Alt text for the image. Empty means the tab title is used.
Link Under the Image Optional. Shows a button on the image while this tab is active, with Button Text.
Title HTML Tag The HTML tag of the titles.

Settings

Option What it does
Image Position Right of the cards, left of the cards, above, below, or no image.
Card Columns 1 to 4 columns, per device.
Cards Width How much of the width the cards take when the image is beside them.
Gap Between Cards Space between the cards.
Gap Between Cards and Image Space between the cards and the image.
Change Tab On Hover and click, or click only.
Active Tab at Start Which card is active when the page opens.
Move to the Next Tab by Itself Autoplay, with Time per Tab (seconds).
Image Change Effect Fade, Fade and zoom or Slide up.
Image Height Height of the image box. Empty means as tall as the cards.
Progress Line on the Active Card Shows how long until the next tab when autoplay is on.
Bright Addons Pro

Unlock this and 90+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Cards

    padding, radius, alignment, and background, border and shadow for normal, hover and active.

  • Icon

    box size, icon size, radius, and color and background for normal and active.

  • Small Label, Title and Text

    typography, color, active color and space below.

  • Image

    radius, image fit, background, shadow and progress line color.

  • Button on the Image

    typography, colors for normal and hover, border, radius and padding.

Tips

  • Autoplay pauses while the mouse is over the widget, while a card has keyboard focus and while the widget is off screen.

  • Visitors who ask their device for less motion get no autoplay.

  • On tablets and phones the image moves above the cards.

  • The other images load shortly after the page, so a change has no delay.

Questions and answers

Can I use it without images?

Yes. Set Image Position to No image and the cards work as highlighted feature cards.

Is it accessible?

Yes. The cards are tabs for screen readers. Arrow keys move between them and Home and End go to the first and last card.

Can the title be a heading?

Yes. Pick H2 to H6 in Title HTML Tag.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides