Slider Revolution: Полное руководство

Slider Revolution — буквально один из самых популярных плагинов WordPress на сегодняшний день. С более чем 400 тысячами продаж и средним рейтингом 4,75 плагин доказал свою эффективность и величие.

Revolution Slider: что делает плагин таким замечательным

Slider Revolution был разработан Themepunch. Этот плагин представляет собой конструктор для создания богатого динамического контента для веб-страниц. Акцент делается на «динамическом», так как он позволяет создавать захватывающие слайды, добавляя движения на страницы.

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

• слайдеры изображений и карусели
• слайдеры избранных постов
• ленты социальных сетей
• медиа галереи
• блоки героев и первые страницы

Причины, по которым вы должны использовать Slider Revolution на своем веб-сайте

Вы не ошибетесь с Slider Revolution. Комплексный плагин с удобными инструментами — идеальное решение для создания красивых слайдеров, и вот почему.

Связанный плагин

Сегодня почти каждая тема WordPress поставляется с плагином Slider Revolution. Обычно в пакет темы входит бесплатная версия плагина. Плагин в комплекте ограничен очень базовыми функциями, но тем не менее очень удобно получить тему вместе с конструктором слайдеров.

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

За расширенную лицензию придется заплатить около 150 долларов, а получить год техподдержки всего за 9 долларов.

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

Шаблоны

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

Просто импортируйте выбранный вами шаблон и сразу приступайте к созданию.

Кроме того, вы получите доступ к большой бесплатной библиотеке различных объектов, таких как значки шрифтов, фоновые изображения, прозрачные объекты PNG, SVG и другие. Вы можете использовать их и легко вставлять в свои слайды.

Визуальный редактор

Slider Revolution поставляется с потрясающим WYSIWYG-редактором, который упрощает создание и изменение шаблонов слайдеров. Многим владельцам веб-сайтов сложно писать сложные коды или нанимать для этой задачи отдельную команду. Благодаря редактору слайдеров вы можете сэкономить время и воспользоваться функцией перетаскивания для создания потрясающих слайдов.

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

Высокоскоростная производительность

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

Адаптивные макеты

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

Slider Revolution — это не просто слайдер. Плагин готов к адаптации, поэтому какие бы слайды вы ни создавали, вы можете быть уверены, что они будут оптимизированы для любого устройства, на котором они будут использоваться.

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

Настройка параметров

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

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

Дополнения Slider Revolution

Хотите сделать слайдеры более сложными и разнообразными с помощью эффектов перехода, анимации?

Вы готовы идти! Slider поддерживает различные типы контента, такие как сообщения в блогах и текущие сообщения, он позволяет вам использовать каналы социальных платформ, таких как Twitter, Facebook, Vimeo, YouTube и Instagram. Вы можете мгновенно добавлять ссылки, видео, изображения и текст. С помощью функции «Вариации» вы можете создать многофункциональный и насыщенный информацией слайд, который смогут использовать посетители.

Безопасность

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

Техническая поддержка

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

Источники контента

Плагин успешно справляется с созданием слайдеров для различных источников контента. Будь то продукт WooCommerce или обычный пост, у Slider Revolution есть инструменты.

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

Мы также должны отметить, что это доступно. Обычная лицензия обойдется вам в 26 долларов. Учитывая количество функций, которые вы получаете по цене, Slider Revolution — самый доступный плагин для слайдеров в отрасли.

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

Установка плагина и первичная настройка

Многие разработчики тем включают Slider Revolution в пакет тем.

Если вы приобрели одну из премиальных тем WordPress от StylemixThemes, вам не нужно устанавливать плагин вручную. Slider Revolution будет установлен автоматически при импорте демо.

Если в пакет используемой вами темы не входит плагин, вам необходимо скачать и установить его вручную. Чтобы получить копию Slider Revolution, перейдите по этой ссылке .

