Select

The Select option is a control that adds a dropdown menu to your custom widget, allowing users to choose one predefined option from a list.

Why would someone use it in a custom widget? #

Use this control when you need to offer several exclusive choices, like picking a layout style, an icon set, a color scheme, or any scenario where the user must select one option from multiple, distinct possibilities.

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 standard dropdown select field within your widget’s settings panel. Users click it to see and choose from the list of options you defined.

Available Settings #

Here are the configurable settings for the Select control:

Basic Settings #

• Label: The name of the control shown above the dropdown (e.g., “Layout Style”, “Icon Position”).
• Name: The unique machine-readable ID (like layout_style) for the dynamic shortcode.
• Description: Optional guiding text below the field.
• Options: This is the core setting. Here you define the list of choices using a key-value format:
  • Key (Left side): The internal value passed to the shortcode (e.g., stacked, sidebar-left). Use lowercase, no spaces.
  • Value (Right side): The user-friendly label shown in the dropdown (e.g., Stacked, Sidebar on Left).
• Default Value: Sets which option is pre-selected from your list.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard visibility and layout options.
• Dynamic Support: When enabled, the selected value can be populated from a dynamic source.
• Frontend Available: When enabled, the selected key (e.g., stacked) is passed to your widget’s frontend JavaScript.
• Separator, Conditions, Control Classes: Standard advanced options for layout and conditional logic.

Generated Shortcode #

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

• What it represents: This shortcode outputs the internal Key of the selected option (e.g., left), not the user-friendly label.
• Where to use it:
  • HTML Panel: To add a CSS class or data attribute: <div class="icon icon--{{icon_position}}">
  • CSS Panel: For conditional styling: .icon--{{icon_position}} { /* specific styles */ }
  • JS Panel: To drive different interactive behaviors: if ( '{{icon_position}}' === 'top' ) { // apply top logic }

How to Use It: A Practical Example #

Let’s create a “Testimonial” widget where the user can choose the reviewer’s image alignment.

1. In Widget Builder’s Content tab, add a Select control.
2. Set the Label to Image Alignment.
3. In the Options field, define the list:
   • left | Left of Text
   • top | Above Text
   • right | Right of Text
4. Set the Default Value to left.
5. In your HTML panel, add the key as a class to the wrapper: <div class="testimonial testimonial--{{image_alignment}}">.
6. In your CSS panel, write rules for each state:

.testimonial--left { flex-direction: row; }
.testimonial--top { flex-direction: column; }
.testimonial--right { flex-direction: row-reverse; }

Now, in Elementor, users can select “Above Text” from the dropdown, and your widget will apply the testimonial--top class and corresponding CSS.

Common Use Cases #

• Style & Layout Pickers: Choose between design variants (e.g., “Style: Modern/Classic”).
• Functional Choices: Select a post sorting method, a grid column count, or an animation type.
• Data Source Selection: Choose which category of posts to display or which custom field to use.
• Icon or Image Selection: Pick an icon set from a predefined library (where each key corresponds to an icon class).

Helpful Tips #

• Use Descriptive Keys: Choose internal keys that are clear in your code (like layout-2col). The user only sees the friendly label.
• Start Simple: Begin with 3-5 options. A very long list can be overwhelming; consider a different control type if you need many choices.
• Combine with Conditions: Use the selected value to show or hide other controls. For example, if “Layout Style” is set to “Carousel,” you can conditionally show additional “Slides to Show” and “Autoplay” controls.
• Test the Output: Always verify that the shortcode outputs the exact key string you expect, as this is crucial for your CSS and JS logic to work.

The Select control is essential for creating versatile, multi-style widgets from a single codebase, giving users curated design choices.

Frequently Asked Questions #