Выбирать

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

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

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

• Добавляет на панель виджета в Elementor ряд кнопок значков по одной кнопке в каждом варианте.
• Показывает заголовок каждого варианта в качестве всплывающей подсказки при наведении кнопки редактором.
• Сохраняет ключ из выбранного варианта, например center, а не его название.
• Печатает эту клавишу, где бы вы ни разместили ее токен, например {{ align }}. Обычный подход - превратить его в класс CSS.

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

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

• WordPress с установленным и активным элементом Elementor.
• Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Callout Box” с двумя Выбрать поля: align (слева, в центре, справа) и icon_position (вверху или слева).

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

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

Новое поле Выбрать не пустое В комплект поставки входят три варианта выравнивания (слева, центр и справа) и Центр по умолчанию, поэтому для простого управления выравниванием нужно только изменить метку и имя.

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

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

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

Выберите значки, которые отображаются в Elementor #

Нажатие значка опции открывает Master Addons Icon Picker.Откройте Элементор Иконки вкладка и поиск, например align, чтобы найти значки выравнивания и положения.

Придерживайтесь этой вкладки. сборщик также перечисляет значки "Простая строка", "Значный шрифт", "Линейный" и "Материал", но в наших тестах эти кнопки отображались пустыми на панели "Элементор". отображались только значки "Элементор".

Ключи, заголовки и Unset #

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

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

Токен печатает ключ, поэтому наиболее чистая настройка - это класс модификатора Это поле для вызова HTML:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

Каждый {% if %} пропускает класс, когда значение пусто Для Позиции значка пустое значение также скрывает значок, поэтому в этом поле есть Unset on. Затем панель CSS стилизует каждый класс:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

Вы также можете сравнить значение напрямую, например {% if icon_position == 'left' %}. Сравните с ключом, а не с заголовком.

Оставьте выключенным селектор и адаптивный контроль #

• Селектор: для этого поля он пишет color: {{VALUE}};. В наших тестах селектор .callout-title произведено color:center;, которые браузеры игнорируют В отличие от некоторых других полей, в Choose нет строк CSS Selectors, где вы могли бы написать свой собственный свойство Используйте классы, как показано выше.
• Адаптивный контроль: добавляет значки устройств, чтобы редакторы могли выбрать другой вариант на планшете и мобильном телефоне, но токен печатает только выбор рабочего стола. Выбор каждого устройства никогда не достигает вашего шаблона.

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

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

Вот один и тот же призыв с разными вариантами выбора:

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

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

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

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

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

Завершая #

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