Коммутатор

Поле "Переключатель" добавляет переключатель включения/выключения к пользовательскому виджету, который вы создаете с помощью главных аддонов Виджет Строитель. Это стандартный способ сделать часть виджета необязательной: значок, значок, компактный макет. Редакторы переключают переключатель в Elementor, и ваш шаблон реагирует.

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

Что делает поле Switcher #

• Добавляет на панель виджета переключатель включения/выключения Elementor.
• Сохраняет Возвратное значение (yes по умолчанию) когда включено, и пустое значение когда выключено.
• Работает с {% if %} в вашем шаблоне разметка появляется только тогда, когда переключатель включен.
• Может скрывать и показывать другие поля на панели с помощью условий, которые сохраняют панель короткой до тех пор, пока опция не будет использована.

Новое для строителя? Прочитать Обзор виджета-строителя сначала вернитесь с открытым виджетом.

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

• WordPress с установленным и активным элементом Elementor.
• Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Promo Card” с двумя коммутаторами: show_badge, в котором видны лента и поле "Текст значка", и compact_mode, что затягивает карту.

Как добавить поле коммутатора #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Добавить раздел на вкладке, где принадлежит опция. опция контента, например "Показать значок", соответствует Содержание вкладка.
3. Тип switch в поле поиска слева.
4. Драг Коммутатор в раздел Нажмите на карандаш на поле, чтобы открыть его настройки.

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

• Этикетка: текст рядом с переключателем в Elementor, например “Show Badge”.
• Имя: уникальный идентификатор поля и название его токена Используйте только буквы, цифры и подчеркивания, например show_badge.
• Описание: подсказка, показанная под переключателем в Elementor.
• Этикетка на и Метка отключена: короткие слова внутри переключателя. Elementor показывает Label On, пока переключатель включен, и Label Off, пока он выключен, поэтому “Compact” и “Normal” читают лучше, чем "Да" и "Нет" для параметра макета.
• Возвратное значение: значение, которое поле держит во время на. Оставьте на yes если только что-то в вашем коде не требует другой строки.
• Значение по умолчанию: раскрывающийся список с да и нет. Да означает, что недавно добавленный виджет начинается с включенного переключателя.

Две вещи, которые стоит знать об этой панели. текст справки под надписью "Включить и отключить метку" заменяется, а линия "Выключить метку" начинается с случайного дополнительного T. Оба ярлыка по-прежнему работают так, как вы ожидаете: "Включить метку" - это слово, отображаемое во время включения переключателя.

Сохраняйте возвращаемое значение и значение по умолчанию в нужном порядке #

Выпадающее значение по умолчанию всегда сохраняет yes для Да, что бы вы ни ввели в Return Value.That combancement misfires.In our tests, поле с Return Value enabled и значение по умолчанию Да вышло так:

• Переключение в Elementor показало себя выключенным.
• Сохраненное значение все еще оставалось yes, так {% if %} рассматривал поле как включенное и отображаемую наценку.
• Панель и страница снова согласились только после того, как редактор один раз щелкнул переключатель, установив значение enabled.

Таким образом, измените возвращаемое значение только тогда, когда вы также планируете начать поле выключено (значение по умолчанию установлено на "Нет"). Для всего остального оставьте возвращаемое значение на yes.

Используйте переключатель в своем шаблоне #

Коммутатор пуст, когда он выключен, а пустое значение в механизме шаблонов неверно, так что {% if %} это все, что вам нужно.HTML-карта промо использует один коммутатор для разметки и один для класса:

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

С выключенным значком все span исчез со страницы, а не просто скрыт. компактный класс переключает несколько правил на панели CSS:

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

Вы также можете сравнить значение, как в {% if show_badge == 'yes' %}, но сравните со значением возврата, а не с текстом метки на. {% if show_badge == 'Yes' %} никогда не совпадает. Равнина {% if show_badge %} форма позволяет избежать проблемы.

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

Скрывайте другие поля, пока переключатель не включится #

Это вторая половина того, для чего нужен Коммутатор На поле вы хотите спрятаться, открыть его настройки, прокрутить до Условия и нажмите Добавить условие. Для поля "Текст значка":

• Имя управления: show_badge, имя переключателя.
• Равенство: Равный.
• Контрольное значение: yes, Возвратное значение коммутатора.

Текст значка теперь появляется в Elementor только тогда, когда значок шоу включен. См Условия для остальных операторов.

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

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

Вот готовая карта на лицевой стороне со значком, с включенным компактным режимом и с выключенными обоими переключателями:

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

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

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

• Оставьте возвращаемое значение на уровне yes. Он поддерживает переключатель, значение по умолчанию и ваши условия в ногу.
• Назовите поле после того, что оно показывает, например show_badge или compact_mode. Название читается как вопрос {% if %}.
• Напишите "Включить метку" и "Выключить" для этой опции, а не только "да" и "нет", когда у двух штатов есть названия.
• Соедините это с условиями так что поля, необходимые опции, появляются только тогда, когда она включена.
• Более двух государств? Используйте Выбрать поле для выпадения или Выберите поле для кнопок значков.

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

Завершая #

Добавьте коммутатор, дайте ему четкое имя и метки, оставьте значение возврата по адресу yes, и заверните дополнительную часть вашей разметки {% if %}. Добавьте условие к полям, которые необходимы опции, и панель останется короткой, пока редактор не включит его. Для трех или более состояний см Выбрать и Выбирать поля и проверка ценообразование за то, что включает каждый план.