How to Create Elementor Tabs in 7 Quick Steps

Step 1: Launch the Elementor editor

Open the WordPress post or page where you want tabbed content. Click ‘Edit with Elementor’ to customize and add the tabbed content widget.

To begin, navigate to the WordPress post or page where you wish to include tabbed content. Click on the “Edit with Elementor” option to open the Elementor editor. This will allow you to add and customize the tabbed content widget seamlessly.

Step 2: Add the tabs widget

Search for the ‘Tabs’ widget in the left panel under Elements. Drag and drop it into the desired section of your page

From the left-hand panel, under the Elements section, search for the “Tabs” widget. Drag and drop the widget into the desired section of your page. Once placed, a settings dashboard will appear, allowing you to customize the widget further.

Step 3: Configure tab content

Add titles and content for each tab. Click ‘+ Add Item’ to add more. Choose horizontal or vertical layout under the Type setting

You can input the title and content for each tab. To add another tab, simply click the + Add Item button. Under the Type setting, choose whether you want the tabs to be displayed horizontally or vertically.

Step 4: Customize tab design

Customize each tab by editing its title, content, and icon. Adjust the icon position and tab alignment for a personalized design

After adding text to the tabs, you can customize the widget’s overall settings using several options:

1. Customize Each Tab:

• • Select each individual tab to edit attributes such as its title, box content, and icon.
  • Adjust the icon’s position and the tab’s alignment for a personalized look.

2. Style Tab for Design Customization:

• • Under the Style tab, you’ll find options to tweak the design and appearance of the Tabs widget.
  • Modify text colour, shadow, typography, and spacing for a more cohesive design.

Use the Style tab to customize the Tabs widget by adjusting text colour, shadow, typography, and spacing for a cohesive design

3.Tab Borders:

• • Adjust the border colour and width around the tabs to create visual separation and distinction between sections.

4.  Title Customization:

• • Under the Title section, change the text colour of tab titles.
  • Use the Typography settings to adjust font styles, sizes, and weights to match your site’s theme.

Step 5: Apply advanced settings (optional)

Use the Advanced tab in the widget settings for additional customization options to enhance your design

Under the Advanced tab in the widget settings panel, you can access a variety of additional customization options to further enhance your design. Here’s an overview of these settings:

Advanced Options:

1. Margins and Padding:
   • Adjust the spacing around or within the tabs to improve layout and design flow.
2. Motion Effects:
   • Add interactive scrolling and mouse effects.
   • Apply entrance animations for dynamic user engagement.
3. Transform:
   • Rotate, flip, or scale your widget to create unique visual effects.
4. Background:
   • Customize the widget’s background with standard or hover effects, including transitions.
5. Border:
   • Select the border type (e.g., solid, dashed) and adjust its thickness and colour.
6. Mask:
   • Apply creative design masks to add stylish overlays to your widget.
7. Positioning:
   • Fine-tune the widget’s width and position to fit your layout seamlessly.
8. Responsive Settings:
   • Control the visibility of the widget on different devices (desktop, tablet, or mobile).
9. Attributes:
   • Set custom attributes for the widget’s element wrapper to add unique functionality.
10. Custom CSS:
    • Insert your own CSS code for complete customization and styling control.

If you’re using the free version of Elementor, some advanced features, such as custom attributes, scrolling effects, or custom CSS, won’t be available. These options require the Pro version of Elementor for access.

Step 6: Add elements within tabs (Elementor Pro)

With Elementor Pro, you can embed additional elements within the Tabs widget to create more dynamic content. Here’s an example of adding a Maps widget under a “Locations” tab:

1. Save the Map as a Global Widget

• Create the map you want to use by configuring the Maps widget as needed.
• Right-click on the pencil icon of the widget and select Save as a Global.
• Name your global widget and save it.

2. Copy the Global Widget Shortcode

• Navigate to your Template Library via your WordPress dashboard.
• Locate the global widget you just created and copy its shortcode.