Вам нужно будет купить плагин. Войдите в свою учетную запись Envato и разместите покупку. После этого загрузите файл — выберите вариант загрузки «Только устанавливаемый файл WordPress».

Теперь вам нужно добавить новый плагин на ваш сайт. Перейдите в свою панель управления — Плагины > Добавить новый . После завершения установки активируйте плагин.

Поздравляем, у вас все готово, и вы можете приступить к созданию своего первого слайдера!

Как обновить Slider Revolution

Themepunch выпускает регулярные обновления плагина слайдера. Чтобы обновить его, откройте Slider Revolution на панели инструментов и перейдите на вкладку «Обновления». На этой странице вы можете найти небольшой раздел с заголовком «Обновления плагинов». Здесь указывается, какая версия плагина в данный момент установлена ​​на вашем сайте и какая версия доступна для обновления.

Кроме того, вы можете использовать стандартный способ и перейти в Панель инструментов > Обновления и оттуда установить новую версию плагина.

Слайдер Революция: начало работы

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

Например, вы можете создать модуль, предназначенный для работы в качестве слайдера, и он будет содержать слайды. Кроме того, вы можете создавать такие модули, как навигационные меню или заголовки, которые вообще не являются ползунками, но все равно будут содержать слайды. Причиной этого является то, что Slider Revolution изначально создавался как конструктор слайдеров, однако теперь он также используется как полноценный редактор веб-сайтов. Так что с его помощью вы сможете построить гораздо больше, чем просто слайды.

Связь между модулями, слайдами и слоями

Модули — это контейнеры для слайдов, которые являются контейнерами для слоев.

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

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

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

Как использовать Slider Revolution: глобальные настройки

Как мы уже упоминали, у Slider Revolution масса опций, и это не преувеличение. Именно поэтому перед тем, как приступить к сборке слайдера, рекомендуем сначала просмотреть глобальные настройки и изучить основные принципы работы с плагином.

Если вы нажмете на Slider Revolution на панели инструментов, вы сможете открыть экран настройки плагина.

Экран настройки

В верхней части экрана вы можете найти вкладку со следующими параметрами:

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

На данном этапе мы будем работать только с двумя из них: Modules — для создания нового и Globals — для просмотра глобальных настроек плагина.

Глобальные настройки

Начнем с глобальных . Глобальные настройки в основном разделены на несколько разделов:

• Общий
• Точки останова сетки макета по умолчанию
• Шрифты
• Разнообразный

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

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

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

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

• Стандартные настольные мониторы имеют ширину 1920 пикселей.
• Ноутбуки, включая все ноутбуки, MacBook и горизонтально ориентированные планшеты, имеют ширину около 1600 пикселей.
• Вертикально ориентированные планшеты имеют ширину не более 778px (на базе iPad).
• И мобильные устройства. Это важная часть, так как в настоящее время более половины всего интернет-трафика генерируется через мобильные устройства, и будет неудовлетворительно, если пользователи не смогут правильно видеть слайдеры на вашем сайте. Однако это может сбить с толку, и причина этого в том, что современные смартфоны имеют абсолютно разные размеры. Мы предлагаем вам использовать номер, не выше 500px.

Второе, что вы, возможно, захотите контролировать, — это доступ к ползунку. Параметр « Разрешение » позволяет запретить доступ к плагину для других пользователей, кроме администраторов и редакторов.

Теперь вы можете приступить к созданию слайдеров! Есть три варианта, которые вы можете использовать. Вы можете начать с нуля и создать новый слайдер, вы можете экспортировать файл из шаблонов Slider Revolution или импортировать образцы слайдеров, включенные в вашу тему.

В нашей статье мы рассмотрим первый вариант и создадим новый слайдер с нуля. Это позволит нам изучить больше возможностей плагина.

Создание нового слайдера

Теперь, когда мы закончили с некоторыми основными настройками, мы можем приступить к созданию нового слайда. Откройте настройки Slider Revolution и нажмите « Новый пустой модуль».

