Animações Lottie no Elementor para WordPress

Quer apimentar o seu sítio Web com gráficos vibrantes e em movimento? Com as animações Lottie, pode aumentar o apelo visual do seu site WordPress e proporcionar aos seus visitantes uma experiência envolvente. Neste guia, aprenderá a utilizar o Lottie no Elementor para integrar facilmente animações impressionantes.

Principais aprendizagens

• O Lottie permite a utilização de gráficos em movimento no Elementor.
• As animações podem ser descarregadas como ficheiros JSON ou integradas externamente.
• A interface de utilizador do Elementor oferece opções simples para personalizar as definições de animação.

Instruções passo a passo

Passo 1: Adicionar o elemento Lottie

Em primeiro lugar, é necessário adicionar o elemento Lottie no Elementor. Para o fazer, aceda ao editor do Elementor na sua página. Procure o elemento "Lottie" na barra lateral e arraste-o para a posição pretendida na sua página. Encontrará o Lottie relativamente mais abaixo na versão Pro do Elementor.

Passo 2: Descarregar animações de LottieFiles

Para encontrar uma animação adequada, pode visitar a plataforma LottieFiles. Aqui pode registar-se gratuitamente e navegar pela vasta gama de animações. Introduza o que procura no campo de pesquisa - por exemplo, eu procurei por "Apple".

Passo 3: Selecione a animação desejada

Assim que tiver encontrado uma animação que lhe agrade, clique na pré-visualização. Terá a opção de descarregar a animação em formato JSON ou GIF. Escolha a opção mais adequada para si - se quiser utilizar a animação no Elementor, descarregue-a como um ficheiro JSON.

Passo 4: Carregar animações

Agora volte ao Elementor. Pode carregar o ficheiro JSON descarregado diretamente através do campo de carregamento no elemento Lottie. Certifique-se de que ativa o ficheiro primeiro, uma vez que o ficheiro JSON não será apresentado no Elementor sem ativação.

Passo 5: Gerar URL externo

Se a transferência não funcionar, também pode utilizar diretamente o URL da animação. Cole o URL no campo correspondente. O Elementor recupera e apresenta automaticamente a animação.

Passo 6: Personalizar as definições da animação

Agora pode ajustar as definições da animação. Tem a opção de definir a velocidade de reprodução e a cor de fundo. Certifique-se de que ativa a função de loop para que a animação seja repetida continuamente.

Passo 7: Definir os accionadores interactivos

Selecione o acionador da animação, especificando se a animação deve começar com um clique ou ao passar o rato. Pode definir a interação desejada nas definições - isto dá-lhe controlo sobre a experiência do utilizador.

Passo 8: Fazer mais ajustes

Pode editar a frequência das definições de animação e definir o ponto de início e de fim da animação para obter o efeito pretendido. Estes ajustes asseguram que a animação é exatamente adaptada às suas necessidades.

Passo 9: Personalizar o estilo e o design

As animações Lottie também oferecem opções de personalização para o estilo e o design. Aqui pode definir a altura, a largura e a opacidade da animação. Também pode adicionar filtros CSS e definir os tempos de transição para garantir um aspeto profissional.

Passo 10: Teste e guarde a animação

Depois de ter efectuado as definições desejadas, guarde as alterações. Verifique a animação na pré-visualização do seu editor Elementor para se certificar de que tudo funciona como pretendido. O resultado deve ser uma animação apelativa que mostra efeitos de resposta quando se passa o rato por cima ou se clica.

Resumo

Inserir animações Lottie no Elementor é fácil e permite-lhe dar ao seu sítio Web um design dinâmico e moderno. Seguindo estes passos, pode personalizar as animações, melhorar a experiência do utilizador e ser criativo com o seu conteúdo.