Выбрать

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

Выберите значения опций - это натуральное топливо Условия: другие элементы управления могут появиться только тогда, когда выбран конкретный параметр. Те же значения работают в Механизм шаблонов Twig-синтаксиса с проверками как {% if layout == "card" %}, так что один раскрывающийся может переключать и панель, и разметку.

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

Что делает поле Выбор #

• Оказывает стандартное раскрытие на панели Элементор используются те же собственные виджеты ядра управления выбором.
• Держит одно значение из фиксированного множества вы определяете как пары ключей и меток.
• Подаёт вашему шаблону выбранный ключ, готов к классам модификаторов или {% if %} блоки.
• Приводы Условия на других органах управления, так что выбор “Boxed” может выявить поле цвета границы, которое “Minimal” скрывает.
• Поддерживает отзывчивый флаг, позволяя пользователю выбрать другую опцию для каждого устройства.

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

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

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

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

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

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

Выберите параметры поля, объясненные #

• Этикетка: текст, показанный рядом с раскрывающимся в Elementor, например “Layout Style”.
• Имя: уникальный идентификатор поля, букв, цифр, и подчеркивает только. ваш шаблон относится к этому имени, например layout_style.
• Варианты: сами варианты выбора, каждый ключ плюс метка Ключ - это то, что получает ваш шаблон; метка - это то, что читает пользователь. сохраняйте ключи короткими и CSS-безопасными: boxed, minimal, outlined.
• По умолчанию: ключ, выбранный при первом падении виджета на странице. Установите его на свой самый красивый вариант.
• Отзывчивый: добавляет значок устройства, чтобы выбор мог различаться для каждой точки останова.
• Описание, Показать метку, Разделитель: стандартные настройки отображения, а также условия, расположенные ниже для отображения поля только тогда, когда другой элемент управления имеет определенное значение.

Подключите Select к своему шаблону #

Выбор печатает свое значение простым токеном. Это значение всегда ключ, никогда не этикетка. Два шаблона охватывают почти каждое использование.

Класс модификатора. Распечатайте ключ прямо в атрибут класса и позвольте вкладке CSS сделать все остальное:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Выбор “Boxed” рендеров layout--boxed, и правило типа .layout--boxed { border: 1px solid #e2e2e2; } берет на себя. три варианта становятся тремя короткими блоками CSS. HTML никогда не разветвляется.

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

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Обратите внимание на одну вещь: при сравнении необходимо использовать ключ. {% if layout_style == 'boxed' %} работает, пока {% if layout_style == 'Boxed Layout' %} молча никогда не совпадает, и вы не получаете предупреждения об этом. Если условное условие отказывается стрелять, проверьте написание ключа, прежде чем подозревать что-либо еще.

Используйте элемент управления "Выбор" в Elementor #

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

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

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

• Варианты раскладки например, коробчатые, минимальные и очерченные стили карт из одного виджета.
• Пресеты наведения и анимации где каждый ключ отображается в класс CSS со своим переходом.
• Выбор сортировки и порядка для виджетов в стиле списка - новейшие первые или алфавитные.
• Сборщики тегов заголовка это заменяет h2 на h3 через условный блок.
• Водители состояния которые показывают или скрывают целые группы других полей на основе выбранного ключа.

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

• Ключи для кода, метки для людей. Используйте слизни, как boxed в качестве ключей и сохраните дружелюбную формулировку этикетки.
• Сохраняйте ключи CSS-безопасными. Строчные буквы, цифры, дефисы или подчеркивания чисто печатаются в названиях классов.
• Сравните с ключом, а не с этикеткой. Это наиболее распространенная причина, по которой условное условие выбора никогда не совпадает.
• Предпочитать классы модификаторов условным когда меняется только стиль Шаблон остается одним блоком, и варианты живут в CSS.
• Используйте параметр "Выбрать" для управления условиями. Наряду с коммутатором это обычный элемент управления для раскрытия или сокрытия других полей.
• Установите разумный дефолт таким образом, виджет выглядит намеренно в момент его падения.

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

Завершая #

Поле "Выбор конструктора виджетов" превращает именованные варианты в выбор в один клик. Определите клавиши и метки, распечатайте клавишу в классе модификаторов или в классе модификаторов {% if %} блокируйте, и каждое решение макета переходит в панель Элементор. когда список вырастет длинным или одного выбора будет недостаточно, перейдите к Поле Select2. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.