Вам будет предложено пройти краткое руководство. Нажмите «Начать руководство», если хотите пройти небольшой урок. Или выйдите из руководства, чтобы пропустить этот шаг.

Ваш экран будет разделен на несколько областей: слева от вас находится рамка, в которой отображается весь контент, справа — это рабочее пространство с разделами и настройками.

Общие настройки

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

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

После этого мы можем настроить тип и высоту и ширину области слоя рабочего стола. Эти настройки находятся на вкладке «Макет».

Для типа у вас есть три варианта на выбор:

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

Следующим параметром, который нам нужно указать, является размер. Также доступны три варианта:

Авто — это параметр по умолчанию, который растягивает ползунок до ширины основного контейнера, как определено вашей темой WordPress.

Полная ширина — ползунок на всю ширину растягивается слева направо (вам все равно нужно определить высоту).

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

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

Изменить размер настроек

Классическое или линейное изменение размера гарантирует, что ваш слайдер сожмется соответствующим образом после настройки параметров основного экрана (например, слайдер 1000x400px сожмется до слайдера 500x200px со шрифтами, изображениями и другими элементами слайдера).

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

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

Отзывчивость слайдов

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

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

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

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

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

Подробный обзор вариантов

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

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

1. Общие параметры

Мы уже коснулись некоторых элементов из общих параметров, таких как заголовок и макет. Однако, помимо этого, есть и другие вещи, которые вам нужно настроить.

В целом, общие параметры позволяют настроить следующее:

Заголовок — указать название слайдера.
Макет — выберите тип ползунка (слайдер, сцена или карусель) и размер (автоматический, во всю ширину или во весь экран). Это помогает редактировать ширину и высоту области слоя, положение вашего модуля, цвет фона или изображение по умолчанию и многое другое.
Контент — определяет способ добавления контента в слайдер. Вы можете выбрать один из 9 источников контента.

• Defaults — здесь мы предлагаем сконцентрироваться на одном важном параметре — Slide Duration (продолжительность каждого слайда).
• Общие — этот раздел включает в себя настройки слайд-шоу для автоповорота, остановки при наведении, зацикливания слайдов и выбора назначенного первого слайда. Здесь также вы можете скрыть или отключить свой ползунок на мобильном устройстве или при указанной ширине пикселей.
• При прокрутке — позволяет пользователям выбирать эффекты прокрутки, такие как параллакс, трехмерная глубина, временная шкала, затухание, размытие, оттенки серого и другие. Все эффекты идут с настраиваемыми настройками.
• Spinner — или предварительный загрузчик, и у плагина есть 15 вариантов спиннера на выбор.
• Дополнительные параметры позволяют включить отложенную загрузку, выбрать резервное изображение или упростить слайдер в старых браузерах.
• CSS/jQuery — здесь вы можете добавить свой собственный код к слайдерам. Обратите внимание, что его лучше использовать профессионалам или пользователям, знакомым с концепцией программирования и кодирования.
• Как модальный — этот конкретный параметр необходим в том случае, если вы хотите создать слайдер, который отображается как всплывающее окно или лайтбокс, и он предоставляет вам параметры положения слайдера, цвет обложки и шорткод для использования при вставке вашего модального слайдера на страницы.
• Скин — скин представляет собой предустановку, которую вы можете создавать и назначать текстовым слоям (задает цвет выделения, заголовка, текста содержимого).

Аддоны — здесь вы найдете аддоны (обратите внимание — аддоны доступны только в том случае, если вы приобрели собственную лицензию на слайдер).

2. Параметры навигации

Если вы планируете включить более одного слайда, параметры навигации помогут вам добавить к слайдеру инструменты навигации, такие как маркеры, стрелки и кнопки.

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

Элементы навигации включают в себя:

