Slider Revolution — новые изменения и настройка слайдера
14 июня 2020В этом посте, как я и обещал, досконально рассмотрим все этапы создания и настройки слайдера для WordPress, плагином Slider Revolution новой Версии 6.2.17.
В разделе Centr-Sit-Info Уровень Standart, да и в предыдущей статье блога, Slider Revolution — новые изменения и настройка слайдера, подробно разобран интерфейс настроек и создание слайдера в пятой версии 5.4.8.3.
Это одна из самых стабильных предшествующих версий данного плагина. Советую изучить, прежде чем приступать к шестой. Ибо там весь процесс Общих настроек плагина и подготовки исходных материалов.
И так, приступим.
Подготовив все исходники слайдов: фоновые изображения соответствующих размеров (у меня по ширине W = 1920px, высота H = 700px), рисунки дополнительных слоев (логотипы, фото, изображения), тексты призывов, ссылки целевых страниц, приступаем к созданию слайдера.
Все изображения, оптимизированные под нужный размер и вес, загружаем в Библиотеку медиа-файлов WordPress.
Страница Обзора Slider Revolution.
Страница Обзора Slider Revolution — это первая страница, которая откроется после входа в настройки плагина.
Нажимаем на вкладку Новый пустой модуль. Во всплывающих окнах — первичный выбор настроек и подсказок:
Окно Базовой конфигурации модуля Slider Revolution 6.
Нажимаем на кнопку Начало руководства.
В каждом последующем окне будет предложено три варианта. Вам нужно будет выбрать свой, наиболее подходящий для Вашего сайта и поставленных задач.
Тип модуля — Какой тип модуля вы хотели бы создать?
- Слайдер — ползунок или Классический.
Тип модуля, выбранный и установленный у меня на сайте. Его и будем рассматривать.
Слайдер состоит из нескольких слайдов. Каждый слайд имеет свой контент и может перемещаться с различными дополнительными элементами навигации. - Сцена — место действия.
Сцена — это, по сути, слайдер с одним слайдом и без элементов навигации.
Лучше всего использовать для модулей контента, которые не требуют дополнительной глубины. Например, шапка сайта. - Карусель.
Карусель — это слайдер с несколькими слайдами, которые видны одновременно.
Существует множество вариантов настройки карусели. Часто используется на сайтах интернет-магазинов.
Размеры модуля — Какой размер должен иметь модуль?
- Авто.
Лучше всего подходит для Классического слайдера.
Размеры модуля будут автоматически отрегулированы под ширину окружающего контейнера (то есть, места расположения на сайте), сохраняя свое соотношение сторон (фоновых изображений). - Полная ширина.
Модуль всегда будет охватывать полную ширину веб-страницы.
Высота может быть гибкой, в зависимости от других настроек (масштабироваться). - Полноэкранный.
Модуль всегда будет соответствовать всей площади на веб-странице
(обычно используется на сайтах фото-пейджеров).
Адаптивность — Как бы вы хотели изменить свой контент?
- Классический, линейное изменение размера.
Размеры слоев изменяются линейно, так же, как изменяется размер модуля.
Вам нужно настроить только один размер экрана (Настольный ПК). - Интеллектуальное наследование.
Эти настройки я выбирал для своего слайдера.
Четыре пользовательских размера устройств активируются, и размер/положение слоев автоматически рассчитываются на основе размера Настольного компьютера.
Вы можете сделать индивидуальные настройки для слоев всех размеров адаптивных устройств (ноутбук, планшет, смартфон). - Ручные нестандартные размеры.
Четыре пользовательских размера устройств активированы, и слои должны быть вручную отрегулированы, в соответствии с их размерами устройства.
Сделав первоначальный выбор настроек, переходим к редактору. Сохраняем настройки.
Визуальный Редактор настроек слайдера.
На открывшейся странице Визуального Редактора настроек слайдера, в Окне Сетки слоев, мы видим пустой слайд, автоматически созданный программой.
Общие параметры Модуля.
В правом меню — Общие параметры Модуля, вкладка Название. Можно изменить название слайдера и его Алиас, с помощью которых формируется шорт-код слайдера.
Вкладка Макет. Настройки выставляются автоматически, согласно Базовым.
Если планируете разместить слайдер на Главной странице — на всю ширину сайта, ниже корректируем данные пункта Размер Области Слоя.
Для Настольных компьютеров меняем ширину и высоту, соответственно фоновых изображений ( у меня, ширина W = 1920px, высота H = 700px).
Активируем настройки для телефонов. В процессе создания слайдов, адаптивные размеры каждого слоя и их расположение изменяются вручную.
Для всех остальных версий — ноутбука и планшета, размеры масштабируются. По желанию, можно и их активировать и так же менять расположение слоев.
Внизу — Сохранить изменения.
Остальные пункты Общих параметров:
Контент — источник Пользовательский.
По умолчанию — длительность слайда оставляем 9000 м/с (9 секунд).
Общие — активируем Автоповорот слайд-шоу и Остановка при наведении.
Ниже, в пункте Первый Слайд, активируем Другое и выставляем #=1.
Слайдер будет запускаться с первого слайда.
Все остальное, пока, по-умолчанию. Сохраняем настройки.
Параметры навигации.
В общих параметрах переходим в меню Параметры навигации.
Во вкладке Прогресс, активируем Индикатор Прогресса, этого будет достаточно, чтобы запустить смену слайдов. Позже, можно будет изменить на Стрелки, или добавить другие варианты.
Стиль — Горизонтальная линия;
Выравнивание — Верх слайдера;
Толщина линии — достаточно и 2px (по умолчанию 5px).
После изменений настроек каждой вкладки, не забывайте сохранять изменения.
Вкладка Сенсорный. Включаем Мобильный свайп, Размах рабочего стола и Блок
прокрутки (по желанию). Swipe Dir — горизонтальная.
Клавиатуру и Мышь активирует, при условии использования в навигации Стрелок
и Точек.
Данных изменений в Параметрах Модуля будет достаточно, чтобы приступить к созданию слайдера. По необходимости, в процессе работы можно вносить изменения.
Меню Сетки Слоев редактора слайдера.
В верхнем меню Сетки Слоев, наводим мышкой на Слайд. В выпавшем меню, название нового первого слайда (#1 New Slide). Позже, заменится на свой.
Выбираем Добавить слайд — Массовое добавление Слайдов.
В библиотеке Медиафайлов WordPres, при нажатой клавише Ctrl, выделяем, загруженные заранее, фоновые изображения слайдов (у меня 3 шт.). В той последовательности, которая нам необходима (1, 2, 3 слайды). Нажимаем Установить.
Слайды появятся в меню Слайд, сетки слоев. Пустой слайд нужно удалить. Первый, из загруженных, займет его место. Обязательно сохраняйте настройки.
Создание и настройка Слайда №1.
Я приведу пример создания и настройки реального слайдера, который расположен на Главной странице этого сайта.
В верхнем меню Слайд — наводим мышь и выбираем #1 New Slide, первый, который подгрузился (обычным перетаскиванием их можно менять местами).
Загружаем эмблему Логотипа сайта.
В следующем пункте, справа, Добавить слой — Изображение — Библиотека WordPress. Выбираем изображение — установить.
В правом меню Параметров, активируется 4-й Пункт, Вид редактора — Параметры Слоя.
Размер & Позиция — центр/верх, X = 8px, Y = 17px.
Размер изображения — ширина W = 170px, высота H = 155px.
Адаптивный Вид — все пункты активированы (здесь и в последующих слоях).
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Top (сверху).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Top (вверх).
Основы (Time Out) — Длительность 300м/с, Начало 500 м/с.
Сохраняем изменения.
Следующие два изображения — это тексты, обработанные в Photoshop, в формате PNG.
Первый рисунок.
Добавить слой — выбираем изображение «Учебный раздел» из библиотеки медиа-файлов.
Размер & Позиция — центр/верх, X = -325px, Y = 53px.
Размер изображения — ширина W = 510px, высота H = 80px.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Left (появление слева).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Left (уход в лево).
Основы (Time Out) — Длительность 500м/с, Начало 900 м/с.
Учитываем время появления каждого последующего слоя.
Второй рисунок.
Добавляем слой-изображение «Centr-Sit-Info».
Размер & Позиция — центр/верх, X = 305px, Y = 54px.
Размер изображения — ширина W = 510px, высота H = 80px.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Right (появление справа).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Right (уход в право).
Основы (Time Out) — Длительность 500м/с, Начало 1400м/с.
Добавляем новый Слой — Текст.
В Параметрах слоя — Контент, вписываем нужный нам текст — Премиум-темы для WordPress. Выравнивание — слева.
Стиль. Высота шрифта = 48px, высота строки = 25px,
Толщина шрифта & Стиль = 500 Medium.
Шрифт — Roboto, цвет — белый.
Размер & Позиция — слева/верх, X = 300px, Y = 198px.
Размер изображения — ширина W = auto, высота H = auto.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Left (появление слева).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Left (уход влево).
Основы (Time Out) — Длительность 500м/с, Начало 1900м/с.
Следующий текстовой файл — Профессиональные сайты.
Выравнивание — слева.
Стиль. Высота шрифта = 48px, высота строки = 25px,
Толщина шрифта & Стиль = 500 Medium.
Шрифт — Roboto, цвет — белый.
Размер & Позиция — слева/верх, X = 300px, Y = 270px.
Размер изображения — ширина W = auto, высота H = auto.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Left (появление слева).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Left (уход влево).
Основы (Time Out) — Длительность 500м/с, Начало 2400м/с.
Третий текстовой файл — Самостоятельно!
Выравнивание — слева.
Стиль. Высота шрифта = 48px, высота строки = 25px,
Толщина шрифта & Стиль = 500 Medium.
Шрифт — Roboto, цвет — белый.
Размер & Позиция — слева/верх, X = 300px, Y = 330px.
Размер изображения — ширина W = auto, высота H = auto.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Left (появление слева).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Left (уход влево).
Основы (Time Out) — Длительность 500м/с, Начало 2900м/с.
Сгруппированное изображение ноутбука и планшета.
Добавляем Слой тем же путем, что и предыдущие. Рисунок в формате PNG.
Размер & Позиция — центр/верх, X = 250px, Y = 136px.
Размер изображения — ширина W = 825px, высота H = 550px.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Right (появление справа).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Right (уход вправо).
Основы (Time Out) — Длительность 500м/с, Начало 3400м/с.
Заключительный элемент слайда — Кнопка — Узнать больше.
Добавить Слой — Кнопка. В новом окне выбираем ее размер и конфигурацию.
В Параметрах слоя — Контент, вписываем текст кнопки, выравнивание — по средине.
Стиль. Высота шрифта = 30px, высота строки = 60px,
Толщина шрифта & Стиль = 500 Medium.
Шрифт — Roboto, цвет — белый.
Если необходимо, подбираем цвет самой кнопки.
Размер & Позиция — центр/верх, X = -150px, Y = 420px.
Размер изображения — ширина W = auto, высота H = auto.
Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Rotations — Rotate in from Botton v2 (появление от зрителя).
Выход слоя OUT — выбираем Rotations — Rotate Out to Botton v2 (уход на зрителя).
Основы (Time Out) — Длительность 500м/с, Начало 3900м/с.
Actions — действие кнопки. В новом окне выбираем — Простая ссылка.
После этого, в строке — URL ссылки, вставляем ссылку на страницу (сайт), которая должна открыться при нажатии на кнопку.
Ниже, в строке — Целевая страница, выбираем — В новом окне (вкладке).
Строка Следовать — Перейти по ссылке.
Теперь окно можно закрыть и сохранить изменения в слайдере.
Вам в помощь 1-й видео-урок по настройке Slider Revolution v 6.2.17 из раздела Centr-Sit-Info Уровень Profi-bizblog:
На этом создание и настройка первого слайда закончена. Продолжение смотрите в Учебном разделе Centr-Sit-Info Уровень Profi-bizblog.
Регистрируйтесь и изучайте дальнейшие настройки слайдера плагином Slider Revolution 6-й версии. В новой версии плагина, разработчики внедрили много скрытых интересных фишек.
Подписывайтесь на новости Учебного раздела Centr-Sit-Info и не забываете нажать на кнопку Поделиться в социальных сетях.