Como Adicionar Facilmente Animações CSS no WordPress

Ao longo dos anos, experimentamos diferentes maneiras de tornar os sites WordPress mais interativos. Se você está procurando chamar a atenção dos seus visitantes, as animações podem ser muito eficazes.

Você pode usar animações para capturar a atenção do visitante e destacar o conteúdo mais importante de uma página. Isso também pode incentivar os clientes a clicar nos seus botões de call-to-action e links.

Felizmente, também é fácil configurar animações no WordPress, mesmo que você não saiba escrever código.

Neste tutorial, mostraremos como você pode adicionar animações CSS facilmente no WordPress.

Por Que Adicionar Animações CSS no WordPress?

Você pode usar animações CSS para chamar a atenção do visitante para diferentes partes de uma página. Por exemplo, se você tem uma loja online, animações podem destacar os recursos mais importantes ou os maiores pontos de venda de um produto. Isso pode melhorar a experiência do usuário e aumentar as vendas.

As animações também farão seus CTAs se destacarem, o que pode ajudá-lo a atingir um objetivo específico, como fazer mais pessoas se inscreverem na sua newsletter por e-mail.

Você pode adicionar animações CSS à folha de estilo do seu tema WordPress ou tema filho. No entanto, isso leva muito tempo e esforço, e se você cometer um erro, pode quebrar o design do seu site e até mesmo a sua funcionalidade.

Dito isso, vamos ver como você pode adicionar facilmente animações CSS ao seu site WordPress. Se você preferir ir direto para um método específico, pode usar os links abaixo:

• Método 1: Como Animar Facilmente Qualquer Bloco do WordPress (Rápido e Fácil)
• Método 2: Como Adicionar Animações CSS a Páginas Personalizadas (Recomendado)

Método 1: Como Animar Facilmente Qualquer Bloco do WordPress (Rápido e Fácil)

A maneira mais fácil de adicionar uma animação CSS simples é usando o Blocks Animation.

Este plugin de animação gratuito permite que você adicione uma animação de entrada a qualquer bloco sem ter que escrever uma única linha de CSS. Ele também possui uma animação de digitação e um efeito de estilo de ticker que você pode adicionar a textos e números.

Primeiro, você precisará instalar e ativar o plugin gratuito Blocks Animation. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, abra qualquer página ou post no editor de blocos do WordPress. Em seguida, basta clicar no bloco que você deseja animar e selecionar a aba 'Bloco' no menu do lado direito.

Você verá que este menu tem uma nova seção 'Animações'.

Simplesmente clique para expandir a seção 'Animações' e você verá três opções diferentes: Animações, Animações de Contagem e Animações de Digitação.

'Animações' são efeitos curtos que tocam uma vez quando a página carrega. Para adicionar este tipo de animação de entrada ao seu blog WordPress, basta clicar no menu suspenso ao lado de 'Animação'.

Isso abre um menu onde você pode escolher a animação que deseja usar.

O editor do WordPress mostrará uma prévia da animação, para que você possa experimentar diferentes opções e ver o que fica melhor.

Por padrão, a animação de entrada será reproduzida assim que a página carregar, mas você pode adicionar um atraso, se preferir. Se você usar várias animações na mesma página, poderá até usar atrasos para escaloná-las, para que não sejam avassaladoras.

Simplesmente abra o menu suspenso 'Atraso' e escolha um tempo na lista.

Você também pode tornar a animação mais rápida ou mais lenta usando o menu suspenso 'Velocidade'.

Ao experimentar diferentes configurações, você pode pré-visualizar a animação a qualquer momento clicando em 'Reproduzir Animação'.

O plugin também possui 'Animações de Contagem' e 'Animações de Digitação'.

As Animações de Digitação permitem animar texto, enquanto as Animações de Contagem adicionam um efeito de estilo de contador a números. Essas animações funcionam com qualquer bloco Gutenberg que suporte texto ou números, para que você possa usá-las para animar botões, legendas de imagens, títulos e muito mais.

Para adicionar qualquer um desses efeitos, comece destacando o texto ou os números que você deseja animar. Em seguida, clique na seta para baixo na pequena barra de ferramentas.