• Прогресс — индикатор выполнения или кружок, отображающий прогресс текущего слайда.
• Стрелки — облегчите посетителям переход по вашим слайдам.
• Маркеры — 14 стилей навигационных точек для добавления на слайд.
• Вкладки — очень полезно для ползунков контента, где необходима навигация по вкладкам.
• Thumbs — требуется для отображения уменьшенного изображения в качестве опции навигации. Доступно 5 вариантов.
• Предыдущий размер — указывает размер изображения для предварительного просмотра.
• Touch — включает параметры прокрутки блока, скорости и направления.
• Клавиатура — вы можете включить навигацию с помощью клавиатуры (рекомендуется для специальных возможностей).
• Мышь — включает управление мышью, например функцию карусели или обратную прокрутку.
• Nav Editor — этот раздел предназначен для настройки стрелок, маркеров, вкладок или миниатюр с помощью собственного кода.

3. Параметры слайда

Следующая часть настроек связана с параметрами слайда.

• Фон: выберите фон для слайда. Выберите прозрачный, цветной (можно добавить градиент), изображение, внешнее изображение или видео (YouTube, видео или HTML5).
• Миниатюра: укажите миниатюру, видимую администратору, и миниатюру, используемую для навигации.
• Анимация: выберите анимацию перехода для ваших слайдов.
• Фильтры — 22 различных фильтра для добавления к слайдам.
• Прогресс — позволяет настроить длину слайда, паузу и видимость на слайде.
• Правила публикации — контролируйте, будет ли ваш слайд опубликован или не опубликован.
• Теги и ссылка — помогает добавить пользовательский класс, идентификатор и HTML-данные для вашего слайда, а также ссылку.
• Параметры — добавьте до 10 настраиваемых параметров для использования в слайдах и навигации.
• Слои циклов — управляйте настройками циклов, если слайдер имеет только один слайд.
• При прокрутке — настройте эффекты параллакса и прокрутки для каждого слайда.

Добавление новых слайдов

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

Вы можете загрузить изображение со своего компьютера или использовать внешний источник (добавив ссылку). Кроме того, вы можете установить цвет в качестве фона вместо изображения. Это можно сделать довольно легко.

Просто выберите параметр «Цветной» в раскрывающемся списке «Тип» на панели «Источник», а затем нажмите кнопку «Цвет фона», чтобы выбрать цвет. Если вы хотите использовать видео, просто добавьте источник.

Добавление нового слоя на слайд

В верхней части экрана вы найдете опцию +Добавить слой . Используйте его, чтобы добавить новый слой к слайду. Есть 8 различных вариантов.

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

Параметры слоя: как использовать

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

Если вы хотите добавить слой изображения на слайд, просто нажмите «Изображение» в раскрывающемся списке « Добавить слой ». Затем загрузите желаемое изображение.

Рядом с рамкой вы найдете различные параметры слоя (содержимое, стиль, размер и положение и т. д.).

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

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

Следующий параметр — интервал . Интервал помогает нам перемещать слой сверху вниз, слева направо, снизу вверх и слева направо. Они обозначены буквой «М».

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

После этого вы можете установить положение с помощью параметров «Смещение по вертикали» в параметрах «Выровненное положение». Поиграйте с параметрами X и Y, чтобы переместить слой на слайде.

Дополнительные параметры слоя

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

Параметры анимации слоя

Анимация — основной вариант Slider Revolution. Основная идея плагина заключается в том, чтобы добавить на ваш сайт анимированные элементы вместо статичных, стандартных визуальных элементов.

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

Есть две строки для параметров появления и выхода: IN и OUT.

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

Раздел ниже используется для Animation Duration, Animation Easing и для определения анимации Start . Параметр « Продолжительность » определяет, сколько времени потребуется для завершения анимации, параметр «Начало » определяет продолжительность времени, по истечении которого анимация начнется после загрузки слайда. Ослабление определяет скорость, с которой будет развиваться анимация.

Хронология анимации

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

