Пропустить

Как создать слайд-шоу с помощью 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, изображения, аудио, видео, кнопку, фигуру, объект и импортировать элемент.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

snoppy плавающим

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

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

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

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

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

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

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

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

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

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

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

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

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

Список действий довольно длинный. Например, вы можете перенаправить пользователя, который нажимает на 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. [FREE]

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

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

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

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

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

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

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

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

Вывод

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

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

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

...

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

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

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

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

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