Agora você pode escolher ‘Animações de Contagem’ ou ‘Animações de Digitação’ no menu suspenso.

Se essas opções estiverem esmaecidas, certifique-se de ter destacado o conteúdo correto. Por exemplo, você não poderá selecionar ‘Animação de Contagem’ se tiver destacado apenas texto.

Após adicionar a animação, você pode usar os menus suspensos na pequena janela pop-up para alterar a velocidade e adicionar um atraso opcional.

Por exemplo, na imagem a seguir, estamos usando um atraso de um segundo.

Quando estiver pronto para tornar a animação CSS ativa, clique no botão ‘Publicar’ ou ‘Atualizar’ para aplicar as animações em seu site. Agora, se você visitar seu site WordPress, verá a animação ao vivo.

Método 2: Como Adicionar Animações CSS a Páginas Personalizadas (Recomendado)

Se você deseja adicionar animações simples aos blocos integrados do WordPress, o Blocks Animation é uma boa opção. No entanto, se você deseja realmente chamar a atenção do visitante, mantê-lo em seu site e obter mais conversões, recomendamos o uso do SeedProd.

O SeedProd é o melhor plugin construtor de páginas que permite criar belas páginas de destino, páginas de vendas, uma página inicial e muito mais usando um editor simples de arrastar e soltar.

Ele também vem com um bloco ‘Título Animado’ que você pode usar para criar títulos animados rotativos e destacados.

Apesar do nome, você pode usar o bloco Título Animado para animar qualquer texto, incluindo uma chamada para ação, subtítulo ou qualquer outro texto que você queira enfatizar.

O SeedProd também vem com mais de 40 animações de entrada que você pode adicionar a qualquer bloco, incluindo imagens, texto, botões, vídeos e muito mais.

Você pode até animar seções e colunas inteiras com apenas alguns cliques. Dessa forma, você pode criar páginas animadas envolventes em minutos.

Se você está usando animações para obter mais conversões e vendas, o SeedProd se integra ao WooCommerce. Ele também suporta muitos dos principais serviços de marketing por e-mail que você já pode estar usando para promover seu site.

Como Configurar o Construtor de Páginas SeedProd

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa inserir sua chave de licença.

Você pode encontrar essas informações em sua conta no site do SeedProd. Após adicionar a chave de licença, basta clicar em ‘Verificar Chave’.

Criar um Design de Página Personalizado

Para começar, vá para SeedProd » Landing Pages e clique em ‘Adicionar Nova Landing Page’.

Na próxima tela, você será solicitado a escolher um modelo.

O SeedProd vem com mais de 350 modelos bonitos que são organizados em diferentes categorias, como modelos de página 404 e páginas de agradecimento personalizadas do WooCommerce.

Para este guia, mostraremos como criar uma página de vendas com texto animado e animações de entrada, mas os passos serão semelhantes, não importa o tipo de página que você crie.

Simplesmente clique em qualquer aba para ver os diferentes modelos dentro dessa categoria.

Quando encontrar um modelo que deseja usar, basta passar o mouse sobre ele e clicar no ícone de marca de seleção.

Estamos usando o modelo 'Zen Sales Page' em todas as nossas imagens, mas você pode usar qualquer modelo.

Em seguida, você precisa dar um título à página.

O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterá-lo para o que quiser. Por exemplo, adicionar palavras-chave relevantes a um URL pode melhorar seu SEO do WordPress e ajudar a página a aparecer nos resultados de pesquisa relevantes.

Para saber mais, consulte nosso guia sobre como fazer pesquisa de palavras-chave para o seu blog WordPress.

Quando estiver satisfeito com o título e o URL, clique em ‘Salvar e Começar a Editar a Página.’

Isso carregará o editor de páginas de arrastar e soltar do SeedProd.

À direita, você verá uma prévia ao vivo do design da página, com algumas configurações à esquerda.

O SeedProd vem com muitos blocos que você pode adicionar ao seu design, incluindo blocos que permitem adicionar botões de compartilhamento social, vídeos, formulários de contato e muito mais.

Para mais informações, consulte nosso guia sobre como criar uma página personalizada no WordPress.

Como Adicionar Texto Animado ao WordPress

Para adicionar texto animado à página, encontre o bloco Título Animado e arraste-o para o design da sua página.