Начало кадра по умолчанию для каждого слоя установлено на 0 миллисекунд, что означает, что слои появятся на экране через 0 миллисекунд после загрузки. Продолжительность появления обычно устанавливается на 3 секунды, что означает, что слой становится полностью видимым через 3 секунды. Чтобы изменить параметры, выберите слой и отредактируйте его, указав другое значение.  

Убедитесь, что вы установили разные значения для разных слоев, чтобы они не отображались сразу и выглядели беспорядочно.

Теперь давайте подробнее рассмотрим параметры временной шкалы.

1. Просмотр списка

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

2. Продолжительность временной шкалы
Общая продолжительность временной шкалы определяется в разделе «Общие параметры модуля» > «По умолчанию». Кроме того, его можно настроить индивидуально в разделе «Параметры слайда» > «Прогресс».

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

3. Предварительный просмотр временной шкалы

Чтобы просмотреть временную шкалу, вам нужно щелкнуть значок «Воспроизвести» или просто перетащить незанятый блок.

4. Переименуйте слои

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

5. Z-индекс слоев/порядок наложения

Чтобы установить порядок z-index/stacking, вам просто нужно перетащить слои на временной шкале.

6. Анимации

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

Перетащите блок анимации, чтобы настроить начальную точку анимации на временной шкале. И отредактируйте продолжительность анимации, перетащив конечную точку блока

Параметры цикла слоя

Вкладка «Цикл» позволяет создавать циклические анимации. Вы можете выбрать тип анимации, определить скорость цикла и замедление, а также установить время начала и окончания цикла.

Есть 8 типов, которые вы можете выбрать: пользовательские, маятниковые петли, петли эффектов, волна, покачивания, вращение, скольжение и наведение и импульс. Каждая циклическая анимация имеет свой собственный набор параметров.

Маятник заставляет ваш слой раскачиваться из стороны в сторону. Среди параметров, которые вы можете настроить, есть конечная и начальная степень — они определяют градусы, между которыми будет происходить анимация, и начальная точка X и Y — этот параметр определяет точку оси, из которой слой будет вращаться, вы можете указать его в проценты.

Циклы эффектов позволяют выбрать один из нескольких вариантов — «Оттенки серого», «Мигание», «Флэттерн» и «Подсветка». Все эффекты выглядят по-разному, поэтому мы рекомендуем вам просмотреть каждый вариант, чтобы выбрать, какой из них лучше для вас.

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

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

Цикл вращения заставляет ваш слой вращаться вокруг заданной точки оси. Слой будет вращаться и делать полный круг, если вы выберете первый элемент из раскрывающегося списка «Вращение» — элемент «Повернуть».

Чтобы заставить ваш слой двигаться слева направо, справа налево, вверх вниз, по диагонали, вы можете использовать анимацию Slide and Hover. Вы можете установить начальную и конечную позицию для анимации.

Анимация Pulse заставляет ваш слой постоянно увеличивать и уменьшать масштаб. Укажите начало и конец масштабирования. Значения по умолчанию здесь равны 1 как для начала, так и для конца. Это означает, что размер слоя останется на 100%. Другими словами, он не будет анимироваться. Если вы введете 0,5 для начала масштабирования, ваш слой будет начинаться с 50% своего размера и увеличиваться до 100% своего размера, затем обратно до 50% и т. д.

Параметры наведения слоя

Hover-эффекты — основа хорошего UX. Эффекты наведения обычно указывают на то, что действие требуется или выполняется, тем более, что этот метод активно используется со слайдерами. С Slider Revolution вы можете изменять слои, тексты и изображения при наведении.

Добавление эффектов наведения в Slider Revolution

Во-первых, вам нужно включить наведение слоя. Выберите слой, к которому вы хотите добавить эффект, и нажмите «Наведите курсор» в разделе «Параметры слоя». Нажмите «Включено», чтобы включить его.

В конце вы найдете все параметры, необходимые для настройки поведения слоя при наведении. Если оставить все как есть, слой не покажет никаких изменений.

