# Group Control

Elementor Core Basic

Group Control is a set of regular controls and responsive controls with similar functionality, which are grouped together into a single control (e.g. typography control, text shadow control, box shadow control). To add group controls we use the add_group_control() method.

# Group Control Structure

Use the following code to add group controls:

$this->add_group_control(
	Group_Control_Class::get_type(),
	[
		'name' => 'control_name',
		'label' => esc_html__( 'Content', 'plugin-name' ),
	]
);
1
2
3
4
5
6
7

# Control Parameters

Each control has the following key parameters:

  • Group Control Type (string) – Unique name of a group control.
  • Group Control Setting (array) – Extra control parameters.
    • Name (string) – Unique ID used in the code. (Only chars, numbers and underscore are allowed)
    • Label (string) – Label displayed to the user in the panel.
    • Separator (string) – The position of the separator.
    • Frontend Available (bool) – Whether or not the data is available in the frontend using getSettings().
    • Conditions (array) – Control display conditions.

Note: Each control has its own set of Custom Settings in addition to the default settings mentioned above.

# Examples

# Typography Control

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













 
 
 
 
 
 
 







class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( '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();

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Border Control

Border control is a bit different from typography control. It is defined in the Group_Control_Border class to set border type, border width and border color:













 
 
 
 
 
 
 







class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( '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();

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25