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

Вы избавитесь от Slider Revolution, практикуясь с привычкой, а также читая этот учебник.

В наших предыдущих уроках мы узнали, как:

И теперь, когда мы настроили наш слайдер, мы собираемся создать слайдах "Из" ползунок .

Как начать работу с редактором «Слайды»

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

редактор слайд-переворот-слайдер

В самом верху вы увидите ту же панель инструментов, которая позволяет вам вернуться к списку «ползунков или слайдов», к параметрам слайдера и предварительному просмотру слайдера среди других.

Узнайте также наш 10 плагинов WordPress, которые позволяют оценивать ваши сообщения в блоге

Revolution-слайдер-бар doutil-издание-оф-слайд

Внизу у нас есть новый раздел, который позволяет нам видеть глобальные слои, различные «слайды» и кнопку для добавления нового « скользить .

создание-оф-слайд-кнопка-слайдер-революция

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

слайдер опции-создание слайд-революция

При наведении курсора на кнопку добавления слайда вы увидите другие параметры, позволяющие добавить пустой слайд, добавить несколько слайдов, добавить слайд из шаблона (модель).

создание-оф-слайд-вариант контрреволюция-слайдер

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

второй слайд-создание-серовато-слайдер-слайдер-переворот

Slider Revolution на этом уровне - настоящая панель инструментов. Если я объясню вам все, вы не поймете много, поэтому я избегу говорить о функциях, которые могут сбивать с толку и не являться существенными.

Прочитайте нашу статью на 6 WordPress плагины сжатия изображений для вашего блога

Когда вы выбрали слайд, вы можете начать редактирование в следующем разделе. Этот раздел состоит из нескольких вкладок (7), которые предоставляют вам доступ к различным функциям.

Как добавить фоновое изображение к сцене

Первое, что вам нужно сделать, это добавить фон к нашему слайду. Здесь у вас есть выбор между: фоновым изображением (из вашей медиатеки), внешним URL-адресом, который указывает на изображение, прозрачным фоном, который будет использовать цвет, предложенный WordPress тема, фиксированный цвет, видео Youtube, Vimeo или HTML5. Мы выберем фон» изображение .

Фоновое изображение-пример

Вы можете найти много бесплатных изображений в Интернете. Просто сделайте поиск в Google. 

Image-обратно план-революция-слайдер

Когда вы добавляете изображение, это сразу применяется в предварительном просмотре слайда и в «сцене».

Szene-революция-слайдер

Как добавить элемент в сцену

Теперь, когда у нас есть хорошо оформленная сцена, мы добавим элемент. Каждый элемент, который вы добавляете в сцену, считается слоем или слоем. Эта особенность слоя поможет вам поверить мне.

Чтобы добавить элемент на сцену, наведите курсор на Добавить слой .

муху надстройку слой-слайдер революции

Вы заметите, что можете добавить несколько различных элементов, включая: текст / HTML, изображения, аудио, видео, кнопку, фигуру, объект и импортировать элемент.

Начнем с добавления прозрачного изображения маленького щенка Снупи.

смешно-выслеживающий-PNG

Затем добавьте это изображение в сцену, и у вас будет что-то вроде этого:

Пример-слайдер-слайдер-переворот

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

Изменение размера выполняется лобовое сопротивление ». Чтобы изменить размер, сохраняя пропорции, нажмите и удерживайте Май С клавиатуры во время изменения размера.

Смотрите также наш 10 WordPress плагины, которые сделают вас лучшим Blogger

новое-представление-выслеживающий-революция-слайдер

Теперь Снупи выглядит так, это более уместно. Вы также можете перевернуть изображение, используя индикатор, расположенный в правом верхнем углу каждого изображения, например:

вращательно-DiMAGE-переворот-слайдер

Как позиционировать элементы с помощью сетки

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

тостер Daide-революция-слайдер

Эта сетка имеет плитки разных размеров: чем меньше размер, тем точнее вы будете располагать элемент.

Инвестиционно-оф-фотографий

Как добавить анимацию

В Slider Revolution есть 3 типа анимации: анимация входа, анимация во время (существование элемента в сцене) И в конце анимации.

Смотрите также наш 6 WordPress плагины сжатия изображений для вашего блога

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

Итак, нажмите на Snoopy, зайдите на страницу и нажмите на вкладку « Анимация .

анимированный-слайдер-революция

На предыдущем изображении у меня есть входная анимация синим цветом и выходная анимация красным.

Чтобы изменить анимацию, щелкните раскрывающийся список после значка бегущего человека.

значок анимированный-слайдер-революция

В вашем распоряжении большое разнообразие анимации. Я оставляю вам выбирать анимацию, которую вы хотите определить для записи элемента. Со своей стороны я выбрал easeOutElastic », Чтобы получить такой результат:

Анимация-антре-выслеживающий

