Elementor Element Panel Tabs

Elementor Editor uses tab navigation to display controls in the Element Panel.

Widget panel, for example, display controls in a Content Tab to allow the user to set the widget content, and a Style Tab to design the content. In addition, Elementor adds an Advanced Tab to all the widgets. The controls for the advanced tab can be found in the Widget_Common class.

Elementor Tabs

Settings panel, on the other hand, uses different tabs like the Settings Tab, the Style Tab, the Layout Tab and others – depending on the setting screen.

When developing new element panel, you can use any tab you need.

Built-in Tabs

Elementor has 6 pre-defined tabs set in Controls_Manager class. They are defined as constants and registered using in the init_tabs() method, each constant containing the tab name and tab label.

  • Content Tab – the tab name is content, its called using \Elementor\Controls_Manager::TAB_CONTENT
  • Style Tab – the tab name is style, its called using \Elementor\Controls_Manager::TAB_STYLE
  • Advanced Tab – the tab name is advanced, its called using \Elementor\Controls_Manager::TAB_ADVANCED
  • Responsive Tab – the tab name is responsive, its called using \Elementor\Controls_Manager::TAB_RESPONSIVE
  • Layout Tab – the tab name is layout, its called using \Elementor\Controls_Manager::TAB_LAYOUT
  • Settings Tab – the tab name is settings, its called using \Elementor\Controls_Manager::TAB_SETTINGS

Using Tabs

When we add a new control to the element panel we use the inherited add_control() method. Before adding new control, we need to create a new section using the start_controls_section() method. In this method we define the tab:

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

Add New Tabs

The official Elementor guidelines regarding Tabs is to use one of the default Elementor tabs. That said, to create custom tabs use the add_tab() method.

\Elementor\Controls_Manager::add_tab(
	'new-tab',
	__( 'New Tab', 'plugin-name' )
);

Note that you will have to add custom CSS to display an icon above your tab and load the CSS in the editor.

.elementor-panel .elementor-tab-control-new-tab a:before {
	font-family: FontAwesome;
	content: '\f430';
}

Get The Latest Updates

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