Slider Revolution — один из самых популярных конструкторов WordPress для создания слайдеров любых видов:
Более 200 шаблонов, 2500+ изображений, видео и иконок. В наличии 100+ готовых Слоев и Анимации, больше 25 Аддонов-дополнений с различными визуальными эффектами.
И все это с помощью одного небольшого плагина для WordPress — Slider Revolution. Согласитесь — это впечатляет. Хотите иметь такой инструмент в своем арсенале?
Да, этот плагин можно установить на любой шаблон для WordPress. Но, как всегда, есть свои ограничения. Чтобы использовать по максимуму все возможности и инструменты Slider Revolution, необходимо устанавливать и подходящую Тему-шаблон на свой сайт.
В настройках таких шаблонов должны присутствовать возможности создания и редактирования Главной (статической) страницы. Создания отдельных страниц сайта, как одностраничных сайтов — подписных и продающих страниц.
Конечно, можно подобрать что-то из депозитария WordPress (помимо бесплатных, там есть и платные варианты). Но все же, исходя из своего опыта, могу сказать, что лучше использовать Премиум-темы, в которых уже интегрирован этот плагин — идет в комплекте с темой.
И очень важный аспект для русскоязычной аудитории — это уже встроенный перевод на русский язык, не только самих Тем-шаблонов, но и плагинов.
А, как сами понимаете, зарубежные разработчики не всегда предоставляют такую возможность. Не говоря уже об обучающих материалах.
Видео из раздела Centr-Sit-Info Уровень Standart:
Если хотите быстро научиться создавать профессиональные сайты, не только для себя, но и предлагать свои услуги другим, переходите в раздел Centr-Sit-Info данного сайта.
На выбор есть два варианта:
Все дистрибутивы переведены на русский язык и возможность их обновления. Во всех темах разделов изучается настройка плагина Slider Revolution.
А теперь о самом главном — об новых изменениях, которые произошли в результате обновления плагина Slider Revolution.
Любое очередное обновление плагина Slider Revolution несет в себе и новые изменения в его функционале, вносятся дополнения, исправляются ошибки с безопасностью, улучшается его производительность.
Но с выходом новой Версии 6.0.0 (8 июля 2019 г.), произошли уже новые, кардинальные изменения в настройках самого плагина. Изменился его интерфейс — следовательно приобрели новый вид, а где-то и дополнились опции настроек самих слайдеров.
Можно сравнить интерфейс настроек слайдера плагина Версии 5.4.8.3 (самая стабильная, последняя 5-версия плагина).
В 5-й версии Slider Revolution каждая категория настроек сгруппирована на отдельных страницах:
В зависимости от пути выбора создания слайдера, раскрывается последующий ряд страниц настроек уже самого слайдера или отдельного слайда:
Как видим, по мере создания слайдера, используется своя отдельная страница, с определенными настройками.
С одной стороны, может показаться, что плагин сильно перегружен. Но, в тоже время, существует определенная иерархия последовательности всех настроек при создании слайдера.
Интуитивно понятный интерфейс каждой страницы.
По мере существования плагина Slider Revolution, досконально отработан его перевод на русский язык, вплоть до всплывающих подсказок при настройке.
А это немаловажный фактор для русскоязычных пользователей, кто впервые начинает знакомиться с этим плагином и хочет досконально разобраться в его настройках.
Следует учесть и тот факт, что Версия 5.4.8.3, последняя из 5-й, которую можно установить на сайт. Все остальные, перед Активацией, потребуют обновления до последней, самой новой.
Позже, когда пройдете практику, ее можно спокойно обновить.
Советую, в учебных целях, устанавливать плагин на Локальный сервер, у себя на компьютере. Создать отдельный тестовый сайт и на нем экспериментировать.
Как это сделать? Читайте в моей предыдущей статье — Обновление локального сервера OSPanel.
Небольшое предупреждение — установив Версию 5.4.8.3 — не спешите ее обновлять. Иначе не сможете потом откатить обратно. Все обновления сохраняются в Базе данных.
При попытке восстановить предыдущий вариант, плагин потребует обновиться.
Интерфейс настроек слайдера плагина Slider Revolution Версии 6.2.12 кардинально отличается от предыдущей Версии 5.4.8.3.
Первое, что открывается при входе в настройки плагина — это Страница Обзора.
Самое главное — в верхнем меню, кроме общих пунктов: Обновления, Новости, Информация и Поддержка — есть кнопка Глобальные, с всплывающей отдельной панелью Общих настроек.
В настройках Общие, можно выбрать Права доступа, Язык интерфейса, включить Библиотеки Глобально и список страниц, где они будут подключены.
Оптимизировать Java-скрипты, переместив их в подвал (Footer) сайта, отложить их загрузку — не советую.
Макет по-умолчанию — устанавливаете дефолтные настройки Сетки слайдера, в зависимости от ширины сайта и его адаптивных версий.
Можно также отключить RS шрифт Awesome библиотек, достаточно и шрифтов от Google.
В разделе Разное — включить Создание Базы данных для Slider Revolution.
На этой же странице Обзора, в меню Модули — список уже созданных Слайдеров и четыре Основные Модули для создания новых слайдеров:
После нажатия на пустой модуль Создать Слайдер, открывается основная страница Редактора Слайдера, где совмещены все настройки, непосредственно, самих слайдов, Окно Сетки Слоя слайдера, Панель Редактора Времени появления и движения объектов.
Справа на странице — Панель Параметров переключения и настроек всех Основных Модулей:
Вверху, меню добавления и переключения слайдов, добавления новых слоев, кнопок, шрифтов, настройка адаптивности.
Плюс отдельно, внизу, панель Оптимизации Слайдера, Сохранения и Просмотра.
Как видим, все новые изменения Slider Revolution, после упомянутых обновлений, кардинально перестроили весь Редактор настроек слайдера.
В одном окне, для большего удобства пользователей, были сгруппированы все Панели параметров настроек.
Я не буду здесь затрагивать все технические аспекты изменений и дополнений, которые произошли после обновления, об этом можете прочитать на сайте производителя Slider Revolution, они с каждым разом радуют нас новыми своими возможностями.
Только одно огорчает — нет поддержки Русского языка.
Да, в данном случае, плагин имеет русский интерфейс. Но это уже заслуга отдельных отечественных программистов.
Еще не так досконально русифицирована данная новая версия плагина, как предыдущая, но работать можно. Думаю, что со временем, все нюансы будут учтены.
Поэтому, совет начинающим пользователям — если трудно разобраться с 6-й версией, начните с предыдущей — будет проще понять новые изменения.
А для этого, мы досконально — по полочкам, разберем с Вами создание и настройку слайдера плагином Slider Revolution Версии 5.4.8.3.
Создание и настройка слайдера с помощью плагина Slider Revolution состоит из нескольких этапов: цель и назначение, расположение, идея и содержание слайдера, подбор контента и наконец — материальное воплощение идеи.
Очень важный момент, если исходный размер изображения слайдера не равен ползунку — размеру Сетки слоев, изображение будет растянуто и обрезано.
Чтобы избежать этого, установите ширину и высоту в настройках Макета слайда — Размер сетки слоя Вашего слайдера — равными точному размеру оригинальных изображений, подготовленных для слайдера.
Подготовив все исходные материалы, приступаем к созданию слайдера.
В левом Меню Админ-панели сайта WordPress, открываем вкладку Общие настройки Slider Revolution. Устанавливаем настройки с правом доступа для Администратора.
Обязательно включаем библиотеки RevSlider глобально. CSS/JS файлы будут добавлены только на страницы, использующие шорт-код слайдера.
Можно указать ID-страниц (через запятую, для каждой страницы), где будут размещены слайдеры.
Для SEO-оптимизации шапки сайта, активируем пункт — Вставить JS в подвал.
Проверяем стандартные настройки для Расширенных Адаптивных версий Размеров Сетки слоев:
Включаем Оповещения — уведомления о новых обновлениях плагина. Остальные настройки этой страницы на Ваше усмотрение.
В конце, нажимаем на Запуск создания Базы данных Slider Revolution и, внизу, Сохранить Изменения.
На Начальной странице создания слайдера, или Странице Обзора, расположена информация об уже созданных слайдерах, Активации и Обновлении плагина, Системных требованиях к хостингу (если есть проблемы — нужно устранить).
Отсюда и начинается процесс создания слайдера. Можно, так же, через Магазин (внизу, отдельная вкладка) загрузить один из шаблонов.
Если на сайте установлена Премиум-тема, в которой предусмотрен Slider Revolution, по-умолчанию, будет подгружен и соответствующий слайдер Главной страницы.
Его можно переработать под свои нужды, но не советую использовать изображения, которые в нем используются — лучше свои.
Мы же будем создавать слайдер «с Ноля». Для этого нажимаем на вкладку — Новый слайдер. Откроется новая страница.
Редактор слайдера.
Внизу страницы — Сохранить изменения.
Переходим к настройкам Параметров слайдера, на этой же странице, в Правом меню.
Перед тем, как переходить к конкретным действиям со слайдами, необходимо внести некоторые коррективы в Параметры слайдера, чтобы не возвращаться обратно.
Естественно, позже можно будет и дополнить эти настройки, по необходимости.
Все остальные настройки Параметров слайдера оставляем по-умолчанию.
Обязательно сохраняем все Изменения.
В верхнем Меню переходим в Редактор слайдов, уже непосредственно «Slider 1».
В новом окне, под верхним меню, две вкладки: Окно нового слайда «#1 Slide» и окно «Добавить слайд» — с ними и будем работать.
Обязательно, после каждого отдельного действия, нажимаем зеленую кнопку Сохранить слайдер, иначе настройки будет потеряны.
Первый прозрачный слайд можно удалить. Следующий, загруженный, займет его место. При необходимости, слайды можно поменять местами — простым перетаскиванием.
Опять, не забываем сохранить настройки.
Опускаемся ниже по странице, где в Окне Сетки слоев будет подгружено изображение 1-го слайда.
Наводим мышку на Добавить слой, кликаем Образ. Из библиотеки Медиафайлов добавляем рисунок Эмблемы Логотипа (у меня 180px x 180px).
Над Окном Сетки слоев, Меню параметров каждого выделенного слоя.
Во вкладке Стиль выравниваем слой Логотипа по центру, значение X = 0, Y = -90.
Ширину W и высоту H, по желанию, можно уменьшить до 140px.
Сохраняем слайдер (больше повторять не буду).
Во вкладке Анимация, верхнее значение (появление данного изображения) выбираем Long-From-Top (Длинный-От-Верха), появление сверху. Скорость Анимации 1000.
Нижнее значение (исчезновение слоя) выбираем Long-To-Top (Длинный-К-Верху), скорость 500.
Внизу, под Окном Сетки слоев, Шкала Времени и Скорости появления и исчезновения каждого слоя (объекта на слайде). Передвигаем Шкалу Времени появления слоя на 500 м/сек.
Все настройки здесь можно редактировать вручную — будьте внимательны.
Результаты проделанной работы, после сохранения, можно посмотреть во вкладке Превью, но лучше вставить шорт-код слайдера на страницу сайта. На реальном странице, Вы четко будете видеть работу слайдера и все изменения.
Чтобы создать любой текст или Призыв на слайде, добавляем новый слой Текст/HTML.
В выпавшем окне вписываем нужный текст (например, Премиум-Темы для WordPress).
Сохраняем.
Вкладка Стиль. Шрифт — Open Sans, Шаблон стиля — very_large_text (по необходимости).
Размер шрифта — 52 px, Высота линии — 32 px, Жирность — 700, Цвет — Белый.
Расположение — Выровнять слой по центру (определяемся, что значения X и Y исходят от пересечения этих осей строго от центра слайда), X = 0px, Y = 25px, высота и ширина = auto.
Анимация. Шаблон Анимации (появление объекта) – PopUpSmooth (Всплывающие Гладкие), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Top (Длинный-К-Верху), скорость — 500.
Внизу, под окном Сетки слоев, передвигаем Шкалу Времени появления слоя на 1000 м/сек.
Текст нового слоя — Профессиональные сайты на WordPress самостоятельно.
Стиль. Шрифт — Open Sans, Шаблон стиля — very_large_text.
Размер шрифта — 48 px, Высота линии — 32 px, Жирность — 400, Цвет — Белый.
Расположение — Выровнять слой по центру (определяемся, что значения X и Y исходят от пересечения этих осей строго от центра слайда), X = 0px, Y = 80px, высота и ширина = auto.
Анимация. Шаблон Анимации (появление объекта) — PopUpSmooth (Всплывающие Гладкие), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Top (Длинный-К-Верху), скорость — 500.
Внизу, под окном Сетки слоев, передвигаем Шкалу Времени появления слоя на 1500 м/сек.
Не забываем сохранять слайд после каждого изменения в отдельной вкладке меню.
Добавляем еще один слой — Кнопка. В выпавшем окне выбираем конфигурацию — прямоугольная Кнопка (большой размер).
Сохраняем слайд.
В верхнем меню Окна Сетки слоев, правее пункта Добавить слой, есть кнопка меню Редактирования слоя (No Layer Selected — Слой Не Выбран).
Кликом мышки выделяем добавленный слой (Кнопку). Название пункта меню изменится на Button (кнопка).
Открываем его, выбираем соответствующий пункт, нажимаем на значок Карандаш (редактировать).
В выпавшем окно пишем название кнопки (например — Узнать больше).
Но если Вы хотите сделать кнопку кликабельной, чтобы при нажатии на нее открывалась какая либо страница или сайт, лучше вставить такой HTML-код:
<a href="https://sit-info.ru/uchebnyj-razdel-centr-sit-info/" title="Узнать больше" target="_blank" style="text-decoration:none; color:#fff;">Узнать больше</a>
Где есть: ссылка на целевую страницу, title (название кнопки), target=»_blank (открыть в новом окне), color (цвет текста), и сам текст кнопки.
Вам стоит только поменять ссылку, название и цвет текста.
Стиль. Шрифт — Roboto. Размер шрифта — 22 px, Высота линии — 36 px, Жирность — 500.
Расположение — Выровнять по центру, X = -102 px, Y = 170 px, W и H — auto.
Нажимаем на Стрелку вниз — Расширенные стили. Задний фон — выбираем цвет кнопки (#faac16), Наведение мышки — Задний фон — тот же цвет.
Анимация. Шаблон Анимации (появление объекта) — Long-From-Left (Длинный-Слева), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Left (Длинный-Налево), скорость — 500.
Вкладка меню Поведение — активируем ползунки: Автоматически Адаптивный и Адаптивное смещение. Обязательные настройки кнопок для Адаптивных версий сайта.
Внизу, под окном Сетки слоев, передвигаем Шкалу Времени появления слоя на 2500 м/сек.
Не забываем сохранять слайд после каждого изменения в отдельной вкладке меню.
Добавляем такой же слой — Кнопка. В выпавшем окне выбираем конфигурацию — Овальная Кнопка (большой размер). Сохраняем слайд.
Так же, как и в предыдущий раз, заходим в Редактор слоя и вставляем HTML-код:
<a href="https://sit-info.ru/centr-sit-info-uroven-standart/" title="Получить" target="_blank" style="text-decoration:none; color:#fff;">Получить</a>
Редактируем под свои нужды.
Стиль. Шрифт — Roboto. Размер шрифта — 22 px, Высота линии — 36 px, Жирность — 500.
Расположение — Выровнять по центру, X = 102 px, Y = 170 px, W и H — auto.
Расширенные стили. Задний фон — выбираем цвет кнопки (#ff5546),
Наведение мышки — Задний фон — тот же цвет.
Анимация. Шаблон Анимации (появление объекта) — Long-From-Right (Длинный-Справа), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Right (Длинный-Направо), скорость — 500.
Вкладка Поведение — активируем ползунки: Автоматически Адаптивный и Адаптивное смещение.
Внизу, передвигаем Шкалу Времени появления слоя на 2500 м/сек.
Сохранить слайд.
Создание и настройка первого слайда (#1 Slide) слайдера Slider 1, закончена.
Вам в помощь видео-версия из Учебного раздела Centr-Sit-Info Уровень Standart:
Проверяем работоспособность слайдера на реальной странице сайта Десктоптной версии, ноутбука, планшета и смартфона.
Выделяя каждое последующее фоновое изображение, создаем и редактируем слайды: #2 Slide и #3 Slide. В зависимости от цели и назначения, добавляем тот или иной слой на каждый слайд.
Как видите, ничего сложного в создании и настройке слайдера плагином Slider Revolution версии 5.4.8.3 нет, нужна только усидчивость и практика.
Используя опыт предыдущих настроек 1-го слайда, Вы без труда настроите и последующие.
Если возникнут какие-нибудь трудности — пишите в комментариях. Рад буду оказать посильную помощь.
В следующем видео-уроке подробно разберем обновление плагина. Создание и настройку слайдера в новой версии Slider Revolution Версия 6.2.17 (или любой последующей).
Не забудьте поделиться информацией в социальных сетях.