Выбрать

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

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

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

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

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

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

• WordPress с установленным и активным элементом Elementor.
• Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Plan Card” с двумя полями Выбрать: layout_style (В коробке, Минимальный, Очерченный) на вкладке Стиль и badge (Без значка, Самый популярный, Новый) на вкладке Содержимое.

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

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

Выберите содержит один выбор из короткого списка. Если редакторам необходимо выполнить поиск в длинном списке или выбрать более одного варианта, используйте Выбрать2 вместо этого это поле Pro.

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

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

Новое поле "Выбор" включает три выборочные строки value-1 чтобы value-3 с метками Вариант 1 до Вариант 3 Замените их своими ключами и метками, прежде чем использовать виджет.

Держите ключи короткими, строчными и без пробелов, например boxed или most_popular. Они попадают в имена классов и сравнения. если вы оставите значение по умолчанию пустым, виджет начинается с первого варианта в списке.

В разделе "Общие настройки" вы найдете Показать метку, Блок этикеток, Сепаратор и Условия, которые работают так же, как и на других полях.

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

HTML-карта Plan использует оба поля Select двумя наиболее распространенными способами:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Классы модификаторов #

plan--{{ layout_style }} становится plan--boxed, plan--minimal или plan--outlined. Каждый вариант представляет собой короткое правило на панели CSS, и HTML остается прежним:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Разная наценка на вариант #

Если опции нужен другой HTML, сравните ключ с {% if %}. {% elseif %} и {% else %} работайте тоже. В примере, none не соответствует ни чеку, поэтому значок не печатается.

Всегда сравнивайте с ключом. {% if badge == 'popular' %} матчи, пока {% if badge == 'Most Popular' %} никогда не делает и не дает ошибки Если проверка никогда не срабатывает, сначала посмотрите на написание ключа.

Селектор и адаптивный контроль #

• Селектор всегда пишет color: {{VALUE}}; для этого поля, и нет поля для изменения свойства С ключами как boxed правило ничего не делает. помогает только тогда, когда ваши ключи цвета: в наших тестах ключи, такие как #7c3aed и #0ea5e9 с селектором .plan-price раскрасил цену. для чего-либо еще оставьте Selector пустым и используйте классы.
• Отзывчивый контроль позволяет редакторам выбирать другой вариант для каждого устройства. Эти выборы для каждого устройства достигают страницы только через правило выбора выше. Токен печатает выбор рабочего стола, поэтому оставьте адаптивный контроль выключенным, когда вы используете значение в своем шаблоне.

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

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

Вот та же карта плана с тремя комбинациями стиля макета и значка:

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

• Варианты карты, кнопки или раздела.
• Значки или ленты, такие как "Распродажа", "Новые" или "Самые популярные".
• Выбор тега заголовка, соотношения изображений или количества столбцов.
• Порядок сортировки или источник данных для виджета списка.

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

• Определитесь с ключами, прежде чем редакторы воспользуются виджетом. Переименовать метки можно позже, но изменение ключа ломает страницы, которые уже сохранили старый.
• Добавить опцию “none” когда элемент необязателен, как значок в примере.
• Установите значение по умолчанию это выглядит хорошо само по себе, поэтому вновь добавленный виджет готов к использованию.
• Всего два-три варианта с четкими значками? The Выберите поле показывает их в виде кнопок, а не раскрывающегося списка.
• Просто включен или выключен? Используйте Поле коммутатора.

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

Завершая #

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