Como adicionar facilmente animações CSS no WordPress

Deseja adicionar animações CSS no WordPress?

Você pode usar animações para chamar a atenção do visitante e destacar o conteúdo mais importante de uma página. Elas também podem incentivar os clientes a clicar em seus botões e links de chamada para ação.

Neste tutorial, mostraremos como você pode adicionar facilmente animações CSS 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ê tiver uma loja on-line, as animações poderão destacar os recursos mais importantes ou os pontos de venda mais importantes de um produto. Isso pode melhorar a experiência do usuário e gerar mais vendas.

As animações também farão com que suas CTAs se destaquem, o que pode ajudá-lo a atingir uma meta específica, como fazer com que mais pessoas se inscrevam em seu boletim informativo por e-mail.

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

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

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 é usar Blocks Animation.

Esse plug-in de animação gratuito permite que você adicione uma animação de entrada a qualquer bloco sem precisar escrever uma única linha de CSS. Ele também tem 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 plug-in gratuito. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plug-in 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 guia “Block” (Bloco) no menu à direita.

Você verá que esse menu tem uma nova seção “Animations” (Animações).

Basta clicar 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 são reproduzidos uma vez quando a página é carregada. Para adicionar esse tipo de animação de entrada ao seu blog do WordPress, basta clicar na lista suspensa ao lado de “Animação”.

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

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

Por padrão, a animação de entrada será reproduzida assim que a página for carregada, mas você pode adicionar um atraso, se preferir. Se você usar várias animações na mesma página, poderá usar atrasos para escalonar as animações de modo a não sobrecarregá-las.

Basta abrir o menu suspenso “Delay” (Atraso) e escolher um horário na lista.

Você também pode tornar a animação mais rápida ou mais lenta usando o menu suspenso “Speed” (Velocidade).

Ao experimentar diferentes configurações, você pode visualizar a animação a qualquer momento clicando em ‘Replay Animation’.

O plug-in também tem “Animações de contagem” e “Animações de digitação”.

As Animações de Digitação permitem que você anime o texto, enquanto as Animações de Contagem adicionam um efeito de estilo de ticker aos números. Essas animações funcionam com qualquer bloco do Gutenberg que suporte texto ou números, portanto você pode usá-las para animar botões, legendas de imagens, cabeçalhos 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 “Count Animations” (Animações de contagem) ou “Typing Animations” (Animações de digitação) no menu suspenso.

Se essas opções estiverem esmaecidas, verifique se você destacou o conteúdo correto. Por exemplo, você não poderá selecionar “Count Animation” (Contar animação) se tiver destacado apenas texto.

Depois de adicionar a animação, você pode alterar a velocidade e adicionar um atraso opcional usando os menus suspensos na pequena janela pop-up.

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

Quando estiver pronto para ativar a animação CSS, clique no botão “Publish” (Publicar) ou “Update” (Atualizar) para aplicar as animações em seu site. Agora, se você visitar o site do WordPress, verá a animação ao vivo.

Método 2: Como adicionar animações CSS a páginas personalizadas (recomendado)

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

O SeedProd é o melhor plug-in de 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 “Animated Headline” que você pode usar para criar títulos animados rotativos e destacados.

Apesar do nome, você pode usar o bloco Animated Headline para animar qualquer texto, inclusive uma chamada para ação, um subtítulo ou qualquer outro texto que 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.

É possível até mesmo animar seções e colunas inteiras com apenas alguns cliques. Dessa forma, você pode criar páginas animadas envolventes em questão de minutos.

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

Como configurar o SeedProd Page Builder

A primeira coisa que você precisa fazer é instalar e ativar o SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in 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 da SeedProd. Depois de adicionar a chave de licença, basta clicar em “Verify Key” (Verificar chave).

Criar um design de página personalizado

Para começar, vá para SeedProd ” Landing Pages e clique em “Add New Landing Page”.

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

O SeedProd vem com mais de 180 belos modelos organizados em diferentes categorias, como modelos de página 404 e páginas de agradecimento personalizadas do WooCommerce.

