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

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

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

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

• Он показывает ваши параметры в виде карт изображений на панели Элементор. выбранная карта получает выделение.
• Каждый вариант имеет ключ, заголовок и изображение. заголовок используется в качестве подсказки карты и альтернативного текста.
• Ваш шаблон получает выбранный ключ, например grid или list, который вы можете использовать в имени класса или {% if %} проверить.
• Настройка "Колонки" определяет, сколько карт находится в одном ряду панели.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя во-первых. Для вариантов, которые хорошо читаются как текст или значки, Выбрать и Выбирать поля настраиваются быстрее.

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Небольшое изображение для каждого варианта Простые линейные рисунки примерно 240 на 160 точек, сохраненные как PNG с прозрачным фоном, выглядят на темной панели Elementor чисто.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Team Showcase” с тремя макетами: Grid, List и Spotlight.

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

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. На Содержание вкладка, добавить раздел. выбор макета обычно идет первым, поэтому редакторы выбирают структуру раньше всего.
3. Тип visual в поле поиска слева.
4. Драг Визуальный выбор в раздел Его настройки открываются в левой боковой панели.

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

• Этикетка является ли текст над картами в Elementor, например “Layout”.
• Имя является ли уникальный идентификатор поля и его шаблонный токен, так что team_layout становится {{team_layout}}. Только буквы, цифры и подчеркивания.
• Описание появляется под картами в Элементоре.
• Опции держит одну строку на карту. Ключ это ценность, которую получает ваш шаблон (сохраняйте его в кратком и строчном регистре, например grid). Название называет карту. Нажмите Изображение установите поле, чтобы открыть окно "Выбор изображения", загрузите файл или выберите его из медиатеки, а затем нажмите Используйте это изображение. Значок плюс добавляет строку, а красный крест удаляет ее.
• Столбцы устанавливает, сколько карт помещается в один ряд, от 1 до 6. Введите число, даже если в поле уже указано 2. Показываемое число не сохраняется, пока вы его не измените, и без сохраненного значения Elementor кладет по одной карте в каждый ряд.
• Переключить указан в панели, но в наших тестах это не имело никакого значения. Редакторы всегда могли щелкнуть выбранную карту еще раз, чтобы очистить ее.

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

Нажмите Сохранить настройки после того, как вы добавите опции.

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

{{team_layout}} печатает ключ выбранной карты Самый простой способ ее использования - класс модификатора:

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

С выбранной сеткой это отображается ts-team--grid. Если макет нуждается в другой разметке, проверьте ключ с помощью {% if %}. Пример показывает краткую биографию только в макете Списка:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

Затем напишите один набор правил CSS для каждого ключа:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

Пока редактор не щелкнет карточку, токен ничего не печатает, и класс выше становится ts-team--. Дайте основание .ts-team класс - макет, который выглядит хорошо сам по себе, поэтому виджет никогда не выглядит сломанным до того, как будет сделан выбор.

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

Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта Карты появляются на вкладке Содержимое Щелкните один и холст обновляется сразу.

Нажатие списка переключает команду на строки, и {% if %} блок добавляет биографию:

Прожектор делает первого члена больше:

Щелкните выбранную карту еще раз, чтобы очистить выбор. шаблон затем получает пустой ключ, как описано выше.

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

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

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

• Используйте один и тот же стиль рисования для каждого изображения варианта, поэтому карты выглядят как один набор.
• Держите ключи короткими, строчными и свободными от пробелов. они попадают в названия классов.
• Не переименовывайте ключ, когда виджет используется Страницы, сохранившие старый ключ, не будут соответствовать вашему новому CSS.
• Установите столбцы на количество опций, если у вас их три или меньше, чтобы все карты располагались в одном ряду.
• Стиль пустое состояние. пока кто-то не выберет карту, ключ пуст.

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

Завершая #

Дайте каждому параметру ключ, заголовок и изображение, введите значение столбцов и используйте {{field_name}} в имени класса или {% if %} проверить. спланируйте пустое состояние, так как ничего не выбирается, пока редактор не щелкнет карточку. Вместо этого выберите из текстового списка, см Поле Select2и проверьте ценообразование за то, что включает каждый план.