Здесь для вас наш 4 WordPress плагины для повышения нижнего колонтитула вашего блога

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

Конфигурация дюна анимированной-слайдер-революция

Лир aussi Как скрыть заголовки статей и страниц WordPress

Теперь я хотел бы отпустить Snoopy, для этого, перейти к Петля И в раскрывающемся списке выберите " Wave  ". Теперь Снупи плавает:

snoppy плавающим

Как настроить видимость элементов

Мой Snoopy плавает, но я не хочу, чтобы он был виден на мобильном телефоне. Так что нажмите " видимость »Убедитесь, что на значке смартфона он отключен:

Видимость-элементы-революция-слайдер

Как настроить поведение элементов

Чтобы оптимизировать загрузку слайдера, вы можете отложить загрузку изображений. Это делается во вкладке какой тренинг С опцией " отложенной загрузки ». Вы можете даже заставить отзывчивость элементов.

Поведение-элемент-переворот-слайдер

Как создать собственные триггеры на элементе

Действия позволяют связывать триггеры с конкретными действиями. Чтобы добавить триггер, нажмите на вкладку Действия »Затем по кнопке« + ».

надстройку а-кнопка спуска затвора

Существуют триггеры 3:

  • Щелчок действие щелчка мышью
  • Ввод мыши над элементом
  • Выход мыши над элементом

Список действий довольно длинный. Например, вы можете перенаправить пользователя, который нажимает на Snoopy, на другую страницу, выбрав действие " Single Link Который выведет новые варианты.

Узнайте также наш Премиальные плагины 10 для WordPress от Booking и Booking

Управление-оф-триггеров-революция-слайдер

Как использовать Slider Revolution TimeLine

Slider Revolution предлагает интерфейс управления временем внизу. Этот интерфейс позволяет вам видеть, где анимация элемента начинается и где заканчивается.

начиная-и-конец Дюны-кино-на-слайдер-революцию

На предыдущем изображении вы заметите две синие стрелки. Первое слева указывает начало анимации ввода элемента, а второе указывает конец анимации ввода. Темно-красный цвет указывает на жизнь предмета в сцене.

Лир aussi Как добавить отсчет времени на вашем блоге WordPress

Вы найдете конец, также похожий на другой конец продолжительности (входная анимация, время жизни и конец анимации).

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

На временной шкале также есть игрок, которого вы можете активировать для предварительного просмотра слайда.

Анимация-график-революция-слайдер

До этого я дал вам основы для создания слайда. Теперь сохраните свой слайдер и запустите предварительный просмотр.

Резервное копирование и previsulisation

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

Откройте для себя также некоторые темы и премиальные плагины WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Диск-аудио

Дисковое аудио — еще один Плагин Wordpress который поможет вам отобразить аудиоплеер прямо на вашем сайте одним нажатием кнопки. Макет аудиоплеера полностью адаптивен, поэтому мобильные пользователи смогут без проблем пользоваться его функциями.

Дисковый аудиоплеер премиум плагины wordpress добавить аудиоплеер

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

Читайте также: 10 WordPress плагины для расширения научных исследований в Вашем блоге

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

скачать | Демонстрация | веб-хостинг

2. Event Booking Pro

Это еще один Плагин Wordpress 100% отзывчивый, простой в настройке и предназначенный для управления бронированием на любом веб-сайте, который предлагает свои услуги в области мероприятий.

Бронирование мероприятий pro

Его основные функции включают в себя: настройка текста, цвета, границ и других, поддержка PayPal, управление кодами купонов и купонов, поддержка Google Maps, поддержка управления электронной почтой,  поддержка шорткодов, интуитивно понятная панель управления, простое создание событий, полный контроль над внешним видом и т. д.

скачать | Демонстрация | веб-хостинг 

3. Социальный обмен и Locker Pro

Плагин Social Share & Locker Pro был разработан, чтобы сделать ваш сайт более заметным в социальных сетях. С помощью всего нескольких щелчков мышью вы можете либо установить положение своих социальных иконок, либо заблокировать свой контент, потребовав публикации в одной из предлагаемых вами социальных сетей.

Плагин Social Share Locker Pro для WordPress

У вас есть предопределенные темы 10, и это должно охватывать самые распространенные пожелания. Все ее темы - Retina и чудеса творчества. 

30 вещи, чтобы сделать на вашем блоге после их публикации Узнайте их, обратившись к этой статье.

Кроме того, с Social Share & Locker Pro вы сможете отображать полное название социальных сетей или только значок. Это будет зависеть от вашего дизайна, доступного пространства или ваших пожеланий.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

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

Заключение

Вот! Это все для этого руководства. Мы надеемся, что это руководство познакомило вас с основами создания слайд-шоу с помощью Slider Revolution в блоге или на веб-сайте WordPress. Если у вас есть какие-либо вопросы, предложения или замечания, оставьте их в нашем разделе Комментарии.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

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

...