Obnovlenie OSPanel
Обновление локального сервера OSPanel
30 апреля 2020
Slider-Revolution-v-6217
Slider Revolution v 6.2.17 — создание и настройка слайдера
2 августа 2020
Показать все

Slider Revolution — новые изменения и настройка слайдера

Slider-Revolution-novye-izmeneyiya

Slider Revolution — один из самых популярных конструкторов WordPress для создания слайдеров любых видов:

  1. Специальные модули контента для создания Шапки (Header) сайта, заголовков Главной и других страниц, с поддержкой всех медиа.
  2. Базовые слайдеры и слайдеры-карусели. Анимированная последовательность изображений, видео или другого контента.
  3. Социальные медиа-сети. Показывать видео и изображения из всех популярных социальных сетей.
  4. Отдельные страницы. Возможность интуитивно-просто при создании потрясающих, своего рода, одностраничных пейджеров.
  5. Создание и интеграция статистических слайдеров для Woo Commerce. И многие другие контентные модули и инструменты построения страниц.

Более 200 шаблонов, 2500+ изображений, видео и иконок. В наличии 100+ готовых Слоев и Анимации, больше 25 Аддонов-дополнений с различными визуальными эффектами.

И все это с помощью одного небольшого плагина для WordPress — Slider Revolution. Согласитесь — это впечатляет. Хотите иметь такой инструмент в своем арсенале?

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

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

Конечно, можно подобрать что-то из депозитария WordPress (помимо бесплатных, там есть и платные варианты). Но все же, исходя из своего опыта, могу сказать, что лучше использовать Премиум-темы, в которых уже интегрирован этот плагин — идет в комплекте с темой.

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

Видео из раздела Centr-Sit-Info Уровень Standart:

[встроить] https://youtu.be/G3nY3AjtHhM [/ встроить]

 

Если хотите быстро научиться создавать профессиональные сайты, не только для себя, но и предлагать свои услуги другим, переходите в раздел Centr-Sit-Info данного сайта.
На выбор есть два варианта:

  1. Бесплатный — Centr-Sit-Info Уровень Standart. На сегодня — 38 учебных видео-уроков. Предоставляется для скачивания архив с несколькими Премиум-темами и плагинами.
    В качестве примера — на уроках рассматривается установка и настройка Премиум-темы Total.
  2. Платный — Centr-Sit-Info Уровень Profi-bizblog. Пока 22 видео-урока, архив с 8 Премиум-темами + плагины. Кроме этого досконально изучается Премиум-тема BeTeme.
    Так же будут доступны все материалы и видео-уроки с 1-го раздела.

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

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

Новые изменения и настройка слайдера плагином Slider Revolution.

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

Но с выходом новой Версии 6.0.0 (8 июля 2019 г.), произошли уже новые, кардинальные изменения в настройках самого плагина. Изменился его интерфейс — следовательно приобрели новый вид, а где-то и дополнились опции настроек самих слайдеров.

Slider Revolution Версии 5.4.8.3.

Можно сравнить интерфейс настроек слайдера плагина Версии 5.4.8.3 (самая стабильная, последняя 5-версия плагина).
В 5-й версии Slider Revolution каждая категория настроек сгруппирована на отдельных страницах:

  1. Общие (Глобальные) настройки плагина. Можно назначить права доступа, подключить библиотеки Java-скриптов, их оптимизация. Создание дополнительных страниц и создание Базы данных для плагина и т. д.
  2. Установка и настройка различных дополнений (26 вкладок).
  3. Редактор навигации — есть Стандартные и Пользовательские.
  4. Начальная страница Slider Revolution, где виден список созданных слайдеров. Здесь и начало создания Новых слайдеров, добавления из шаблонов или импорт ранее созданных.

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

  • Настройки слайдера — Источник контента, Название и Шорт-код, Тип слайдера, Макет слайда.
    Общие параметры, Макет и Внешний вид, Навигация, Параллакс и 3D, Эффекты прокрутки, Производительность и SEO, Шрифты, Импорт/Экспорт и т. д.
  • Заключительная страница — это настройка каждого слайда, в отдельном окне Сетки слоев. Его стили, анимация, Циклы действий. Добавление различных объектов из библиотек.
    Добавление необходимых слоев (в зависимости от цели) — Тексты, Изображения, Цвет аудиозаписи, Видео, Кнопки и Формы, Объекты, Импорт.
    Отдельные настройки параметров Времени загрузки, появления объектов и их движения.

Slider Revolution - новые изменения и настройка слайдера

Как видим, по мере создания слайдера, используется своя отдельная страница, с определенными настройками.

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

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

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

