Визуальный выбор

The Поле Визуальный выбор рендерит набор карт изображений в панели вашего виджета, по одной на опцию, и пользователь выбирает, нажав миниатюру Это управление компоновкой-подборщиком Там, где Select предлагает слова, а Choose предлагает значки, Visual Choice показывает небольшую картинку того, как на самом деле выглядит каждый вариант Внутри главных аддонов Виджет Строительэто делает его естественным для принятия решений по принципу "сеть против списка", и любой вариант, который скриншот объясняет быстрее, чем имя.

Значения опций Visious Choice подключаются прямо к сети Условия, позволяя другим элементам управления следовать выбранному макету и входить в него Механизм шаблонов Twig-синтаксиса, где {% if style == "grid" %} переключает разметку на соответствие Оба руководства охватывают детали.

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

Что делает поле Визуальный выбор #

• Оказывает кликабельные карты изображений на панели Элементор каждый параметр определяется ключом, заголовком и изображением.
• Держит один ключ из определенного набора карта выбрана в данный момент.
• Раскладывает карты столбцами, по умолчанию по три в строке, регулируемые с помощью опции "Колонки".
• Ленты шаблонируют выбранную клавишу для классов модификаторов и {% if %} блоки.
• Опционально устанавливает класс обертки с помощью параметра класса префикса, поэтому только CSS может переключать макет.

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

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

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

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

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

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

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

• Этикетка: текст, показанный над карточками в Elementor, например “Layout”.
• Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний только, например team_layout.
• Варианты: каждый вариант - это ключ плюс заголовок и изображение. изображение становится кликабельной картой; заголовок обозначает его. Ключи остаются короткими и CSS-безопасными: grid, list.
• Столбцы: сколько карт сидит в строке на панели, 3 по умолчанию Две большие карты лучше читаются как 2 столбца.
• Префикс Класс: стебель класса Elementor добавляет выбранный ключ и помещает его в обертку виджета. с team-layout- и ключ grid, обертка несет team-layout-grid.
• По умолчанию: ключ, выбранный при первом падении виджета на странице.
• Описание, Показать метку, Разделитель: стандартные настройки отображения, плюс Условия показа поля только тогда, когда другое управление имеет определенное значение.

Подключите Visual Choice к своему виджету #

Два стиля проводки. Выберите по одному на поле.

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

<div class="team team--{{ team_layout }}">
  ...
</div>

или структурная ветвь, когда варианты требуют разной разметки:

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

Стиль B: класс префикса. Заполните опцию Prefix Class, скажем team-layout-и Элементор пишет team-layout-grid или team-layout-list на обертку виджета при щелчке пользователем карт Ваша CSS затем нацеливается на объединенный класс:

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

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

Остерегайтесь смешивания двух стилей в одном поле. Шаблон условного, который предполагает grid в то время как класс префикса одновременно устанавливает team-layout-list является двумя источниками истины, и они будут дрейфовать, обычно месяцы спустя, когда кто-то редактирует одну сторону и забывает, что другая существует. решите, говорит ли это поле через шаблон или через класс обертки, затем придерживайтесь его.

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

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

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

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

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

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

• Используйте реальные скриншоты в качестве дополнительных изображений. Крошечный рендер каждого варианта превосходит абстрактный значок; карта - это документация.
• Выберите один стиль проводки для каждого поля. Шаблоны шаблонов или класс префиксов, а не оба, или они в конечном итоге не согласятся.
• Ключи входят в названия классов, поэтому оставьте их слизняками. grid и list, а не “Grid Layout”.
• Завершите префикс разделителем. team-layout- плюс grid читает как team-layout-grid; без дефиса вы получаете team-layoutgrid.
• Сопоставьте столбцы с количеством карт. Два варианта в трех столбцах оставляют пробел; установите столбцы в 2, и строка заполнится.
• Зарезервируйте его на наличие визуальных различий. Если параметры различаются по поведению, а не по внешнему виду, выбор с четкими метками лучше подходит редакторам.

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

Завершая #

Поле Визуальный выбор конструктора виджетов позволяет редакторам выбирать макет, глядя на него: карты изображений на панели, ключ в шаблоне и опцию класса префиксов, когда вы предпочитаете переключать макеты только с CSS. Он естественным образом сочетается с Выберите поле. Миниатюры обрабатывают большие структурные элементы, значки - небольшие настройки. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.