Слайдер

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

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

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

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

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

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в конструкторе виджетов Пример в этом руководстве - виджет “Team Grid” с двумя ползунками: Пробел карты для пространства между картами и Размер аватара для инициалов раунда.

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

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Нажмите « Стиль вкладка и добавление раздела, например “Grid Layout”.
3. Тип slider в поле поиска слева.
4. Драг Слайдер в раздел Его настройки открываются в левой боковой панели.

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

• Этикетка является текстом над ползунком в Elementor, например “Card Gap”.
• Имя является ли уникальный идентификатор поля и начало его жетонов, так что card_gap дает {{ card_gap.size }}. Только буквы, цифры и подчеркивания.
• Описание появляется под ползунком в Elementor.
• Минимальная стоимость, Максимальное значение и Шаг установите диапазон и то, как далеко заходит каждый ход ручки. Карточный разрыв использует от 0 до 80 с шагом 2.
• Значение по умолчанию это начальный номер и единица измерения, установленная с помощью собственного небольшого ползунка и меню единиц измерения.

Введите значения Min, Max и Step, даже если в полях уже отображаются 0, 100 и 1. Коробки, к которым вы никогда не прикасаетесь, не сохраняются, а ползунок, ни один из которых не сохранен, возвращается к диапазонам Elementor: от 0 до 1000 для px, от 0 до 100 для % и от 0 до 10 для em и rem. Когда вы их устанавливаете, для каждой единицы используется один и тот же диапазон, поэтому от 0 до 80 относится как к em, так и к px.

Нет настройки, для каких единиц появляются Редакторы могут выбрать px, %, em и rem.далее, Отзывчивый контроль добавляет значок устройства, чтобы рабочий стол, планшет и мобильный телефон могли иметь разные значения.

Подключите ползунок с помощью CSS-селекторов #

Прокрутить до Селекторы CSS и нажмите Добавить элемент. Новая строка заполняется примером (.text-1, .text-2 и color: {{VALUE}};), поэтому замените оба поля:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} заменяется на номер и {{UNIT}} с выбранной единицей получается 24 px gap: 24px;. Не надо {{WRAPPER}} в селекторе, потому что конструктор добавляет его для вас Добавить больше строк, чтобы использовать то же значение на других элементах.

Используйте эти строки, а не одиночные Селектор коробка внизу боковой панели. в этом поле нет места свойству CSS, поэтому он не может написать рабочее правило для ползунка.

Вместо этого используйте значение в своем шаблоне #

Вы также можете распечатать значение на вкладке HTML или CSS. напишите размер и единицу как два токена рядом друг с другом. ползунок Размер аватара устанавливает ширину и высоту аватара таким образом:

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

Голый {{ avatar_size }} ничего не печатает. можно также сравнить число в состоянии, например {% if card_gap.size >= 40 %}. Когда включено адаптивное управление, используйте строку CSS Selectors, поскольку Elementor затем пишет отдельное правило для каждого устройства.

Нажмите Сохранить настройки когда закончишь.

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

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

Перетащите ручку или введите номер, и виджет сразу же обновится. щелкните метку устройства, чтобы переключаться между px, %, em и rem.

Здесь разрыв поднимается до 48px, а аватары - до 96px:

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

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

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

• Всегда вводите Min, Max и Step, чтобы ползунок имел разумный диапазон.
• Выберите диапазон, подходящий для каждого редактора устройства. От 0 до 80 - это нормально для px, но очень много для em.
• Сохраните базовое значение свойства на вкладке CSS, например gap: 24px;итак, виджет выглядит прямо перед тем, как кто-то коснется ползунка.
• Замените текст примера в новой строке CSS Selectors. Как бы то ни было, строка нацелена на классы, которых нет в вашем виджете.
• Для значений с четырьмя сторонами, таких как заполнение или поле, используйте Поле размеров.

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

Завершая #

Добавьте поле "Слайдер", введите "Минус", "Макс" и "Шаг", установите значение по умолчанию и соедините его со строкой "Выборщики CSS", например gap: {{SIZE}}{{UNIT}};. Используйте .size и .unit токены, когда значение принадлежит на вашей вкладке HTML или CSS. Чтобы узнать о других элементах управления размером, см. Размеры и Типографика поля и проверка ценообразование за то, что включает каждый план.