Советую, в учебных целях, устанавливать плагин на Локальный сервер, у себя на компьютере. Создать отдельный тестовый сайт и на нем экспериментировать.
Как это сделать? Читайте в моей предыдущей статье — Обновление локального сервера OSPanel.

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

Slider Revolution Версии 6.2.12 (6 июня 2020 г.).

Интерфейс настроек слайдера плагина Slider Revolution Версии 6.2.12 кардинально отличается от предыдущей Версии 5.4.8.3.

Страница Обзора Slider Revolution.

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

В настройках Общие, можно выбрать Права доступа, Язык интерфейса, включить Библиотеки Глобально и список страниц, где они будут подключены.
Оптимизировать Java-скрипты, переместив их в подвал (Footer) сайта, отложить их загрузку — не советую.

Макет по-умолчанию — устанавливаете дефолтные настройки Сетки слайдера, в зависимости от ширины сайта и его адаптивных версий.
Можно также отключить RS шрифт Awesome библиотек, достаточно и шрифтов от Google.

В разделе Разное — включить Создание Базы данных для Slider Revolution.

На этой же странице Обзора, в меню Модули — список уже созданных Слайдеров и четыре Основные Модули для создания новых слайдеров:

  1. Новый пустой модуль — создание слайдера с ноля.
  2. Новый модуль из шаблона — выбор слайдера из предоставленных шаблонов (200+).
  3. Ручной импорт — загрузка слайдеров, ранее созданных или из сохраненных архивов
    на Вашем компьютере.
  4. Дополнения — различные визуальные дополнения (Plugin Add-Ons) к слайдерам (25+).

Новый визуальный Редактор Слайдера.

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

Slider Revolution - новые изменения и настройка слайдера

Справа на странице — Панель Параметров переключения и настроек всех Основных Модулей:

  1. Общие параметры Модуля слайдера.
  2. Параметры Навигации слайдов.
  3. Параметры настроек каждого слайда отдельно.
  4. Параметры настроек каждого слоя на слайде (Редактор текста, изображений, видео, различных форм и кнопок и так далее.)

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

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

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

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

Поэтому, совет начинающим пользователям — если трудно разобраться с 6-й версией, начните с предыдущей — будет проще понять новые изменения.

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

Создание и настройка слайдера плагином Slider Revolution Версии 5.4.8.3.

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

  1. Цель и назначение. Какую цель Вы хотите достичь, создавая слайдер? Какое его назначение для Вашей аудитории?
    Некоторые примеры: общая информация о сайте, определенного блока или страницы, реклама или продажа физических, или инфо-продуктов, привлечение подписчиков на сайт.
  2. Расположение. В зависимости от поставленных целей, выбираете расположение слайдера на сайте: Главная страница — шапка (Header) сайта, страница Портфолио или Услуги, WooCommerce, возможно размещение слайдера и в любом посте.
  3. Идея и содержание слайдера. Какими медиа-средствами Вы хотите воплотить свою идею в жизнь? Выбор большой — Видео-реклама, динамика изображений, текстовые динамические блоки, встраиваемые формы подписки, контент из социальных сетей, прайсы для продающих страниц, различные карусели.
  4. Подбор контента. Создание видеороликов, фоновых видео, изображений в PNG-формате.
    И все это соответствующих размеров, исходя из размера и расположения слайдера. Подготовка и написание текстовых блоков. Выбор необходимых иконок.
  5. Материальное воплощение идеи — это уже, непосредственно, создание самого слайдера плагином Slider Revolution.
    При отсутствии опыта, можно использовать обширную библиотеку готовых слайдеров, переработав их под свои цели.
    В свои, самостоятельно создаваемые слайдеры, так же можно включать отдельные профессиональные контентные модули из этих библиотек.

Исходный размер изображений слайдера.

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

  1. Очень большое изображение — это большой размер файла, значит длительное время загрузки слайдера. Обязательно нужна оптимизация.
    Это означает — для больших изображений — на всю ширину сайта (экрана монитора), чтобы максимально уменьшить размер файла без ущерба для качества изображения, размер не должен превышать 1920 × 1200 (px).
  2. Не используйте изображения больше, чем нужно. Если слайдер расположен в контентной части сайта и равен его ширине (1200 px), размер рисунка для слайдера не должен быть больше.
  3. Изображения всегда будут масштабироваться, в зависимости от соотношения сторон Сетки слоя.
    Пример — если фактическая ширина вашего слайдера составляет 1200 пикселей (ширина ползунка при отображении на веб-странице), а размер изображения 1000 × 500 и такой же размер Сетки слоя (1000 × 500) в настройках слайдера, размер изображения будет изменен до 1200 × 600 (px), согласно ширине контента страницы.

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

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

