Hidden

The Hidden option is a control that adds a non-visual data storage field to your custom widget. It does not create an input field that users can see or interact with in the Elementor editor; instead, it holds a value that can be used internally by your widget’s logic.

Why would someone use it in a custom widget? #

You use a Hidden control to store a fixed or calculated value that influences how your widget works, without cluttering the editor interface. It’s perfect for setting internal flags, version numbers, theme identifiers, or any data parameter that should be set once (by you, the widget creator) and not changed by the end-user.

Where This Option Appears #

• In Widget Builder: You add and configure this control in the Content tab. It appears in your control list like any other option.
• In the Elementor Editor: This is the key difference – a Hidden control does not appear at all in the live widget settings panel. It operates silently in the background.

Available Settings #

Here are the configurable settings for the Hidden control:

Basic Settings #

• Name: The most important setting. This is the unique machine-readable ID (like widget_version or layout_mode) used to create the dynamic shortcode. Since there is no visual label for the user, a clear, descriptive name is crucial for your own code management.
• Default Value: This is where you set the actual data the control will store (e.g., v2.0, dark, enabled). This value is fixed and cannot be changed by the user in the editor, only by you in the Widget Builder.

Advanced Settings #

• Conditions: While the control itself is hidden, you can still set conditions for it or more importantly, use its value to control the visibility of other, visible controls. This allows you to create complex logic based on the hidden value.
• Control Classes: Allows you to add custom CSS classes to the control’s wrapper (which exists in the DOM but is not displayed). This is for advanced developers who may need to target it with specific logic.

Notable Absences: Unlike visual controls, the Hidden option typically lacks settings like Label, Description, Placeholder, Responsive Control, and Dynamic Support. Its purpose is to be a simple, static value holder.

Generated Shortcode #

When you add a Hidden control with the Name data_mode, Widget Builder generates the dynamic shortcode: {{data_mode}}.

• What it represents: This shortcode is a direct placeholder for the Default Value you set.
• Where to use it: You can use this shortcode anywhere in your HTML, CSS, or JS panels, just like any other. For example:
  • HTML Panel: As a data attribute: <div data-mode="{{data_mode}}">
  • CSS Panel: In a conditional rule: [data-mode="dark"] { background: #222; }
  • JS Panel: To branch logic: if ( '{{data_mode}}' === 'advanced' ) { // run complex code }

How to Use It: A Practical Example #

Let’s create a “Smart Container” widget that has two distinct layout modes.

1. In Widget Builder’s Content tab, add a Hidden control.
2. Set the Name to layout_engine.
3. Set the Default Value to flexbox.
4. In your main CSS panel, write conditional styles:
   
   /* Base styles */ .my-container { display: {{layout_engine}}; }

5. (Alternative) You could also use it in a Condition for a separate “Spacing” control: Only show the “Custom Gap” number control IF {{layout_engine}} equals flexbox.

The user will never see a setting for “layout_engine,” but your widget’s code will use the value flexbox to apply the correct CSS.

Common Use Cases #

• Widget Versioning: Store version: "1.2" to allow your CSS/JS to adapt if you release updates.
• Theme or Mode Flags: Set a value like theme: "dark" to automatically apply a specific set of styles without user input.
• Behavior Triggers: Use a value like ajax_enabled: "true" to let your JavaScript know whether to use AJAX calls.
• Template Selection: Power a conditional block in your HTML that changes the structure based on a hidden template value.
• Integration Keys: Store a low-level identifier for integrating with other systems (use cautiously).

Helpful Tips #

• Plan Its Use Upfront: Since users can’t edit it, think of the Hidden control as a configuration parameter you set during widget creation. Choose a clear Name and Default Value that will make sense to you later.
• Combine with Conditions for Power: Its greatest utility is often in driving the Conditions for other controls. You can make entire sections of your widget’s settings panel appear or disappear based on a hidden value.
• It’s Not for User Data: Remember, this is not a secure way to receive user input. It’s a tool for widget developers to manage internal state.
• Test Thoroughly: Because it’s invisible in the editor, double-check that the shortcode {{your_hidden_name}} is working correctly in your HTML, CSS, and JS by testing the widget’s front-end output.

The Hidden control is a powerful tool for developers to build smarter, more configurable widgets with a clean user interface. It’s the behind-the-scenes conductor for your widget’s logic.