Neste guia, mostraremos como criar uma página de vendas com texto animado e animações de entrada, mas as etapas serão semelhantes, independentemente do tipo de página que você criar.

Basta clicar em qualquer guia para ver os diferentes modelos dentro dessa categoria.

Quando encontrar um modelo que deseja usar, passe o mouse sobre ele e clique 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 o 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 seu blog WordPress.

Quando estiver satisfeito com o título e o URL, clique em ‘Save and Start Editing the Page’ (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 visualização ao vivo do design da página, com algumas configurações à esquerda.

O SeedProd vem com vários blocos que podem ser adicionados ao seu design, inclusive blocos que permitem adicionar botões de compartilhamento social, vídeos, formulários de contato e muito mais.

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

Como adicionar texto animado ao WordPress

Para adicionar um texto animado à página, localize o bloco Animated Headline (Título animado) e arraste-o para o design da página.

Há duas maneiras de animar seu título. Primeiro, o estilo “Highlighted” adiciona uma animação de forma ao texto, como um círculo ou um ziguezague 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 facilitar a leitura e a compreensão do título, destacando o conteúdo mais importante. Também é uma ótima maneira de chamar a atenção para uma chamada para ação.

O estilo Highlighted também tem algumas formas tachadas.

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

Para criar uma animação destacada, basta abrir o menu suspenso “Style” (Estilo) e selecionar “Highlighted” (Destacado).

Em seguida, abra o menu suspenso “Shape” (Forma) e escolha uma forma. Quando você clicar em uma forma, o SeedProd mostrará uma visualização dessa animação para que você possa experimentar diferentes formas e ver qual delas lhe agrada mais.

O SeedProd também tem um estilo de animação “Rotating” (Rotação), que adiciona um efeito de transição ao texto.

Geralmente, o texto animado é a primeira coisa que os visitantes veem quando uma página é carregada, portanto, é 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 “Rotação”.

Em seguida, você pode abrir o menu suspenso “Animation” (Animação) e escolher o tipo de transição que deseja usar, como fade, zoom ou roll. Mais uma vez, o SeedProd reproduzirá a animação dentro do editor de páginas, de modo que você possa experimentar diferentes efeitos para ver qual prefere.

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

Basta digitar nos campos “Before Headline” (Antes do título) e “After Headline” (Depois do título). No campo “Text” (Texto), adicione a palavra ou frase que você deseja animar.

Se você quiser animar o título inteiro, basta deixar os campos “Before Headline” (Antes do título) e “After Headline” (Depois do título) vazios.

Por padrão, o SeedProd reproduzirá a animação em um loop, o que pode ser irritante para alguns visitantes.

Para reproduzir a animação apenas uma vez, clique para desativar o botão “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 “Duration” (Duração) e “Delay” (Atraso). Por exemplo, você pode tornar a animação mais rápida usando uma duração mais curta.

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

Quando estiver satisfeito com a aparência do título animado, clique no botão “Save” (Salvar) para armazenar as 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, portanto, são uma ótima maneira de chamar a atenção do visitante.

Você também pode usá-los para destacar o conteúdo que os visitantes devem ver primeiro. Por exemplo, se você tiver um mercado on-line, poderá animar a imagem principal do produto ou o banner que anuncia a promoção da Black Friday.

No editor do SeedProd, basta clicar no conteúdo que você deseja animar e selecionar a guia “Advanced” (Avançado) no menu à esquerda.

Em seguida, clique para expandir a seção “Animation Effects” (Efeitos de animação).

Depois disso, basta escolher uma animação no menu suspenso “Entrance Animation” (Animação de entrada).

Agora é possível adicionar animações de entrada a qualquer bloco, seção ou coluna, bastando seguir 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. Talvez você também queira ler nosso guia definitivo para aumentar a velocidade e o desempenho ou nossa lista dos erros mais comuns do WordPress e como corrigi-los.

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