В левом Меню Админ-панели сайта WordPress, открываем вкладку Общие настройки Slider Revolution. Устанавливаем настройки с правом доступа для Администратора.

Обязательно включаем библиотеки RevSlider глобально. CSS/JS файлы будут добавлены только на страницы, использующие шорт-код слайдера.
Можно указать ID-страниц (через запятую, для каждой страницы), где будут размещены слайдеры.

Для SEO-оптимизации шапки сайта, активируем пункт — Вставить JS в подвал.

Проверяем стандартные настройки для Расширенных Адаптивных версий Размеров Сетки слоев:

  1. Ширина сетки для Десктопа (настольного компьютера) — 1240 px (имеется ввиду, только ширина контентной части сайта). Можно выставить и 1920 px (ширина сайта).
  2. Ширина сетки Ноутбука — 1024 px.
  3. Ширина сетки для Планшета — 778 px.
  4. Ширина сетки для Телефона — 480 px.

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

В конце, нажимаем на Запуск создания Базы данных Slider Revolution и, внизу, Сохранить Изменения.

Начальная страница создания слайдера.

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

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

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

Мы же будем создавать слайдер «с Ноля». Для этого нажимаем на вкладку — Новый слайдер. Откроется новая страница.

Редактор слайдера.

  1. На странице Редактора слайдера выбираем Источник контента.
    Выбор большой — видео из социальных сетей YouTube, Vimeo, Instagram (желательно короткое — в качестве фоновой видео-заставки), или же любой контент из WordPress и т. д.
    Для создания Классического слайдера, активируем вкладку Стандартный слайдер.
  2. Ниже вписываем название (любое название — соответствующее назначению или содержанию). Например, Slider 1.
    В графе Алиас слайдера, с помощью которого формируется шорт-код слайдера, латинским шрифтом (нижний регистр) вносим соответствующее значение — slider_1. Если название состоит из нескольких слов, разделяем их нижним подчеркиванием.
    Шорт-код сформируется автоматически. Его можно вставить в любое место на сайте, где хотите, чтобы отображался слайдер.
  3. Тип слайдера — Стандартный слайдер. Есть еще два варианта: Герой сцены — слайдер с одним слайдом (в основном используется для формирования шапки сайта Главной страницы).
    Второй вариант — это Слайдер карусель (больше всего подходит для интернет-магазинов, просмотр N-го количества товаров).
  4. Макет слайдера — Автоматически (возможность масштабирования слайдера и расположения его на любой странице).
    Во всю ширину окна — название говорит само за себя (ширина размера Сетки слоев и фоновых изображений должна быть 1920 px).
    Во весь экран — используется для создания отдельных страниц (фото-пейджеров).
  5. Режим монитора. Если мы хотим разместить слайдер на Главной странице, под меню, на всю ширину сайта (экрана монитора), подготавливаем изображения (слайдер состоит из трех слайдов) размером, по ширине 1920 px.
    Высота изображений одинаковая (например — 700 px). Такой же размер выставляем и в Размерах Сетки Слоя (1920px x 700 px) для широкоформатного монитора.
    Для Адаптивных версий сайта: Ноутбук, Планшет, Мобильный — Авто размеры.

Внизу страницы — Сохранить изменения.

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

Переходим к настройкам Параметров слайдера, на этой же странице, в Правом меню.

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

  1. Общие параметры. Слайд-шоу — активируем Останавливать слайд при наведении мышки.
    По Умолчанию — установлена длительность слайда 9000 м/с (9 секунд — больше не стоит). В данном слайдере, я выставил 5000 м/с (5 секунд).
    Нажимаем Перезаписать Выбранные настройки для всех Слайдов.
    Бар — если хотите, включите Индикатор прогресса (Верхний, ширина линии 2 px), чтобы был виден процесс движения начала и окончания слайда.
    Все остальные настройки можно оставить по-умолчанию.
  2. Макет и Внешний вид. Отображение — по желанию выбор тени под слайдером или заменить изображение слайда фоном.
    Загрузчик — на Ваше усмотрение (у меня — 0).
  3. Навигация. По необходимости дополнить дизайн слайдера Стрелочками или Маркерами для ручного переключения слайдов.
    Вкладка Касание — включить Сенсорный для мобильных. Так же — в Дополнительно можно включить Навигацию на Клавиатуре.

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

Редактор слайдов.

