Switcher

The Switcher option is a visual toggle control that adds an on/off switch to your custom widget’s settings. It provides a clear, user-friendly way to enable or disable a feature or choose between two simple states.

Why would someone use it in a custom widget? #

Use a Switcher control whenever you need a simple binary choice, like showing/hiding an element, enabling an animation, or toggling a style mode. It’s more intuitive than a checkbox and clearly communicates an active/inactive state.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as a horizontal slider switch with customizable labels (like “Yes”/”No” or “Show”/”Hide”) right in your widget’s settings panel.

Available Settings #

Here are the configurable settings for the Switcher control:

Basic Settings #

• Label: The name of the control shown above the switch (e.g., “Show Icon”, “Enable Parallax”).
• Name: The unique machine-readable ID (like show_icon) for the dynamic shortcode.
• Description: Optional helper text below the control.
• Label On: The text displayed next to the switch when it is in the ON (checked) position (e.g., “Yes”, “Show”, “Enabled”).
• Label Off: The text displayed when it is in the OFF (unchecked) position (e.g., “No”, “Hide”, “Disabled”).
• Return Value: The actual value that the shortcode {{name}} will output when the switch is ON. You can customize this (default is yes).
• Default Value: Sets the starting state of the switch (On or Off).

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility and layout options.
• Dynamic Support: When enabled, the switch’s state can be controlled by a dynamic source (though this is a less common use case).
• Frontend Available: When enabled, the switch’s value (yes/no or your custom return value) is passed to your widget’s frontend JavaScript.
• Separator, Conditions, Control Classes: Standard advanced options for layout and logic.

Generated Shortcode #

When you add a Switcher control with the Name show_title, Widget Builder generates the shortcode: {{show_title}}.

• What it represents: This shortcode outputs the Return Value (e.g., yes) if the switch is ON. If the switch is OFF, it outputs an empty string or a falsey value.
• Where to use it:
  • HTML Panel: Perfect in conjunction with a Condition attribute to include/exclude markup: <h3 class="title" data-show="{{show_title}}">My Title</h3>.
  • CSS Panel: To apply conditional styles: .title { display: {{show_title}}; } (This would set display: yes; which is invalid. Better practice is shown below).
  • JS Panel: To control logic: if ( '{{show_title}}' === 'yes' ) { // show the title }.

How to Use It: A Practical Example #

Let’s create a “Card” widget where the user can choose to show or hide the card’s footer.

1. In Widget Builder’s Content tab, add a Switcher control.
2. Set the Label to Show Footer.
3. Set Label On to Show and Label Off to Hide. Keep the Return Value as yes.
4. Set the Default Value to Yes (On).
5. In your HTML panel, wrap the footer HTML in a conditional check:
   
   <div class=”card-body”>Main Content</div> {{show_footer}} <div class=”card-footer”>Footer Content</div> {{/show_footer}}
   
   (Note: This pseudo-code illustrates the concept. Actual conditional rendering might use different syntax specific to Widget Builder or be handled via CSS/JS.)
6. A more common method is using the value in CSS: .card-footer { display: {{show_footer}} ? block : none; } (This requires JS logic. Often, you’d use a CSS class controlled by the shortcode).

Practical CSS/JS Method: Add a CSS class to the footer element that is controlled by the switcher’s value.

• HTML: <div class="card-footer {{show_footer}}">Footer</div> (When ON, class becomes card-footer yes).
• CSS: .card-footer.yes { display: block; } .card-footer:not(.yes) { display: none; }

Common Use Cases #

• Visibility Toggles: Show or hide elements like titles, icons, dividers, or entire sections.
• Feature Activation: Enable/disable animations, hover effects, sticky behavior, or custom scripts.
• Style Mode Selectors: Switch between simple style alternatives (e.g., “Simple”/”Detailed” view) often paired with Conditions to show different setting sets.
• Boolean Logic Driver: The primary control for Conditions that show/hide other, more complex controls.

Helpful Tips #

• Use Clear, Action-Oriented Labels: A label like “Show Divider” with “On”/”Off” states is clearer than a vague “Divider State”.
• Customize Return Values for Clarity: For a “Style Mode” switcher, you could set Return Value to detailed instead of yes. This makes your code more readable: if ( '{{style_mode}}' === 'detailed' ).
• It’s the Perfect Conditional Trigger: The Switcher is the most intuitive control to use as the condition for showing/hiding groups of other options. Use the Conditions feature liberally.
• Test the Output: Remember, the shortcode outputs the text string of your Return Value. Ensure your HTML, CSS, or JS logic is checking for that exact string.

The Switcher is a fundamental control for creating interactive, user-friendly widget interfaces. It simplifies complex choices into a single, clear action.