Hidden

The Hidden field is the one control in the Master Addons Widget Builder that editors never see. It holds a fixed value you set once in the builder, say a version string or a layout key. The value travels with the widget and prints through a template token, but no input for it appears anywhere in the Elementor panel.

That makes it the right home for constants your template needs but users must not edit. Anything a curious client could change by accident stays out of reach. Your HTML, CSS, and JS panels can still read it like any other value.

What the Hidden field does #

• Stores a fixed string value defined in the builder, with no visible control in Elementor.
• Prints that value anywhere in the widget’s HTML, CSS, or JS panel through {{ your_field_name }}.
• Keeps configuration constants out of the editing UI, so they cannot be changed per page.
• Behaves like a text value in template logic, so conditionals such as {% if mode == 'embed' %} work.

If this is your first custom widget, read the Widget Builder overview before this page; it covers the editor layout the field docs assume.

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. Our example is a map embed widget where a Hidden field named map_style_key carries the fixed map style identifier the embed script expects.

How to add a Hidden field #

Drag the Hidden field from the fields panel into any section. The tab does not matter here, since nothing renders in the panel either way. Its options open on the left as soon as it lands.

Hidden field options explained #

The option list is short by design:

• Label: a name for your own reference inside the builder. It never shows in Elementor.
• Name: the unique identifier your templates refer to. Letters, numbers, and underscores only, for example map_style_key.
• Default: the value the field holds. Since there is no UI to change it later, this is effectively the value, full stop.

Connect the Hidden field with its token #

The Hidden field is a token field. Print it exactly like a text value, in any of the three panels:

<!-- HTML panel -->
<div class="ma-map" data-style="{{ map_style_key }}"></div>

// JS panel
var styleKey = "{{ map_style_key }}";
initMap(styleKey);

Template logic can also branch on it. If you ship two internal modes of the same widget, a Hidden field can pick the branch without exposing the choice:

{% if widget_mode == 'compact' %}
<div class="ma-map ma-map--compact"></div>
{% else %}
<div class="ma-map ma-map--full"></div>
{% endif %}

One quiet failure mode to know about: if you rename the field later, every token still pointing at the old name prints an empty string. Nothing errors, the widget just renders with a blank where the constant used to be. After a rename, search all three panels for the old name before you save.

Watch out: a Hidden field is invisible, not secret. Its value still renders into the page markup or script that visitors can view-source. Keep private API keys and credentials out of it; it is for configuration constants, not secrets.

Use the Hidden field in Elementor #

Add your custom widget to a page in Elementor. The panel shows every other control you defined, and nothing for the Hidden field. That absence is the feature. The value is already applied, and the rendered widget reflects it from the first drop.

Common use cases #

• Layout keys that internal CSS or JS branches on, fixed per widget.
• Version strings stamped into a data attribute for debugging shipped widgets.
• API mode flags such as an embed type the widget’s script reads.
• Fixed class name fragments printed into the markup so a widget family shares styling hooks.
• Template branch switches when you export one widget in two internal variants.

Tips for working with the Hidden field #

• Name it like the constant it is. map_style_key tells the next maintainer what the token means; hidden_1 does not.
• Set the Default before saving. There is no second chance from the Elementor side; an empty Default renders an empty string everywhere the token appears.
• Quote it in JS. The value is a string, so write var key = "{{ map_style_key }}"; with quotes.
• Prefer a visible field once users need control. The moment a value should differ per page, swap the Hidden field for a Text or Select field instead of asking users to edit widget internals.
• No secrets. The value ends up in public page output, so treat it as visible to anyone who reads the source.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Hidden field solves a quiet but real problem: values a widget depends on that no editor should touch. Define it once, print its token where needed, and the constant ships with the widget everywhere it is used. When a value should be editable after all, reach for a visible field like Number or Text instead. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.