Слайдер

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

Поле Slider поддерживает Условия как и любой элемент управления, и поскольку его значение числовое, Механизм шаблонов Twig-синтаксиса давайте разветвитесь на это сравнениями типа {% if columns >= 3 %}. Оба руководства охватывают настройку и ограничения.

Значение, которое производит Слайдер, не является простым числом. Это пара: размер и единица измерения. Эта одна деталь решает, как вы подключаете поле к своей таблице стилей, поэтому этот документ проводит там большую часть своего времени.

Что делает поле Slider #

• Оказывает ползунок диапазона с драгируемой ручкой и числовым входом рядом с ней, соответствующим собственным ползунам Элементора.
• Предлагает переключатель единиц если вы разрешаете более одного устройства, то одно и то же управление может работать в px, % или em.
• Хранит размер и единицу вместе как одно значение ваша панель CSS читается с помощью точечной записи.
• Поддерживает адаптивные значения, позволяя пользователям устанавливать размер каждого устройства, отличный от значка устройства.
• Принимает динамические значения и может писать CSS через механизм селекторов Elementor как альтернативу панели CSS.

Новое в создании виджетов? Читать Обзор виджета-строителя первый; этот документ предполагает, что в редакторе уже открыт виджет.

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

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

Как добавить поле Slider #

В редакторе Widget Builder прокрутите панель полей слева, пока не найдете Слайдер поле, указанное вместе с другими полями значений CSS, такими как "Размеры".

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

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

• Этикетка: текст рядом с элементом управления в Elementor, например “Card Gap”.
• Имя: например, уникальный идентификатор, к которому относится ваш CSS, буквы, цифры и подчеркивания my_gap.
• По умолчанию: начальное значение, сохраненное как размер плюс единица измерения.
• Мин, Макс, Шаг: диапазон, который охватывает ручка, и расстояние, на которое перемещается каждое приращение сопротивления. Управление зазором может работать от 0 до 100 с шагом 1.
• Размер единиц: единицы, между которыми пользователь может переключаться, например px, % и em. Один блок скрывает переключатель; несколько показывают это.
• Отзывчивый: добавляет значок устройства, чтобы каждая точка останова сохраняла свое значение.
• Динамический и Селекторы: динамическая поддержка тегов и механизм селекторов Elementor, описанный ниже.
• Описание, отображение метки, разделителя и условий - это одни и те же параметры отображения, которые несет каждое поле.

Подключите ползунок к CSS #

Значение Слайдера - массив с двумя ключами: size и unit. Печать имени поля на собственных выводах ничего, потому что нет единого значения для печати. на панели CSS всегда пишите обе части с точечной записью:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

Значение 24 с выбранным px отображает как gap: 24px;. Измените переключатель единиц измерения на %, и станет то же правило gap: 24%; не касаясь шаблона.

Осторожно: {{ my_gap }} на своем печатает пустую строку Если ваше правило отображается как gap: ; а компоновка игнорирует контроль, недостающее .size и .unit почти всегда почему. та же тишина следует за переименованием: измените Имя поля позже и старые токены продолжают рендеринг, просто без ничего в них, поэтому обновите панель CSS в том же заседании.

Альтернатива селекторам #

Также ползунки работают с механизмом селекторов Elementor, который записывает для вас CSS вместо прохождения через панель CSS. для ползунка Elementor вводит не полное объявление, а голое значение, поэтому одно только простое поле Селектора строителя не дает полезного правила. пользовательская запись селекторов должна нести все свойство, используя собственные заполнители Elementor:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

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

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

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

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

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

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

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

• Всегда печатайте обе части. {{ my_gap.size }}{{ my_gap.unit }} это все соединение; имя голого поля дает вам пустую строку.
• Сопоставьте Мин, Макс и Шаг к объекту. Диапазон шагов 0 100 соответствует зазору; для управления радиусом может потребоваться только 0 050.
• Предлагайте только те единицы, которые имеют смысл. Элемент управления только px более понятен, чем элемент, в котором % создает разбитые макеты.
• Сохраните запас в структуре панели CSS. Напишите правило так, чтобы виджет по-прежнему разумно располагался по значению по умолчанию при первой передаче.
• Включите "Ответственно" для значений макета. Пробелы и ширины почти всегда требуют более жесткой мобильной настройки.
• Предпочитайте токен панели CSS полю "Выбор". Простое поле "Выбор" вводит только чистое значение для ползунков, что не является полным объявлением.

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

Завершая #

Поле Widget Builder Slider превращает любую длину CSS в вашем виджете в элемент управления, который редактор может перетащить: назвать поле, ограничить диапазон и распечатать {{ name.size }}{{ name.unit }} в панели CSS. Он естественным образом сочетается с Поле размеров когда виджету требуется четырехсторонний интервал рядом с отдельными значениями. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.