How to Use the Smart Tabs Widget in Elementor

What is the Smart Tabs widget?

The Smart Tabs widget allows you to organize content into multiple, distinct sections within a single container, accessible by clicking on corresponding titles (tabs). This is a powerful way to present a large amount of information concisely, saving vertical space and improving user experience by allowing visitors to easily navigate to the specific content they are interested in.

Common use case

A common use case for the Smart Tabs widget is to display Product/Service Features on a dedicated page. By utilizing tabs, you can clearly present core features of a product or service, dedicating a separate, detailed tab to each major function or benefit. This prevents overwhelming the user with text and provides an organized, interactive way to explore everything the offering provides.

Additional use cases

• FAQ (Frequently Asked Questions) Section: Use the widget to group related questions into different categories (e.g., “General,” “Technical,” “Billing”). This helps keep the page clean and allows users to quickly find answers by selecting the relevant category tab.
• Pricing Plans: Showcase different subscription or pricing tiers with specific details in each tab.
• Step-by-Step Instructions: Break down a complex process into sequential steps, using a tab for each step.

Requirements

To use the Smart Tabs widget, you need to have the following:

• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our installation guide.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well. The Elementor Page Builder runs on WordPress.

Add the widget

To add the Smart Tabs widget to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor for the page you want to edit.
2. In the widgets panel, search for the Smart Tabs widget.
3. Drag the widget to your desired location on the page.

Video

See a video demonstrating the widget in action.

Settings for the Smart Tabs widget

The Smart Tabs widget offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.

Content tab

The Content tab is where you structure the tabs and their respective content.

• Tabs
  1. Layout: Choose the layout for your tabs (e.g., Card).
  2. Tabs Items: Use this repeater field to add, duplicate, or delete individual tabs. Each item contains the content for one tab.
  3. Tab Position: Set the position of the tab titles (e.g., Top, Bottom, Left, Right).
  4. Justify: Align the tab titles (e.g., Left, Center, Right, Full Width).
  5. Title Align: Set the text alignment for the tab titles.

• Content Tab
  1. Heading Tag: Select the HTML tag for the content heading (e.g., H3).
  2. Image Position: Set the position of the image within the tab content (e.g., Left, Right, Top, Bottom).
  3. Alignment: Set the horizontal alignment for the content.
  4. Vertical Alignment: Set the vertical alignment for the content.

Style tab

The Style tab provides options to fine-tune the appearance of the main container, the tab titles, the icons, and the content box.

• Container
  1. Gap Between Tabs: Adjust the spacing between individual tab titles.
  2. Distance from content: Control the vertical spacing between the tab titles and the main content area.

• Title
  1. Typography: Customize the font, size, and other typography settings for the tab titles.
  2. Text Shadow: Add a shadow effect to the tab titles.
  3. Text Stroke: Add a stroke effect to the tab titles.
  4. Background Color: Set the background color for the tab titles for Normal, Hover, and Active states.
  5. Text Color: Set the color of the tab title text for Normal, Hover, and Active states.
  6. Border Type: Add a border to the tab titles.
  7. Border Radius: Adjust the corner radius of the tab titles.
  8. Padding: Set the padding inside the tab titles.

• Icon
  1. Icon Size: Adjust the size of the icon within the tab title.
  2. Icon Spacing: Control the space between the icon and the tab title text.
  3. Icon Position: Set the position of the icon relative to the title text.
  4. Color: Set the color of the icon for Normal, Hover, and Active states.

• Content Box
  1. Padding: Set the inner spacing for the content box.
  2. Margin: Set the outer spacing for the content box.
  3. Background Color: Set the background color for the content box.
  4. Border Type: Add a border to the content box.
  5. Border Radius: Adjust the corner radius of the content box.
  6. Box Shadow: Add a shadow effect to the content box.

• Content
  1. Padding: Set the inner spacing for the main content area.
  2. Margin: Set the outer spacing for the main content area.
  3. Background Color: Set the background color for the main content area.
  4. Border Type: Add a border to the main content area.
  5. Border Radius: Adjust the corner radius of the main content area.

• Image
  1. Image Width: Control the width of the image within the tab content.
  2. Padding: Set the inner spacing around the image.
  3. Margin: Set the outer spacing around the image.
  4. Background Color: Set the background color for the image container.
  5. Border Type: Add a border to the image.
  6. Border Radius: Adjust the corner radius of the image.
  7. Box Shadow: Add a shadow effect to the image.
  8. Spacing: Adjust the spacing after the image.

• Heading
  1. Color: Set the color of the heading text.
  2. Typography: Customize the typography for the heading.
  3. Text Shadow: Add a shadow effect to the heading text.
  4. Spacing: Adjust the spacing after the heading.

• Description
  1. Color: Set the color of the description text.
  2. Typography: Customize the typography for the description.
  3. Text Shadow: Add a shadow effect to the description text.
  4. Spacing: Adjust the spacing after the description.

• Button
  1. Text Color: Set the color of the button text for Normal and Hover states.
  2. Background Color: Set the background color of the button for Normal and Hover states.
  3. Typography: Customize the font settings for the button text.
  4. Border Type: Add a border to the button.
  5. Border Radius: Adjust the corner radius of the button.
  6. Padding: Set the inner spacing around the button content.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling.

Frequently Asked Questions (FAQ)

Can I change the alignment of the tabs themselves?

Yes. In the Content tab, under the Tabs section, you can use the Justify control to align the tab titles (e.g., Left, Center, Right, Full Width).

---

Where can I control the spacing between the tabs and the content below them?

You can find the Distance from content control in the Style tab, under the Container section.

---

How do I change the color of a tab title when it is active?

In the Style tab, under the Title section, you can switch to the Active state and then set the desired Text Color and Background Color.