Como adicionar animações Lottie no WordPress (4 etapas simples)

Usar animações Lottie no WordPress pode ser uma ótima maneira de enfeitar suas páginas. Eles geralmente são leves e personalizáveis ​​e, portanto, podem ajudá-lo a criar conteúdo atraente sem prejudicar a experiência do usuário (UX). No entanto, você pode estar procurando uma maneira fácil de adicioná-los ao seu site.

Felizmente, o processo é mais fácil do que você imagina. Ao usar um plug-in como o Otter Blocks, você pode adicionar e personalizar suas animações Lottie com apenas alguns cliques. Também poderá definir as condições de visibilidade para que joguem no momento certo.

Uma introdução às animações Lottie

Lottie é um formato de arquivo de código aberto para animações da web. Ele permite criar animações personalizadas para sua marca e usá-las em seu site:

Claro, você sempre pode optar por GIFs, mas esses arquivos podem sobrecarregar seu site. As animações Lottie são muito menores que os GIFs. Portanto, eles podem ajudá-lo a tornar seu site mais interessante, preservando seu UX e oferecendo tempos de carregamento rápidos.

Além disso, as animações Lottie vêm com muitas opções de personalização. A própria biblioteca é extensa, fornecendo acesso a milhares de elementos, personagens e ilustrações. No entanto, você também pode trocar cores, alterar as configurações de exibição e adicionar condições de visibilidade.

As animações personalizadas podem ajudá-lo a impressionar seus visitantes. Além disso, eles podem fazer seu site parecer novo e único.

Como adicionar animações Lottie ao WordPress (em 4 etapas)

Agora que você sabe um pouco mais sobre Lottie Animations, vamos ver como adicioná-los ao seu site WordPress:

Passo 1: Instale e ative o Otter Blocks

Existem muitas maneiras de adicionar animações Lottie no WordPress. Por exemplo, você pode usar HTML e JavaScript. No entanto, esse método pode ser bastante complexo.

Como alternativa, você pode usar o plug-in de animações Lottie, embora isso possa não ser compatível com todos os construtores de páginas. Além disso, não oferece muitas opções estilísticas.

A maneira mais fácil de adicionar Lottie Animations ao seu site é com um plugin como o Otter Blocks:

Este plug-in adiciona novos blocos de conteúdo e modelos ao seu site, incluindo um bloco para animações Lottie. Ele também expande a funcionalidade do Block Editor com CSS personalizado, animações, condições de visibilidade e muito mais. Portanto, ajuda você a projetar suas páginas com mais eficiência e reduz a necessidade de construtores de páginas.

Se você atualizar para o Otter Blocks Pro, terá acesso a recursos avançados, como blocos WooCommerce especiais e configurações estilísticas adicionais. No entanto, você não precisa da versão Pro para usar o recurso de animações Lottie.

Se você quiser usar a versão gratuita, vá para Plugins > Adicionar novo no painel do WordPress e procure por “Otter Blocks:”

Em seguida, clique em Instalar > Ativar . Agora você deve ver uma seleção de novos blocos no Block Editor.

Passo 2: Escolha uma animação da biblioteca Lottie

Agora que você configurou o Otter Blocks em seu site, pode ir até a biblioteca Lottie para escolher uma animação. Para acessar os designs, você precisará criar uma conta gratuita.

Depois de criar seu perfil, navegue até Discover e selecione Free Ready-to-use Animations :

Aqui, você pode navegar por uma biblioteca de elementos Lottie que podem ser usados ​​em sites, aplicativos e mídias sociais:

Quando você encontrar uma animação que deseja usar, clique no design. Um pop-up aparecerá onde você pode fazer algumas alterações na aparência da animação:

Por exemplo, você pode ajustar a velocidade da animação e alterar a cor de fundo. Se você clicar em Edit Layer Colors , você será levado ao Lottie Editor:

Aqui, você pode personalizar a cor de qualquer parte do design. Basta clicar em uma seção do elemento que deseja alterar, ir para Todas as cores e usar o seletor de cores para aplicar um novo tom:

Se você fizer uma alteração da qual não goste, clique na seta Desfazer no canto superior esquerdo da tela.

Passo 3: Cole o URL da animação Lottie em seu Otter Block ou carregue o arquivo Lottie

Quando estiver satisfeito com seu design, você tem duas opções para adicioná-lo ao WordPress:

1. Você pode copiar o URL Lottie Animation para adicionar a versão do servidor LottieFiles ao seu site. Você o encontrará no pop-up de animação, logo abaixo do design.
2. Você pode baixar o LottieFile finalizado para o seu computador clicando no botão Download no canto superior direito e selecionando o formato dotLottie . Isso permitirá que você hospede o arquivo em seu servidor.

Em seguida, retorne ao seu site WordPress e abra a página ou post onde deseja inserir sua animação.

Clique para adicionar um novo bloco e procure por “Lottie Animations:”

Adicione o bloco à sua página. Em seguida, escolha uma destas opções:

• Inserir da URL – use isso se quiser inserir o link para o arquivo Lottie nos servidores LottieFiles. Tudo o que você precisa fazer é colar o link da URL Lottie Animation que você copiou do site LottieFiles.
• Upload - use isso se você baixou o arquivo dotLottie real de LottieFiles. Você pode enviar esse arquivo para o seu site WordPress.

Em seguida, pressione Enter e a animação aparecerá na página:

Agora você pode salvar suas alterações e passar para a etapa final.

Passo 4: Personalize sua animação com Otter Blocks

Agora que você adicionou suas animações Lottie no WordPress, você está pronto para personalizar o design e o layout. Nas configurações do Bloco, você verá uma seleção de opções de exibição.

Em TRIGGER , você pode escolher entre autoplay , scroll , hover ou click . A animação não será reproduzida até que uma destas ações seja concluída na página:

Você também tem a opção de alternar a reprodução da animação em loop. Além disso, você pode ajustar a velocidade da animação usando o controle deslizante, inverter a direção e alterar a largura do design.

Se você quiser alterar a cor do plano de fundo, clique na guia Plano de fundo . Aqui, você pode selecionar uma das opções sólidas padrão, usar o seletor de cores ou escolher um plano de fundo gradiente:

Se você acessar Condições de Visibilidade , poderá configurar sua animação para aparecer apenas em determinadas circunstâncias:

Por exemplo, você pode querer que o bloco seja visível apenas para usuários logados ou seja exibido em uma data específica. Para fazer isso, clique em Adicionar grupo de regras . Em seguida, selecione a seta para abrir as configurações:

Em CONDIÇÃO , use o menu suspenso para definir suas configurações de visibilidade. Você pode adicionar mais de uma condição e criar grupos de regras adicionais.

Comece com as animações Lottie no WordPress

Para recapitular, aqui estão quatro etapas para adicionar animações Lottie no WordPress:

Para ainda mais maneiras de melhorar o editor nativo do WordPress, você pode conferir nossa coleção completa dos melhores plugins de bloqueio do WordPress.

Você tem alguma dúvida sobre como adicionar Lottie Animations no WordPress? Deixe-nos saber na seção de comentários abaixo!