Elementor Advanced Tabs Widget: Free Horizontal, Vertical and Image Tabs
The Advanced Tabs widget in Master Addons splits long content into clean, clickable tabs, and it is free. Pick a horizontal, vertical or left active border preset, add an icon or image to each tab title, and choose whether tabs switch on click or on hover. Fill each tab with text from the editor, or, with Master Addons Pro, load a saved section, widget or page template. It works well for product features, FAQs, plans and step-by-step guides.
Multiple Style Presets & Layouts
Start from a built-in preset. Horizontal Tabs puts the titles in a row on top, Vertical Tabs lines them up on the side, and Left Active Border marks the open tab with a colored border. Master Addons Pro adds a Tabular Content preset for a boxed look. Each preset is only a starting point, so you can restyle it to match your brand.
- Horizontal and vertical layouts: choose the tab direction that fits your content.
- Visual presets: start from a designed layout instead of a blank widget.
- Easy switching: change from horizontal to vertical tabs without rebuilding the content.
Saved templates inside tabs (Pro)
The free version fills each tab from the text editor. With Master Addons Pro, each tab can use a different Content Type: simple Text Editor, a Saved Section, a Saved Widget, or even an entire Saved Page Template. This means you can place a complex pricing table, a contact form, an image gallery, or any other pre-designed content block into a tab. It’s like having multiple pages in one, without the clutter.
- Template Integration: Insert any saved Elementor template into a tab for unlimited design possibilities.
- Consistent Design: Reuse your existing sections and widgets to maintain a cohesive look.
- Perfect for Comparisons: Use tabs to switch between different product specs, pricing plans, or feature lists.
Style the Tabs and Content Independently
Achieve a perfect, polished look by styling every part of the tabs. Design the Tabs container and the Content area separately. For the tabs, control the Normal and Active states with different colors, backgrounds, borders, and typography. Adjust the padding, margin and Icon Size. For the content area, style the background, padding, margins, and typography. This level of control ensures your tabs look integrated and professional.
- State-Based Styling: Set unique colors, backgrounds, and borders for active and inactive tabs.
- Icon Support: Add icons to your tabs and control their size and position.
- Content Area Design: Style the content container to match your site’s aesthetic.
Choose How Tabs Respond to Users
Decide how users interact with your tabs. Set the Tab Effect to Click (traditional) or Hover (for faster navigation). You can also set which tab is open by default. This flexibility allows you to create the exact user experience you want, whether it’s for a fast-paced product showcase or a careful, step-by-step guide.
- Click or Hover: choose the trigger that suits your content. Hover is the default.
- Default Active Tab: set which tab is open when the page loads.
Image and icon tabs in Elementor
Each tab title can carry an icon from the Elementor library or an image of your own. Set Icon Type to Image, choose a picture from the media library, and the title becomes an image tab. This is a free option and works with every free preset.
- Icon Type per tab: None, Icon or Image.
- Use images for product or category tabs, and icons for feature lists.
- Keep one style across a tab bar, since mixing images and icons looks busy.
For content that opens in place instead of switching panels, try the Advanced Accordion or Toggle Content (Pro).
Frequently Asked Questions For Tabs
Can I use both icons and text in the tab titles?
Yes. For each tab, set Icon Type to Icon or Image, then pick an icon from the library or an image from your media library. The Icon Size control in the Style tab sets how big the icon appears.
How do I make the tabs look good on mobile?
Use Elementor’s responsive mode to adjust typography, padding and margins for tablet and phone. Preview vertical tabs on a small screen before publishing, since the column of titles takes up width.
What’s the difference between the "Tabular Content" preset and the others?
Tabular Content is a Pro preset. It gives the tab content area a distinct background, border, and padding, making it look like a box that’s connected to the tabs. It’s a more structured, contained look compared to the classic underline or border-left styles.
Can I link a tab to an external URL or another section on the page?
The Advanced Tabs element is designed for toggling content within the widget. For linking to external URLs or page sections, you might need a different solution, such as a navigation menu or anchor links. However, you can place a button with a link inside the tab content.
How is this different from Elementor's own Tabs widget?
Elementor’s free Tabs widget lets you place any widgets inside each tab and put the titles above, below or beside the content. Master Addons Advanced Tabs gives you a hover trigger, icon or image labels, and ready-made presets such as Left Active Border, and you can add as many Advanced Tabs widgets to a page as you need. Pro adds the Tabular Content preset and saved sections, widgets or page templates as tab content.
How does the "Left Active Border" preset work?
The Left Active Border preset typically highlights the active tab with a colored border or background on the left side. It’s a modern, clean look that works well for vertical tabs or even horizontal ones if you want a distinctive indicator.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
