20 шаблонов ползунков элементаров, 8 из них бесплатно: Coverflow, временная шкала, отзывы и многое другое

Большинство шаблонов ползунков Elementor, которые вы найдете в Интернете, - это тот же ползунок. изображение во всю ширину, текст посередине, стрелки по бокам, далее.

Эти двадцать не то. один изгибает слайды вокруг обода круга. Один штифтов записи в датированной временной шкале, где промежутки между годами рисуются в масштабе. Один превращает список строк в саму навигацию. восемь из них импортируются в бесплатный плагин Master Addons без лицензии Pro, который разбивка "свободно против профессионалов" подробно рассматривается, и у каждого из двадцати есть живая демо-версия, которую вы можете открыть, потыкать и сломать, прежде чем решите, хотите ли вы этого.

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

20 дизайнов с первого взгляда

Выбирайте по тому, что вы строите, а не по тому, что лучше всего выглядит на скриншоте. Покров, который выглядит потрясающе на портфолио, похоронит сетку продуктов.

Что вам нужно для запуска этих

Для самой страницы достаточно Elementor free.Split находится в дизайнах:

• Дизайны с 13 по 20 бесплатны. Импортируют через Master Addons → Widget Builder → Импортировать виджет на бесплатном плагине: нет лицензии Pro, нет пробной версии, нет карты. Каждый из них попадает на панель Elementor под "Избранное" со своим собственным управлением.
• Для проектов с 01 по 12 необходимы Master Addons Pro. Они построены на полную Виджет Строитель, который является функцией Pro.

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

Бесплатный плагин также поставляет обычные карусельные виджеты (Image Carousel, Logo Slider, Team Slider и виджет Blog в режиме карусели), все они размещены на странице виджета карусели, связанной во вступлении.

01. Покровный поток меридиана

Живая демо Скачать виджет JSON

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

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

Используйте его для: катушки с тематическим исследованием, фрагменты портфолио, все, где каждый слайд заслуживает полного прочтения.

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

02. Концертина Аккордеон

Живая демо Скачать виджет JSON

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

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

Используйте его для: шесть или менее категорий услуг, списки направлений и все, где этикетки продают.

03. Накладка Умбры

Живая демо Скачать виджет JSON

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

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

Это самая близкая к конструкции Виджет Elementor Image Carousel если вы хотите тот же образ без Pro. Бесплатный виджет делает изображение плюс подпись, просто без шахматного затухания.

04. Стратумная палуба

Живая демо Скачать виджет JSON

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

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

Используйте его для: отзывы, уровни цен, этапы адаптации.

Осторожно: держите стек до пяти или шести видимых карт. За этим смещения становятся настолько тонкими, что глубина читается как ошибка рендеринга.

05. Разделение пополам

Живая демо Скачать виджет JSON

Экран разделяется по середине Верхняя половина движется вверх, нижняя половина движется вниз, и они встречаются на следующем слайде Две панели, один жест.

Я бы поместил это в героя и больше никуда Это большое движение: оно съедает весь смотровой порт и требует секунды внимания посетителя В герое, который является справедливой торговлей На полпути вниз по странице услуг это просто шум.

Используйте его для: герои домашней страницы, целевые страницы кампании, пары до/после.

06. Восхождение Мышьколесо

Живая демо Скачать виджет JSON

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

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

Используйте его для: повествовательные разделы, истории продуктов, сроки.

Не используйте его: над сгибом Первую прокрутку посетителя должен перемещать страница, а не виджет.

07. Поворотный флип

Живая демо Скачать виджет JSON

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

Двусторонний контент встречается реже, чем звучит, и этот дизайн является причиной его поиска.Член команды спереди, роль и ссылки сзади.Товар выстрел вперед, размеры назад.

Используйте его для: сетки команды до/после, специальные карты. Flip находится рядом с потоком покрытия, дугой и орбитой 3D-поломка карусели.

08. Дуга изогнута

Живая демо Скачать виджет JSON

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

Ничто другое в наборе так не выглядит, и это аргумент в пользу этого Никто не видел этого на другом сайте WordPress.

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

09. Мозаика Тессера

Живая демо Скачать виджет JSON

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

Это тот, к кому нужно тянуться, когда у вас тридцать изображений и нет иерархии между ними Обычная карусель навязывает порядок чтения контенту, у которого его нет Мозаика не.

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

Стоимость: самый тяжелый дизайн в наборе для макетной работы Храните исходные изображения менее 200 Кб каждый или перестановки заикаются на Android среднего класса.

10. Меандр Дрэг

Живая демо Скачать виджет JSON

Хватай и бросай. imentum несет трассу мимо того места, где ты отпустил, и облегчается до остановки. 2017 г. Не щелкать, чтобы скользить границы, поэтому скольжение может сидеть полувидимо, что и есть суть, потому что полувидимый скольжение - это сигнал, что есть больше.

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

Используйте его для: лукбуки, портфолио, длинные горизонтальные коллекции.

11. Шиферная занавеска

Живая демо Скачать виджет JSON

