# Using Controls

Elementor Core Basic

Controls can be used inside Elementor widgets or Elementor panels. Controls used by end users to select their data. This data is saved in the database and later used to generate custom output based on the user's selection.

# Registering Controls

In your widget class, you can add controls inside the register_controls() method as follows:

class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls() {

		$this->start_controls_section();

		$this->add_control();

		$this->add_responsive_control();

		$this->add_group_control();

		$this->end_controls_section();

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Available Control Types

Elementor has three control types that can be added to widgets:

Elementor also has UI wrappers for controls that can be used to group and rearrange controls:

# Control Methods

Elementor controls have a single method that registers a settings field. UI wrappers for controls have two/four methods that wrap other controls.

Available methods:

  • Regular Control - add_control()
  • Responsive Control - add_responsive_control()
  • Group Control - add_group_control()
  • Control Section - start_controls_section() & end_controls_section()
  • Control Tabs - start_controls_tabs() & end_controls_tabs() & start_controls_tab() & end_controls_tab()
  • Control Popovers - start_popover() & end_popover()