Dynamic Responsiveness in Elementor: Accessing Control Values in Selectors
Problem: You want to create a dynamic Elementor addon where a control's value (like a color, font size, or margin) changes based on the selection made in another control. Specifically, you want to use the "Selectors" property to apply the dynamic value across multiple elements.
Rephrased: Imagine you want to have a single color picker control in your Elementor addon, but based on the chosen color, you want to change the background color of your heading, the text color of your button, and the border color of a specific image. This is where the "Selectors" property comes in, allowing you to apply changes across multiple elements, but how do you connect the color picker choice to these changes dynamically?
Scenario and Original Code:
Let's say we're creating an addon that allows users to control the appearance of a button using color selectors. The original code might look like this:
<?php
namespace Elementor;
class My_Button_Widget extends Widget_Base {
public function get_name() {
return 'my-button';
}
public function get_title() {
return __( 'My Button', 'my-plugin' );
}
protected function _register_controls() {
$this->start_controls_section(
'section_button_style',
[
'label' => __( 'Button Style', 'my-plugin' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'button_color',
[
'label' => __( 'Button Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'default' => '#007bff',
]
);
$this->add_control(
'button_background_color',
[
'label' => __( 'Button Background Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .button' => 'background-color: {{VALUE}};',
],
]
);
$this->add_control(
'button_text_color',
[
'label' => __( 'Button Text Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .button' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
}
Explanation:
This code defines a simple button widget with three color controls:
- button_color: The primary color picker.
- button_background_color: Controls the background color of the button element.
- button_text_color: Controls the text color of the button element.
The "Selectors" property is used to directly apply color values to the button element. However, this approach lacks responsiveness. If the user changes the button_color value, the other two colors will remain unchanged.
The Solution: Dynamic Control Values in Selectors
To achieve dynamic responsiveness, we'll need to use the {{VALUE}} placeholder within the "Selectors" property to reference the value of the control we want to use as the source.
<?php
namespace Elementor;
class My_Button_Widget extends Widget_Base {
// ... (rest of the code)
protected function _register_controls() {
$this->start_controls_section(
'section_button_style',
[
'label' => __( 'Button Style', 'my-plugin' ),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'button_color',
[
'label' => __( 'Button Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'default' => '#007bff',
]
);
$this->add_control(
'button_background_color',
[
'label' => __( 'Button Background Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .button' => 'background-color: {{button_color}};',
],
]
);
$this->add_control(
'button_text_color',
[
'label' => __( 'Button Text Color', 'my-plugin' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .button' => 'color: {{button_color}};',
],
]
);
$this->end_controls_section();
}
}
Explanation:
- Inside the "Selectors" properties of the button_background_color and button_text_color controls, we replace the {{VALUE}} placeholder with {{button_color}}. This establishes a direct link between the button_color control and the CSS styles applied by these controls.
- Now, when the user changes the value of the button_color control, the background and text color of the button will automatically update accordingly.
Additional Considerations:
- Control Types: You can use this technique with any Elementor control that has a value you want to link to (e.g., text, number, range, etc.).
- Advanced Selectors: The "Selectors" property offers powerful functionality for targeting specific elements within your widget's HTML structure. Learn about the various options and how to combine them for more complex styling.
Conclusion:
By utilizing dynamic control values within the "Selectors" property, you can easily create responsive Elementor addons where user choices in one control directly influence the styles applied to multiple elements. This enhances the flexibility and usability of your widgets, empowering users to customize their designs with ease.
