Visual Choice

The Visual Choice option adds a sophisticated control that presents choices as a grid of visual cards, each containing a custom image, title, and optional description. It’s designed for making selections where a visual preview is more helpful than text or icons alone.

Why would someone use it in a custom widget? #

Use this control when you need users to select between distinct visual styles, layouts, or templates. It’s perfect for choosing card designs, header styles, color scheme presets, or any option where seeing a small thumbnail preview is more intuitive than reading a text label. It creates a premium, user-friendly selection experience.

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 responsive grid of visual cards. Users click a card to select it, and the selected state is clearly highlighted.

Available Settings #

Here are the configurable settings for the Visual Choice control:

Basic Settings #

• Label: The name of the control (e.g., “Card Style”, “Layout Preset”).
• Name: The unique machine-readable ID (like card_style) for the dynamic shortcode.
• Description: Optional text to guide the user.
• Options: This is the core feature. You add a row for each visual choice, defining three properties:
  • Key: The internal value passed to the shortcode (e.g., style-modern).
  • Title: The text label displayed on or below the image in the card.
  • Image: The thumbnail image that visually represents the choice.
• Columns: Defines the number of cards shown per row (from 1 to 6). This controls the layout density.
• Toggle: When enabled, this changes the control’s behavior. Users can click the selected card again to deselect it, returning the field to an empty state. This is useful for optional features.

Advanced Settings #

• Show Label, Label Block, Responsive Control: Standard options.
• Dynamic Support: Allows the selected value to be populated from a dynamic source.
• Frontend Available: When enabled, the selected key is passed to your widget’s JavaScript.
• Separator, Conditions, Control Classes, Selector: Standard advanced options.

Generated Shortcode #

When you add a Visual Choice control with the Name layout_preset, Widget Builder generates the shortcode: {{layout_preset}}.

• What it represents: This shortcode outputs the Key of the visually selected option (e.g., sidebar-left).
• Where to use it: Use it in your HTML, CSS, or JS panels, similar to a Select or Choose control.
  • HTML/CSS: To apply different classes or styles: <div class="layout-{{layout_preset}}">
  • JS: To trigger different logic: if ('{{layout_preset}}' === 'grid-view') { initGrid(); }

How to Use It: A Practical Example #

Let’s create a “Content Card” widget where the user can select from different pre-designed visual styles.

1. In Widget Builder’s Content tab, add a Visual Choice control.
2. Set the Label to Card Design.
3. In Options, create three choices:
   • Key: modern | Title: Modern | Image: [Screenshot of modern card]
   • Key: classic | Title: Classic | Image: [Screenshot of classic card]
   • Key: minimal | Title: Minimal | Image: [Screenshot of minimal card]
4. Set Columns to 3 to display them side-by-side.
5. In your CSS panel, define styles for each class:
   .card-design-modern { /* modern styles */ }
.card-design-classic { /* classic styles */ }
.card-design-minimal { /* minimal styles */ }
6. In your HTML panel, add the dynamic class:
   <div class="custom-card card-design-{{card_design}}"> <!-- Card content --> </div>

In the editor, users will see a row of three visual thumbnails and can simply click to choose the design they prefer.

Common Use Cases #

• Template/Layout Selection: Choosing between different layout structures for a section or widget.
• Style Preset Pickers: Selecting from predefined color schemes or design themes.
• Component Skins: Switching between different visual “skins” for a complex component.
• Demo Content Import: A sophisticated interface for choosing which pre-built design to import.

Helpful Tips #

• Use Consistent, Clear Images: The thumbnails should be small, clear, and consistently styled so the choice is obvious. Screenshots or well-designed icons work best.
• Choose the Right Column Count: For 2-4 options, 2-4 columns work well. For more options, consider fewer columns to prevent the interface from becoming too wide.
• Toggle for Optional Features: Use Toggle mode if the visual choice is for an optional feature (e.g., “Add a special badge?”), allowing users to turn it off completely.
• Distinguish from ‘Choose’: Use Visual Choice over the icon-based Choose control when custom images will communicate the option better than a generic icon.

The Visual Choice control elevates the user experience by making selection intuitive, visual, and engaging, perfect for widgets that offer multiple distinct design paths.