В верхнем Меню переходим в Редактор слайдов, уже непосредственно «Slider 1».
В новом окне, под верхним меню, две вкладки: Окно нового слайда «#1 Slide» и окно «Добавить слайд» — с ними и будем работать.

  1. Ниже, в меню Параметров слайда, во вкладке Главный Фон, отмечаем Главное / Фоновое Изображение. Потому как, для каждого слайда, в качестве фона будут добавлены изображения, заранее загруженные в Медиафайлы.
    Сохраняем изменения.
  2. Наводим мышкой на окно Добавить слайд, выбираем Пакетное добавление. Откроется Библиотека Медиафайлов WordPress.
    С нажатой клавишей Ctrl, на клавиатуре, выделяем, именно в той очередности, которая нам нужна, все изображения для слайдера. Внизу нажимаем Добавить.
    Изображения будут добавлены в Редактор слайдов Slider 1.

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

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

Окно Сетки слоев.

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

Добавляем Новый слой — Логотип.

Наводим мышку на Добавить слой, кликаем Образ. Из библиотеки Медиафайлов добавляем рисунок Эмблемы Логотипа (у меня 180px x 180px).

Над Окном Сетки слоев, Меню параметров каждого выделенного слоя.
Во вкладке Стиль выравниваем слой Логотипа по центру, значение X = 0, Y = -90.
Ширину W и высоту H, по желанию, можно уменьшить до 140px.
Сохраняем слайдер (больше повторять не буду).

Slider Revolution - новые изменения и настройка слайдера

Во вкладке Анимация, верхнее значение (появление данного изображения) выбираем Long-From-Top (Длинный-От-Верха), появление сверху. Скорость Анимации 1000.
Нижнее значение (исчезновение слоя) выбираем Long-To-Top (Длинный-К-Верху), скорость 500.

Slider Revolution - новые изменения и настройка слайдера

Внизу, под Окном Сетки слоев, Шкала Времени и Скорости появления и исчезновения каждого слоя (объекта на слайде). Передвигаем Шкалу Времени появления слоя на 500 м/сек.
Все настройки здесь можно редактировать вручную — будьте внимательны.

Slider Revolution - новые изменения и настройка слайдера

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

Следующий слой Текст/HTML.

Чтобы создать любой текст или Призыв на слайде, добавляем новый слой Текст/HTML.
В выпавшем окне вписываем нужный текст (например, Премиум-Темы для WordPress).
Сохраняем.

Вкладка Стиль. Шрифт — Open Sans, Шаблон стиля — very_large_text (по необходимости).
Размер шрифта — 52 px, Высота линии — 32 px, Жирность — 700, Цвет — Белый.
Расположение — Выровнять слой по центру (определяемся, что значения X и Y исходят от пересечения этих осей строго от центра слайда), X = 0px, Y = 25px, высота и ширина = auto.

Slider Revolution - новые изменения и настройка слайдера

Анимация. Шаблон Анимации (появление объекта) – PopUpSmooth (Всплывающие Гладкие), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Top (Длинный-К-Верху), скорость — 500.

Slider Revolution - новые изменения и настройка слайдера

Внизу, под окном Сетки слоев, передвигаем Шкалу Времени появления слоя на 1000 м/сек.

Новый слой Текст/HTML.

Текст нового слоя — Профессиональные сайты на WordPress самостоятельно.

Стиль. Шрифт — Open Sans, Шаблон стиля — very_large_text.
Размер шрифта — 48 px, Высота линии — 32 px, Жирность — 400, Цвет — Белый.
Расположение — Выровнять слой по центру (определяемся, что значения X и Y исходят от пересечения этих осей строго от центра слайда), X = 0px, Y = 80px, высота и ширина = auto.

Slider Revolution - новые изменения и настройка слайдера

Анимация. Шаблон Анимации (появление объекта) — 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>

Slider Revolution - новые изменения и настройка слайдера
Где есть: ссылка на целевую страницу, title (название кнопки), target=»_blank (открыть в новом окне), color (цвет текста), и сам текст кнопки.
Вам стоит только поменять ссылку, название и цвет текста.

Стиль. Шрифт — Roboto. Размер шрифта — 22 px, Высота линии — 36 px, Жирность — 500.
Расположение — Выровнять по центру, X = -102 px, Y = 170 px, W и H — auto.

Нажимаем на Стрелку вниз — Расширенные стили. Задний фон — выбираем цвет кнопки (#faac16), Наведение мышки — Задний фон — тот же цвет.

Slider Revolution - новые изменения и настройка слайдера

Анимация. Шаблон Анимации (появление объекта) — Long-From-Left (Длинный-Слева), скорость — 1000.
Шаблон анимации (исчезновение объекта) — Long-To-Left (Длинный-Налево), скорость — 500.

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

Slider Revolution - новые изменения и настройка слайдера

Внизу, под окном Сетки слоев, передвигаем Шкалу Времени появления слоя на 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 (или любой последующей).

Не забудьте поделиться информацией в социальных сетях.

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

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