Add Group Controls to Widgets

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

Group controls are just like regular controls, the only difference is that they are grouping several regular controls. This way, all the widgets that use the group control can use a single group control instead of using several regular controls. This way Elementor uses less code and unify the UX across the platform.

Elementor has several widely-used group controls that can be added to any widget. Each control built differently, some use popups to display them , other use tabs, and the rest are simple insert them as regular controls.

Adding New Group Control

New group controls are added using the add_group_control() method. Each group control has to have a few key parameters:

  • Group Control Type (string) – The unique name of the group control.
  • Group Control Setting (array) – Extra control parameters.
    • Name (string) – Unique name used in the code. (only chars, numbers and “_” are allowed)
    • Label (string) – The label displayed to the user in the panel.
    • Separator (string) – The position of the separator.

Adding a new group control is done as following:

$this->add_group_control(
	Group_Control_Class::get_type(),
	[
		'name' => 'control_name',
		'label' => __( 'Content', 'plugin-name' ),
	]
);

 

Example Group Controls

We will create several group controls to understand who it is done an see the result for each one of them.

Typography Control

When we add titles and custom content to Elementor widgets, we need to allow the user to design the text. In those cases we can use the typography control defined at the Group_Control_Typography class to set font size, font family, font weight, text transform, font style, line height and letter spacing.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

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

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);

		$this->end_controls_section();

	}

}

Border Control

The border control is a bit different than the typography control, it defined at the Group_Control_Border class to set border type, border width and border color.

<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function _register_controls() {

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

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'border',
				'selector' => '{{WRAPPER}} .wrapper',
			]
		);

		$this->end_controls_section();

	}

}