Как работать со слайдером WordPress (Revolution Slider). Wordpress slider revolution настройка
Как работать со слайдером Wordpress (Revolution Slider) — VebPro
Slider Revolution: Начало работы
Создаем новый слайдер В разделе 2 открывшейся страницы указываем:
- Название
- Алиас (латинскими буквами — это своеобразный логин)
- Шорткод (создастся автоматически на основе алиаса — его можно будет вставлять в любое место на сайте.)
После жмем сохранить настройки.
Слайдер теперь появится вместе с элементами Новый слайдер, Add Slider From Template, Импотировать слайдер. Его также можно добавить в избарнное нажав на иконку звездочки на нем.:
В выпадающем списке каждого слайдера также есть варианты использования слайдера:
Нажав на иконку шестиренки — можно настроить параметры слайдера, нажав на иконку карандашик можно настроить сами слайды.
Slider Revolution: Редактор слайдов
В каждом настроенным по указанным параметрам слайдере — есть слайдеры. Каждому слайду — можно задать имя, дублировать, добавить в шаблон, удалить. Также есть красная и зеленная иконка отвечающая за отображение слайдера во фронтенде:
В блоке Добавить Слайд (можно добавить сразу несколько слайдов-пакетно):
Все добавленные слайды можно перетаскивать между собой меняя очередность их вывода в слайдере.
1.Главный фон
Выбираем источник для слайдера:
Затем настройки источника (они различны для каждого источника + для прозрачности и цвета отсутствуют):
В Filtres все эффекты которые можно применить к слайду:
В Parallax/3D (он должен быть заранее включен в настройках слайдера):
После этого выбираем нужный % паралакса:
Ken Burns (для Главное/фоновое изображение и внешняя ссылка). Плавное масштабирование и изменения плоложение:
Однако данный эффект не работает с анимацией.
2. Общие параметры
В общих параметрах отдельно можно установить настройки конкретного слайдера.
Если ничего не менять к слайдеру будут применяться настройки по умолчанию (из раздела Настройка слайдера — Общие параметры):
3. Миниатюра
Здесь настраиваются миниаютуры к слайдам (по умолчанию если ничего не вставлять миниатюра будет такой же как и сам слайд).
4. Анимация слайда
Обычно для анимации в самих Настройках слайдера в Навигации включают — Стрелки:
В самой анимации слайда идет блок состоящий из 4 колонок:
- Категории анимации.
- Демо анимации выбранного варианта.
- Используемые анимации (в каждом цикле прокрутке слайда).
- Настройки анимации (кол-во слотов 1 слайда, поворот-угол, длительность анимации, появление и исчезание) .
5. Ссылки и SEO
Можно создать Класс и ID для придание им свойств CSS, даже включить ссылку чтобы при нажатии на слайд перекидовало на указанный url-адрес или на следующий слайд. Также переброска на новый слайдер может идти не горизонтальн, а вертикально:
Также выбирается передняя сторона (если слои не кликабельны), задняя сторона если слои кликабельны.
6. Информация о слайде
Здесь прописываются название категорий на сайте или шаблоны — которые будут выведены в навигационных табах. В максимальном количестве символов которые будут выведены в названии указываем свое число.
7. Nav.overwrite
Установление своих настроек навигации (отличающихся от глобальных настроек).
- Стрелочки
- Маркеры
- Табы
- Миниатюры
Это делается в силу возможной разности в контрастности различных слайдов.
Slider Revolution: Слои
Внизу настроек слайдера идет работа со слоями слайда
Старайтесь всегда брать слайды в размерах 1920х1080 способные отображаться на максимальное разрешение + удобно под этот формат редактируемые.
2 способа добавить слой:
- Нажать на синию кнопку — Add Layer (выбрать нужный тип слоя)
- Внутри редактора нажать ПКМ — Add Layer (выбрать нужный тип слоя)
Нажав на фиолетовую кнопку Object layer — можно также попасть в библиотеку объектов для их добавления.
Нажав на 3 элемент в верхнем меню редактора слоев можно выбрать конкретный слой из имеющихся с которым хотим работать:
Название слоев в этих настройках и сами тексты в слоях — могут быть различными. Чтобы отредактировать слой на слайде — жмем иконку карандашик:
Слою можно задать мета-шаблоны:
При вставки шаблонов слоя в тег а слой станет кликабельным:
- <a href=»»{{current_page_link}}»> Текст</a>
- <a href=»»{{home_url}}»> Текст</a>
Получается эффект когда на слайдере расположены несколько слоев поверх друг друга и при нажатии на которые (они занимают лишь небольшую часть слайдера) открывается отдельное окно с переброской на нужный url.
В рамках редактора можно ставить наводящие линии просто кликнув на них после чего такая линия закрепится в редакторе (затем ее можно перетаскивать или удалить):
Внизу редактора можно привязывать конкретные объекты/слои к:
- Вспомогательной линии (не сможет выйти за ее границы)
- К другим слоям
1. Текст/HTML
Прописываем свой текст, настраиваем ему цвет, размер, можно вставить иконки, чтобы сохранить жмем зеленую галочку:
2. Изображение
Здесь все то же самое, можно указать ширину и высоту изображения:
3. Audio
Здесь указывается внешний url — откуда берется композиция или она берется из медиабиблиотеки:
4. Видео
Здесь вставляем нужный url-на видеоролик:
5. Кнопка
Здесь настраиваются кнопки:
6. Фигура
Здесь самостоятельно создаем фигуру прописывая ей градусы в %:
7. Object
То же самое что и при выборе фиолетовой кнопки — попадание в библиотеку обектов:
8. Импорт
Можно импортировать нужные созданные ранее объекты из слайда, слайдера, слоя :
Статические слои в Slider Revolution
В визуальном редакторе слайдера также можно задать статические слои которые будут оставаться неизменными на нужном вам количестве слайдов.
В выпадающем списке можно ничего не выбирать, а создать статический слой самостоятельно в редакторе ниже (в появившейся вкладке статические слои):
После создания слоя указываем:
- С какого слайда начинать его показывать.
- На каком слайде закончить его показ.
Дополнительно ему можно задать нужное свойство.
Группы слоев в Slider Revolution
Для удобства можно объединить несколько слоев — внизу нажав на ADD GROUP.
После в редакторе появится прямоугольник — в который нужно перетащивать нужные вам слои которые хотите объединить. Сам контейнер при этом можно увеличить под нужный размер:
Slider Revolution: Вкладки визуального редактора
Поверх самого визуального редактора слайдов также располагается серия вкладок со своими настройками.
Стиль
Здесь не только можно настроить нужный стиль текста, но и самое главное включить автоперенос текста на следующую строку (иконки W-длинна строки и T-со стрелочкой вниз — перенос).
В расширенных настройках стиля можно:э
- Задать фон слоя,
- Изменение цвета при наведении.
- Задать границу слоя (стиль, толщину, цвет, скругление границ)
- Сам слой можно растянуть, затем выровнять находящийся в нем текст по краю или по центру
- Можно сделать 3-d эффект текста
- Переключение контента до/после
И множество других элементов
Анимация
- Каждому слою можно задать анимацию и прямо в редакторе просмотреть как она будет выглядеть.
- Можно также задать скорость анимации
- Разделить появления текста — по буквам, по словам, по строкам
- Направление анимации разделения
- Задержка анимации между разделенными элементами
В продвинутых настройках
- выезжание срава/слева
- выезжание сверху/снизу
- появление с маштабриованием или уменьшением
Также прозрачность, поворот, чередование, масштабирование, наклон, маска (видимость слоя только при вхождении в зону маски)
Loop
Создание различных вариантов круговой анимации.
Видимость
Включается/отключается видимость конкретных слоев на устройствах
- Компьютер (>980px)
- Планшет (>778=980px)
- Широкий смартфон (>480=778)
- Узкий смартфон (<480px)
Поведение
- Здесь включается автоматическая респонсивность (адаптивность под размеры экрана).
- Обычно включают всё.
Действие
Действие при наведении мышки на слой, нажатии или отведения.
Атрибуты
Здесь задаются ID, Классы, Wrapper ID, Wrapper Classes, Rel, Название, Tabindex и т.д.
Parallax|3D
В зависимости от того что включено:
- Настраиваем интенсивность параллакса/3D
- Эффект можно настроить как для самого слайда, так и для конкретного слоя находящегося на нем.
Временная шкала
Здесь после нажатие play по шкале:
- Здесь бежит красный бегунок показывающий на какой доли секунды что происходит (его также можно передвигать вручную)
- Также есть синий бегунок — означающий задержку слайда (если его потянуть — будет изменена стандартная задержка смены слайдера)
Кроме этого отдельно настраивается:
- Синяя шкала — длительность анимации фона слайда
- Другие шкалы — за свои слои (их столько сколько вы создали слоев
Под временной шкалой также — есть серый бегунок позволяющий проматывать длинную временную шкалу.Нажав на кнопку редактирования (edit) — есть возможность задать появление слоя на нужной милисекунде и длительность анимационного эффекта:
Эту же операцию можно проделать и в завершении шкалы. Здесь если хотим чтобы слой не исчезал до самого конца — жмем иконку круговой стрелки:
Также здесь можно поменять расположение слоев просто подхватив слой и перетащив его под/над другим слоем:
vebpro.ru
Инструкция SLIDER REVOLUTION - Экспресс курс по созданию сайтов
Слайдер SLIDER REVOLUTION. Было много вопросов по этой теме.
Инструкция SLIDER REVOLUTION
Максимально просто и быстро начать в этом разбираться можно посмотрев видео. Ниже небольшой список раскрытых тем с таймингом.Создаем слайдер с нуляПоказываем как помещаются фигуры как делать фонДелаем фон https://youtu.be/RzXIVJ5tAog?t=1189Поместим фигурыПоложение объектовВыравниваниеКак писать текст https://youtu.be/RzXIVJ5tAog?t=1344Как делать кнопкуКак делать паралаксКак поместить картинку https://youtu.be/RzXIVJ5tAog?t=1478Как анимировать объектыКак делать ссылкуКак удлинять и укорачивать время показа слайдаКак делать остановку слайдера на определенном слайдереКак подобрать размер слайдера и выбрать расположение слайдера на страничкеИмпорт слайдеров темыИмпортируем и редактируем слайдер
Если видео не отображается пройдите по ссылке https://www.youtube.com/embed/RzXIVJ5tAog
Еще инструкция SLIDER REVOLUTION
Где включается Revolution Slider в BeTheme как его поставить на любую страницу сайта. И еще некоторые проблемы которые бывают при подключении. Эти вопросы раскрываются в этом видео.Например что делать если вы видите1. In the Slider Settings Troubleshooting set option: Put JS Includes To Body option to true.2. Find the double jquery.js include and remove it.
Если видео не отображается пройдите по ссылке https://www.youtube.com/embed/WoFlRmrJbJs
Еще инструкция SLIDER REVOLUTION
Видео бекграунд в Slider Revolution. Объясняю как поставить в продолжение предыдущего видео.Видео можно как закачать на свой хостинг, так и подтягивать с ютюба, что намного лучше потому что в этом случае не оказывается нагрузка на ваш сервер.Рассказываю про настройи и про то как зациклить или остановить.
Если видео не отображается пройдите по ссылке https://www.youtube.com/embed/F5rH8ej3EfM
Экспресс курс по созданию сайтов
e-integrate.ru
Slider Revolution – лучший слайдер WP
1 850
Самый популярный и продаваемый слайдер для сайта на WordPress. Чтобы ваш сайт был привлекательным и на нем было приятно находиться обычному пользователю, я советую использовать слайдер. И он идеально подходит для рекламы скидок и акций. В этой статье я расскажу о самом функциональном слайдере для сайта на WordPress – Slider Revolution. А также покажу как установить и настроить.
Этот слайдер купили 208000+ раз, и его используют 2500000+ сайтов во всем мире.
Главные особенности плагина Slider Revolution
- Адаптивный дизайн. Слайдер полностью адаптирован для работы на любых устройствах: на ПК, планшетах и мобильных.
- интеграция с версиями JQuery 1.7 – JQuery 2.x
- Powerful Visual Editor. Мощный редактор, с которым справится даже новичок.
- Parallax эффекты
- 140 готовых к работе слайдеров
- Aseets – Free Object Library. Выбирайте готовые ассеты (цифровые объекты), например, фото гаджетов, на экран которых вы можете вставить вашу картинку.
- Media & Social Feed Support. Слайдер совместим с Instagram,Twitter, Facebook, YouTube, Vimeo, Flickr и HTML5 – вы можете добавлять в слайдер свои посты из всех популярных соцсетей и видеохостингов, а также посты WordPress!
Другие, не менее приятные возможности Slider Revolution
- Color picker with gradients. Новая функция выбора цвета и градиента.
- Slider Template Library. Для доступа к библиотеке с премиум функционалом вам нужно просто активировать лицензию.
- Free add-on whiteboard. Новинка Slider Revolution – вы можете сами рисовать то, что хотите! А бонусом идут 340 УЖЕ нарисованных анимированных иконок.
- Color picker with gradients
- Optimized Performance. При загрузке размер файл автоматически оптимизируется для любого устройства.
А также:
- огромный выбор переходов
- создание кастомизированных анимаций
- возможность добавления неограниченных слоев
- функция “скрыть слой” на любом устройстве
- бесплатное регулярное обновление и премиум поддержка
Типы Slider Revolution
- Regular Slider – обычный слайдер
- Carousels – карусель
- Hero Blocks – презентация
- Social Media Feeds – социально-медийная сфера
- Media Galleries – медиа-галерея
- Front Pages – главные страницы (лендинги)
С каждым обновлением плагина добавляются все новые крутые функции, так, например, в скором времени ожидается интеграция c Woocommerce!
Переходим к настройке Slider Revolution
Я не буду рассказывать отдельно про установку и активацию, потому что она аналогична другим слайдерам, поэтому – открываем плагин. Перед нами появляется окно:
Вам предложат на выбор: создать свой слайдер, использовать готовый или сделать импорт из файла.
Остановимся на варианте №3. Выбирайте “Add slider from template”
Перед вами появится масса возможных вариантов слайдера – выберите понравившийся. У каждого слайдера есть опция превью, можно посмотреть как он будет смотреться на сайте.
У слайдера есть множество настроек, давайте разберемся с основными.
Перейдите в настройки.
Задайте имя слайдеру и сгенерируйте шорткод. Далее определитесь с типом слайдера и размером (указать размер можно для показа на всех и по отдельности для каждого из устройств).
После этого вставьте шорткод, чтобы слайдер отобразился на странице.
Одна из возможностей слайдера – это добавление слоев. У каждого из слоев есть панель настроек.
Возможности настроек:
- “style” – можно указать шрифт, цвет с размером и расположением.
- “animation” – можно задать анимацию и скорость и тд.
- “loop” – можно задать функцию постоянного вращения.
- “visibility” – можно выключить видимость каждого из слоев для разных устройств.
- “action” – можно указать определенное действие кнопкам на слайде. Укажите, что будет происходить при нажатии на«Контакты» или «Купить сейчас» – переход на контакты или переход в магазин.
Вы также можете добавлять новые слои путем нажатия кнопки “Add layer” и выбора нужного элемента.
И, конечно, вы можете задать очередность появления и длительность показа элементов – просто перемещайте их вверх или вниз.Я рассказала только про основные настройки, но плагин Slider Revolution имеет просто невероятный функционал.
Так что пробуйте, если что-то покажется непонятным, пишите в комментариях ниже или на форум.
Вам может понравиться:
Пошаговое руководство «Как сделать сайт на WordPress».
Что такое Woocommerce – все о платформе электронной коммерции или как создать интернет-магазин.
Рекомендации по выбору темы WordPress.
А также подборка лучших бесплатных тем WordPress.
И на десерт:)
Видео с возможностями Slider Revolution
Смотрите и вдохновляйтесь!
И подписывайтесь на нас в Facebook, Instagram и Twitter.
azbuka-wp.ru
Revolution Slider v5.1.5 премиум слайдер WordPress от Themepunch
Revolution Slider v5.1.5 премиум слайдер WordPress от Themepunch
Slider Revolution v.5.1.5 — мощный плагин для wordpress с помощью которого можно создать многофункциональный слайдер с разным содержимым. Огромное количество настроек и предустановленных эффектов. Дополнительные настройки в редакторе анимации с возможностью посмотреть изменения в режиме реально времени. Расширенные возможности для использования различно видео с популярных сервисов: YouTube и Vimeo. Вы так же можете вставить свое видео вручную, благодаря мощному видео-проигрывателю, который разработан на HTML5 технологиях. Потрясающий эффект придает возможность использования полноэкранного видео в слайдере. Live Demo Мощный, функциональный и главное русифицированный плагин слайдера.
Чтоб вы могли представить себе на сколько он мощный вот скрины из настроек.
Редактор слайдов:
Важно: Актуальная версия плагина Slider Revolution v.5.1.5 требует 256мб php memory для корректной работы. Уточните у своего хостера перед установкой и не забудьте дополнительно сконфигурировать свой WordPress, так как по умолчанию в нём используется 40мб если не ошибаюсь. Как увеличить используемую память можно почитать здесь на нашем сайте.
Посмотреть Демо
Скачать:
Slider Revolution v.5.1.5
Slider Revolution v.5.0.7
chelp.info
что делает этот плагин таким замечательным
Slider Revolution — превосходный слайдер, доступный как плагин WordPress, плагин jQuery и плагин Joomla. Он пользуется огромной популярностью в сообществе благодаря огромному спектру функций и простоте использования.
В этом обзоре мы рассмотрим только основные функции плагина Slider Revolution, а затем мы покажем вам, насколько легко создавать собственные слайдеры с нуля.
Slider Revolution: что делает этот плагин таким замечательным
В Slider Revolution есть множество отличных функций, которые упрощают создание пользовательских слайдеров для вашего сайта. Вот несколько из наших фаворитов.
Реагирующие макеты
Плагин готов к работе и включает в себя несколько вариантов макета слайдера, чтобы сделать вашу жизнь проще. Сначала выберите тип слайдера: стандартный слайдер, сцену героя (одиночный слайд) или слайдер карусель. Затем выберите макет: авто или полный экран.
Опция автоматической компоновки позволяет вам установить размер ползунка с помощью точных пикселей, с дополнительными параметрами для установки размеров ползунка с различной шириной экрана (рабочий стол, ноутбук, планшет и телефон). Если вы оставите этот параметр по умолчанию, он растянет ползунок до ширины основного контейнера, как определено в вашей теме WordPress.
Самый уникальный вариант макета — полноэкранный. С помощью этой опции вы можете создавать фантастические слайдеры, которые буквально заполняют весь экран, независимо от размера вашего браузера или устройства (вы даже можете использовать эту опцию, чтобы добавить полноэкранные слайдеры с видео для еще большего эффекта).
Несколько источников контента
Хотите создать слайдер для своих сообщений? Или для ваших продуктов WooCommerce? Не проблема — выберите один из 11 источников контента при создании слайдера.
Легкие варианты
Slider Revolution упрощает создание пользовательских слайдеров, добавляя опции практически для всего. Выберите задержку слайда, стрелки навигации, пользовательские шрифты, добавьте фон параллакса, местоположение ползунка (добавьте поля), добавьте слои носителя, вставьте кнопки, выберите слайд-переходы и многое другое, используя раскрывающиеся меню по всему плагину.
Кроме того, вы можете настроить практически все и даже сохранить свои собственные пресеты, чтобы повторно использовать стили шрифтов, слайд-переходы, анимацию слоев и многое другое.
Поддержка мультимедиа
Добавьте текст, ссылки, изображения и видео с помощью нескольких щелчков мыши. Это дает вам возможность создавать информационные слайды, с которыми смогут ознакомиться ваши читатели и клиенты. Кроме того, каждый из этих типов носителей добавляется как собственный слой с уникальными анимациями, временем и стилями, которые вы задаете с помощью супер-опций Slider Revolution.
Установка слайдера
Сначала вам нужно будет получить копию плагина WordPress Slider Revolution. Существует несколько разных способов установки плагина.
kirpach.pro
Slider Revolution для WordPress
Слайдеры продолжают преобладать в качестве наиболее востребованного плагина или дополнения для современного веб сайта. С развитием новых технологий (CSS3, HTML5, JQuery и других), популярность слайдеров и их использование на сайтах становится неотъемлемой составляющей.
Практически в каждом шаблоне можно увидеть эффектный динамический слайдер, который обычно расположен в верхней части главной страницы.
Для системы управления сайтом WordPress существуют большое количество плагинов с помощью которых можно установить на свой сайт слайдер с разным содержимым. Среди всех существующих, лично я выделяю и считаю лучшим плагином слайдера для WordPress — Slider Revolution.
Описание и возможности плагина
Slider Revolution — мощный плагин для wordpress с помощью которого можно создать многофункциональный слайдер с разным содержимым.
Огромное количество настроек и предустановленных эффектов. Дополнительные настройки в редакторе анимации с возможностью посмотреть изменения в режиме реально времени.
Расширенные возможности для использования различно видео с популярных сервисов: YouTube и Vimeo. Вы так же можете вставить свое видео вручную, благодаря мощному видео-проигрывателю, который разработан на HTML5 технологиях.
Потрясающий эффект придает возможность использования полноэкранного видео в слайдере.
Демонстрация работы плагина и видео
Для того чтобы посмотреть и оценить возможности плагина, можно посмотреть демо.
Рекомендуем ознакомиться с видео материалами по установке и настройке плагина, а так же как правильно создать слайдер.
займ онлайнзайм на карту
Информация
DEMO Посмотрите установленную тему в демо-режиме, для того чтобы оценить все возможности, а так же найти документацию и разные варианты оформления темы.Скачать
Версия, доступная для бесплатного скачивания:
Slider Revolutionv5.4.17 MB [ исходники, документация ]
Файлы для скачивания доступны только зарегистрированным пользователям со статусом "подписчик". Важная информация.
Регистрация /Вирусов нет - архив проверен антивирусом Dr.Web
Купить
Приобретая тему или плагин у официального разработчика вы обеспечиваете себе гарантию работоспособности продукта и ряд преимуществ:
- Самая последняя и актуальная версия
- Бесплатные обновления
- Бесплатная техническеая поддержка
- Полная совместимость с последней версией WordPress
Смотрите также
Отзывы и комментарии
freeams.ru
Крутой слайдер WP c вау-эффектамиanton-apraev.ru
Привет всем на моем блоге anton-apraev.ru! С вами Antay и сегодня продолжая вау-эффекы в wordpress рассмотрим Slider Revolution который поставляется либо в премиум-темах wordpress, либо его можно купить отдельно.
Slider Revolution: Начало работы
На первой вкладке плагина можно создать свой новый слайдер, обратится к шаблонам с официального сайта плагина или импортировать шаблон из уже имеющегося у вас места на компьютере:
Создаем новый слайдер В разделе 2 открывшейся страницы указываем:
- Название
- Алиас (латинскими буквами — это своеобразный логин)
- Шоткод (создастся автоматически на основе алиаса — его можно будет вставлять в любое место на сайте.)
После жмем сохранить настройки.
Слайдер теперь появится вместе с элементами Новый слайдер, Add Slider From Template, Импотировать слайдер. Его также можно добавить в избарнное нажав на иконку звездочки на нем.:
В выпадающем списке каждого слайдера также есть варианты использования слайдера:
Нажав на иконку шестиренки — можно настроить параметры слайдера, нажав на иконку карандашик можно настроить сами слайды.
Slider Revolution: Редактор слайдов
В каждом настроенным по указанным параметрам слайдере — есть слайдеры. Каждому слайду — можно задать имя, дублировать, добавить в шаблон, удалить. Также есть красная и зеленная иконка отвечающая за отображение слайдера во фронтенде:
В блоке Добавить Слайд (можно добавить сразу несколько слайдов-пакетно):
Все добавленные слайды можно перетаскивать между собой меняя очередность их вывода в слайдере.
1.Главный фон
Выбираем источник для слайдера:
Затем настройки источника (они различны для каждого источника + для прозрачности и цвета отсутствуют):
В Filtres все эффекты которые можно применить к слайду:
В Parallax/3D (он должен быть заранее включен в настройках слайдера):
После этого выбираем нужный % паралакса:
Ken Burns (для Главное/фоновое изображение и внешняя ссылка). Плавное масштабирование и изменения плоложение:
Однако данный эффект не работает с анимацией.
2. Общие параметры
В общих параметрах отдельно можно установить настройки конкретного слайдера.
Если ничего не менять к слайдеру будут применяться настройки по умолчанию (из раздела Настройка слайдера — Общие параметры):
3. Миниатюра
Здесь настраиваются миниаютуры к слайдам (по умолчанию если ничего не вставлять миниатюра будет такой же как и сам слайд).
4. Анимация слайда
Обычно для анимации в самих Настройках слайдера в Навигации включают — Стрелки:
В самой анимации слайда идет блок состоящий из 4 колонок:
- Категории анимации.
- Демо анимации выбранного варианта.
- Используемые анимации (в каждом цикле прокрутке слайда).
- Настройки анимации (кол-во слотов 1 слайда, поворот-угол, длительность анимации, появление и исчезание) .
5. Ссылки и SEO
Можно создать Класс и ID для придание им свойств CSS, даже включить ссылку чтобы при нажатии на слайд перекидовало на указанный url-адрес или на следующий слайд. Также переброска на новый слайдер может идти не горизонтальн, а вертикально:
Также выбирается передняя сторона (если слои не кликабельны), задняя сторона если слои кликабельны.
6. Информация о слайде
Здесь прописываются название категорий на сайте или шаблоны — которые будут выведены в навигационных табах. В максимальном количестве символов которые будут выведены в названии указываем свое число.
7. Nav.overwrite
Установление своих настроек навигации (отличающихся от глобальных настроек).
- Стрелочки
- Маркеры
- Табы
- Миниатюры
Это делается в силу возможной разности в контрастности различных слайдов.
Slider Revolution: Слои
Внизу настроек слайдера идет работа со слоями слайда
Старайтесь всегда брать слайды в размерах 1920х1080 способные отображаться на максимальное разрешение + удобно под этот формат редактируемые.
2 способа добавить слой:
- Нажать на синию кнопку — Add Layer (выбрать нужный тип слоя)
- Внутри редактора нажать ПКМ — Add Layer (выбрать нужный тип слоя)
Нажав на фиолетовую кнопку Object layer — можно также попасть в библиотеку объектов для их добавления.
Нажав на 3 элемент в верхнем меню редактора слоев можно выбрать конкретный слой из имеющихся с которым хотим работать:
Название слоев в этих настройках и сами тексты в слоях — могут быть различными. Чтобы отредактировать слой на слайде — жмем иконку карандашик:
Слою можно задать мета-шаблоны:
Здесь это отображение ссылки на текущую страницу и отобразить ссылку на главную страницу сайта.
При вставки шаблонов слоя в тег а слой станет кликабельным:
- <a href=»»{{current_page_link}}»> Текст</a>
- <a href=»»{{home_url}}»> Текст</a>
Получается эффект когда на слайдере расположены несколько слоев поверх друг друга и при нажатии на которые (они занимают лишь небольшую часть слайдера) открывается отдельное окно с переброской на нужный url.
В рамках редактора можно ставить наводящие линии просто кликнув на них после чего такая линия закрепится в редакторе (затем ее можно перетаскивать или удалить):
Внизу редактора можно привязывать конкретные объекты/слои к:
- Вспомогательной линии (не сможет выйти за ее границы)
- К другим слоям
1. Текст/HTML
Прописываем свой текст, настраиваем ему цвет, размер, можно вставить иконки, чтобы сохранить жмем зеленую галочку:
2. Изображение
Здесь все то же самое, можно указать ширину и высоту изображения:
3. Audio
Здесь указывается внешний url — откуда берется композиция или она берется из медиабиблиотеки:
4. Видео
Здесь вставляем нужный url-на видеоролик:
5. Кнопка
Здесь настраиваются кнопки:
6. Фигура
Здесь самостоятельно создаем фигуру прописывая ей градусы в %:
7. Object
То же самое что и при выборе фиолетовой кнопки — попадание в библиотеку обектов:
8. Импорт
Можно импортировать нужные созданные ранее объекты из слайда, слайдера, слоя :
Статические слои в Slider Revolution
В визуальном редакторе слайдера также можно задать статические слои которые будут оставаться неизменными на нужном вам количестве слайдов.
В выпадающем списке можно ничего не выбирать, а создать статический слой самостоятельно в редакторе ниже (в появившейся вкладке статические слои):
После создания слоя указываем:
- С какого слайда начинать его показывать.
- На каком слайде закончить его показ.
Дополнительно ему можно задать нужное свойство.
Группы слоев в Slider Revolution
Для удобства можно объединить несколько слоев — внизу нажав на ADD GROUP.
После в редакторе появится прямоугольник — в который нужно перетащивать нужные вам слои которые хотите объединить. Сам контейнер при этом можно увеличить под нужный размер:
Slider Revolution: Вкладки визуального редактора
Поверх самого визуального редактора слайдов также располагается серия вкладок со своими настройками.
Стиль
Здесь не только можно настроить нужный стиль текста, но и самое главное включить автоперенос текста на следующую строку (иконки W-длинна строки и T-со стрелочкой вниз — перенос).
В расширенных настройках стиля можно:
- Задать фон слоя,
- Изменение цвета при наведении.
- Задать границу слоя (стиль, толщину, цвет, скругление границ)
- Сам слой можно растянуть, затем выровнять находящийся в нем текст по краю или по центру
- Можно сделать 3-d эффект текста
- Переключение контента до/после
И множество других элементов
Анимация
- Каждому слою можно задать анимацию и прямо в редакторе просмотреть как она будет выглядеть.
- Можно также задать скорость анимации
- Разделить появления текста — по буквам, по словам, по строкам
- Направление анимации разделения
- Задержка анимации между разделенными элементами
В продвинутых настройках
- выезжание срава/слева
- выезжание сверху/снизу
- появление с маштабриованием или уменьшением
Также прозрачность, поворот, чередование, масштабирование, наклон, маска (видимость слоя только при вхождении в зону маски)
Loop
Создание различных вариантов круговой анимации.
Видимость
Включается/отключается видимость конкретных слоев на устройствах
- Компьютер (>980px)
- Планшет (>778=980px)
- Широкий смартфон (>480=778)
- Узкий смартфон (<480px)
Поведение
- Здесь включается автоматическая респонсивность (адаптивность под размеры экрана).
- Обычно включают всё.
Действие
Действие при наведении мышки на слой, нажатии или отведения.
Атрибуты
Здесь задаются ID, Классы, Wrapper ID, Wrapper Classes, Rel, Название, Tabindex и т.д.
Parallax|3D
В зависимости от того что включено:
- Настраиваем интенсивность параллакса/3D
- Эффект можно настроить как для самого слайда, так и для конкретного слоя находящегося на нем.
Временная шкала
Здесь после нажатие play по шкале:
- Здесь бежит красный бегунок показывающий на какой доли секунды что происходит (его также можно передвигать вручную)
- Также есть синий бегунок — означающий задержку слайда (если его потянуть — будет изменена стандартная задержка смены слайдера)
Кроме этого отдельно настраивается:
- Синяя шкала — длительность анимации фона слайда
- Другие шкалы — за свои слои (их столько сколько вы создали слоев
Под временной шкалой также — есть серый бегунок позволяющий проматывать длинную временную шкалу.Нажав на кнопку редактирования (edit) — есть возможность задать появление слоя на нужной милисекунде и длительность анимационного эффекта:
Эту же операцию можно проделать и в завершении шкалы. Здесь если хотим чтобы слой не исчезал до самого конца — жмем иконку круговой стрелки:
Также здесь можно поменять расположение слоев просто подхватив слой и перетащив его под/над другим слоем:
Резюме
Таким образом Slider Revolution позволяет придавать вау-эффект сайтам. На этом все! Успехов и достижения целей и до встречи на anton-apraev.ru!
anton-apraev.ru
