As faixas animadas são uma excelente maneira de chamar a atenção dos visitantes para mensagens importantes, ofertas e destaques no seu site. E o melhor de tudo: você pode criar essas faixas sem precisar de nenhum código, utilizando o Elementor em sua versão gratuita. Neste tutorial, vamos mostrar passo a passo como adicionar uma faixa animada ao seu site de forma simples e totalmente gratuita.
Passo 1: Configurando a Faixa Animada com Elementor Pro (Opcional)
Se você usa o Elementor Pro, aproveite a funcionalidade de “Elementos Flutuantes”. No painel do Elementor, acesse “Modelos” e selecione “Elementos Flutuantes”. Lá, crie uma nova barra flutuante e personalize-a. Essa opção permite criar faixas que permanecem visíveis no topo ou na base do site enquanto o usuário navega. Essa funcionalidade é ótima para ofertas contínuas ou anúncios que você deseja manter em destaque.
Passo 2: Alternativa para Usuários da Versão Gratuita do Elementor
Para quem utiliza a versão gratuita, a melhor solução é instalar o plugin “Qi Addons for Elementor”. Esse plugin oferece vários elementos complementares, incluindo o widget “Text Marquee” (faixa animada de texto). Para usá-lo, vá até a seção de plugins do seu WordPress, busque por “Qi Addons for Elementor”, instale e ative o plugin. Depois, no menu lateral do Elementor, localize o widget e ative apenas os elementos que planeja usar. Isso evita que o site fique pesado.
Passo 3: Personalizando a Faixa Animada
Com o widget “Text Marquee” ativado, vá até a página onde deseja adicionar a faixa animada e selecione o widget. Você pode personalizar o conteúdo, adicionando o texto que deseja exibir (como “Black Friday”, “Oferta Especial”, etc.), ajustar a velocidade de rolagem e até adicionar ícones que complementem a mensagem. Uma dica é duplicar o texto algumas vezes para que ele apareça em sequência contínua na faixa animada.
Passo 4: Criando uma Segunda Faixa com Movimento Reverso
Para um efeito visual ainda mais interessante, adicione uma segunda faixa animada com direção contrária à primeira. Isso cria uma aparência moderna e sofisticada, muito usada em sites de e-commerce e landing pages. Basta duplicar a faixa original, alterar a cor e o texto se necessário, e configurar a rotação na direção oposta.
Dica Extra: Adicionando um Efeito de Desfoque (Apenas Elementor Pro)
Caso você tenha a versão Pro do Elementor, é possível adicionar um efeito de desfoque na faixa animada de fundo. Esse efeito cria um destaque visual diferenciado e traz ainda mais profissionalismo ao design. Para adicionar o desfoque, basta acessar as opções de CSS personalizado e inserir uma linha de código, configurando o nível de desfoque conforme preferir. Esse efeito é opcional, mas vale a pena experimentar para dar um toque extra de estilo.
Conclusão
Sem dúvidas, criar faixas animadas para o seu site nunca foi tão fácil. Além disso, esse tipo de personalização eleva significativamente o profissionalismo do design, ao mesmo tempo em que atrai a atenção dos visitantes para pontos específicos. Dessa forma, torna-se ideal para destacar promoções, datas comemorativas e mensagens importantes.
Assista ao nosso vídeo no YouTube para aprender de forma mais prática, como você pode criar faixas animadas usando o Elementor. Se você quer aprender mais estratégias como essa e alcançar sua liberdade financeira com criação de sites, aproveite a nossa oferta especial de Black Friday antecipada nos dias 11 e 12 de novembro. Clique no link para fazer o pré-cadastro e garantir todas as informações!
