Теперь мы можем начать серьезные вещи. Создание слайдера на Слайдер революция может быть довольно утомительным на первый взгляд. Вы потеряете ориентацию, потому что захотите узнать, где находится тот или иной элемент.
Вы избавитесь от Slider Revolution, практикуясь с привычкой, а также читая этот учебник.
В наших предыдущих уроках мы узнали, как:
- Скачайте и установите Slider Revolution
- Как понять Slider Revolution Home UI
- Как настроить слайд-шоу на Slider Revolution
И теперь, когда мы настроили наш слайдер, мы собираемся создать слайдах "Из" ползунок .
Как начать работу с редактором «Слайды»
В принципе, после сохранения настроек слайдера, вы получаете доступ к в новый интерфейс, который знакомит вас с редактором слайдах .
В самом верху вы увидите ту же панель инструментов, которая позволяет вам вернуться к списку «ползунков или слайдов», к параметрам слайдера и предварительному просмотру слайдера среди других.
Узнайте также наш 10 плагинов WordPress, которые позволяют оценивать ваши сообщения в блоге
Внизу у нас есть новый раздел, который позволяет нам видеть глобальные слои, различные «слайды» и кнопку для добавления нового « скользить .
Наведя курсор на кнопку слайда, вы заметите, что отображаются новые опции. Эти варианты довольно понятны и просты для понимания (дублируйте, добавьте в шаблон, чтобы потом использовать его позже и удалите слайд).
При наведении курсора на кнопку добавления слайда вы увидите другие параметры, позволяющие добавить пустой слайд, добавить несколько слайдов, добавить слайд из шаблона (модель).
В настоящее время вы находитесь на слайде 1, поэтому он выделен в списке слайдов. Если вы создадите новый слайд, он будет выделен вместо первого слайда.
Slider Revolution на этом уровне - настоящая панель инструментов. Если я объясню вам все, вы не поймете много, поэтому я избегу говорить о функциях, которые могут сбивать с толку и не являться существенными.
Прочитайте нашу статью на 6 WordPress плагины сжатия изображений для вашего блога
Когда вы выбрали слайд, вы можете начать редактирование в следующем разделе. Этот раздел состоит из нескольких вкладок (7), которые предоставляют вам доступ к различным функциям.
Как добавить фоновое изображение к сцене
Первое, что вам нужно сделать, это добавить фон к нашему слайду. Здесь у вас есть выбор между: фоновым изображением (из вашей медиатеки), внешним URL-адресом, который указывает на изображение, прозрачным фоном, который будет использовать цвет, предложенный WordPress тема, фиксированный цвет, видео Youtube, Vimeo или HTML5. Мы выберем фон» изображение .
Вы можете найти много бесплатных изображений в Интернете. Просто сделайте поиск в Google.
Когда вы добавляете изображение, это сразу применяется в предварительном просмотре слайда и в «сцене».
Как добавить элемент в сцену
Теперь, когда у нас есть хорошо оформленная сцена, мы добавим элемент. Каждый элемент, который вы добавляете в сцену, считается слоем или слоем. Эта особенность слоя поможет вам поверить мне.
Чтобы добавить элемент на сцену, наведите курсор на Добавить слой .
Вы заметите, что можете добавить несколько различных элементов, включая: текст / HTML, изображения, аудио, видео, кнопку, фигуру, объект и импортировать элемент.
Начнем с добавления прозрачного изображения маленького щенка Снупи.
Затем добавьте это изображение в сцену, и у вас будет что-то вроде этого:
Вы заметите, что в четырех углах изображения маленькие квадратики. Эти квадраты позволяют нам изменять размеры изображений, так как в этом случае Snoopy занимает много места.
Изменение размера выполняется лобовое сопротивление ». Чтобы изменить размер, сохраняя пропорции, нажмите и удерживайте Май С клавиатуры во время изменения размера.
Смотрите также наш 10 WordPress плагины, которые сделают вас лучшим Blogger
Теперь Снупи выглядит так, это более уместно. Вы также можете перевернуть изображение, используя индикатор, расположенный в правом верхнем углу каждого изображения, например:
Как позиционировать элементы с помощью сетки
Сетка помощи является ценным элементом, который помогает лучше позиционировать элементы. Вы можете активировать справочную сетку в левом нижнем углу сцены.
Эта сетка имеет плитки разных размеров: чем меньше размер, тем точнее вы будете располагать элемент.
Как добавить анимацию
В Slider Revolution есть 3 типа анимации: анимация входа, анимация во время (существование элемента в сцене) И в конце анимации.
Смотрите также наш 6 WordPress плагины сжатия изображений для вашего блога
Чтобы добавить анимацию к элементу, вы должны сначала выбрать его, нажав на него (когда элемент выбран, он выделен пунктирной линией с изменяемыми углами).
Итак, нажмите на Snoopy, зайдите на страницу и нажмите на вкладку « Анимация .
На предыдущем изображении у меня есть входная анимация синим цветом и выходная анимация красным.
Чтобы изменить анимацию, щелкните раскрывающийся список после значка бегущего человека.
В вашем распоряжении большое разнообразие анимации. Я оставляю вам выбирать анимацию, которую вы хотите определить для записи элемента. Со своей стороны я выбрал easeOutElastic », Чтобы получить такой результат:
Здесь для вас наш 4 WordPress плагины для повышения нижнего колонтитула вашего блога
Далее слева вы можете определить продолжительность анимации и режим анимации, который вам нужно оставить " Нет раскола Поскольку другие параметры применяются только к тексту, а не к изображениям.
Лир aussi Как скрыть заголовки статей и страниц WordPress
Теперь я хотел бы отпустить Snoopy, для этого, перейти к Петля И в раскрывающемся списке выберите " Wave ". Теперь Снупи плавает:
Как настроить видимость элементов
Мой Snoopy плавает, но я не хочу, чтобы он был виден на мобильном телефоне. Так что нажмите " видимость »Убедитесь, что на значке смартфона он отключен:
Как настроить поведение элементов
Чтобы оптимизировать загрузку слайдера, вы можете отложить загрузку изображений. Это делается во вкладке какой тренинг С опцией " отложенной загрузки ». Вы можете даже заставить отзывчивость элементов.
Как создать собственные триггеры на элементе
Действия позволяют связывать триггеры с конкретными действиями. Чтобы добавить триггер, нажмите на вкладку Действия »Затем по кнопке« + ».
Существуют триггеры 3:
- Щелчок действие щелчка мышью
- Ввод мыши над элементом
- Выход мыши над элементом
Список действий довольно длинный. Например, вы можете перенаправить пользователя, который нажимает на Snoopy, на другую страницу, выбрав действие " Single Link Который выведет новые варианты.
Узнайте также наш Премиальные плагины 10 для WordPress от Booking и Booking
Как использовать Slider Revolution TimeLine
Slider Revolution предлагает интерфейс управления временем внизу. Этот интерфейс позволяет вам видеть, где анимация элемента начинается и где заканчивается.
На предыдущем изображении вы заметите две синие стрелки. Первое слева указывает начало анимации ввода элемента, а второе указывает конец анимации ввода. Темно-красный цвет указывает на жизнь предмета в сцене.
Лир aussi Как добавить отсчет времени на вашем блоге WordPress
Вы найдете конец, также похожий на другой конец продолжительности (входная анимация, время жизни и конец анимации).
С " Сроки Вы сможете контролировать, какой элемент отображается раньше, а какой элемент исчезает первым. Это очень практичный инструмент, который вам нужно освоить, чтобы сделать хорошую анимацию.
На временной шкале также есть игрок, которого вы можете активировать для предварительного просмотра слайда.
До этого я дал вам основы для создания слайда. Теперь сохраните свой слайдер и запустите предварительный просмотр.
Вот и все для этого урока, в следующем мы поговорим об отображении ползунка в статье и о некоторых дополнительных операциях.
Откройте для себя также некоторые темы и премиальные плагины WordPress
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. Диск-аудио
Дисковое аудио — еще один Плагин Wordpress который поможет вам отобразить аудиоплеер прямо на вашем сайте одним нажатием кнопки. Макет аудиоплеера полностью адаптивен, поэтому мобильные пользователи смогут без проблем пользоваться его функциями.
Кроме того, он предлагает множество параметров настройки, включая цветовые схемы, внешний вид, фоновые изображения и прозрачность. У него есть несколько вариантов управления с клавиатуры и также позволяет просматривать список воспроизведения с помощью регулируемой полосы прокрутки.
Читайте также: 10 WordPress плагины для расширения научных исследований в Вашем блоге
Вы также сможете вставлять ссылки для скачивания в музыкальный проигрыватель, чтобы показать пользователям, куда они могут пойти, чтобы купить трек, который воспроизводится на вашем сайте.
скачать | Демонстрация | веб-хостинг
2. Event Booking Pro
Это еще один Плагин Wordpress 100% отзывчивый, простой в настройке и предназначенный для управления бронированием на любом веб-сайте, который предлагает свои услуги в области мероприятий.
Его основные функции включают в себя: настройка текста, цвета, границ и других, поддержка PayPal, управление кодами купонов и купонов, поддержка Google Maps, поддержка управления электронной почтой, поддержка шорткодов, интуитивно понятная панель управления, простое создание событий, полный контроль над внешним видом и т. д.
скачать | Демонстрация | веб-хостинг
3. Социальный обмен и Locker Pro
Плагин Social Share & Locker Pro был разработан, чтобы сделать ваш сайт более заметным в социальных сетях. С помощью всего нескольких щелчков мышью вы можете либо установить положение своих социальных иконок, либо заблокировать свой контент, потребовав публикации в одной из предлагаемых вами социальных сетей.
У вас есть предопределенные темы 10, и это должно охватывать самые распространенные пожелания. Все ее темы - Retina и чудеса творчества.
30 вещи, чтобы сделать на вашем блоге после их публикации Узнайте их, обратившись к этой статье.
Кроме того, с Social Share & Locker Pro вы сможете отображать полное название социальных сетей или только значок. Это будет зависеть от вашего дизайна, доступного пространства или ваших пожеланий.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- Как стать успешным блогером и зарабатывать деньги с помощью WordPress
- Как интегрировать Google Forms WordPress
- Как создать политику конфиденциальности на WordPress
- 6 WordPress плагины для обеспечения RGPD-соответствия блога
Заключение
Вот! Это все для этого руководства. Мы надеемся, что это руководство познакомило вас с основами создания слайд-шоу с помощью Slider Revolution в блоге или на веб-сайте WordPress. Если у вас есть какие-либо вопросы, предложения или замечания, оставьте их в нашем разделе Комментарии.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
...
Привет,
Я хочу добавить ар-изображение на слайдер, захожу в ар-план, в качестве источника выбираю фоновое/основное изображение, но у меня нет синей кнопки «сменить изображение», поэтому я не понимаю, как выбрать нужное изображение чтобы отобразить его как рамку моего слайдера… у вас есть идея?
спасибо
Вальтер