Все, что вам нужно знать о модуле Lottie's Divi 5

Модуль Lottie's Divi 5 привносит динамические, легкие анимации на ваши страницы, делая ваши страницы более привлекательными и интерактивными. Правильные визуальные эффекты являются ключом к привлечению внимания и привлечению посетителей. С модулем Lottie Divi 5 позволяет добавлять профессиональные анимации, которые также подходят для производительности.

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

Что такое файлы Lottie?

Lottie Animations-это легкая графика, основанная на JSON, которая отображает как масштабируемые векторы. Они доставляют масштабируемые визуальные эффекты без значительных размеров файлов видео или GIF. Благодаря своей способности объединять производительность с гибкостью, Lottie приобрела популярность, что делает его популярным для современного веб -дизайна. В отличие от традиционных анимаций, файлы Lottie используют векторные данные JSON, обеспечивая четкие визуальные эффекты и плавное воспроизведение на всех устройствах и размерах экрана.

Подписаться на наш канал на YouTube

В Divi 5 модуль Lottie плавно интегрирует эти анимации в визуальный строитель, позволяя пользователям добавлять динамические, современные штрихи на свои веб -сайты Divi в нескольких кликах. Независимо от того, выделяете ли CTA или добавление Flair в раздел героев, модуль Lottie производит включение анимации без сложного кодирования без усилий.

С модулем Lottie Divi 5 преобразует то, как вы приносите движение в свой веб -дизайн, делая их очаровательными и эффективными.

Ключевые функции

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

Простота использования

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

Благодаря количеству ресурсов, доступных в Интернете, анимация по поиску является простой. Такие платформы, как Lottiefiles и Lordicon, предлагают обширные библиотеки бесплатных и премиальных анимаций Lottie, начиная от тонких икон загрузки до яркой графики.

Для тех, кто ищет уникальный штрих, вы можете создавать пользовательские анимации, используя такие инструменты, как Adobe After Effects, с плагином BodyMovin. Этот плагин экспортирует анимации как файлы JSON, совместимые с модулем Lottie. Независимо от того, выбираете ли вы готовый или пользовательский анимацию, процесс прост.

Параметры настройки

Модуль Lottie в Divi 5 предлагает параметры настройки, предоставляя вам контроль над несколькими аспектами файла Lottie. Для интерактивного опыта используйте анимацию триггера , чтобы выбрать, когда активировать анимацию, например, на загрузке, когда элемент входит в порт View, нажимать, нажимать или прокрутить. Вы можете включить анимацию цикла , чтобы разрешить непрерывное движение в вашем файле Lottie, отрегулировать скорость анимации , выберите направление (вперед или назад) и выберите между нормальным или отскоком в поле режима Play .

Загрузка анимации JSON

Добавление анимации Lottie в Divi 5 требует загрузки файлов JSON, стандартный формат для файлов Lottie. Тем не менее, WordPress не поддерживает загрузку JSON в свою медиа -библиотеку, поэтому вам нужно будет предпринять дополнительные шаги, чтобы вы могли загрузить их.

Первый вариант - создать дочернюю тему и добавить фрагмент PHP в файл Function.php вашего дочерней темы. Этот метод легкий и обеспечивает безопасную обработку ваших анимационных файлов. В качестве альтернативы, вы можете использовать такие типы загрузки плагина, чтобы разрешить загрузку JSON, не касаясь какого-либо кода, что делает его идеальным для пользователей, которые предпочитают решение Plug-и Play. Для пошагового руководства по реализации любого метода ознакомьтесь с нашей статьей поддержки, которая проходит через процесс, чтобы настроить ваш веб-сайт Divi 5 для загрузки JSON.

Как использовать модуль Lottie в Divi 5

Добавление много анимации в Divi 5 просто. Создайте или загрузите много анимацию из такого источника, как Lottiefiles или Lordicon. Найдите и нажмите на модуль Lottie в визуальном строителе, чтобы добавить его на свою страницу.

Загрузите файл JSON или найдите его в своей галерее WordPress Media.

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

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

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

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

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

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

Как вы можете видеть, добавление файла Muttie на ваш веб -сайт Divi 5 занимает секунды и добавляет немного таланта к вашим веб -страницам, не беспокоясь о производительности.

Практические примеры с использованием модуля Lottie

Модуль Lottie в Divi 5 предлагает широкий спектр приложений, добавляя талант к веб -сайтам с динамической анимацией. От улучшения контактных страниц до привлекательных секций героев, его гибкость подходит для всех типов дизайнов.

Благодаря бесшовной интеграции и параметрам настройки пользователи Divi могут создавать привлекательные, удобные для производительности опыт на всем их веб-сайте.

Контактные страницы

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

404 страниц

Превратите разочарование 404 ошибок в запоминающиеся моменты с игривой анимацией Lottie. Добавьте вращающийся компас или анимированный значок поиска на свою страницу 404 в сочетании с коротким сообщением.

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

Избранные продукты

Продемонстрируйте свои любимые продукты или категории WOO с Lottie Animations, чтобы выделить продукты в продаже. Например, поместите значок продажи Lottie Animation рядом с представленным продуктом, чтобы выделить его.

Во -первых, установите анимацию, чтобы запустить на загрузке. Затем он активируется, когда пользователи просматривают, привлекают глаза на продукты и повышают визуальную привлекательность.

Службы разделы

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

Кроме того, установите триггер View для активации анимации, как исследуют пользователи, обеспечивая динамичную, профессиональную презентацию.

Герой разделы

Сделайте разделы своих героев незабываемыми с жирной анимацией Lottie, которые задают тон для вашего веб -сайта. Во -первых, добавьте плавную фоновую анимацию, используя Divi's Lottie Module. Затем поместите его за ряды и модули с настройками позиции Divi.

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

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Заключение

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

Готовы попробовать модуль Lottie? Поделитесь своими мыслями или творениями в комментариях или в социальных сетях.