Tabs

The Tabs field groups controls into a tab strip in the Elementor panel, like the Normal and Hover tabs on Elementor’s own button styles. You build it in the Master Addons Widget Builder: add the tabs, put fields inside each one, and read each value in your HTML or CSS with a three-part token such as {{ button_states.hover.bg }}.

Tabs is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with Master Addons Pro.

What the Tabs field does #

• It adds a row of clickable tabs to a section of your widget’s panel. Clicking a tab shows the fields inside it.
• Each tab has a name, a label and its own list of fields.
• The Tabs field stores no value itself. The values belong to the fields inside the tabs.
• Templates read those values with {{ tabs_name.tab_name.field_name }}. Two tabs can use the same field names, which keeps Normal and Hover rules easy to compare.

If you haven’t built a widget yet, read the Widget Builder overview first.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor and Master Addons Pro, both active. The installation guide covers setup.
• A widget open in the Widget Builder. The example in this guide is a “Hover Button” widget: a Text field for the button label, plus a Tabs field named button_states with a Normal and a Hover tab. Each tab holds two color fields, bg and text.

How to add a Tabs field #

1. Go to Master Addons > Widget Builder and open your widget.
2. Click the Style tab and add a section, for example “Button Style”.
3. Type tabs in the field search box on the left.
4. Drag Tabs into the section. Its settings open in the left sidebar, and the section preview shows the tab strip.

A new Tabs field is named tabs and comes with two empty tabs, tab_1 and tab_2. Rename them before you write any tokens, because the names become part of every path.

Tabs field options explained #

• Label names the field inside the builder. In Elementor, editors see the section title and the tab labels, not this label.
• Name is the first part of every token, so button_states gives {{ button_states.normal.bg }}. Letters, numbers and underscores only.
• Description is a note for you inside the builder.
• Tabs is the list of tabs. Each row has a Name (used in tokens, such as hover) and a Label (shown on the tab, such as Hover). Click Add Tab for another row, or the red cross to remove one.

Under the tabs list, the sidebar shows one Tab Field table per tab, titled with the tab’s label. This is where the fields go.

• Name is the last part of the token. You can reuse the same name in every tab, as bg and text are here.
• Label is the text next to the control in Elementor.
• Type sets the control: Text, Number, Textarea, WYSIWYG, Code, Hidden, Switcher, Choose, Color, Font, Typography, Date Time, URL, Media, Gallery, Icons, Slider, Dimensions or Background.
• Click Add Field to add a row to that tab.

The common settings further down (Show Label, Separator, Conditions and the rest) don’t change how a Tabs field appears in Elementor, so you can leave them alone.

Read tab values in your template #

Every value inside a tab is read with three names joined by dots: the Tabs field, the tab, then the field.

{{ tabs_name.tab_name.field_name }}

You don’t have to type these. After you save, the Documentation panel beside the HTML editor lists every path under the Tabs field’s label, and the copy icon copies one.

Tokens work in the CSS tab as well as the HTML tab. The example button keeps its base look in one rule and reads the tab colors in the next two:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

The first rule is a fallback. Until an editor picks a color, a token prints nothing and the line becomes background: ;. Browsers skip that invalid line, so the colors from the first rule stay in place.

Only the full path works. In testing, {{ bg }}, {{ hover.bg }} and {{ button_states.hover }} all printed nothing, while {{ button_states.hover.bg }} printed the color. If a value comes out empty, check for three parts and exact spelling first.

Click Save Settings when you’re done.

Use the Tabs control in Elementor #

Add the widget to a page, or reload the editor if the page was already open. Select the widget and open the Style tab. Your section shows the tab strip with the Normal tab open.

Set the colors on the Normal tab, then click Hover and set the second pair. Move the mouse over the button in the preview to check the hover colors.

Common use cases #

• Normal and Hover colors for buttons, cards and links.
• Active and inactive styles for filters, toggles and menu items.
• Light and dark versions of a component, edited from one section.
• Content split into groups, such as a Front and Back tab on a flip card, with text and media fields in each.

Tips for working with the Tabs field #

• Pick the Tabs field name and tab names first. Renaming either later means updating every token that uses them.
• Reuse field names across tabs. normal.bg and hover.bg are easier to read than two unrelated names.
• Avoid changing a field’s Label once the widget is on live pages. Elementor stores the saved values under a key built from the label, so a new label can make existing values disappear from those pages.
• Put default styles in a rule before the token rule, so an empty value never breaks the design.
• Give your classes a prefix (such as ma-btn). CSS from the widget’s CSS tab applies to the whole page, so generic names like .button can clash with other styles.
• For a single on/off group of settings instead of tabs, see the Popover Toggle field. For a list the editor can add rows to, use the Repeater field.

Frequently Asked Questions #

Wrapping up #

Name the Tabs field and its tabs, add fields to each tab, and read them with {{ tabs_name.tab_name.field_name }} in your HTML or CSS. Keep a fallback rule for empty values and settle on names before the widget goes live. The Color field doc covers the color control used in this example, and pricing shows what each plan includes.