Как добавить анимацию Lottie в WordPress (4 простых шага)

Использование анимации Lottie в WordPress может стать отличным способом украсить ваши страницы. Как правило, они легкие и настраиваемые, поэтому могут помочь вам создавать привлекательный контент, не нанося вреда вашему пользовательскому опыту (UX). Однако, возможно, вы ищете простой способ добавить их на свой сайт.

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

Введение в анимацию Lottie

Lottie — это формат файлов с открытым исходным кодом для веб-анимации. Это позволяет вам создавать собственные анимации для вашего бренда и использовать их на своем веб-сайте:

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

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

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

Как добавить анимацию Lottie в WordPress (4 шага)

Теперь, когда вы знаете немного больше об анимациях Lottie, давайте посмотрим, как добавить их на свой веб-сайт WordPress:

Шаг 1: Установите и активируйте Otter Blocks

Есть много способов добавить анимацию Lottie в WordPress. Например, вы можете использовать HTML и JavaScript. Однако этот метод может быть довольно сложным.

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

Самый простой способ добавить анимацию Lottie на свой сайт — использовать плагин, такой как Otter Blocks:

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

Если вы перейдете на Otter Blocks Pro, вы получите доступ к расширенным функциям, таким как специальные блоки WooCommerce и дополнительные стилистические настройки. Однако вам не нужна версия Pro, чтобы использовать функцию анимации Lottie.

Если вы хотите использовать бесплатную версию, перейдите в раздел «Плагины» > «Добавить новый» на панели инструментов WordPress и выполните поиск «Otter Blocks»:

Затем нажмите «Установить» > «Активировать» . Теперь вы должны увидеть набор новых блоков в редакторе блоков.

Шаг 2. Выберите анимацию из библиотеки Lottie.

Теперь, когда вы настроили Otter Blocks на своем веб-сайте, вы можете отправиться в библиотеку Lottie, чтобы выбрать анимацию. Чтобы получить доступ к дизайну, вам необходимо создать бесплатную учетную запись.

Создав свой профиль, перейдите в раздел «Обнаружение» и выберите «Бесплатные готовые к использованию анимации» :

Здесь вы можете просмотреть библиотеку элементов Lottie, которые можно использовать на веб-сайтах, в приложениях и социальных сетях:

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

Например, вы можете настроить скорость анимации и изменить цвет фона. Если вы нажмете «Редактировать цвета слоя» , вы попадете в редактор Lottie:

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

Если вы вносите изменения, которые вам не нравятся, щелкните стрелку «Отменить» в левом верхнем углу экрана.

Шаг 3. Вставьте URL-адрес анимации Lottie в свой блок Otter или загрузите файл Lottie.

Когда вы довольны своим дизайном, у вас есть два варианта добавить его в WordPress:

1. Вы можете скопировать URL-адрес Lottie Animation, чтобы добавить версию с сервера LottieFiles на свой сайт. Вы найдете это во всплывающем окне анимации, чуть ниже дизайна.
2. Вы можете загрузить готовый файл LottieFile на свой компьютер, нажав кнопку «Загрузить» в правом верхнем углу и выбрав формат dotLottie . Это позволит вам разместить файл на вашем сервере.

Затем вернитесь на свой сайт WordPress и откройте страницу или запись, куда вы хотите вставить анимацию.

Нажмите, чтобы добавить новый блок, и найдите «Lottie Animations:»

Добавьте блок на свою страницу. Затем выберите один из следующих вариантов:

• Вставить из URL – используйте это, если хотите ввести ссылку на файл Lottie на серверах LottieFiles. Все, что вам нужно сделать, это вставить URL-ссылку Lottie Animation , которую вы скопировали с веб-сайта LottieFiles.
• Загрузить — используйте это, если вы загрузили фактический файл dotLottie из LottieFiles. Затем вы можете загрузить этот файл на свой сайт WordPress.

Затем нажмите Enter , и на странице появится анимация:

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

Шаг 4. Настройте свою анимацию с помощью Otter Blocks.

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

В разделе TRIGGER вы можете выбирать между автовоспроизведением , прокруткой , наведением или нажатием . Анимация не будет воспроизводиться, пока на странице не будет выполнено одно из следующих действий:

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

Если вы хотите изменить цвет фона, нажмите на вкладку «Фон» . Здесь вы можете выбрать один из параметров Solid по умолчанию, использовать палитру цветов или выбрать градиентный фон:

Если вы перейдете к Условиям видимости , вы сможете настроить свою анимацию так, чтобы она появлялась только при определенных обстоятельствах:

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

В разделе УСЛОВИЯ используйте раскрывающееся меню для настройки параметров видимости. Вы можете добавить более одного условия и создать дополнительные группы правил.

Начните работу с анимацией Lottie в WordPress

Напомним, вот четыре шага, чтобы добавить анимацию Lottie в WordPress:

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

У вас есть вопросы о добавлении анимации Lottie в WordPress? Дайте нам знать в комментариях ниже!