The Interactive Tabs widget by Atomic Addons shows a grid of tab cards next to a large content area. Each card has an icon, a sub title, a title and optional text; when a visitor clicks a card, the content area slides or fades to that tab's image, video, YouTube video or Elementor template. The tabs can also cycle on their own. This guide covers adding the widget, building the tabs and setting up the layout and the slider.
Enable the Interactive Tabs Widget
Interactive Tabs is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Interactive Tabs. You can also open the Content category.
- 4
Turn the Interactive Tabs widget on.
- 5
Click Save Settings.
Add the Interactive Tabs Widget
Interactive Tabs works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Interactive Tabs. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Tabs Item
Open the widget and go to Content → Tabs Item. Four tabs are there to start with. Click a tab to open it; each one has two tabs of its own, Tab for the card and Content for what the content area shows.
On the Tab tab:
- 1
Icon: The card's icon, a star by default.
- 2
Title: The card's heading.
- 3
Sub Title: A small line above the title.
- 4
Text: A longer description, written in the text editor. It shows only while Show Text is on in Additional Settings.
On the Content tab, Select Source picks what the content area shows for this tab:
- Background (the default) — choose the Background type. Image shows the Image you pick, optionally as a Link. Video plays the MP4 file in Video Link muted and on its own, with no player controls. Youtube embeds the video in Youtube Link without player controls, set to start by itself and loop.
- Elementor Template — shows a saved Elementor template. Type its name in Select Template and pick it from the list. Use this for anything richer than a picture: text, buttons, forms or a full section.
Below the list, Image Resolution sets which image size WordPress serves for the tab images, Full by default. The tab's title is used as the image's alt text. When a visitor switches tabs, any playing video is stopped.
Additional Settings
Content → Additional Settings chooses what the cards show and how the cards and the content area are arranged:
- 1
Show Icon: Shows each card's icon. On by default. With it on, Icon Position Top puts the icon above the text instead of beside it.
- 2
Show Sub Title / Show Title: Show each card's sub title and title. Both on by default.
- 3
Title HTML Tag: With titles shown: the title's markup, H1 to H6, div, span or p. H3 by default.
- 4
Show Text: Shows each card's text. Off by default.
- 5
Single Column: Puts the cards above the content area on every screen. Off by default: from 1024px wide the cards sit to the left of the content, and on smaller screens above it. With it on, Column Reverse on Desktop moves the cards below the content on large screens.
- 6
Column Reverse on Mobile: Moves the cards below the content on screens narrower than 1024px.
- 7
Row Reverse: Without Single Column: puts the cards to the right of the content on large screens.
- 8
Space Between: The space between the cards and the content area.
Under TABS ITEM:
- 1
Columns: How many cards sit side by side: 1 to 6. 2 by default, 1 on tablets and phones.
- 2
Column Gap: The space between the cards, 15px by default.
- 3
Width(%): How much of the widget's width the cards take on large screens, 50% by default. The content area takes the rest.
- 4
Position: On large screens, the vertical position of the cards beside the content: Top, Center (the default), Bottom or Stretch.
- 5
Alignment: Left (the default), center, right or justified alignment of the text in the cards.
- 6
Offset: Switch it to Custom to shift the whole group of cards with Horizontal Offset and Vertical Offset (up to 300px either way) or turn it with Rotate, per screen size.
Navigation
The content area is a slider, so it can carry its own controls. Content → Navigation:
- 1
Navigation: Arrows (the default), Arrows and Dots, Arrows and Fraction (such as “2 / 4”), Dots, Progress (a bar that fills as the tabs advance) or None. The cards always work as navigation too.
- 2
Dynamic Bullets?: With dots: shows only a few dots at a time, sized by their distance from the current one. Useful for many tabs.
- 3
Show Scrollbar?: Adds a thin scrollbar under the content.
- 4
Position: Where the controls sit on the content: Arrows Position is Bottom Left by default, Dots Position Bottom Center, and Arrows and Dots Position and Arrows and Fraction Position Center. Progress Position is Bottom or Top.
- 5
Hide Arrow on Mobile: With arrows: hides them on screens narrower than 960px. On by default.
Slider Settings
Content → Slider Settings controls how the content area changes:
- 1
Transition: Fade (the default), Slide, Cube, Coverflow or Flip.
- 2
Autoplay: Moves to the next tab on its own and starts over after the last one. Off by default. Autoplay Speed sets the time on each tab, 5000 ms by default.
- 3
Pause on Hover: Use it together with Autoplay: the tabs stop cycling while the visitor points at the content area.
- 4
Animation Speed (ms): How long the transition takes, 500 ms by default.
Visitors can also move between the cards with the keyboard: the arrow keys go to the next or previous tab, Home and End to the first and last, and Enter or Space opens the focused tab.
Style the Interactive Tabs
Everything below is on the Style tab:
- Tabs Item — the cards in Normal, Hover and Active states: background, padding, gap, border, border radius (or an Advanced Radius for organic shapes) and shadow. Glassmorphism blurs what is behind the cards, with a Blur Level.
- Tabs Content — the content area's media: CSS filters, opacity, transition duration and border radius, with a Hover state; Video Height for videos, and Width to make the media narrower than the content area and center it.
- Icon — the card icons in Normal, Hover and Active states: color, Icon Size, background, padding, border, radius (or an Advanced Radius) and shadow.
- Title, Sub Title and Text — color, hover color, active color and typography. Sub Title also has spacing and Text a margin.
- Navigation — the arrows, dots, fraction, progress bar and scrollbar: sizes, colors, borders, spacing and offsets.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.