Вертикальные панели раздвигаются, как шторы, и следующий слайд уже сидит за ними. раскрытие - это переход.

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

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

12. Ореол Орбита

Живая демо Скачать виджет JSON

Предметы вращаются вокруг фиксированной центральной точки. Тот, что вверху, активен и полноразмерен; остальные сжимаются, путешествуя сзади.

Круговые макеты подходят контенту, который действительно зацикливается Четырехэтапный процесс, схема экосистемы, колесо обслуживания Поставьте в него линейный список и вы запутаете людей, потому что круг подразумевает “возврат к старту,” и пятиэтапный поток адаптации - нет.

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

13. Ползунок героя постамента (бесплатно)

Живая демо Скачать виджет JSON

Одна картинка заполняет сцену. подставка для подписей расположена внизу слева, панель управления (точки, стрелки, счетчик) внизу справа. слайды меняются местами мгновенно: ни затухания, ни слайд-ина, ничего не выходит из синхронизации или заикается на медленном телефоне.

Мгновенный обмен звучит как ограничение, пока вы не наметите затухание против него. Геройский переход съедает внимание дважды: один раз уходит, один раз прибывает. Вместо этого этот дизайн тратит этот бюджет на фотографию. Это также единственный дизайн в наборе с контролем ссылок для каждого слайда, плюс одна метка CTA, общая для всех слайдов, что является именно той формой, которая нужна герою домашней страницы.

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

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

14. Слайдер индекса реестра (бесплатно)

Живая демо Скачать виджет JSON

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

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

Используйте его для: коллекции, архивы, списки произведений: везде названия несут реальную информацию.

Осторожно: строки продают щелчок. “Пункт 1, Пункт 2, Пункт 3” тратит весь дизайн; пишите заголовки строк, как заголовки.

15. Галерея витриновых плит (бесплатно)

Живая демо Скачать виджет JSON

Одна пластина под полоской миниатюр, рядом с которой липкая панель с подписью и таблица данных о кадре: место, время, объектив, диафрагма, затвор, ISO. Рамки полностью заменяются; ничего не слайд.

Если вы искали “elementor слайдер изображения с миниатюрами,” это то, что, построенный для фотографов. табличные метки данных все редактируемые, поэтому типография может превратить объектив/aperture в бумагу/издание, а музей может превратить их в medium/date/provenance.

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

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

16. Квадрантный страничный каталог (бесплатно)

Живая демо Скачать виджет JSON

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

Это дизайн для работы большинство каруселей неправильно даны: показывая много сопоставимых вещей. каждая коробка несет изображение, категорию, название, копию и статистику, и поскольку полная страница из трех видна сразу, посетитель может фактически сравнить, что coverflow и его кузены намеренно предотвращают.

Используйте его для: каталоги в стиле продукта, тематические сетки, меню обслуживания. это также бесплатный маршрут в Руководство по карусели продуктов WooCommerce.

Осторожно: он содержит ровно девять позиций на трех страницах. если ваш каталог имеет глубину тридцать позиций, вам нужна настоящая сетка продуктов с фильтрами, а не карусель.

17. Панели с вкладками в бюллетене (бесплатно)

Живая демо Скачать виджет JSON

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

Строго говоря, это вкладки, а не слайдер, и поэтому он здесь Половина того, что люди пытаются навязать карусели (сравните три плана, три локации, три тематических исследования), - это вкладки контента в костюме. этот также делает доступность должным образом: реальная семантика таблиста ARIA с бродячим табиндексом, который большинство виджетов вкладок подделывают.

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

18. Слайдер цитат на трибуне (бесплатно)

Живая демо Скачать виджет JSON

Панель цитат рядом с портретом, шагнул через с двумя шевронами.Площадка прогресса и счетная дорожка, где вы находитесь, и кнопки шагов могут назвать голос, к которому они перейдут, как “Далее: Amara Okafor” вместо анонимной стрелки.

Тот названный шаг - деталь, которую стоит украсть Свидетельские карусели теряют читателей при переходе, потому что стрелка ничего не обещает Имя - повод нажать Знак кавычки - это тоже редактируемый текстовый элемент управления, поэтому его можно установить в правильный глиф для языка сайта, или удалить.

Используйте его для: отзывы, отзывы, цитаты клиентов. есть полное свидетельство прохода каруселии вы можете видеть реальные котировки клиентов на нашем сайте.

Осторожно: он держит три голоса, и каждый получает сцену в одиночку. Выберите три ваши лучшие цитаты, и держать их достаточно коротким, чтобы прочитать на одном дыхании.

19. Слайдер хронологии альманаха (бесплатно)

Живая демо Скачать виджет JSON

Записи, прикрепленные к датированной оси. Позиции клещей рассчитываются по годам, которые вы вводите, поэтому расстояние является реальным, а не четным. 1994 и 1996 годы расположены близко друг к другу, 1996 и 2011 годы расположены далеко друг от друга, и разрыв рассказывает свою собственную историю. Десятилетний гребень над правилом дает расстояние, против которого можно читать.

