Tudo o que você precisa saber sobre o módulo Lottie do Divi 5

O módulo Lottie da Divi 5 traz animações dinâmicas e leves às suas páginas, tornando suas páginas mais envolventes e interativas. Os visuais certos são essenciais para chamar a atenção e manter os visitantes envolvidos. Com o módulo Lottie, o Divi 5 permite adicionar animações de aparência profissional que também são favoráveis ​​ao desempenho.

Nesta postagem, explicaremos tudo o que você precisa saber sobre o módulo Lottie, incluindo seus recursos, processo de configuração, opções de personalização e maneiras de usá -lo. Vamos entrar!

O que são arquivos Lottie?

As animações de Lottie são gráficos leves, baseados em JSON, que renderizam como vetores escaláveis. Eles entregam visuais escaláveis ​​sem os tamanhos de arquivo pesados ​​de vídeos ou GIFs. Graças à sua capacidade de combinar desempenho com flexibilidade, Lottie ganhou popularidade, tornando -o popular para o web design moderno. Ao contrário das animações tradicionais, os arquivos Lottie usam dados JSON baseados em vetores, garantindo visuais nítidos e reprodução suave em todos os dispositivos e tamanhos de tela.

Inscreva -se no nosso canal do YouTube

No Divi 5, o módulo Lottie integra perfeitamente essas animações ao Visual Builder, permitindo que os usuários adicionem toques dinâmicos e modernos aos seus sites Divi em alguns cliques. Seja destacando um CTA ou adicionando talento a uma seção de heróis, o módulo Lottie faz incorporar animações sem codificação complexa sem esforço.

Com o módulo Lottie, o Divi 5 transforma como você traz movimento para seus web designs, tornando -os cativantes e eficientes.

Principais recursos

O módulo Lottie no Divi 5 é uma ferramenta versátil repleta de recursos que facilitam a criação de animações dinâmicas e otimizadas. Oferece controle sobre o comportamento da animação, permitindo que você ajuste velocidade, direção, gatilhos e muito mais. Vamos dar uma olhada em alguns de seus principais recursos.

Facilidade de uso

O módulo Lottie no Divi 5 foi projetado com a simplicidade em mente, tornando-o amigável para iniciantes e acessível a usuários de todos os níveis de habilidade. Você não precisa ser um especialista em codificação para adicionar animações profissionais e atraentes ao seu site da Divi.

Graças ao número de recursos disponíveis on -line, é fácil o fornecimento de animações. Plataformas como Lottiefiles e Lordicon oferecem extensas bibliotecas de animações de Lottie gratuitas e premium, desde ícones sutis de carregamento a gráficos vibrantes.

Para aqueles que buscam um toque exclusivo, você pode criar animações personalizadas usando ferramentas como o Adobe After Effects com o plug -in Bodymovin. Este plug -in exporta animações como arquivos JSON compatíveis com o módulo Lottie. Se você escolhe animações pré-fabricadas ou personalizadas, o processo é direto.

Opções de personalização

O módulo Lottie no Divi 5 oferece opções de personalização, oferecendo controle sobre vários aspectos do arquivo Lottie. Para experiências interativas, use a animação do gatilho para escolher quando ativar a animação, como no carregamento, quando o elemento entrar na viewport, passar o mouse, clicar ou rolar. Você pode ativar a animação do loop para permitir um movimento contínuo no seu arquivo Lottie, ajustar a velocidade de animação , selecionar a direção (para frente ou para trás) e escolher entre normal ou saltar no campo do modo de reprodução .

Carregando animações JSON

A adição de animações Lottie ao Divi 5 requer o upload de arquivos JSON, o formato padrão para arquivos lottos. No entanto, o WordPress não suporta nativamente os uploads do JSON em sua biblioteca de mídia; portanto, você precisará tomar medidas adicionais para garantir que você possa carregá -los.

A primeira opção é criar um tema infantil e adicionar um trecho de php ao arquivo Functions.php do seu tema do seu filho. Este método é leve e garante o manuseio seguro de seus arquivos de animação. Como alternativa, você pode usar um plug-in como os tipos de upload de arquivos para permitir uploads JSON sem tocar em nenhum código, tornando-o ideal para usuários que preferem uma solução plug-and-play. Para um guia passo a passo para implementar qualquer método, consulte nosso artigo de suporte, que o leva ao processo para configurar seu site Divi 5 para uploads JSON.

Como usar o módulo Lottie no divi 5

Adicionar uma animação Lottie no Divi 5 é direta. Crie ou baixe uma animação Lottie de uma fonte como Lottiefiles ou Lordicon. Encontre e clique no módulo Lottie no Visual Builder para adicioná -lo à sua página.

