Как добавить эффекты анимации к разделам / строкам в Divi

Опубликовано: 2017-08-11

В сегодняшнем руководстве по Divi мы покажем вам, как добавлять эффекты анимации к разделам и строкам в Divi. Сама тема Divi предоставляет некоторые соответствующие эффекты анимации, которые помогут вам повысить уровень взаимодействия с вашим сайтом. Эти эффекты легко назначить изображению в Divi Builder в подкатегории «Анимация» на вкладке «Дополнительно».

Однако, если вы ищете способ добавить эти эффекты анимации к другим модулям, разделам или строкам вашего веб-сайта, это тоже возможно. В этом посте мы покажем вам, как именно это сделать. Помимо того, что мы покажем вам, как добавить встроенные эффекты анимации, мы также покажем вам, как интегрировать wow.js и animate.css в ваш сайт Divi.

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

эффекты анимации

Divi Animations или Wow.js и Animate.css?

Вы, вероятно, задаетесь вопросом, в каких случаях вам следует рассмотреть возможность использования анимации Divi, а в каких случаях wow.js и animate.css сработают лучше. Хотя использование встроенной анимации Divi является самым простым решением, если вы не хотите создавать какие-либо расширенные эффекты анимации, эффекты wow.js и animate.css определенно принесут большую добавленную стоимость вашему веб-сайту.

Когда использовать Divi Animations

В Divi есть пять доступных анимационных эффектов, которые вы можете использовать:

Постепенное появление
Нижний слайд
Левый выдвижной
Правильная вставка
Верхняя выдвижная

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

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

Когда использовать Wow.js и Animate.css

Возможно, вам действительно понравится интеграция wow.js и animate.css на ваш сайт из-за множества имеющихся у вас опций. Существует 14 категорий эффектов анимации, которые содержат различные эффекты, относящиеся к этой категории. Вы можете выбрать следующие категории:

Ищущие внимания
Подпрыгивая входы
Прыгающие выходы
Затухающие входы
Затухающие выходы
Ласты
Скорость света
Вращающиеся входы
Вращающиеся выходы
Раздвижные входы
Раздвижные выходы
Увеличить входы
Zoom Exits
Специальные

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

Как добавить эффекты анимации к разделам / строкам в Divi

Подпишитесь на наш канал Youtube

Используйте встроенные эффекты анимации

Первая возможность, которую мы вам покажем, - это встроенные эффекты анимации. Мы собираемся показать вам, как применять эффекты как к секции, так и к строке. Откройте страницу, на которой вы хотите внести изменения.

В нашем примере мы собираемся добавить эффекты анимации в первый раздел и строку нашей страницы. Добавление анимации для раздела или строки в обоих случаях одинаково. Коды классов CSS для различных эффектов анимации следующие:

CSS-класс постепенного появления : et-waypoint et_pb_animation_fade_in
CSS-класс нижнего слайда: et-waypoint et_pb_animation_bottom
Левый выдвижной класс CSS: et-waypoint et_pb_animation_left
Вставка справа: класс CSS: et-waypoint et_pb_animation_right
Верхний вставной класс CSS: et-waypoint et_pb_animation_top

Добавить эффект анимации в строку

Чтобы добавить анимацию в определенную строку, откройте настройки этой строки и перейдите на вкладку «Дополнительно». На вкладке «Дополнительно» поместите класс CSS эффекта анимации в поле «Класс CSS». В этом случае мы собираемся показать вам, как добавить анимацию плавного появления.

эффекты анимации

Добавить эффект анимации в раздел

Тот же метод добавления эффекта анимации к строке применяется и к разделу. Перейдите на вкладку «Дополнительно» и поместите выбранный вами класс CSS эффекта анимации в поле «Класс CSS». В этом примере мы собираемся показать вам, как добавить эффект анимации верхнего слайда.

Результат

После того, как вы добавили эффекты в свой раздел и строку, вы увидите, что следующий результат становится на свои места:

Добавьте Wow.js и Animate.css в свою дочернюю тему

В этой следующей части мы покажем вам, как добавить wow.js и animate.css на ваш сайт WordPress и как использовать их во всей теме Divi.

Прежде всего, я хочу поблагодарить Джереми Куксона за этот пост о том, как интегрировать wow.js и animate.css в WordPress. В этой части поста мы покажем вам, как именно сделать интеграцию для веб-сайта WordPress, созданного с использованием темы Divi.