Каждый второй виджет временной шкалы равномерно распределяет свои записи, что тихо лежит об истории. Этот нет, и это делает его самым самоуверенным дизайном в наборе. Здесь также самая глубокая панель, со 143 элементами управления, потому что ось, расческа и тик-состояния стилистически отдельно от записей.

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

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

20. Ползунок функций Keystone (бесплатно)

Живая демо Скачать виджет JSON

Один предмет был большим; остальные ждут на стене рядом с ним, каждый из которых носит только свой номер и имя. Нажмите на спутник, и он будет повышен до этой функции, и коробки перевернутся на новые места, а не телепортируются, поэтому ваш глаз следует за заменой, а не теряет ее.

На объекте установлена мемориальная доска из трех фактов. Он был построен для комнат, пространств и вращающихся экспонатов, и в этом честный размах: он представляет небольшой набор различных вещей по одному, а остальные явно стоят в очереди.

Используйте его для: залы, помещения студии, выставки, портфолио из трех-пяти человек.

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

Как импортировать шаблон слайдера в Elementor

Четыре шага, около девяноста сек. одинаковый поток бесплатно и дизайн Pro, и отличается от импорт шаблона Элементора, потому что дизайн регистрируется как виджет, а не как макет страницы.

1. Скачать файл JSON дизайна со своей демо-страницы. По одному файлу на дизайн.
2. Перейти к Мастер-аддоны → Виджет-строитель в своем администраторе WordPress нажмите "Импортировать виджет".
3. Бросьте JSON в зону сброса. Дизайн регистрируется как виджет со своими собственными элементами управления: содержимое, цвета, типографика, точки останова. Восемь бесплатных дизайнов импортируются в бесплатный плагин; двенадцать дизайнов Pro просят лицензию Pro здесь.
4. Перетащите его на страницу с панели Элементор, где он отображается в разделе Избранное, и замените содержимое заполнителя на свое.

Импорт не трогает вашу тему, ничего глобально не ставит в очередь, не создает шорткод, Он становится виджетом на панели, как и любой другой.

Работают ли эти ползунки на мобильных устройствах?

Все двадцать имеют сенсорную поддержку и отзывчивость. Четыре меняют поведение, а не просто масштабируют:

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

Бесплатная восьмерка также по умолчанию держит навигацию по клавиатуре, а Plinth Hero и Rostrum Quote отвечают на жесты "свайпом" из коробки Тестируйте мозаику на реальном телефоне, а не в эмуляторе устройства браузера, ведь эмулированные видопорты не воспроизводят среднюю стоимость макета Android, а мозаика - это то, что проявляется в первую очередь.

Какой из них вам действительно следует выбрать?

Если вы застряли, они охватывают большинство сайтов:

• Портфолио или агентство: Покров меридиана, или Meander Drag, если у вас более десятка штук. по бесплатной лицензии, Keystone Feature Slider.
• Сервисный бизнес: Концертина Аккордеон. бесплатно, панели с вкладками в бюллетень, таблица фактов которых позволяет следить за сравнением планов.
• Магазин: Квадрантный страничный каталог для курируемой девятки. Нет бесплатного виджета, который слайдирует живую ленту продукта; эта работа нужна Петлевая карусель Elementor Pro. Пропустите 3D-проекты в любом случае: покупатели хотят сравнивать, и для их остановки создается защитный поток.
• Отзывы: Слайдер цитат на трибуне. он бесплатный, а названные кнопки шагов - лучшее подсказка перехода в наборе.
• Герой домашней страницы: Слайдер Plinth Hero, если фотография сильная, и шаблоны разделов героев если вам нужен весь блок, а не ползунок; Разделенный на части или шиферный занавес, если вы хотите, чтобы движение было моментом, и только один из них, один раз.
• О странице или истории: Альманах хронология слайдер. больше ничего здесь не датируется содержание честно.

Что бы вы ни выбрали, запустите его мимо одного теста, который имеет значение: загрузите страницу на свой телефон, на сотовую связь и посмотрите, является ли ползунок первым, что визуализирует, или последним. Дизайн, который приходит после того, как текст уже прочитан, - это не ползунок, это украшение.

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

Куда идти дальше

Откройте две или три демо-версии и дайте им настоящий взгляд на свой телефон, прежде чем выбрать. Затем:

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

• Просмотрите все в одном месте на сайте Виджеты карусели Элементор пейдж, со всеми двадцатью дизайнами плюс собственные карусельные виджеты плагина.
• Придерживаться свободного уровня? Бесплатные виджеты карусели публикуют проходит через все, что ничего не стоит, включая эти восемь.
• Идти на глубину, а не на движение? Дизайн 3D-каруселей (покровный поток, переворот, дуга и орбита) поближе присмотреться к себе.
• Хотите целую страницу, а не один раздел? наборы шаблонов отправьте полные планировки с уже размещенными каруселями.
• Создание всей страницы, а не только слайдера? бесплатные шаблоны разделов Elementor библиотека охватывает функции, цены, отзывы, команды, часто задаваемые вопросы и блоки CTA, каждый из которых импортируется в виде одного редактируемого виджета.