Ряд статических изображений съедает пространство и просит посетителей прокрутить мимо каждого. карусель показывает тот же набор в компактном, свайпибле ползунке, который люди действительно трогают.The Изображение Карусель виджет в Мастер-аддоны для Elementor строит этот ползунок из обычной галереи WordPress, затем добавляет автовоспроизведение, лайтбокс, несколько стилей навигации и режим coverflow, и все это с панели Elementor.
Вы выбираете изображения, выбираете, сколько шоу сразу, и решаете, как посетители перемещаются между ними.Ни шорткодов, ни отдельного плагина ползунка.Это руководство проходит через каждую настройку в виджете, от загрузки галереи до укладки стрелок. демо и сравнение с собственной каруселью Elementor см Виджет карусели с изображением элементара страница.
Предпочитаете смотреть первым? Это короткое руководство охватывает изображение карусели от галереи до стиля:
Что делает виджет Image Carousel #
Виджет превращает выбор изображений в скользящую карусель. он показывает одно или несколько изображений на вид, продвигается самостоятельно или по щелчку и открывает каждое изображение в лайтбоксе для полноразмерного образа. все подписи, границы, наложения и стилистика стрелок встроены.
Он работает на движке Swiper, поэтому ползунок с самого начала сенсорный и отзывчивый. на телефоне та же карусель перепускается на меньшее количество столбцов, и вы можете спрятать стрелки на мобильном, если они мешают.
Прежде чем начать #
- вордпресс с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Несколько изображений загружены в медиатеку или готовы к загрузке.
Как добавить виджет Image Carousel #
В редакторе Elementor откройте Элементы панель и поиск Изображение Карусель, или прокрутить в раздел Главные дополнения Перетащите виджет на свою страницу Он загружается пустым, пока вы не добавите изображения, поэтому галерея всегда является первым шагом.
Добавляйте и заказывайте изображения #
В Содержание вкладка, откройте Изображения раздел и щелкните поле галереи, чтобы запустить медиа-подборщик WordPress. выберите нужные изображения, затем используйте Редактировать галерею чтобы перетащить их в порядок, добавьте подписи или опустите их со значком X.
Вернувшись на панель, раздел "Изображения" дает вам еще три элемента управления:
- Разрешение изображения: выберите размер WordPress подается, от миниатюры до полного, или установите Пользовательский размер. средний или большой сохраняет свет страницы, сохраняя при этом острый вид в ползунке.
- Включить галерею Lightbox: включите это, чтобы посетители могли щелкнуть изображение, чтобы открыть его в полный размер во всплывающем окне. После его выключения изображения отображаются только.
- Библиотека лайтбоксов: выберите всплывающий движок, либо Fancybox, либо собственный лайтбокс Elementor. оба группируют изображения карусели, чтобы посетители могли пройти через них внутри всплывающего окна.
Настроить навигацию #
выше Навигация раздел управляет тем, как люди перемещаются по слайдам. Начните с Навигация раскрывающийся список, который задает стиль управления: стрелки и точки, стрелки и дробь, стрелки, точки, прогресс или нет.
- Показать панель прокрутки: добавляет драгируемую полосу хода под ползунком.
- Положение стрелок: поместите стрелки вверху, в центре или внизу, а также слева, в центре или справа внутри них.
- Размещение: установите стрелки внутри ползунка или снаружи него.
- Скрыть стрелку на мобильном телефоне: опустите стрелки на маленькие экраны, где свайп - естественный жест.
- Следующий значок и предыдущий значок: поменяйте стрелки по умолчанию на любой значок из библиотеки значков Elementor.
Настройте поведение карусели #
выше Настройки карусели раздел - это то, где ползунок получает свое движение. это часть, которая решает, сколько изображений показать, как быстро они движутся и зацикливается ли ползунок.
- Слайды на колонку: Сколько слайдов отображаются сразу, от 1 до 6, с отдельными значениями для настольных, планшетных и мобильных.
- Макет: выберите "Карусель" для стандартного плоского ползунка или "Покровный поток" для трехмерного эффекта.
- Авто Высота: пусть высота ползунка адаптируется к текущему изображению.
- Скорость автовоспроизведения и автовоспроизведения: включите автоматическое скольжение и установите задержку между слайдами за миллисекунды (5000 - пять секунд).
- Пауза на зависании: остановите автовоспроизведение, пока курсор находится над ползунком.
- Слайды для прокрутки: сколько изображений продвигается за шаг.
- Центральное скольжение, курсор захвата, режим без перетаскивания: параметры центрирования активного слайда, отображения курсора захвата и свободной прокрутки перетаскивания.
- Петля: запустите карусель как бесконечную петлю, а не останавливайтесь на последнем изображении.
Используйте макет Coverflow для трехмерного эффекта #
Переключатель Макет чтобы Покровный поток и слайды наклоняются в 3D стек, с активным изображением плоским в центре и соседями, расположенными под углом назад. А Эффект покровного потока появляется управление, чтобы вы могли точно настроить глубину и вращение. Он подходит для фотографий и разделов портфолио, где сам ползунок является частью дизайна.
Стиль карусели #
выше Стиль вкладка разбивается на четыре раздела: Предметы карусели, Лайтбокс, Навигацияи Шаблоны. Вместе они закрывают вид слайдов, всплывающего окна и стрелок.
Предметы карусели #
В этом разделе стилизованы слайды изображения. Он имеет нормальное состояние, состояние "Наведение" и "Активное", поэтому вы можете выделить центрированный слайд среди остальных.
- Фон, Тип границы, Радиус границы, Тень коробки: стандартное обрамление для каждого слайда. Border Radius округляет углы изображения.
- Заполнение и зазор в деталях: пространство внутри каждого ползуна и зазор между ползунами.
- Режим тени и непрозрачность: дополнительная глубина и прозрачность для неактивных слайдов.
Лайтбокс, наложение и подписи #
выше Лайтбокс в разделе стилизуется значок предварительного просмотра, который находится на каждом изображении, и наложение позади него, а также текст подписи.
- Пользовательский значок предварительного просмотра: замените значок масштабирования по умолчанию и установите его цвет, цвет наведения, размер и положение с помощью значка "Разрыв слева и сверху".
- Накладка: добавьте фоновый оттенок поверх изображения, что поможет вам, когда вы хотите, чтобы значок и подпись оставались читаемыми.
- Название субтитров: типографика, фон, цвет и цвет наведения для подписей, добавленных в галерее.
Стрелки навигации #
выше Навигация раздел стиля управляет внешним видом стрелок в нормальных состояниях и состояниях наведения.
- Цвет и фон: цвет значка стрелки и кнопка позади него.
- Тип границы, радиус границы, набивка, размер: формируйте и измеряйте кнопки со стрелками, включая круглые кнопки полного радиуса.
- Тень коробки и смещение: добавьте глубину и вставьте стрелки внутрь или наружу с горизонтальным смещением.
Результат на странице #
Публикуйте или предварительно просматривайте, и карусель работает в реальном времени: она автоматически воспроизводится через изображения, зацикливается, если вы включили это, и открывает каждую из них в лайтбоксе при нажатии. Ваш стиль проходит через слайды с закругленными краями к кнопкам со стрелками на заказ.
Обычные случаи использования #
- Фотография и портфолио галереи, где лайтбокс позволяет посетителям просматривать полноразмерные снимки.
- Ползунки изображений продуктов на целевой странице, где автоспектакль привлекает внимание.
- Логотип или партнерские полоски использование нескольких слайдов на вид и цикла.
- Фотографии отзывов или событий в компактном, свайпируемом блоке.
- Ползунки кроющих потоков героев для раздела "Проектирование-Прогноз".
Советы по работе с Image Carousel #
- Соответствуйте разрешению изображения размеру слайда. Подача полноразмерных файлов в небольшие слайды замедляет страницу; Среднего или Большого обычно достаточно.
- Сохраняйте скорость автопроигрывания комфортной. Около 4000-6000 мс дают людям время смотреть, не чувствуя спешки.
- Включите паузу при наведении курсора с помощью автозапуска. Он останавливает выскальзывание ползунка из-под того, кто читает подпись.
- Скрыть стрелки на мобильном. Пролистывание - естественный жест на сенсорных экранах, поэтому стрелки там часто просто загромождаются.
- Используйте состояние "Активно", чтобы выделить центральный слайд. Тонкая граница или полная непрозрачность активного предметного стекла направляют глаз.
Часто задаваемые вопросы #
Что такое виджет Image Carousel в Master Addons?
Это виджет Elementor, который превращает галерею WordPress в адаптивный ползунок изображений. вы выбираете изображения, устанавливаете количество показов на просмотр и выбираете параметры навигации и автовоспроизведения. Он включает в себя встроенный лайтбокс, подписи, макет coverflow и полный контроль стиля.
Как добавить лайтбокс в карусель с изображением Элементора?
Во вкладке Содержимое откройте раздел Изображения и включите Включить галерею Лайтбокс Затем выберите Библиотеку Лайтбокс, либо Фэнсибокс, либо Элементор Посетители могут щелкнуть любое изображение, чтобы открыть его в полный размер во всплывающем окне и пройти через остальную часть карусели оттуда.
Может ли карусель изображения автоматически воспроизводиться и зацикливаться?
Да. в настройках карусели включите автовоспроизведение и установите скорость автовоспроизведения в миллисекундах. включите цикл, чтобы ползунок работал бесконечно, а не останавливался на последнем изображении. Включите паузу при наведении, чтобы автовоспроизведение прекратилось, пока кто-то смотрит.
Какова компоновка покровного потока?
Покровный поток - это опция 3D-раскладки в разделе "Настройки карусели".Активное изображение сидит ровно в центре, в то время как соседние слайды наклоняются обратно в стеке. Управление эффектом покровного потока позволяет регулировать глубину и вращение. Оно подходит для ползунков фотографии и портфолио.
Отзывчив ли виджет Image Carousel?
Да. работает на движке Swiper, поэтому он удобен для сенсорного управления и автоматически адаптируется к размеру экрана. вы можете устанавливать разные слайды для каждого представления на устройство и скрывать навигационные стрелки на мобильном телефоне, где их заменяет свайп.
Завершая #
выше Изображение Виджет Карусель строит полнофункциональный ползунок изображения Elementor без отдельного плагина: загрузите галерею, установите автовоспроизведение и цикл, включите лайтбокс и создайте стиль слайдов и стрелок, чтобы они соответствовали вашему дизайну. чтобы найти другие способы отображения изображений, посмотрите на Галерея Слайдер и Фильтруемая галерея виджеты. Просмотрите полную версию Виджеты и расширения Master Addgets чтобы посмотреть, что еще включено.
