--- title: Heading description: "The **Heading field** prints a small bold title inside your custom widget’s option panel. Like the [Divider field](https://master-addons.com/docs/widget-builder/divider/), it is a layout helper for the panel itself: it outputs nothing on the page, adds no shortcode to your code, and…" url: "https://master-addons.com/docs/widget-builder/heading/" updated: "2026-08-06" category: Widget Builder --- # Heading The **Heading field** prints a small bold title inside your custom widget’s option panel. Like the [Divider field](https://master-addons.com/docs/widget-builder/divider/), 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. Like every Widget Builder control, the Heading supports [Conditions](https://master-addons.com/docs/widget-builder/conditions/), so a section label can show only when its related options do. Template output across the builder runs through the [Twig-syntax template engine](https://master-addons.com/docs/widget-builder/twig-syntax/); both guides cover setup and limitations. Inside the Master Addons [Widget Builder](https://master-addons.com/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. ![Bold Color Styles heading above the Color control in a custom Elementor widget panel built with the Master Addons Widget Builder Heading field](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/26105856/04-heading-label-elementor-panel.webp) ## 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](https://master-addons.com/docs/widget-builder/text/) printed into your HTML. The Heading field only labels the panel. If you are new to building widgets, start with the [Widget Builder overview](https://master-addons.com/docs/widget-builder/widget-builder-settings/) 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](https://master-addons.com/docs/getting-started/installing-plugin/). - 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. ![Heading field at the top of the Master Addons Widget Builder fields panel with a widget holding Text, Border, and Color fields](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/26105840/01-heading-field-widget-builder.webp) 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 placed between the Border and Color fields in the Widget Builder Content section with its settings open on the left](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/26105845/02-heading-field-placed-settings.webp) ## 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. ![Heading field Label changed to Color Styles in the Widget Builder settings with the field card updating in the Content section](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/26105851/03-heading-label-color-styles.webp) 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. ![Custom Elementor widget panel showing the bold Color Styles group title above the Color control added by the Widget Builder Heading field](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/26105856/04-heading-label-elementor-panel.webp) ## 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](https://master-addons.com/docs/widget-builder/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 What is the Heading field in the Master Addons Widget Builder? The Heading field displays its Label as a bold title inside a custom widget's option panel. It names a group of controls in the Elementor editor and has no effect on the widget's output or the frontend of your site. Does the Heading field show anything on my website? No. The title appears only in the widget's option panel in the Elementor editor. To print a heading visitors can read, add a Text field and place its shortcode inside a heading tag in your widget's HTML. How do I change the text the heading displays? Select the Heading field in the Widget Builder and edit its Label. The Label is exactly what renders in the panel, so typing “Color Styles” shows a bold Color Styles title above the controls that follow it. Save and reload the Elementor editor. Does the Heading field create a shortcode? No. Input fields like Text or Color generate tokens for your code, but the Heading collects no value, so no token appears in the Documentation sidebar. Its Name exists only as an internal identifier. Should I use a Heading, a Divider, or a new section? Use a Heading to name a small group of controls, a Divider to draw a line between groups, and a new section when a set of fields deserves its own collapsible area. Headings and Dividers combine well: line first, title under it. ## 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](https://master-addons.com/docs/widget-builder/divider/) for clean group breaks, and with fields like [Text](https://master-addons.com/docs/widget-builder/text/) and [Border](https://master-addons.com/docs/widget-builder/border/) to build panels that explain themselves. Explore the rest of the [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/), and see the [pricing page](https://master-addons.com/pricing/) for what each plan includes.