Add the ability to include responsive controls as fields of a Repeater control

[dalbard]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Let me preface this by saying that I'm pretty confident that this is not an existing feature, but if it is, I would love to be proven wrong and educated.

I'm currently developing a custom widget for Elementor, which is essentially a clients / logo showcase block. I have already applied CSS styles that make the logos look good, but sometimes the logos vary vastly in heights and widths, so the design looks extra crisp if I can change the widths of some specific logos. Therefore, I need to allow users to set different widths for logos depending on the device/breakpoints (Desktop, Tablet, Mobile). The challenge is that these logos are part of a Repeater control, which means each logo is a separate entry in the Repeater. While Elementor offers responsive controls for individual elements, at least to the best of my knowledge, it doesn't support responsive controls within a Repeater context. This limitation makes it tedious for me to set different logo widths for different devices within the Repeater, thus reducing the flexibility and responsiveness of my widget's design.

Describe the solution you'd like.

Ideally, I would like Elementor to support responsive controls within repeater fields. For my example specifically, I would like each repeater object (or logo in this case) to have a slider control, where I can set the width of a specific logo, and where the value can be different for different breakpoints. This enhancement would greatly improve the flexibility and usability of the widget, enabling a more responsive design whilst cutting out the need to implement complex workarounds.

Describe alternatives you've considered.

Separate Controls for Each Breakpoint
I considered adding separate Slider/Numeric fields for each breakpoint (Desktop, Tablet, Mobile) within the repeater. While this approach achieves my desired outcome, it clutters the UI within the editor with multiple controls for each logo, making it less user-friendly.

Additional context

Besides the Elementor Developers Documentation, I tried to query ChatGPT to get this functionality working, and when I set up my control like this:

$this->add_control( 'logos', [ 'label' => __( 'Add Logos', 'my-logo-showcase-widget' ), 'type' => \Elementor\Controls_Manager::REPEATER, 'fields' => [ [ 'name' => 'logo', 'label' => __( 'Logo', 'my-logo-showcase-widget' ), 'type' => \Elementor\Controls_Manager::MEDIA, 'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src(), ], ], [ 'name' => 'logo_cw_toggle', 'label' => esc_html__( 'Resize Logo?', 'my-logo-showcase-widget' ), 'type' => \Elementor\Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'my-logo-showcase-widget' ), 'label_off' => esc_html__( 'No', 'my-logo-showcase-widget' ), 'return_value' => 'yes', 'default' => 'no', ], [ 'name' => 'logo_cw', 'label' => esc_html__( 'Logo Width (%)', 'my-logo-showcase-widget' ), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => [ '%' ], 'range' => [ '%' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'unit' => '%', 'size' => 75, ], 'condition' => [ 'logo_cw_toggle' => 'yes' ], 'responsive' => true, ], ], 'title_field' => 'Logo #{{{_id}}}', ] );

The "responsive" UI of the slider appeared:

However, the issue was that the same value was shared across the different breakpoints. No matter how hard I tried to set different values for different breakpoints, the values were linked.

The Elementor Developer Documentation articles I've used are listed below.

https://developers.elementor.com/docs/editor-controls/responsive-control/
https://developers.elementor.com/docs/editor-controls/control-repeater/
https://developers.elementor.com/docs/editor-controls/control-slider/

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.