Tabs
Organize your info into clean, interactive tabs. Master Addons Advanced Tabs element lets you present your content in a structured, engaging way that saves space and improves user experience. Choose from multiple style presets, control every visual detail, and fill each tab with anything from simple text to entire saved templates. Whether you’re showcasing product features, creating a FAQ, or building a step-by-step guide, these advanced tabs give you the flexibility and control to do it beautifully.
Multiple Style Presets & Layouts
Jumpstart your design with built-in style presets. Choose between Horizontal Tabs (classic top navigation) or Vertical Tabs (side navigation). Enable Left Active Border for a sleek indicator, or use the Tabular Content preset for a boxed look. Each preset is a starting point that you can then customize endlessly to match your brand and layout needs.
- Horizontal & Vertical Layouts: Choose the tab direction that best fits your content structure.
- Visual Presets: Select from designed starting points for a professional look right away.
- Flexible Orientation: Switch between horizontal and vertical tabs without starting from scratch.
Go Beyond Text with Saved Templates
Why limit your tabs to plain text? Each tab can contain 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 Gap between tabs and the 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 a default active tab and control the transition speed. 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 best suits your content and user experience.
- Default Active Tab: Set which tab is open when the page loads.
- Smooth Transitions: Control the animation speed when switching between tabs.
Frequently Asked Questions For Tabs
Can I use both icons and text in the tab titles?
Yes, you can. When adding a tab, you can choose an Icon Type (icon, image, or none) and then select an icon from the icon library. The icon can be positioned left of the text, and you can control the icon size and spacing in the style settings.
How do I make the tabs look good on mobile?
The Advanced Tabs element is fully responsive. On mobile, the tabs can stack vertically or become a scrollable horizontal list, depending on your settings. You can adjust the typography, padding, and margins for mobile specifically in Elementor’s responsive mode.
What’s the difference between the "Tabular Content" preset and the others?
The Tabular Content preset typically 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.
Is it possible to have more than one set of tabs on a page?
Yes, you can add multiple Advanced Tabs widgets on a single page. Each functions independently. This is useful if you have several groups of content that you want to organize in tabs.
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.
Caldera Forms