Чтобы добавить wow.js и animate.css на свою веб-страницу, вам нужно будет использовать дочернюю тему на своем веб-сайте. Если вам интересно, как создать дочернюю тему, прочтите этот пост. После того, как вы создали основные файлы своей дочерней темы, вам необходимо добавить два других файла, чтобы дополнить дочернюю тему эффектами анимации.

Загрузите файлы и добавьте их в свою дочернюю тему

Держите свою дочернюю тему в пределах досягаемости и тем временем загрузите следующие два файла, щелкнув следующие две ссылки:

animate.min.css
wow.min.js

После того, как вы загрузили два файла, создайте вложенные папки в дочерней теме. Назовите один из них CSS, а другой JS. После этого поместите animate.min.css в папку CSS и wow.min.js в папку JS.

Эффекты анимации

Загрузить дочернюю тему

Следующее, что вам нужно сделать, это загрузить и активировать дочернюю тему, в которую вы только что добавили wow.js и animate.css. Перейдите в панель управления WordPress> Внешний вид> Темы> и нажмите «Добавить» вверху страницы.

Добавьте PHP-код в свой файл Functions.php

После загрузки дочерней темы добавьте следующие строки кода PHP в файл functions.php дочерней темы:

// * Помещаем Animate.CSS и WOW.js в очередь
add_action ('wp_enqueue_scripts', 'sk_enqueue_scripts');
function sk_enqueue_scripts () {
wp_enqueue_style ('анимировать', get_stylesheet_directory_uri (). '/css/animate.min.css');
wp_enqueue_script ('вау', get_stylesheet_directory_uri (). '/js/wow.min.js', array (), ”, истина);
}
// * Поставить скрипт в очередь для активации WOW.js
add_action ('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer () {add_action ('print_footer_scripts', 'wow_init');}
// * Добавляем JavaScript перед </body> функцией wow_init () {?>
<script type = ”text / javascript”>
новый WOW (). init (); </script> <? php}

Добавление анимации в строки и разделы

Система добавления эффектов wow.js и animate.css к строкам и разделам такая же, как и для эффектов анимации Divi. Вам нужно будет открыть настройки строки или раздела, к которому вы хотите добавить эффект анимации. Затем вы можете поместить класс CSS, назначенный анимации, в поле CSS Class вашего раздела или строки.

Добавить анимацию в строку

В примере, который мы собираемся показать вам со строкой, мы используем эффект fadeInRight, который мы нашли в списке эффектов анимации. Перейдите на вкладку «Дополнительно» в настройках строки и добавьте «wow fadeInRight» в поле «Класс CSS». Каждый раз, когда вы хотите добавить эффект к части своего веб-сайта, убедитесь, что вы поставили «вау» перед используемым эффектом.

Результат

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

эффекты анимации

Добавить анимацию в раздел

Тот же метод применяется к добавлению эффекта анимации в раздел. Перейдите на вкладку «Дополнительно» и добавьте класс CSS wow bounceInDown в поле класса CSS вашего раздела.

Результат

Если вы выполнили все шаги правильно, у вас должен получиться следующий результат:

эффекты анимации

Расширенные настройки

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

Чтобы показать вам, как добавить это время задержки, мы собираемся объединить два эффекта, которые мы использовали в предыдущей части этого поста. Один эффект анимации назначается разделу, а другой - строке. Чтобы эффект анимации строки не пропадал, мы добавим к нему задержку в 2 секунды.

Откройте настройки строки и вернитесь на вкладку «Дополнительно». В поле CSS Class добавьте еще один класс с именем «delay». Этот класс еще не существует, но мы собираемся добавить его на следующем шаге.

Теперь добавьте класс CSS задержки в настройки страницы, над которой вы работаете, нажав следующую кнопку:

Затем добавьте класс CSS со строками кода CSS в поле Custom CSS. Если вы хотите добавить время задержки в 2 секунды, как мы собираемся сделать в этом примере, вам понадобятся следующие строки кода CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Результат

После того, как вы добавили время задержки, результат должен выглядеть следующим образом:

эффекты анимации

Последние мысли

В этом посте мы показали вам, как добавить эффекты анимации на ваш сайт Divi. Мы предоставили вам две возможности. Первый показывает, как использовать стандартные эффекты анимации, предоставляемые Divi. Вторая возможность позволяет интегрировать wow.js и animate.css. Использование эффектов анимации на вашем веб-сайте может помочь вам выделить контент, которым вы хотите поделиться со своими посетителями. Кроме того, он просто великолепно выглядит. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже.

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Лучшее изображение Stocker вверху / shutterstock.com