Tabs

The Tabs option is an advanced organizational control that creates a tabbed interface within your custom widget’s settings panel. It doesn’t output data itself; instead, it acts as a container to group and organize other controls (like Text, Image, or Select fields) into separate, categorized tabs, reducing clutter and improving usability.

Why would someone use it in a custom widget? #

Use this control when your widget has a large number of settings that can be logically grouped into categories. It’s essential for creating professional, clean, and intuitive settings panels for complex widgets – similar to how Elementor’s own “Content,” “Style,” and “Advanced” tabs work. It prevents the settings panel from becoming a long, overwhelming list.

Where This Option Appears #

• In Widget Builder: You add and configure this control in the Content tab. Its primary function is to define tab names and populate each tab with other controls.
• In the Elementor Editor: Once saved, it transforms a section of your widget’s settings into a tabbed interface. Users click tab labels (e.g., “General,” “Style,” “Advanced”) to switch between different groups of options.

Available Settings #

Here are the configurable settings for the Tabs control:

Basic Settings #

• Label: The overarching name for the tab group (e.g., “Settings”, “Configuration”).
• Name: The unique machine-readable ID (like settings_tabs) for the control.
• Description: Optional text below the tab group.
• Tabs: This is where you define each tab. You add a row for each tab, specifying:
  • Name: The internal key for the tab (e.g., general_tab).
  • Label: The user-facing name shown on the tab button (e.g., “General”).
• Tab Fields: After defining your tabs (e.g., Tab 1, Tab 2), you get a dedicated section for each tab (e.g., “Tab Field 1 – Tab 1”). Within each section, you define the Fields (Text, Color, Select, etc.) that will appear inside that specific tab.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility options for the main Tabs control label.
• Dynamic Support, Frontend Available: These typically don’t apply to the Tabs control itself, as it’s a container.
• Separator, Conditions, Control Classes, Selector: Standard advanced options for the control’s wrapper.

Generated Shortcode & Function #

The Tabs control named faq_settings generates a shortcode: {{faq_settings}}.

• What it represents: The Tabs shortcode does not output front-end content. It is purely an organizational structure in the editor.
• How it works: The controls you place inside each tab generate their own independent shortcodes (like {{category_name}}). You use those nested shortcodes in your widget’s HTML, CSS, or JS panels. The Tabs control itself is invisible on the front end.

How to Use It: A Practical Example #

Let’s enhance the “FAQ Widget” from the Repeater example by organizing its settings into tabs.

1. In Widget Builder:
   • Add a Tabs control. Set Label to FAQ Settings.
   • In the Tabs section, create two tabs:
     1. Name: content_tab, Label: Content
     2. Name: design_tab, Label: Design
   • Go to the “Tab Field 1 – Content” section and add a Repeater control for the FAQ items (as built previously).
   • Go to the “Tab Field 2 – Design” section and add controls like a Color control for heading_color and a Select control for layout_style.
2. In your HTML/CSS Panels, you would use the shortcodes from the controls inside the tabs:
   • The Repeater’s {{faq_list}} loop (from the Content tab).
   • The {{heading_color}} and {{layout_style}} values (from the Design tab).

In the Elementor editor, users will see a clean interface with “Content” and “Design” tabs, making the widget much easier to configure.

Common Use Cases #

• Organizing Complex Widgets: Separating “Content,” “Style,” and “Advanced” settings – just like native Elementor widgets.
• Feature-Specific Grouping: Grouping all settings for a “Header,” “Body,” and “Footer” section of a widget.
• Conditional Settings: Placing rarely used or advanced options in a separate “Advanced” tab to simplify the main interface.
• Multi-Part Widgets: Managing settings for different aspects of a composite widget, like a “Form” widget with “Fields,” “Notifications,” and “Styling” tabs.

Helpful Tips #

• Logical Grouping is Key: Plan your tabs around how users think about configuring the widget. Group related settings together (all color settings, all spacing settings, all content inputs).
• It’s for Editing, Not Display: Remember, this creates tabs in the widget’s settings panel, not tabs on the front-end of the website. To create front-end tabs, you would use a Repeater and render the content with JavaScript/CSS.
• Nest with Care: You can place powerful controls like Repeaters and Popover Toggles inside tabs. This allows for incredibly organized and sophisticated widget interfaces.
• Start Simple: For widgets with fewer than 8-10 settings, tabs might be overkill. Use them when the settings list becomes long enough to require scrolling in the editor panel.

The Tabs control is the final piece for building professional, scalable, and user-friendly widget interfaces. It ensures that as your widget’s capabilities grow, its settings remain organized and accessible, providing a premium experience that matches the quality of core Elementor widgets.

Frequently Asked Questions #