Slider-Revolution-novye-izmeneyiya
Slider Revolution — новые изменения и настройка слайдера
14 июня 2020
Slider-Revolution-novye-izmeneyiya
Slider Revolution — новые изменения и настройка слайдера
14 июня 2020
Показать все

Slider Revolution v 6.2.17 — создание и настройка слайдера

В этом посте, как я и обещал, досконально рассмотрим все этапы создания и настройки слайдера для 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.

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

Тип модуля — Какой тип модуля вы хотели бы создать?

Tip_module

  1. Слайдер — ползунок или Классический.
    Тип модуля, выбранный и установленный у меня на сайте. Его и будем рассматривать.
    Слайдер состоит из нескольких слайдов. Каждый слайд имеет свой контент и может перемещаться с различными дополнительными элементами навигации.
  2. Сцена — место действия.
    Сцена — это, по сути, слайдер с одним слайдом и без элементов навигации.
    Лучше всего использовать для модулей контента, которые не требуют дополнительной глубины. Например, шапка сайта.
  3. Карусель.
    Карусель — это слайдер с несколькими слайдами, которые видны одновременно.
    Существует множество вариантов настройки карусели. Часто используется на сайтах интернет-магазинов.

Размеры модуля — Какой размер должен иметь модуль?

Razmer_module

  1. Авто.
    Лучше всего подходит для Классического слайдера.
    Размеры модуля будут автоматически отрегулированы под ширину окружающего контейнера (то есть, места расположения на сайте), сохраняя свое соотношение сторон (фоновых изображений).
  2. Полная ширина.
    Модуль всегда будет охватывать полную ширину веб-страницы.
    Высота может быть гибкой, в зависимости от других настроек (масштабироваться).
  3. Полноэкранный.
    Модуль всегда будет соответствовать всей площади на веб-странице
    (обычно используется на сайтах фото-пейджеров).

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

Адаптивность

  1. Классический, линейное изменение размера.
    Размеры слоев изменяются линейно, так же, как изменяется размер модуля.
    Вам нужно настроить только один размер экрана (Настольный ПК).
  2. Интеллектуальное наследование.
    Эти настройки я выбирал для своего слайдера.
    Четыре пользовательских размера устройств активируются, и размер/положение слоев автоматически рассчитываются на основе размера Настольного компьютера.
    Вы можете сделать индивидуальные настройки для слоев всех размеров адаптивных устройств (ноутбук, планшет, смартфон).
  3. Ручные нестандартные размеры.
    Четыре пользовательских размера устройств активированы, и слои должны быть вручную отрегулированы, в соответствии с их размерами устройства.

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

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

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

Общие параметры Модуля.

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

Name_module

Вкладка Макет. Настройки выставляются автоматически, согласно Базовым.
Если планируете разместить слайдер на Главной странице — на всю ширину сайта, ниже корректируем данные пункта Размер Области Слоя.
Для Настольных компьютеров меняем ширину и высоту, соответственно фоновых изображений ( у меня, ширина W = 1920px, высота H = 700px).

Razmer_sloia

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

Для всех остальных версий — ноутбука и планшета, размеры масштабируются. По желанию, можно и их активировать и так же менять расположение слоев.
Внизу — Сохранить изменения.

Остальные пункты Общих параметров:

Контент — источник Пользовательский.
По умолчанию — длительность слайда оставляем 9000 м/с (9 секунд).
Общие — активируем Автоповорот слайд-шоу и Остановка при наведении.
Ниже, в пункте Первый Слайд, активируем Другое и выставляем #=1.
Слайдер будет запускаться с первого слайда.
Все остальное, пока, по-умолчанию. Сохраняем настройки.

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

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

Progress_indicator

Стиль — Горизонтальная линия;
Выравнивание — Верх слайдера;
Толщина линии — достаточно и 2px (по умолчанию 5px).

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

Вкладка Сенсорный. Включаем Мобильный свайп, Размах рабочего стола и Блок
прокрутки (по желанию). Swipe Dir — горизонтальная.

Клавиатуру и Мышь активирует, при условии использования в навигации Стрелок
и Точек.

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

Меню Сетки Слоев редактора слайдера.

В верхнем меню Сетки Слоев, наводим мышкой на Слайд. В выпавшем меню, название нового первого слайда (#1 New Slide). Позже, заменится на свой.

Dobavlenie_slide

Выбираем Добавить слайд — Массовое добавление Слайдов.
В библиотеке Медиафайлов WordPres, при нажатой клавише Ctrl, выделяем, загруженные заранее, фоновые изображения слайдов (у меня 3 шт.). В той последовательности, которая нам необходима (1, 2, 3 слайды). Нажимаем Установить.

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

Создание и настройка Слайда №1.

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

В верхнем меню Слайд — наводим мышь и выбираем #1 New Slide, первый, который подгрузился (обычным перетаскиванием их можно менять местами).

Загружаем эмблему Логотипа сайта.

В следующем пункте, справа, Добавить слой — Изображение — Библиотека WordPress. Выбираем изображение — установить.

Dobavit_sloy

В правом меню Параметров, активируется 4-й Пункт, Вид редактора — Параметры Слоя.
Размер & Позиция — центр/верх, X = 8px, Y = 17px.
Размер изображения — ширина W = 170px, высота H = 155px.
Адаптивный Вид — все пункты активированы (здесь и в последующих слоях).

Razmer-end-posicion

Анимация. Ключевые Кадры — Аним К.

Animacia_vhod_byhod_sloia
Вход слоя 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. Выравнивание — слева.

Sloy_text

Стиль. Высота шрифта = 48px, высота строки = 25px,
Толщина шрифта & Стиль = 500 Medium.
Шрифт — Roboto, цвет — белый.

Style_text

Размер & Позиция — слева/верх, 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.

Pozicia_sloy_tezt

Анимация. Ключевые Кадры — Аним К.
Вход слоя IN — выбираем Slide Transitions — Long Slide from Left (появление слева).
Выход слоя OUT — выбираем Slide Transitions — Long Slide to Left (уход влево).
Основы (Time Out) — Длительность 500м/с, Начало 2400м/с.

Osnovy_time_out

Третий текстовой файл — Самостоятельно!

Выравнивание — слева.
Стиль. Высота шрифта = 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м/с.

Deystvie_ssylki

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 и не забываете нажать на кнопку Поделиться в социальных сетях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *