FULL.

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Como usar animações Lottie no WordPress

Você está em:

Como usar animações Lottie no WordPress

Incorporar animações em seu site WordPress é uma ótima maneira de animar uma página da Web cansada e manter seus visitantes envolvidos durante todo o tempo em seu site. Uma maneira fácil e eficiente de fazer isso é usando animações de loteria: animações leves e de alta qualidade.

As animações de loteria estão aumentando em popularidade por vários motivos, e se você estiver pronto para entrar na onda e enfeitar seu site, elas podem ser para você.

Existem algumas maneiras diferentes de criar essas animações e adicioná-las suavemente ao seu site WordPress.

O que são animações de Lottie?

Lottie é uma biblioteca para Android, iOS, Web e Windows que renderiza animações do After Effects e permite que os dados de animação sejam exportados como arquivos JSON em oposição a um tipo de arquivo de imagem típico . Em suma, eles podem substituir facilmente um ativo estático por algo divertido e envolvente.

Essa solução de código aberto foi introduzida pela primeira vez pela equipe do AirBnB, mas está rapidamente ganhando popularidade entre designers e animadores em diferentes mercados. Uma grande vantagem de usar animações de loteria em seu site WordPress é que o tamanho do arquivo é muito pequeno em comparação com a animação GIF ou arquivos mp4. Além disso, o formato de animação flexível permite que o navegador manipule a renderização.

As muitas possibilidades de usar animações de loteria são uma das razões pelas quais elas são tão populares. Você pode usar animações de loteria como cabeçalhos animados, botões, elementos gráficos atraentes e muito mais. Você também pode definir a animação para ser acionada à medida que os visitantes rolam, passam o mouse ou clicam na página da web. Sua versatilidade e fácil implementação para sites B2C e B2B os tornam uma maneira revolucionária de melhorar a qualidade e a aparência geral do seu design da web.

Criando animações de loteria

Ao considerar se deseja adicionar animações de loteria ao seu site, primeiro você precisa decidir se deseja fazer uma abordagem de estoque ou personalizada. Cada um tem seus prós e contras, por isso é aconselhável considerar as duas opções antes de decidir.

Com qualquer tipo de animação, menos é sempre mais. Ao incorporar um elemento animado em uma reformulação do site , considere o papel que essa animação está desempenhando na jornada do cliente.

Animações de loteria personalizadas

Se você estiver procurando por uma animação de loteria personalizada para seu site, precisará trabalhar com um animador ou designer especializado em Adobe After Effects e familiarizado com esse tipo de animação.

Muitas animações de loteria usam um estilo de ilustração, então você precisará decidir se isso se encaixa com a marca e o estilo do site antes de prosseguir com ele. Depois de decidir sobre os elementos gráficos e os efeitos de animação, o animador precisará criar as animações personalizadas no Adobe After Effects e exportá-las como animações de loteria, usando a extensão do After Effects. Isso renderizará uma animação de alta qualidade que pode ser facilmente implementada em seu site.

Uma razão pela qual as animações de loteria são de alta qualidade é que o processo de criação elimina qualquer necessidade de um desenvolvedor ou engenheiro para recriar a animação do designer em um formato web. Ele oferece uma solução pronta para uso que torna a implementação de animações mais fácil do que nunca.

Animações de loteria

Animações de loteria de ações são uma ótima opção se você quiser agilizar seu novo design. Você pode procurar uma animação de loteria de ações existente e, se necessário, personalizá-la para se adequar à sua marca.

Lottie Files é um site de ações onde você pode encontrar um grande número de animações de loteria gratuitas e pagas. O site também oferece uma ferramenta de edição onde você pode editar as cores da animação antes de baixar. Se você precisar alterar um grande número de cores em uma animação, um animador ou designer experiente também poderá usar o Adobe After Effects para fazer essas alterações com mais eficiência e exportar a animação.

Se você deseja implementar várias animações em um site ou se possui uma estética de site muito específica, pode ser difícil encontrar várias opções de ações no estilo certo. Nesse caso, você pode considerar a contratação de um animador para a criação de mais animações que se adequem ao seu site e correspondam às opções de ações que você já escolheu.

Com qualquer tipo de animação ou gráficos de estoque, lembre-se dos requisitos de licenciamento para as animações de estoque e certifique-se de contribuir com a animação para o designer original, se necessário.

Adicionando animações de Lottie no WordPress

É um processo bastante tranquilo para adicionar animações de loteria a um site WordPress. Você pode utilizar um widget HTML personalizado para adicionar o código de animação ao site ou utilizar um plug-in do WordPress para adicionar a animação.

Widget HTML personalizado

Um desenvolvedor WordPress qualificado pode usar uma pequena biblioteca JavaScript e um widget HTML personalizado para adicionar as animações de loteria ao site. Você começará fazendo upload do script lottie.min.js junto com o arquivo .json de animação e quaisquer recursos de imagem para a pasta do tema. Em seguida, há um pequeno trecho de JS para adicionar ao widget para iniciar o script Lottie, que carrega o arquivo de animação .json no div do contêiner desejado.

Essa abordagem simplificada pode ser uma ótima opção para a maioria dos sites do WordPress, pois evita sobrecarregar o site com plugins adicionais do WordPress. Ao adicionar as animações de loteria, você também pode controlar se a animação é repetida, quantas vezes ela é repetida e o que pode acionar o elemento animado na página.

A maioria dos plug-ins para adicionar animações de loteria sem a ajuda de um desenvolvedor requer o construtor de páginas Elementor, portanto, a abordagem HTML personalizada tende a funcionar melhor se você estiver usando um plug-in de tema ou construtor de páginas diferente do Elementor.

Adicionar elementos ao site sem um plug-in também é melhor para a velocidade e o desempenho do site, pois adicionar mais e mais plug-ins sobrecarregará o site.

Opções de plugins do WordPress

Se você não quiser usar um desenvolvedor para fazer isso de maneira personalizada, outra opção para adicionar widgets de loteria ao seu site é usar um plug-in do WordPress.

Elementor Pro – Widget Lottie

O Elementor é um construtor de páginas para WordPress com recursos de arrastar e soltar, e a licença Elementor Pro inclui o widget Lottie . Com este widget, você pode adicionar animações de loteria sem código e personalizar as dimensões e o comportamento da animação. Este plug-in se conecta convenientemente ao site de ações Lottie Files, para que você possa selecionar facilmente opções de animação de ações diretamente do site ou fazer upload de suas próprias criações.

Blocos Gutenberg – Complementos Finais

Se você estiver usando o editor Gutenberg em seu site, o plugin Ultimate Addon para Gutenberg pode ser uma boa opção para adicionar animações de loteria com a ajuda de um plugin. O editor Gutenberg faz parte do núcleo do WordPress desde o lançamento do WordPress 5.0, mas não é o mais popular. Muitos sites ainda usam o editor clássico ou outros construtores de páginas como Site Origin, Elementor ou Beaver Builder, para citar alguns.

No entanto, é uma opção viável. The Ultimate Addons for Gutenberg é um plugin bem revisado e oferece muitos recursos excelentes, incluindo a opção de adicionar animações de loteria e controlar opções avançadas, como a velocidade e o gatilho da animação.

Plugins adicionais do WordPress

Existem plugins adicionais disponíveis no diretório do WordPress para adicionar e personalizar animações de loteria. Lembre-se de que alguns dos plug-ins exigem que seu site seja construído e use o Elementor, como Premium Addons for Elementor e Elementskit Addon for Elementor. Também existem plugins destinados a outros temas e construtores do WordPress, como o tema Divi ou os blocos Gutenberg.

Hora de se animar

As animações Lottie são extremamente acessíveis a qualquer pessoa com um site WordPress. Se você deseja animações personalizadas ou animações de estoque, animações de heróis ou de rolagem, os recursos estão ao seu alcance.

Você pode ser criativo na aparência das suas animações e no que deseja que elas façam, e quando começar a explorar as possibilidades das animações de loteria, começará a perceber o quanto elas podem adicionar à qualidade do seu site .

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.