Carregue o arquivo json ou localize -o na sua galeria de mídia do WordPress.

Escolha a animação do gatilho . Você pode configurá -lo para animar com carga, visualização, mouse, clique ou role para animar.

Se você deseja que sua animação Lottie tenha um elemento interativo, use o rolo do módulo para animar o gatilho.

O uso desse gatilho oferece uma ótima maneira de criar experiências dinâmicas e envolventes do usuário. Em vez de usar a animação quando a página carrega, role para animar o progresso da animação diretamente ao comportamento de rolagem do usuário. À medida que o usuário rola na página, a animação avança quadro a quadro. Isso torna a animação um elemento interativo que faz com que a experiência pareça mais dinâmica.

Se você deseja que a animação faça um loop sem parar, ative a alternância da animação do loop . Você também pode definir a velocidade de animação , controlar a direção ( para frente ou para trás ) e selecionar Normal ou saltar para o modo de reprodução .

Na guia Design , você pode controlar o dimensionamento, alinhamento, altura, espaçamento e muito mais.

Embora você não possa alterar as cores dos seus arquivos Lottie no Divi 5, a maioria dos sites da Lottie permite que você escolha cores específicas e larguras de golpe antes de baixá -las.

Como você pode ver, a adição de um arquivo lottie ao seu site Divi 5 leva segundos e adiciona um pouco de talento às suas páginas da Web sem se preocupar com o desempenho.

Exemplos práticos usando o módulo Lottie

O módulo Lottie no Divi 5 oferece uma ampla gama de aplicativos, adicionando talento a sites com animações dinâmicas. Desde o aprimoramento das páginas de contato até as seções de heróis atraentes, sua flexibilidade se encaixa em todos os tipos de projetos.

Com suas opções perfeitas de integração e personalização, os usuários da DIVI podem criar experiências envolventes e amigáveis ​​ao desempenho em todo o site.

Páginas de contato

Adicionar animações lottie pode tornar suas páginas de contato mais envolventes. Por exemplo, coloque os módulos Lottie em loop ao lado do horário comercial, números de telefone e outras informações de contato para criar uma experiência interativa e convidativa que aumenta as conversões sem desacelerar seu site.

404 páginas

Transforme 404 erros frustrantes em momentos memoráveis ​​com animações lotadas lotadas. Adicione uma bússola giratória ou um ícone de pesquisa animado à sua página 404, emparelhada com uma mensagem curta.

Use a configuração de animação do loop para manter o movimento contínuo e acioná -lo na carga para chamar instantaneamente a atenção. Isso faz com que a página 404 pareça menos um beco sem saída e mais como um ponto de contato criativo.

Produtos em destaque

Mostre seus produtos ou categorias Woo favoritos com animações de Lottie para destacar os produtos à venda. Por exemplo, coloque uma animação Lotge Lottie de venda ao lado de um produto em destaque para destacá -lo.

Primeiro, defina a animação para acionar a carga. Em seguida, ele se ativa à medida que os usuários navegam, chamando os olhos para os produtos e aumentando o apelo visual.

Seções de serviços

Dê vida à sua seção de serviços com animações de Lottie que representam visualmente suas ofertas. Por exemplo, use animações de loop para sua agência de marketing, ajustando a velocidade para corresponder ao tom.

Além disso, defina o acionador de visualização para ativar as animações à medida que os usuários exploram, garantindo uma apresentação profissional dinâmica.

Seções de heróis

Torne suas seções de herói inesquecíveis com animações de Lottie em negrito que definem o tom do seu site. Primeiro, adicione uma animação de fundo suave usando o módulo Lottie da Divi. Em seguida, coloque -o atrás de linhas e módulos com as configurações de posição da Divi.

Por exemplo, uma animação moderna e fluida ou efeito de partícula sutil pode adicionar profundidade ao seu site com pouco esforço. Use o gatilho em carga para impacto imediato e ajuste o modo de reprodução para saltar para um efeito cativante.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Conclusão

No Divi 5, o módulo Lottie simplifica a adição de animações dinâmicas e leves aos sites. EXPERMENTE -FECIMENTE INTEGRADO AO CONSTRIDADE VISUAL ENVIE ANIMAÇÕES PROFISSIONAIS COM MINIMISSO DE ESCRITÓRIO. Controles flexíveis, personalização extensa e plataformas de arquivos lottos gratuitos facilitam o aprimoramento do seu site.

Pronto para experimentar o módulo Lottie? Compartilhe seus pensamentos ou criações nos comentários ou nas mídias sociais.