Пропустить

Как создать слайд-шоу с помощью Slider Revolution на WordPress

Divi: самая простая тема WordPress для использования

Divi: лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуемые]

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

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

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

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

Как взять редактор «Слайдов»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Легко создать свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным внешним видом. Перестань дорого платить за то, что можешь сделать сам. [Free]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, нажмите на Snoopy, вернитесь выше на страницу и нажмите на вкладку " Анимация ».

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

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

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

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

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

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

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

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

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

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

Теперь я хочу отпустить Снупи, чтобы Петля И в раскрывающемся меню выберите " Волна ». Теперь Snoopy плавает:

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress от Envato и легко создайте свой веб-сайт. Уже более 49.720.000 XNUMX XNUMX загрузок. [ЭКСКЛЮЗИВ]

snoppy плавающим

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

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

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

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

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

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

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

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

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

Есть три типа триггеров:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скачать | Демо | Дешёвый хостинг

2. Event Booking Pro

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

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

Скачать | Демо | Веб-хостинг

Легко создать свой интернет-магазин

Скачайте бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать физические и цифровые продукты на WordPress. [Рекомендуемые]

3. Социальный Share & Locker Pro

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

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

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

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

Скачать | Демо | Дешёвый хостинг

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

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

Заключение

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

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

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

...

Эта статья содержит комментарии 0

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения спама. Узнайте больше о том, как используются ваши данные обратной связи.

Вверх
4 акции
доля1
чирикать
Регистрация3