Настройки наведения

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

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

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

Анимация при наведении

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

Кроме того, вы можете установить плавность перехода. У вас есть несколько вариантов на выбор.

Фильтр

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

Стиль

Существует также часть «Стиль», где вы можете настроить цвет фона и настроить границу, а именно изменить их цвет и выбрать стиль границы.

Параметры слоя прокрутки

Параметры при прокрутке позволяют слайду двигаться при прокрутке мыши. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Как создать эффект параллакса с помощью Slider Revolution

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

Что такое параллакс?

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

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

Создание параллакса в Slider Revolution

Сначала включите параллакс . Перейдите в раздел « Общие параметры модуля» > «При прокрутке» > «Функции на основе прокрутки» > «Параллакс» и установите переключатель «Параллакс включен» в положение « Вкл .».

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

Добавление параллакса к фоновым изображениям

Чтобы добавить эффект параллакса к фоновому изображению, перейдите в « Параметры слайда» > «При прокрутке» > «Параметры параллакса и 3D » и выберите предпочтительную глубину из раскрывающегося списка.

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

Добавление параллакса к слоям

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

Выберите свой слой, перейдите на вкладку « Параметры слоя» > «При прокрутке» > «Параллакс и 3D» и выберите нужный уровень глубины.

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

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

Добавление слоя кнопки

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

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

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

Выбрав стиль, вы можете изменить дополнительные настройки и настроить его внешний вид. Все настройки находятся на вкладке «Параметры слоя».

Вы можете изменить первоначальный вид кнопки, изменить текст, изменить ее отображение при наведении и настроить анимацию.

Как сделать слайдер отзывчивым

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

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

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

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

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

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

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

Добавление слайдера на страницу

Вы проделали хорошую работу, и теперь пришло время посмотреть, как ваш слайдер выглядит на странице. Для этого используйте шорткод Slider Revolution, который вы создали ранее. Этот шорткод можно найти на вкладке «Заголовок» в разделе «Общие параметры».

Или если вы откроете Slider Revolution с панели инструментов. Найдите текущий модуль и выберите опцию Embed.

Во всплывающем окне выберите вариант «Для страниц и сообщений» и скопируйте шорткод.

Шорткод должен выглядеть как [rev_slider alias="title"][/rev_slider] с "названием", основанным на псевдониме, который вы дали слайдеру.

Отображение слайдера с Elementor

Использование метода шорткода для отображения слайдера на странице достаточно просто. Однако есть способ, который может быть еще проще. Все слайдеры, которые вы создаете с помощью плагина Slider Revolution, можно вставить на страницу с помощью виджета Elementor. Выберите страницу, на которой вы хотите отобразить слайдер, и откройте ее в редакторе Elementor. Затем просто перетащите элемент на рабочую рамку. На панели виджетов найдите виджет Slider Revolution 6 и добавьте его на страницу. Когда вы перетаскиваете виджет, вам нужно будет выбрать ползунок, который вы хотите использовать.

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

Как экспортировать слайдеры

Чтобы экспортировать слайдер, перейдите в Slider Revolution, щелкнув соответствующую вкладку в меню панели инструментов. Там будут отображаться все слайдеры, которые вы импортировали или создали.

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

Вы увидите диалоговое окно подтверждения, которое сообщит вам, что экспорт может занять некоторое время. Нажмите «Да, экспортировать слайдер», и загрузка начнется. Когда загрузка будет завершена, у вас будет ZIP-файл слайдера.

Заключить

Почти все темы, разработанные StylemixThemes, включают в себя плагин Slider Revolution. Нам нравится это мощное программное обеспечение, которое дает нам возможность делать веб-сайты более привлекательными, привлекательными и интерактивными.

Мы надеемся, что наше руководство помогло лучше понять процесс создания слайдера с помощью этого замечательного плагина. Если вам нужна дополнительная информация, перейдите на главную страницу Slider Revolution.