Вкладки

Поле "Вкладки" группирует элементы управления в полосу вкладок на панели "Элементор", как вкладки "Нормальный" и "Наведение" на собственных стилях кнопок "Элементора". Вы собираете его в главных надстройках Виджет Строитель: добавляйте вкладки, помещайте поля внутри каждой и читайте каждое значение в своем HTML или CSS с помощью трехчастного токена, например {{ button_states.hover.bg }}.

Вкладки - это поле Pro. бесплатный плагин включает ограниченный конструктор виджетов, и полный набор полей поставляется с Мастер Аддоны Про.

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

• Добавляет в раздел панели виджета ряд кликабельных вкладок Нажатие на вкладку показывает поля внутри нее.
• Каждая вкладка имеет имя, метку и свой список полей.
• Поле "Вкладки" само по себе не сохраняет значения. Значения принадлежат полям внутри вкладок.
• Шаблоны считывают эти значения с {{ tabs_name.tab_name.field_name }}. Две вкладки могут использовать одни и те же имена полей, что позволяет легко сравнивать правила "Нормально" и "Наведение".

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в конструкторе виджетов Пример в этом руководстве - виджет “Hover Button”: Текстовое поле для метки кнопки, плюс поле Tabs named button_states с вкладкой Нормальный и Ховер Каждая вкладка содержит два цветовых поля, bg и text.

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

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Нажмите « Стиль вкладка и добавить раздел, например “Button Style”.
3. Тип tabs в поле поиска слева.
4. Драг Вкладки в раздел. его настройки открываются в левой боковой панели, а предварительный просмотр раздела показывает полосу вкладок.

Названо новое поле "Вкладки" tabs и поставляется с двумя пустыми вкладками, tab_1 и tab_2. Переименовать их, прежде чем писать какие-либо токены, потому что имена становятся частью каждого пути.

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

• Этикетка называет поле внутри конструктора В Elementor редакторы видят заголовок раздела и метки вкладок, а не эту метку.
• Имя является первой частью каждого токена, так что button_states дает {{ button_states.normal.bg }}. Только буквы, цифры и подчеркивания.
• Описание это записка для вас внутри строителя.
• Вкладки является списком вкладок. в каждой строке есть a Имя (используется в токенах, таких как hover) и а Этикетка (показано на вкладке, например "Навести курсор"). Нажмите Добавить вкладку для другого ряда или красного креста, чтобы удалить его.

В списке вкладок на боковой панели отображается одна Поле Вкладки таблица за вкладку, озаглавленная меткой вкладки Вот куда идут поля.

• Имя является последней частью токена. вы можете повторно использовать то же имя в каждой вкладке, как bg и text здесь.
• Этикетка текст находится рядом с элементом управления в Elementor.
• Тип устанавливает элемент управления: текст, номер, текстовая область, WYSIWYG, код, скрытый, переключатель, выбор, цвет, шрифт, типографика, дата-время, URL-адрес, носитель, галерея, значки, слайдер, размеры или фон.
• Нажмите Добавить поле чтобы добавить строку на эту вкладку.

Общие настройки ниже (Show Label, Separator, Conditions и остальные) не меняют, как появляется поле Tabs в Elementor, поэтому вы можете оставить их в покое.

Прочтите значения вкладок в своем шаблоне #

Каждое значение внутри вкладки читается тремя именами, соединенными точками: полем "Вкладки", вкладкой и полем.

{{ tabs_name.tab_name.field_name }}

Вам не нужно вводить эти После сохранения на панели "Документация" рядом с редактором HTML перечислены все пути под меткой поля "Вкладки", а значок "Копия" копирует один.

Токены работают на вкладке CSS, а также на вкладке HTML. кнопка пример сохраняет свой базовый вид в одном правиле и считывает цвета вкладки в следующих двух:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

Первое правило - запасной вариант. пока редактор не выберет цвет, токен ничего не печатает, и линия не становится background: ;. Браузеры пропускают эту недопустимую строку, поэтому цвета из первого правила остаются на месте.

Работает только полный путь В тестировании, {{ bg }}, {{ hover.bg }} и {{ button_states.hover }} все ничего не напечатало, пока {{ button_states.hover.bg }} напечатал цвет Если значение выходит пустым, проверьте три части и сначала точное написание.

Нажмите Сохранить настройки когда закончишь.

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

Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта Выберите виджет и откройте Стиль вкладка В вашем разделе показана полоса вкладок с открытой вкладкой "Обычно".

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

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

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

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

• Сначала выберите имя поля "Вкладки" и имена вкладок. Переименование либо позже означает обновление каждого токена, который их использует.
• Повторное использование имен полей на вкладках. normal.bg и hover.bg их легче читать, чем два несвязанных имени.
• Избегайте изменения метки поля, когда виджет находится на живых страницах. Elementor сохраняет сохраненные значения под ключом, созданным из метки, поэтому новая метка может заставить существующие значения исчезнуть с этих страниц.
• Поместите стили по умолчанию в правило перед правилом токена, чтобы пустое значение никогда не нарушало дизайн.
• Дайте своим классам префикс (например ma-btn). CSS из вкладки CSS виджета применяется ко всей странице, поэтому общие имена, такие как .button может конфликтовать с другими стилями.
• Чтобы узнать об одной группе настроек включения/выключения вместо вкладок, см. Поповер Тоггл поле. Для списка редактор может добавлять строки, используйте Поле ретранслятора.

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

Завершая #

Назовите поле "Вкладки" и его вкладки, добавьте поля к каждой вкладке и прочитайте их с помощью {{ tabs_name.tab_name.field_name }} в вашем HTML или CSS. Сохраните запасное правило для пустых значений и остановитесь на именах до того, как виджет заработает. The Цветное поле doc охватывает контроль цвета, используемый в этом примере, и ценообразование показывает, что включает в себя каждый план.