Вкладки

The Поле вкладок организует элементы управления виджетом во вкладки панели, ту же структуру собственные виджеты Elementor используют для стилизации состояния Normal и Hover. Внутри главных аддонов Виджет Строитель, вы определяете вкладки, помещаете дочерние элементы управления в каждую, и панель Элементор отображает их как компактную полосу вкладок вместо одной длинной прокрутки полей.

Опоры управления вкладками Условия как и в любом поле, и его дети читаются через Механизм шаблонов Twig-синтаксиса с трехчастным жетоном, {{ tabs.tab_1.field }}, петля не требуется. обе направляющие охватывают детали и ограничения.

Вкладки - структурное поле. оно не имеет собственной ценности; значения принадлежат детям, и ваш шаблон считывает каждое из них по вложенному пути, который называет поле вкладок, вкладку и поле внутри него. Никаких петель, никаких трюков, только адреса.

Что делает поле Вкладки #

• Отображает полосу вкладок в панели виджета, построенной на механизме вкладок управления Elementor.
• Держит набор вкладок, каждый со своим именем, этикеткой и списком дочерних элементов управления.
• Сохраняет связанные государства вместеклассическим сочетанием являются версии Normal и Hover с одинаковыми настройками.
• Раскрывает дочерние значения через вложенные пути в вашем шаблоне: имя поля вкладок, затем вкладка, затем поле.
• Позволяет использовать одни и те же дочерние имена на вкладках, так что Normal и Hover могут четко отражать друг друга.

Если вы только начинаете работу со строителем, прочтите Обзор виджета-строителя перед этим.

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет-кнопка с полем Вкладки с именем states наличие вкладки "Нормальный" и вкладки "Наведение", каждая из которых имеет цветовое поле с именем bg.

Как добавить поле "Вкладки" #

В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Вкладки поле, указанное вместе с другими структурными областями, такими как Popover Toggle и Repeater.

Перетащите его в раздел под Стиль таб, где живет стиль состояния, затем определите вкладки и опустите дочерние элементы управления в каждую. Параметры поля открываются слева, как только оно приземляется.

Объяснены параметры поля вкладок #

• Этикетка: заголовок показан над полосой вкладок в Elementor.
• Имя: например, уникальный идентификатор для всей группы вкладок, букв, цифр и подчеркиваний states. Это первый сегмент пути шаблона каждого ребенка.
• Вкладки: список вкладок. на каждой вкладке имеется имя (используемое, например, в путях шаблонов normal), метка (показана на полоске, например “Normal”), и собственный набор дочерних элементов управления.
• Детский контроль: поля внутри каждой вкладки Здесь работают типы полей значений, и каждый сохраняет свои параметры и форму значений.
• Описание, отображение метки, разделителя и условий - это те же параметры отображения, что и везде.

Читайте значения вкладок по вложенным путям #

К детям поля "Вкладки" обращаются с помощью пути из трех частей: имя поля "Вкладки", имя вкладки, затем имя дочернего поля.

{{ tabsname.tabname.fieldname }}

Нет зацикливания над вкладками Каждое значение читается именно там, где вам это нужно. Для примера кнопки a states поле вкладок с вкладками "Нормальный" и "Наведение", каждая из которых содержит a bg цветовое поле, провода в панель CSS, как это

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

Именование ребенка одинаково в обеих вкладках является преднамеренным и поддерживается. Внутри конструктор выводит дубликаты ключей со счетчиком, но путь шаблона остается на вкладке, так что bg в Нормальном и bg в Hover остаются два различных, чисто адресованных значения. зеркальные имена - это шаблон, к которому следует стремиться: тот, кто читает шаблон, видит, что правила Normal и Hover различаются только на один сегмент пути.

Осторожно: плоский жетон {{ bg }} решает ни к чему, как и две части {{ normal.bg }}.Путь всегда начинается с собственного имени поля Вкладки Когда значение вкладки печатает пустое, сначала считайте сегменты Переименование вкладки прерывает пути таким же бесшумным способом; CSS продолжает компилировать, значение просто перестает поступать, поэтому остановитесь на именах вкладок, прежде чем писать правила.

Используйте элемент управления вкладками в Elementor #

Добавьте свой пользовательский виджет на страницу в Elementor (или перезагрузите редактор, если страница уже была открыта). полоса вкладок отображается на панели с метками вкладок, и щелчок по вкладке показывает ее дочерние элементы управления.

Редактор устанавливает фон Normal на первой вкладке, переключается на Hover, и задает второй цвет Наведение кнопки в предварительном просмотре показывает переход сразу, так как оба значения уже сидят в правилах CSS виджета.

Обычные случаи использования #

• Нормальный стиль и стиль Hover для кнопок, карт и ссылок - классическое сочетание.
• Активное и неактивное состояния для переключателей, фильтров и элементов навигации.
• До и после настройки в сравнении или раскрыть виджеты.
• Светлые и темные варианты, позволяя редакторам настраивать обе схемы из одного раздела.
• Странный и ровный стиль гребли в виджетах списка и таблицы.

Советы по работе с полем Вкладки #

• Адресуйте значения полным трехчастным путем. {{ states.hover.bg }} работает; {{ bg }} и {{ hover.bg }} не.
• Зеркальные дочерние имена на вкладках. Те же поля, те же имена, один отдельный сегмент пути; шаблон остается читаемым, а вкладки остаются сопоставимыми.
• Сохраняйте названия вкладок короткими и строчными. Они являются идентификаторами шаблонов, так что normal и hover бит “Tab 1” и “Tab 2”.
• Используйте вкладки для состояний, разделы для тем. Два варианта одних и тех же настроек принадлежат вкладкам; несвязанные настройки принадлежат отдельным разделам.
• Помните, что каждый ребенок сохраняет форму ценности своего типа. Ползунок внутри вкладки по-прежнему читается как {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Часто задаваемые вопросы #

Завершая #

Поле "Вкладки конструктора виджетов" превращает стиль состояния в аккуратный рисунок панели: определить normal и hover однажды повторите имена дочерних компаний, и ваш CSS прочитает {{ states.normal.bg }} против {{ states.hover.bg }} ничего больше не меняется. Для повторения контента, а не парных состояний Поле ретранслятора является структурным братом или сестрой, к которому нужно обратиться. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.