The Выберите поле рендерит ряд кнопок значков на панели вашего виджета, тот же элемент управления Elementor использует для выравнивания текста: три или четыре кнопки, по одной активной за раз Внутри главных надстроек Виджет Строитель, это правильный выбор, когда вариантов немного, и значок говорит больше, чем слово. Выравнивание является очевидным примером, но переключатели положения и направления подходят к одной и той же форме.
Ключи опций элемента "Выбрать" работают напрямую Условия, поэтому другие поля могут появляться в зависимости от выбранного параметра и с помощью Механизм шаблонов Twig-синтаксиса, где проверка нравится {% if align == "center" %} переключает вашу разметку Оба руководства охватывают детали.
Как и в случае с выбором, значение, передаваемое вашему шаблону, является ключом опции, а не ее заголовком. Что добавляет выбор сверху: значок для каждой опции, дополнительное поведение отключения и простой путь к механизму селекторов Elementor для чистых вариантов CSS, таких как выравнивание.
Что делает поле "Выбрать" #
- Отдает ряд кнопок значков на панели Элементор по одному на каждый определенный вами параметр.
- Держит один ключ из определенного набора одновременно активна ровно одна кнопка.
- Сочетает каждый вариант с значком, например
eicon-text-align-leftитак, выбор читается с первого взгляда. - Опционально переключается: при включенной опции Переключить нажатие активной кнопки снова отменяет ее выбор, и значение становится пустым.
- Поддерживает отзывчивый флаг и может записывать CSS непосредственно через селектор, описанный ниже.
Если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - это виджет-отзыв с выбором “Quote Alignment”: слева, в центре, справа.
Как добавить поле Выбрать #
В редакторе Widget Builder найдите Выбирать поле на панели слева, сгруппированное с другими полями выбора.
Перетащите его в раздел под Стиль вкладка; настройки типа выравнивания живут там естественным образом. как только он приземлится, параметры поля откроются слева.
Выберите параметры поля объяснены #
- Этикетка: текст, показанный рядом с кнопками в Elementor, например “Quote Alignment”.
- Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний только, например
quote_align. - Варианты: каждый вариант - это ключ плюс заголовок и значок Заголовок становится всплывающей подсказкой кнопки и значок - класс eicon, например
eicon-text-align-leftза ключleft. - Переключить: при включении нажатие активной кнопки снова отменяет ее выбор и значение поля становится пустым. оставьте это, если виджету всегда нужно значение.
- По умолчанию: ключ активен, когда виджет впервые падает на страницу.
- Отзывчивый: добавляет значок устройства, чтобы выравнивание могло различаться для каждой точки останова.
- Описание, Показать метку, Разделитель: стандартные настройки отображения, плюс Условия показа поля только тогда, когда другое управление имеет определенное значение.
Подключите "Выбрать" к шаблону или селектору #
Есть два стиля проводки. пример выравнивания работает с любым.
Шаблоны шаблонов. Токен печатает выбранную клавишу, поэтому шаблоны выбора переносятся без изменений Класс модификатора сохраняет варианты на вкладке CSS:
<blockquote class="quote align--{{ quote_align }}">
{{ quote_text }}
</blockquote>с .align--center { text-align: center; } и друзья во вкладке CSS.Условные тоже работают: {% if quote_align == 'center' %}. Как и в случае с выбором, сравнивайте его с ключом, а не с заголовком.
Опция Селектор. Выберите также может записать CSS через механизм селекторов Elementor, полностью пропустив шаблон. Прежде чем полагаться на него, нужно знать одну вещь: свойство по умолчанию, которое Elementor вводит для селектора "Выбрать": color: {{VALUE}}, что бесполезно для выравнивания Запись пользовательских селекторов должна указывать недвижимость:
text-align: {{VALUE}};Тогда ключи должны быть действительными значениями CSS (left, center, right уже есть), и {{WRAPPER}} автоматически добавляется для такого рода контроля стоимости, поэтому стили остаются в вашем виджете без его написания.
Остерегайтесь молчаливой версии этой ошибки. Выберите проводной к селектору, который сохраняет свойство по умолчанию будет с радостью писать color: center, неверное объявление браузер падает без слова. Нет предупреждения консоли, нет визуального подсказки. если кнопки кажутся ничего не делающими, проверьте сгенерированный CSS, прежде чем касаться конфигурации поля.
Используйте элемент управления "Выбрать" в Elementor #
Добавьте свой пользовательский виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта, Элемент управления отображается в виде ряда кнопок значков под вашей меткой, при этом кнопка клавиши по умолчанию активна.
Нажмите кнопку и предварительный просмотр обновляется сразу. При включении Toggle нажатие активной кнопки очищает выбор, и виджет возвращается к тому, что определяет ваша вкладка CSS. При включении Responsive значок устройства позволяет каждой точке останова удерживать свой выбор.
Обычные случаи использования #
- Выравнивание текста для заголовков, цитат, подписей - домашний газон контроля.
- Положение элемента например, изображение слева или изображение справа на медиа- и текстовой карте.
- Переключатели направления для горизонтальных и вертикальных списков и временных рамок.
- Пресеты размера например, малые, средние и большие сопоставлены с классами модификаторов.
- Выбор шоу-сайда для значков и лент - сверху слева через правые нижние углы.
Советы по работе с полем Выберите #
- Держите его на два, три или четыре варианта. Ряд из семи пуговиц значков - это раскрывающийся список в костюме; вместо этого используйте выбор.
- Соответствие ключей значениям CSS при использовании селектора. Ключи как
leftиcenterкапайте прямо вtext-align: {{VALUE}}без слоя трансляции. - Определите недвижимость в пользовательских селекторах. Свойство, введенное по умолчанию, таково
color: {{VALUE}}, что подходит только для фактического выбора цвета. - Планируйте пустое значение, если Toggle включен. Отмененное поле печатает пустой ключ, так что
align--занятия и условные условия должны терпеть это или не допускать переключения. - Сравните с ключами в условных числах. Название опции представляет собой текст только для панелей и никогда не совпадает
{% if %}. - Используйте "Ответственный" для выравнивания. Центр на мобильном телефоне, левый на рабочем столе - это один элемент управления вместо двух.
Часто задаваемые вопросы #
Что такое поле "Выбрать" в Master Addons Widget Builder?
Поле Выбор добавляет значок-кнопку Elementor выбирает в пользовательский виджет: короткий ряд кнопок, каждая из которых определяется ключом, заголовком, и значком Шаблон получает ключ активной опции, и поле может альтернативно написать свойство CSS непосредственно через селектор.
Какие значки могут использовать кнопки опций?
Эйконы, встроенный набор значков Элементора, на который ссылаются по названию класса, например eicon-text-align-left. Каждый вариант объединяет свою клавишу с одной значком и заголовком, который отображается как подсказка кнопки.
Что происходит, когда пользователь снова нажимает активную кнопку?
При включенной опции Переключить кнопка отменяет выбор, и значение поля становится пустым, поэтому условные значения как {% if quote_align %} перейти ложь и классы модификаторов печатать пустой. с Переключить, один вариант всегда остается активным.
Почему мой селектор "Выбрать" ничего не делает?
Скорее всего, запись селектора по-прежнему использует введенное по умолчанию свойство color: {{VALUE}}а ваши ключи - это такие значения, как center. Определите свойство, которое вы на самом деле имеете в виду, например text-align: {{VALUE}}, и декларация становится действительной.
Может ли у каждого устройства быть свой выбор?
Да. включите Responsive, и управление получит значок устройства Elementor, позволяя рабочему столу, планшету и мобильному устройству держать каждый разную клавишу.
Когда мне следует использовать "Выбрать" вместо "Выбрать"?
Когда набор опций мал и визуален: выравнивание, положение, направление Если опциям нужны слова, которые нужно понять, или список проходит мимо четырех или пяти записей, a Выбрать поле лучше читается на панели.
Завершая #
Поле "Выбор конструктора виджетов" дает небольшим визуальным решениям тот элемент управления, который они заслуживают. Ключи располагаются за кнопками значков, классами модификаторов и условными обозначениями каналов токенов, а путь селектора обрабатывает варианты с одной собственностью, такие как выравнивание, как только вы определяете реальное свойство CSS. Для выбора макета, которому нужен полный миниатюр, а не значок, перейдите к Поле Визуальный выбор. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
