Add Responsive Controls to Widgets

Widget controls are added within the _register_controls() method. To add responsive controls to Elementor widgets we need to use the add_responsive_control() method.

Responsive controls are just like regular controls, the only difference is that they let the user to set different values for different screen sizes (Desktop, Tablet, Mobile). With responsive controls you can set different default values for each device and the user can set different settings for each device. For example alignment the text the to left in desktop and tablet view and to the center in mobile view.

Adding New Responsive Control

New responsive controls are added using the add_responsive_control() method. Just like the regular controls, responsive control has to have a few key parameters:

  • Control Name (string) – Unique name used in the code.
  • Control Setting (array) – Extra control parameters.
    • Label (string) – The label displayed to the user in the panel.
    • Type (string) – The control type.
    • Show Label (bool) – Whether to show the label.
    • Label Block (bool) – Whether to display the label in a separate line.
    • Separator (string) – The position of the separator.

Adding a new responsive control is done as following:

$this->add_responsive_control(
	'control-name',
	[
		'label' => __( 'Spacing', 'plugin-name' ),
		'type' => \Elementor\Controls_Manager::SLIDER,
	]
);

Example Responsive Controls

We are going to see how responsive controls behave using three examples.

Responsive Slider

The regular slider control defined in Control_Slider adds a draggable range slider. To make it responsive and allow the user to set different values based on the device, we will use the following code:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style Section', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'space_between',
			[
				'label' => __( 'Spacing', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],
				'desktop_default' => [
					'size' => 30,
					'unit' => 'px',
				],
				'tablet_default' => [
					'size' => 20,
					'unit' => 'px',
				],
				'mobile_default' => [
					'size' => 10,
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .widget-image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

	}

}

Responsive Dimensions

Another handy control is the dimensions control that defined in Control_Dimensions. It adds input fields for top, right, bottom, left and the option to link them together. It’s is usually used for Margins, Paddings and Borders. With responsive dimensions we can set different values based on the device:

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style Section', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'title_padding',
			[
				'label' => __( 'Padding', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .widget-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

	}

}

Responsive Choose

Finally we are going to use Select/Choose control defined in Control_Choose to set custom alignment with responsive values allowing the user to set different alignment for different screen sizes.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => __( 'Style Section', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'content_align',
			[
				'label' => __( 'Alignment', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => __( 'Left', 'plugin-name' ),
						'icon' => 'fa fa-align-left',
					],
					'center' => [
						'title' => __( 'Center', 'plugin-name' ),
						'icon' => 'fa fa-align-center',
					],
					'right' => [
						'title' => __( 'Right', 'plugin-name' ),
						'icon' => 'fa fa-align-right',
					],
				],
				'devices' => [ 'desktop', 'tablet' ],
				'prefix_class' => 'content-align-%s',
			]
		);

		$this->end_controls_section();

	}

}

Get The Latest Updates

We have a lot more where that came from! Join 828,441 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.