3 Add a New Tab and Embed the Global Widget

• Return to the page with your Tabs widget in Elementor.
• Click on the + Add Item button to create a new tab.
• In the text editor of the newly created tab container, paste the shortcode for the global widget.

Step 7: Save and preview

Click UPDATE or PUBLISH to save your changes. Preview the tabbed content on the front end to ensure it looks and functions as intended.

By following these steps, you can create dynamic and visually appealing tabbed content with Elementor.

1. Elementor’s built-in Tabs widget

Start with Elementor’s own Tabs widget if it already covers your layout. It lets you divide related content into horizontal or vertical tabs without adding another plugin for basic tabs.

Useful features:

• Set a title and content for each tab.
• Choose a horizontal or vertical layout.
• Adjust tab colours, typography, borders, and spacing in Elementor.

Check the documentation for the widget available in your Elementor version. Nested content and some advanced controls depend on the widget and plan you use. Consider an add-on only when you need a specific feature that your existing setup does not provide.

2. ElementsKit Advanced Tab Widget

ElementsKit’s Advanced Tab widget lets you organize content into horizontal or vertical tabs and add Elementor widgets inside each tab.

Key Features:

• Choose a horizontal or vertical tab layout.
• Add text, images, and other widgets to each tab’s content.
• Customize tab titles, icons, spacing, and alignment.

3. Premium Addons

The Tabs widget in Premium Addons PRO lets you organize text or saved Elementor templates into tabbed sections.

Key Features:

• Use horizontal or vertical tabs.
• Add tab content with the text editor or an existing Elementor template.
• Switch tabs to an accordion layout on smaller screens.

4. Happy Addons Pro Advanced Tab

Happy Addons Pro’s Advanced Tab widget is an option when you want additional controls for tab labels, icons, and content styling. The Advanced Tab widget requires the paid Pro add-on.

Useful features:

• Edit each tab’s title, content, icon, and media.
• Adjust the position and alignment of titles, icons, and content.
• Style tab borders, colours, typography, and spacing.

This is worth considering if you already use Happy Addons Pro and want to keep those controls in the same plugin. Review the developer’s current changelog and check compatibility with your Elementor version before updating or installing it.

5. Essential Addons

Essential Addons’ Advanced Tabs widget lets you divide content into tabs, using your own content or saved Elementor templates.

Key Features:

• Customize each tab’s title and icon.
• Choose which tab opens by default.
• Style tab colours, backgrounds, and typography.

6. Elementor Addons

Elementor Addons by PowerPack is a comprehensive plugin designed to enhance the functionality and design of your Elementor Tabs widget.

Why Choose Elementor Addons by PowerPack?

This plugin allows you to seamlessly add text, images, and custom content to your tabs while offering six advanced tab styles. Its user-friendly design and lightweight interface ensure your site remains fast and responsive.

Key Features:

• Fast and Lightweight: Optimized for speed and performance.
• Pre-Built Templates: Quickly design and customize your tabs using ready-made templates.
• Custom Content Display: Add dynamic content, including images and text, to your tabs.
• Advanced Tab Styles: Choose from six unique styles for a polished look.

Pricing:

Starting at $44 per year, PowerPack Elementor Addons is slightly pricier than some alternatives. However, its extensive suite of widgets allows you to customize every aspect of your site, making it a versatile investment.

7. aThemes Addons Pro Advanced Tabs

The Advanced Tabs widget in aThemes Addons Pro lets you place text or saved Elementor templates inside horizontal or vertical tabs. It requires aThemes Addons Pro alongside Elementor.

Useful features:

• Choose text or an Elementor template as a tab’s content.
• Add titles, descriptions, and icons or images to tab labels.
• Customize horizontal and vertical layouts, spacing, and active-tab styling.

Consider it when you need template-based tab content or already use aThemes Addons Pro. Check the current plans and included features before purchasing.