Как вставить анимацию Lottie в WordPress? –

GIF — это стандартный способ вставки анимированных изображений на любых платформах для создания веб-сайтов, включая WordPress. Тем не менее, последняя тенденция заключается в том, чтобы вставлять анимацию Lottie, которая будет отображать привлекательные и интерактивные элементы в виде изображения. Хотя вы можете использовать SVG для масштабируемости, Lottie позволяет лучше контролировать ваши анимации. Если вам интересно, что такое Lottie и как их вставить в WordPress, вот варианты.

Что такое Лотти Анимация?

Lottie — это формат текстового файла на основе JSON, который можно использовать для вставки анимации в iOS, Android и любые веб-платформы. Это было разработано инженерами Airbnb для экспорта анимированных файлов Adobe After Effects в формат JSON и их естественного рендеринга. Вот некоторые из преимуществ использования анимации Lottie:

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

Вставьте анимацию Lottie в WordPress

Большинство бесплатных плагинов блоков предлагают блок анимации Lottie для вставки анимированного файла в WordPress. Например, для этой цели вы можете использовать Ultimate Addons for Gutenberg (теперь переименованный в Spectra) или блочный плагин Kadence. Здесь мы расскажем об этих двух плагинах для вставки анимации Lottie на сайты WordPress.

1. Использование блоков Kadence для вставки анимации Lottie

Установите и активируйте плагин «Kadence Blocks — Gutenberg Blocks for Page Builder Features» из репозитория WordPress. Это бесплатный плагин для добавления дополнительных блоков с пользовательскими элементами управления в редактор Gutenberg. Мы рекомендуем использовать этот плагин для анимаций Lottie, так как он создаст повторно используемый блок в качестве пользовательского типа публикации для каждой анимации, которую вы вставляете на сайт. Кроме того, блоки Kadence позволят загружать файл JSON для анимации Lottie, который по умолчанию не поддерживается в WordPress.

• После активации плагина создайте новый пост или отредактируйте пост, в который хотите вставить анимацию Лотти.
• Тип /Лотти найти и вставить блок «Lottie Animations».

Вставьте блоки анимации Lottie с помощью Kadence

• Плагин вставит образец файла анимации, и вы увидите множество элементов управления на боковой панели блока.

Настройки блока анимации Lottie в Kadence Настройка анимации Lottie в Kadence

Настройки блока доступны в следующих разделах:

• Исходный файл — здесь у вас есть два варианта: вставить URL-адрес из удаленного файла или загрузить собственный файл JSON. Если у вас нет собственного файла, ознакомьтесь с последним разделом этой статьи, чтобы узнать, как получить бесплатные файлы анимации Lottie. Выберите «Локальный файл» в качестве «Источника файла», чтобы увидеть раскрывающийся список со всеми ранее созданными анимациями на вашем сайте. Вы можете выбрать один из них или загрузить новый элемент для вставки. Заголовок, который вы здесь укажете, будет использоваться в качестве имени для многократно используемого блока анимации Lottie.

Загрузить файл лотереи в формате JSON

• Настройки воспроизведения — в этом разделе вы можете управлять поведением анимации и настраивать, как она должна воспроизводиться на сайте. Вы можете показать кнопку воспроизведения/паузы, включить автовоспроизведение и разрешить воспроизведение анимации только при наведении или прокрутке страницы. Также можно установить бесконечное воспроизведение анимации в цикле и настроить задержку между циклами.

Настройки воспроизведения для Lottie Animation

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

Настройки управления размером для блока анимации Lottie

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

Управление блоками лотереи

Перейдите в меню «Настройки»> «Блоки Kadence» и нажмите «Управление анимацией Lottie» в разделе «Анимации Lottie». Это приведет вас на страницу, где вы сможете просмотреть все свои анимации Lottie в одном месте. Как видите, каждая анимация, которую вы вставляете в редактор Gutenberg, на самом деле сохраняется как пользовательский тип записи с именем «kadence_lottie». Здесь также можно создать новую анимацию, нажав кнопку «Добавить новую». Это многоразовые блоки, и вы можете вставить их в любое место на своем сайте, выполнив поиск по их имени.

Управление многоразовыми блоками Lottie в Kadence

2. Вставьте анимацию Lottie с помощью Ultimate Addon для Gutenberg

Если вы используете тему Astra или блок Kadence по какой-либо причине не работает, альтернативным вариантом является использование плагина Ultimate Addon for Gutenberg (называемого Spectra). Он предлагает аналогичный блок Lottie Animation с ограниченной функциональностью. После активации плагина перейдите в раздел «Настройки > UAG» и активируйте опцию «Лотти». Обязательно нажмите кнопку «Regenerate Assets» и очистите кеш, чтобы изменения вступили в силу.

Активируйте Lottie в плагине UAG

Теперь создайте новый пост или отредактируйте существующий пост, чтобы перейти в редактор Gutenberg. Вставьте блок Lottie, набрав /Лотти в редакторе.

Вставьте блок Lottie с помощью плагина UAG

В отличие от блоков Kadence, плагин UAG не поддерживает загрузку файла JSON. Таким образом, вы можете использовать только опцию «Вставить из URL» и использовать URL-адрес файла Lottie со сторонних сайтов. В противном случае вам необходимо включить поддержку загрузки JSON с помощью дополнительного плагина.

Вставить Лотти из файла с помощью UAG

Плагин UAG предлагает настройки «Элементы управления» и «Стиль» для анимационного блока Lottie. В разделе «Управление» вы можете настроить воспроизведение анимации при наведении, щелчке или в зависимости от области просмотра. Также возможно воспроизведение в виде цикла с определенной скоростью и обратной последовательностью анимации.

Настройки блока лотереи в UAG

В разделе «Стиль» вы можете настроить ширину, высоту, выравнивание и цвета фона для блока Lottie.

Настройка стиля для UAG Lottie Block

Где взять файлы анимации Lottie?

Теперь вы знаете, как вставить анимацию Lottie на сайт WordPress. Однако проблема заключается в том, чтобы получить бесплатные файлы Lottie JSON. Дизайнеры могут создавать анимации с помощью Adobe After Effects и преобразовывать их в файлы Lottie. Кроме того, есть также варианты для преобразования файла SVG в формат Lottie. Тем не менее, простой вариант для обычных создателей контента WordPress и блоггеров — повторно использовать бесплатные файлы, доступные на таких веб-сайтах, как Lottiefiles. Как уже упоминалось, Kadence поддерживает загрузку файла JSON, а плагин UAG — нет. Поэтому обязательно используйте блоки Kadence для загрузки и плагин UAG для встраивания с сайта Lottiefiles.

• Перейти на сайт Lottifiles и создать бесплатную учетную запись.
• Перейдите в раздел «Обнаружение > Бесплатные анимации» с помощью верхней навигации, а затем выберите меню «Категории».
• Здесь вы можете просматривать файлы Lottie в разных категориях и бесплатно загружать понравившиеся предметы.

Выберите категорию для просмотра анимации

• Выберите элемент, нажмите кнопку «Загрузить» и выберите «Lottie JSON», чтобы получить файл JSON. Вы можете использовать это для загрузки при использовании плагина блоков Kadence.
• Для таких плагинов, как UAG, вы можете загрузить JSON с помощью FTP и использовать URL-адрес своего сайта. Кроме того, получите HTML-код и найдите URL-адрес исходного файла, чтобы встроить его на свой сайт.

Скачать JSON-файл Lottie Animation

Обратите внимание, что Lottiefiles также предлагает плагин WordPress и виджет Elementor Pro для простой интеграции.