Existem duas maneiras de animar seu título. Primeiro, o estilo ‘Destacado’ adiciona uma animação de forma ao seu texto, como um círculo ou um zigue-zague sublinhado.

Você pode usar essa animação para chamar a atenção para uma palavra ou frase específica dentro do título. Isso pode tornar seu título mais fácil de ler e entender, destacando o conteúdo mais importante. É também uma ótima maneira de chamar a atenção para uma chamada para ação.

O estilo Destacado também tem algumas formas de riscado.

Você pode usar riscados para criar efeitos interessantes e chamativos, ou simplesmente adicionar um pouco de diversão ao seu design.

Para criar uma animação Destacada, basta abrir o menu suspenso ‘Estilo’ e selecionar ‘Destacado.’

Em seguida, abra o menu suspenso ‘Forma’ e escolha uma forma. Ao clicar em uma forma, o SeedProd mostrará uma prévia dessa animação para que você possa experimentar diferentes formas e ver qual delas você mais gosta.

O SeedProd também tem um estilo de animação ‘Rotativo’, que adiciona um efeito de transição ao texto.

Frequentemente, o texto animado é a primeira coisa que os visitantes olham quando uma página carrega, então é uma ótima maneira de destacar a parte mais importante do texto.

Para criar uma animação de transição, basta abrir o menu suspenso ‘Estilo’ e clicar em ‘Rotativo’.

Você pode então abrir o menu suspenso ‘Animação’ e escolher o tipo de transição que deseja usar, como fade, zoom ou roll. Novamente, o SeedProd reproduzirá a animação dentro do editor de páginas, para que você possa experimentar diferentes efeitos e ver qual prefere.

Independentemente de você estar criando uma animação ‘Destacada’ ou ‘Rotativa’, você pode adicionar texto antes e depois do texto animado.

Simplesmente digite nos campos ‘Antes do Título’ e ‘Depois do Título’. No campo ‘Texto’, adicione a palavra ou frase que você deseja animar.

Se você quiser animar o título inteiro, deixe os campos ‘Antes do Título’ e ‘Depois do Título’ vazios.

Por padrão, o SeedProd reproduzirá a animação em loop, o que alguns visitantes podem achar irritante.

Para reproduzir a animação apenas uma vez, clique para desativar o interruptor ‘Loop Infinito’.

Por padrão, a animação será reproduzida por 1200 milissegundos após um atraso de 8000 milissegundos.

Para usar valores diferentes, digite nos campos ‘Duração’ e ‘Atraso’. Por exemplo, você pode tornar a animação mais rápida usando uma duração menor.

Você também pode querer estilizar o texto. Por exemplo, você pode alterar o tamanho da fonte e o alinhamento.

Quando estiver satisfeito com a aparência do título animado, clique no botão ‘Salvar’ para armazenar suas alterações.

Adicionar Animações de Entrada no WordPress

As animações de entrada são reproduzidas quando a página é carregada pela primeira vez, sendo uma ótima maneira de chamar a atenção do visitante.

Você também pode usá-las para destacar o conteúdo que os visitantes devem olhar primeiro. Por exemplo, se você tem um marketplace online, pode animar a imagem principal do produto ou o banner anunciando sua promoção de Black Friday.

Dentro do editor SeedProd, basta clicar no conteúdo que você deseja animar e, em seguida, selecionar a aba ‘Avançado’ no menu à esquerda.

Você pode então clicar para expandir a seção ‘Efeitos de Animação’.

Depois disso, basta escolher uma animação no menu suspenso ‘Animação de Entrada’.

Agora você pode adicionar animações de entrada a qualquer bloco, seção ou coluna simplesmente seguindo o mesmo processo descrito acima.

Publique Suas Animações CSS no WordPress

Quando estiver satisfeito com a configuração da página, clique no menu suspenso do botão ‘Salvar’ e selecione ‘Publicar’.

Agora você pode visitar esta página para ver as animações CSS ao vivo.

Esperamos que este artigo tenha ajudado você a aprender como adicionar animações CSS no WordPress. Você também pode querer ver nosso guia sobre como adicionar um fundo animado no WordPress ou os elementos de design essenciais do WordPress que todo site precisa.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.