Вкладки Elementor

В некоторых панелях Elementor для отображения элементов управления используется навигация по вкладкам. При расширении Elementor вы можете использовать любую нужную вам вкладку или создать новые.

Встроенные вкладки

В Elementor есть 6 предустановленных вкладок, которые используются в разных панелях:

Вкладки задаются в классе \Elementor\Controls_Manager . Они определяются как константы и регистрируются с помощью метода init_tabs() ; каждая константа содержит название и метку вкладки.

Примеры использования

Например, на панели виджетов отображаются элементы управления на вкладке «Содержимое», позволяющие пользователю настраивать содержимое виджета, и вкладка «Стиль» для оформления содержимого. Кроме того, Elementor добавляет вкладку «Дополнительно» ко всем виджетам.

С другой стороны, панель настроек страницы отображает элементы управления на вкладке «Настройки», вкладке «Стиль», вкладке «Макет» и других — в зависимости от настроек.

Использование Вкладок

Когда мы добавляем новый элемент управления на панель элементов, мы используем унаследованный метод add_control() . Перед добавлением нового элемента управления нам нужно создать новый раздел с помощью метода start_controls_section() . Мы используем этот метод для определения вкладки:

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

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

Добавить новые вкладки

Чтобы создать собственные вкладки, используйте метод add_tab():

function add_panel_tab() {
	\Elementor\Controls_Manager::add_tab(
		'new-tab',
		esc_html__( 'New Tab', 'textdomain' )
	);
}
add_action( 'elementor/init', 'add_panel_tab' );

function add_panel_tab() {
	\Elementor\Controls_Manager::add_tab(
		'new-tab',
		esc_html__( 'New Tab', 'textdomain' )
	);
}
add_action( 'elementor/init', 'add_panel_tab' );

Чтобы добавить собственный значок над названием вкладки, вам нужно будет добавить собственный CSS-код.

.elementor-panel .elementor-tab-control-new-tab a:before,
.elementor-panel .elementor-tab-control-new-tab span:before {
	font-family: eicons;
	content: '\e942';
}

.elementor-panel .elementor-tab-control-new-tab a:before,
.elementor-panel .elementor-tab-control-new-tab span:before {
	font-family: eicons;
	content: '\e942';
}

Лучшие практики

Официальные Рекомендации
В официальных рекомендациях Elementor настоятельно рекомендуется использовать одну из вкладок по умолчанию.

Тем не менее эта функция описана в документации, поскольку некоторые авторы дополнений используют обходные пути в коде, которые замедляют работу редактора, а в некоторых случаях приводят к его поломке.