Поповер Тоггл

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

Поддержка Popover Toggle Условия как и каждый элемент управления, и каждое поле внутри поповера получает свой собственный комбинированный токен {{ toggle_field }}, визуализировано Механизм шаблонов Twig-синтаксиса. Оба руководства охватывают настройку и ограничения.

В отличие от простого поля значений, Popover Toggle является структурным. Он удерживает само состояние включения/выключения и несет дочерние поля, значения которых достигают вашего шаблона под составленными именами. Обе половины этой модели описаны ниже с помощью рабочего примера наложения.

Что делает поле Popover Toggle #

• Выводит переключатель в панели виджета с метками "вкл" и "выкл".
• Открывает всплывающее окно с детским управлением при включении определяется в списке полей popover поля.
• Принимает большинство типов полей ценности в детстве, например, цвет, текст, поля выбора и ползунка.
• Раскрывает состояние переключения для вашего шаблона как истинное значение во включенном состоянии и пустая строка в выключенном состоянии.
• Разоблачает каждое дочернее значение под составным именем, которое соединяет имена родителей и детей с подчеркиванием.

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

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

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

Как добавить поле Переключить Поповер #

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

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

Объяснены параметры поля Popover Toggle #

• Этикетка: текст рядом с переключателем в Elementor, например “Overlay”.
• Имя: например, уникальный идентификатор переключателя, букв, цифр и подчеркиваний overlay. На нем основаны имена детей, поэтому будьте краткими.
• Метка включена/Метка отключена: два состояния, показанные на переключателе, такие как “Yes” и “No”.
• Возвратное значение: значение, сохраненное во время включения тумблера, “yes” по умолчанию.Off хранит пустую строку.
• Поповер Филдс: дочерний элемент управляет внутри popover. допускается большинство типов полей значений; наш пример содержит одно цветовое поле с именем color.
• Описание, отображение метки, разделителя и условий охватывают обычные параметры отображения.

Прочтите переключатель и его дочерние элементы в своем шаблоне #

Два правила именования охватывают все, что производит это поле.

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

{% if overlay %} ... {% endif %}

Обратите внимание, что сохраненное значение является строкой Return Value, “yes” по умолчанию, а не логическим. Проверьте правдивость так, как это делает пример; сравнение поля с истинным никогда не совпадает.

Каждый ребенок доступен в виде имени родителя и имени ребенка, соединенных с подчеркиванием. The color ребенок overlay поповер становится overlay_color. Сложенный вместе слой наложения баннера выглядит на панели HTML так:

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

Переключить, никакие наложения div рендеры вообще. Переключить, div появляется с любым цветом, который выбрал редактор Добавить больше детей и каждый следует по одному и тому же шаблону: ребенок по имени opacity читал бы как {{ overlay_opacity }}.

Осторожно: здесь нет точечной записи. {{ overlay.color }} решается на ничто, потому что дети сплющены под подчеркивание-соединенные имена, не вложенные под родителем. если дочернее значение выходит пустым, проверьте составленный имя сначала.

Используйте Popover Toggle в Elementor #

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

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

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

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

Советы по работе с полем Popover Toggle #

• Завернуть зависимую разметку в {% if parent %}. Все дело в том, что дети имеют значение только тогда, когда он включен; шаблон должен это отражать.
• Составьте дочерние имена с подчеркиванием. Родитель overlay плюс ребенок color является {{ overlay_color }}, никогда {{ overlay.color }}.
• Сохраняйте имена родителей короткими. Каждый дочерний токен повторяет имя родителя, и {{ overlay_color }} читает лучше, чем {{ banner_image_overlay_settings_color }}.
• Используйте его для действительно необязательных кластеров. Настройки, которые всегда нужны виджету, принадлежат открытой панели; popover предназначен для иногда функций.
• Дайте детям разумные дефолты. В тот момент, когда переключатель включается, функция должна выглядеть намеренно, а не без стиля.

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

Завершая #

Поле Widget Builder Popover Toggle сохраняет честность панели виджета: повседневные элементы управления остаются видимыми, а опциональный кластер ждет за переключателем. проведите его {% if parent %} вокруг разметки и токенов, соединенных подчеркиванием для детей, функция переключается точно, то включается и выключается. Другие структурные шаблоны см. в разделе Поле ретранслятора, который обрабатывает списки так же, как это поле обрабатывает параметры. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.