Resumindo: Como Criar Animações de Texto no WordPress
Três métodos permitem adicionar animações de texto sem codificação. Escolha um com base em como você constrói suas páginas.
- SeedProd – Use o bloco de Título Animado no editor visual do SeedProd para efeitos de digitação, rotação ou destaque em páginas de destino e temas.
- Plugin Animated Text Block – Insira um bloco nativo no editor de blocos Gutenberg para títulos animados em posts e páginas.
- Plugin Animate It! – Envolva um shortcode ao redor do seu texto no editor clássico do WordPress para efeitos CSS.
- Escolha por caso de uso – SeedProd para páginas de destino; Animated Text Block para o editor de blocos; Animate It! para sites com editor clássico.
- Sem necessidade de codificação – Todos os três métodos funcionam sem mexer em CSS ou PHP.
Se você está tentando fazer seu título principal se destacar sem mexer em CSS, provavelmente já bateu em uma parede. A maioria dos tutoriais assume que você está usando o Elementor ou que se sente confortável editando código.
Neste guia, mostrarei como adicionar animação de texto no WordPress usando três métodos: o bloco Animated Headline do SeedProd, um plugin gratuito para Gutenberg e o plugin CSS Animate It!. Escolha o que se encaixa na sua configuração e siga os passos.
O Que São Efeitos de Animação de Texto e Por Que Usá-los?
Efeitos de animação de texto no WordPress são pequenos designs de movimento que você pode aplicar a títulos, botões ou outros elementos de texto. Em vez de texto estático, você pode adicionar estilos como digitação, deslizamento, pulo ou destaque para chamar a atenção instantaneamente.
Esses efeitos são alimentados por CSS moderno, que é rápido, leve e suportado por todos os principais navegadores.
Existem dois tipos de animação de texto que valem a pena distinguir: efeitos de entrada que rodam ao carregar a página e animações acionadas por rolagem que disparam conforme os visitantes rolam para baixo. Este guia cobre efeitos de entrada, incluindo títulos giratórios e destacados.
O recurso de revelação de rolagem do SeedProd lida com animações acionadas por rolagem, caso seja isso que você procura. Os passos abaixo focam em efeitos que rodam automaticamente quando a página carrega.
Aqui estão algumas maneiras práticas de usar animação de texto no seu site WordPress:
- Faça ofertas especiais se destacarem na sua tabela de preços
- Mostre recursos do produto com destaques animados
- Crie títulos giratórios ou de digitação que mantêm os visitantes engajados
- Direcione a atenção para botões de call-to-action (CTA) importantes
- Adicione movimento sutil enquanto os usuários rolam pelo seu conteúdo
Como as animações CSS são leves em comparação com vídeo ou Flash, elas não vão deixar seu site lento quando usadas corretamente. Com um plugin de animação para WordPress ou um construtor de arrastar e soltar como o SeedProd, você pode adicionar esses efeitos em apenas alguns cliques, sem necessidade de codificação.
Como Adicionar Efeitos de Animação de Texto no WordPress: 3 Maneiras
Existem várias maneiras de adicionar animações ao WordPress. Você pode usar um plugin do WordPress ou adicionar efeitos CSS manualmente.
Como criar efeitos de texto manualmente é desafiador para iniciantes, mostraremos como criar animações de texto com o construtor de sites de arrastar e soltar do SeedProd, um plugin de animação gratuito e o editor de blocos Gutenberg.
| Método | Ideal para | Custo |
|---|---|---|
| SeedProd | Páginas de destino, temas personalizados, páginas de vendas | Pago (Pro) |
| Bloco de Texto Animado | Posts e páginas do Gutenberg | Grátis |
| Anima Aí! | Sites com editor clássico | Grátis |
Método 1. Crie Títulos Animados com SeedProd
Para o primeiro método, usaremos o SeedProd, o melhor construtor de sites para WordPress. Com seu construtor de sites de arrastar e soltar e o bloco de Título Animado, você pode adicionar efeitos de transição interessantes com alguns cliques.
O SeedProd permite que você crie temas personalizados do WordPress e layouts responsivos sem escrever código ou contratar um desenvolvedor. Ele inclui blocos de conteúdo poderosos para personalizar páginas, suporte WooCommerce para lojas de comércio eletrônico e se integra perfeitamente com plugins populares do WordPress.
Além disso, este plugin é leve e sem excessos, garantindo que o tempo de carregamento da sua página seja rápido e amigável para o usuário.
Siga os passos abaixo para criar animações de texto no WordPress com SeedProd.
Passo 1. Instale e Ative o Plugin SeedProd
Primeiro, acesse a página de preços do SeedProd e escolha uma licença. Recomendamos o SeedProd Pro por seus recursos avançados.
Depois disso, faça login na área da sua conta SeedProd e baixe o plugin. Você pode copiar sua chave de licença na aba "Downloads" ao mesmo tempo.
Em seguida, instale o plugin e ative-o em seu site WordPress. Se precisar de ajuda, você pode seguir estes passos para instalar um plugin do WordPress.
Após ativar o SeedProd, navegue até SeedProd » Configurações, insira sua chave de licença e clique no botão Verificar Chave.
Agora você está pronto para começar a construir uma página com efeitos de animação.
Etapa 2. Escolha um Modelo de Página de Destino
Você pode usar o SeedProd para criar uma página única do WordPress, um tema do WordPress ou uma página de destino com seu editor visual. Para este guia, adicionaremos animações de texto a uma página de destino de vendas.
Primeiro, você precisará ir para SeedProd » Landing Pages e clicar no botão Adicionar Nova Landing Page.
Aqui você pode escolher entre mais de 180 modelos de landing page responsivos para dispositivos móveis.
Como estamos criando uma página de vendas, clique na aba Vendas para ver os diferentes modelos de página de vendas. Quando encontrar um modelo que goste, mova o cursor até ver o efeito de passar o mouse sobre a imagem e clique no ícone de visto laranja.
Em seguida, você verá uma janela pop-up onde poderá adicionar o nome da sua landing page e informações de URL. Depois disso, clique no botão Salvar e Começar a Editar a Página.
Passo 3. Personalize o Conteúdo da Sua Página de Destino
Seu modelo de landing page agora será aberto no editor visual de arrastar e soltar do SeedProd. É aqui que você pode personalizar seu conteúdo e estilo e adicionar mais elementos à página.
Por exemplo, você pode adicionar seu logotipo personalizado clicando no bloco de imagem atual e carregando um arquivo da sua biblioteca de mídia do WordPress ou do seu computador.
Você também pode editar seus botões de CTA com cores, texto e estilo diferentes, clicando nele e acessando o painel de configurações Avançadas à esquerda.
Adicionar novos elementos é igualmente fácil. Você pode arrastar um bloco do painel de blocos à esquerda e soltá-lo no seu design. Um contador regressivo, por exemplo, pode adicionar urgência à sua página, incentivando os usuários a agir por medo de perder algo.
Com suas personalizações aplicadas, vamos ver como animar o texto do seu título a seguir.
Passo 4. Adicione o Bloco de Títulos Animados
Vamos supor que você queira animar o título principal da sua landing page. Para fazer isso, você precisará encontrar o bloco Título Animado e arrastá-lo para o design da sua página.
Ao clicar no bloco para ver suas configurações, você verá 2 maneiras de animar seu título:
- Destacado
- Rotação
O estilo Destacado adiciona uma animação de forma ao seu texto, com formas incluindo:
- Círculo
- Enrolado
- Sublinhado
- Duplo
- Sublinhado Duplo
- Zigue-zague Sublinhado
- Diagonal
- Riscado
- X
Em contraste, o estilo Rotativo adiciona efeitos de transição ao seu título, que incluem:
- Digitando
- Recorte
- Virar
- Pulo
- Girar
- Zoom
- Fade
- Velocidade da Luz
- Deslizar para Baixo
Além disso, você pode adicionar texto antes e depois do seu texto animado, habilitar loop infinito, alterar a duração da animação e ajustar o alinhamento, fontes e nível do cabeçalho.
Em nosso exemplo, usamos a forma "Sublinhado" do menu suspenso de destaque.
Quando estiver satisfeito com seus efeitos de texto animado, clique no botão Salvar no canto superior direito.
Passo 5. Configure Suas Configurações
O próximo passo é configurar as configurações da sua landing page antes de publicá-la.
Clique na aba Configurações da Página para editar o nome da sua página, URL e configurações de SEO on-page, e conectar-se a um plugin do Google Analytics.
O SeedProd também permite conectar serviços de marketing por e-mail e configurar o mapeamento de domínio para suas páginas. Veja a documentação de integração do SeedProd para detalhes.
Não se esqueça de clicar em Salvar antes de passar para a próxima etapa.
Passo 6. Publique Sua Página de Destino
Quando estiver satisfeito com o seu design, clique no menu suspenso no botão Salvar e selecione Publicar.
Agora você pode visualizar sua página e ver suas animações de texto em ação.
Método 2. Adicione Animações de Texto com o Plugin CSS Animate It!
Para o método a seguir, usaremos um plugin gratuito de animação do WordPress para adicionar efeitos de texto animados ao seu site. Esta é uma boa solução se você usa o editor WYSIWYG clássico do WordPress em vez de um page builder ou o editor de blocos do WordPress.
(Observação: o plugin Animate It! foi atualizado pela última vez em 2021. Ele continua funcional para usuários do editor clássico. Veja a página do plugin no WordPress.org para o status de suporte atual.)
Primeiro, instale e ative o plugin Animate It! em seu site WordPress. Ele deve funcionar imediatamente, sem configurações para você configurar.
Em seguida, crie uma nova página e você verá um novo botão dentro do editor do WordPress: Animate It!
Clicar no botão abre uma janela pop-up onde você pode escolher um estilo de animação. Existem muitos estilos de animação para escolher, então encontre um que você goste no menu suspenso.
Depois disso, você pode escolher o tempo de atraso e duração e quando deseja que a animação apareça. Você também pode executar a animação ao carregar, clicar, pairar ou com deslocamento de rolagem.
Quando estiver satisfeito com as configurações, clique no botão Animate It para ver uma prévia da animação.
Em seguida, clique no botão Insert para adicionar a animação ao seu post ou página. O plugin adicionará um shortcode com algum conteúdo fictício ao editor de posts.
Você pode personalizar e substituir esse conteúdo por seus títulos, imagens e texto personalizado.
Agora você pode publicar suas alterações e visualizar seu texto animado ao vivo em seu site WordPress.
Método 3. Adicionar Texto Animado no Editor de Blocos Gutenberg
O plugin Animated Text Block adiciona um bloco Gutenberg nativo para efeitos de animação de texto. Se você cria páginas e posts no editor de blocos do WordPress, esta é a opção mais direta, pois funciona como qualquer outro bloco, sem shortcodes ou um construtor separado.
Testei muitos plugins de animação ao longo dos anos, e a maioria deles exige o editor clássico ou um page builder dedicado para funcionar corretamente. Este se integra diretamente ao Gutenberg como um bloco nativo, o que o torna mais simples de gerenciar junto com seu outro conteúdo.
Passo 1. Instale o Plugin Bloco de Texto Animado
Vá para Plugins » Adicionar Novo no seu painel do WordPress e pesquise por “Animated Text Block”. Clique em Instalar agora, depois em Ativar.
O plugin funciona imediatamente, sem necessidade de configuração após a ativação.
Passo 2. Adicione o Bloco à Sua Página
Abra qualquer post ou página no editor de blocos Gutenberg. Clique no botão + de inserção de blocos, pesquise por “Animated Text” e adicione o bloco à sua área de conteúdo.
Coloque-o onde você deseja que seu título animado apareça, como no topo de uma seção da página ou dentro de um bloco de capa.
Passo 3. Configure Sua Animação
Com o bloco selecionado, digite seu texto animado diretamente no bloco. Use o painel de configurações à direita para escolher um estilo de animação, definir a velocidade e controlar se a animação se repete.
O plugin suporta vários estilos, incluindo efeitos de digitação, fade, bounce e slide. Comece com "typing" ou "fade" para um visual sutil e profissional na maioria dos sites.
Passo 4. Visualize e Publique
Clique em Pré-visualizar para ver sua animação antes que ela seja publicada. Quando estiver satisfeito com o efeito, clique em Publicar ou Atualizar para salvar suas alterações.
Perguntas Frequentes Sobre Animações de Texto no WordPress
A animação de texto funciona com o editor de blocos Gutenberg?
Sim. O plugin Animated Text Block adiciona um bloco nativo do Gutenberg para efeitos de animação de texto. Depois de instalá-lo e ativá-lo, encontre o bloco no inseridor e adicione-o a qualquer post ou página. Ele suporta vários estilos de animação e funciona sem shortcodes ou um construtor de páginas separado.
As animações de texto prejudicarão meus Core Web Vitals ou a velocidade da página?
Animações baseadas em CSS são leves e geralmente não afetam os Core Web Vitals quando usadas com moderação. O risco vem de animar muitos elementos em uma única página, o que pode acionar mudanças de layout ou atrasar a renderização. A maioria dos navegadores modernos suporta a consulta de mídia prefers-reduced-motion, que reduz ou desabilita animações para usuários que a preferem.
Qual é a diferença entre um título rotativo e uma animação de rolagem no WordPress?
Um título rotativo alterna entre palavras ou frases ao carregar a página, geralmente em uma seção principal. Uma animação de rolagem é acionada quando um elemento específico entra na área de visualização enquanto o usuário rola a página. Este guia abrange efeitos de título rotativo e destacado que são executados ao carregar. O recurso de revelação de rolagem do SeedProd lida com animações acionadas por rolagem separadamente.
Preciso do SeedProd Pro para usar o bloco Animated Headline?
Sim. O bloco Animated Headline é um recurso Pro e não está disponível na versão gratuita do SeedProd. Se você precisa de animação de texto sem um plugin pago, use o plugin Animated Text Block para o editor de blocos Gutenberg ou o plugin Animate It! para o editor clássico. Ambos são gratuitos.
Como adicionar animação de texto no WordPress sem um plugin?
Você pode usar animações CSS keyframe aplicadas através do painel CSS Adicional do seu tema (Aparência » Personalizar » CSS Adicional). Escreva uma regra @keyframes, atribua-a ao seu elemento de texto usando a propriedade animation e adicione a classe em um bloco de HTML Personalizado ou na marcação do seu tema. Essa abordagem requer conhecimento básico de CSS e é mais adequada para desenvolvedores do que para iniciantes.
Pronto para começar a adicionar animações de texto às suas páginas do WordPress? Experimente o SeedProd e use o bloco Animated Headline para destacar seus títulos principais em minutos.
Você também pode gostar deste guia sobre como criar uma landing page dinâmica no WordPress.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
