Heading

The Heading field prints a small bold title inside your custom widget’s option panel. Like the Divider field, it is a layout helper for the panel itself: it outputs nothing on the page, adds no shortcode to your code, and never appears on the frontend. Its one job is to name a group of controls, so the panel reads like a form with labeled sections instead of one long stack of inputs.

Inside the Master Addons Widget Builder, you drop the Heading above the controls it should introduce, type the title into its Label, and save. In the walkthrough below, a heading called “Color Styles” goes above a Color control in a widget that already has Text, Border, and Color fields.

What the Heading field does #

A Heading renders its Label as a bold mini-title in the Elementor editor panel, at the exact spot where you placed it between controls. Editors see “Color Styles” (or whatever you name it) sitting above the controls that belong to that group.

Two things the Heading does not do:

• It has no output. The field gets a Name like every Widget Builder field, but no token appears in the Documentation sidebar. There is no {{heading}} to place in your HTML, CSS, or JS.
• It never touches the page. The title lives only in the widget’s option panel. The preview and the live frontend stay exactly the same.

A heading that visitors read on the page is a different job: that is a Text field printed into your HTML. The Heading field only labels the panel. If you are new to building widgets, start with the Widget Builder overview first.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• A custom widget open in the Widget Builder editor with a few fields already in place. Our example holds Text, Border, and Color fields.

How to add a Heading field #

In the Widget Builder editor, look at the top of the fields panel on the left. The Heading field is the first one in the list, marked with an H icon, right next to Hidden.

Drag the Heading into your section and drop it right above the controls it should introduce. In our example it lands between the Border field and the Color field, so it will caption the color group. If it drops in the wrong spot, grab the handle on its left side and drag it into place.

Heading field options explained #

Select the Heading to open its settings. The Label is the only option that really matters here, because the Label is the text the heading displays.

• Label: the title shown in the panel, “Heading” by default. Change it to whatever the group needs; we typed “Color Styles”.
• Name: the unique identifier for the field. It must contain only letters, numbers, and underscores. The Heading generates no shortcode, so the name stays behind the scenes.
• Show Label and Label Block: the standard label toggles. Keep Show Label on, since the label is the entire point of this field.
• Separator: sets the position of the control separator (None, Before, After, Default).
• Conditions: show or hide the heading based on another control’s value, so a group title can disappear together with its conditional controls.

Rename the Label and the field card in the middle column updates right away. Click Save Settings when it reads the way you want.

See the heading in the Elementor editor #

Open a page that uses your custom widget, or reload the Elementor editor if it was already open, since a stale tab keeps the old panel layout. Select the widget and check its Content tab.

The panel now reads Text, Border Type, then a bold Color Styles title, then the Color control under it. The heading marks where the color group starts, and the preview on the right is untouched.

Common use cases #

• Naming style groups like “Color Styles”, “Typography”, or “Spacing” inside one section.
• Splitting content from design controls when both live under the same tab.
• Captioning repeated patterns, like “Primary Button” and “Secondary Button” groups in one widget.
• Guiding clients through longer panels where a plain stack of inputs would need explaining.

Tips for working with the Heading field #

• Pair it with a Divider. A Divider above the Heading draws a clean line where the previous group ends and the named group begins.
• Keep titles short. Two or three words read as a label; a sentence reads as clutter.
• Use it instead of a new section for small groups. Two or three related controls rarely deserve their own collapsible section; a heading above them does the same job with less weight.
• Reload the Elementor editor after saving. An open tab will not show the new title until you refresh.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Heading field turns a stack of controls into labeled groups. Drop it above the controls it should introduce, put the group name in its Label, save, and reload the Elementor editor to see the bold title in the panel. Use it with the Divider field for clean group breaks, and with fields like Text and Border to build panels that explain themselves. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.