Como adicionar animação ao texto no WordPress

Estilos de texto sofisticados chamam a atenção dos espectadores rapidamente. Os proprietários de sites WordPress geralmente perguntam como adicionar animação ao texto. Com certeza, você encontrará vários métodos para criar os textos do seu site WordPress. Você pode adicionar manualmente efeitos HTML CSS que requerem um pouco mais de código. Mas a codificação é uma ótima maneira de adicionar animação personalizada ao seu site. Novamente, um plug-in com o melhor widget é relativamente útil, eficaz e também popular .

No entanto, tentamos cobrir ambas as técnicas tão facilmente quanto possível. Se você administra um site WordPress, reserve um tempo para ler o blog e entender os processos. Seguir as etapas e instruções corretamente permitirá que você personalize sua própria animação sem problemas.

Como adicionar efeitos de texto animado no WordPress

Efeitos de texto animados podem ser usados ​​para adicionar estilo e personalidade ao seu site WordPress. Neste tutorial, mostraremos as formas de adicionar esses efeitos; mas antes disso, você deve ter uma ideia clara sobre um texto animado e seu papel; vamos aprender!

O que é um efeito de texto animado e como ele aparece?

Os efeitos de texto animado são uma ótima maneira de adicionar um pouco de diversão e emoção aos seus artigos e títulos também . Ao optar por usar um efeito de texto animado sofisticado, você pode criar vários efeitos. Alguns efeitos são simples, como alterar a cor ou o tamanho do texto , enquanto outros são animações detalhadas, como piscar ou piscar o texto .

O texto animado é um pouco diferente do texto normal. Normalmente, esse tipo de texto não se move sozinho. Em vez disso, tem um efeito que faz parecer que está se movendo pela tela. Assim, os textos sofisticados tornam as pessoas mais propensas a clicar no conteúdo, links ou abrir e-mails .

O papel dos textos animados em seu site

Existem diferentes tipos de efeitos de texto animado disponíveis nos temas do WordPress, mas todos compartilham a mesma funcionalidade básica. Eles alteram a cor ou o estilo do texto e simplesmente alteram um estilo de teste. Por exemplo, você pode alterar um botão de “chamada para ação” com fundo vermelho e texto branco que diz “Clique aqui!” quando clicado.

O título animado ou uma seção de herói com textos sofisticados desempenha os seguintes papéis-

• Torna seus projetos visualmente mais interessantes.
• Destaque ofertas especiais e informações importantes.
• Torna as características do seu produto perceptíveis.
• Torna um site mais interativo e promove o negócio.

As maneiras mais fáceis de adicionar efeitos de texto animado

Usando um plug-in do WordPress

O mercado de hoje oferece diferentes tipos de plug-ins para facilitar as tarefas de estilo de texto. O ElementsKit é um plug-in tão poderoso quanto um complemento para o construtor de páginas Elementor. Com o ElementsKit, você terá tudo sob o mesmo capô.

O texto animado extravagante é um widget impressionante apresentado pelo ElementsKit pro.

Faça login no seu painel -> Selecione qualquer página ou postagem -> Clique em editar com o ElementsKit -> Pesquise o widget ElementsKit Fancy Animation Text -> Arraste e solte o widget

Seção de conteúdo

A parte é chamada de parte do texto sofisticado e contém os seguintes campos:

Animação

• Estilo de Animação – Aqui as duas opções são Texto ou SVG, ambas permitem fazer diferentes estilos de animação.
• Tipo de Animação – Com base no seu tipo de animação, você terá várias opções aqui.
• Revelar Duração (ms) – Você pode definir a duração da animação em milissegundos usando a caixa de opção.
• Reveal Animation Delay (ms) – Ajuste o tempo de atraso da animação aqui. Ele especifica que uma animação pode começar mais tarde, imediatamente desde o início ou instantaneamente e no meio da animação.

Contente

• Texto do prefixo – você precisa escrever aqui o conteúdo do prefixo que deseja exibir. Isso significa que será escrito antes da animação sofisticada.
• Listas sofisticadas – adicione itens aqui para animações sofisticadas.
• Texto do Sufixo – Escreva o conteúdo do sufixo que deseja exibir. Portanto, será especificado após a animação sofisticada.

• Title HTML Tag – Selecione a tag HTML do conteúdo aqui.
• Link (Opcional) – Adicione qualquer link se quiser que os usuários redirecionem para qualquer outro local.

Seção de estilo

• Texto do título – Utilize este campo para ajustar o alinhamento do título, tipografia, cor, etc.
• Listas de Texto Fantasia – Use este campo para ajustar tipografia, cor e preenchimento.
• Cursor extravagante – Você pode dar ao cursor uma aparência sofisticada com cor, largura e altura usando este campo.

Depois de editar e estilizar todas as declarações necessárias, clique em atualizar e veja as alterações no front-end. Um exemplo é –

Aplicando CSS

Ao criar animações CSS no WordPress, lembre-se das seguintes coisas básicas, porém importantes :

• Definindo um nome de animação correto – Este é o nome que será exibido em um elemento quando ele for movido por uma animação CSS. Por exemplo, se você tiver um botão com uma animação chamada “fadeIn”, este seria o valor que você usaria para esta propriedade.
• Animation-duration – Este é o número de segundos que uma animação levará para ser concluída. Você também pode definir isso como nenhum ou 0 para fazer uma animação durar indefinidamente ou até que algo mais aconteça (como o carregamento de uma página).
• Função de temporização da animação – controla como o elemento se move de um ponto para outro com base em quanto tempo leva para uma quantidade específica de tempo (em milissegundos). Por exemplo, se você definir essa propriedade como atenuação, seu elemento começará a se mover lentamente e, em seguida, acelerará no final de sua duração antes de começar novamente no início.
• Animation-delay – Este é um valor que especifica o número de milissegundos que deve ser adicionado após o término de uma animação antes de começar novamente (por exemplo, 1s).
• Animation-iteration-count – Esta é a quantidade de tempo que você precisa para reproduzir a animação. Usando a propriedade CSS, você pode contar essa iteração.
• Animations-direction – É a ordem ou direção em que uma animação deve ser executada. Pode ser normal, reverso, alternado e alternado-reverso.
• Animation-fill-mode – Esses valores especificam como um elemento deve ser exibido. Pode ser antes e depois de uma animação ter sido aplicada a ele.
• Conhecer @keyframes – Especifica as propriedades da animação que mudam ao longo do curso e também os valores que essas propriedades devem assumir. Por exemplo:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Geralmente, as porcentagens são usadas para indicar o tempo da animação. O quadro-chave acima demonstra que a cor de fundo do elemento se transformará em 25% do vermelho para o amarelo, por meio da animação.

No entanto, from e to podem ser usados ​​no lugar de 0% e 100%, respectivamente .

Criando um arquivo animate.css

Você deve primeiro criar um arquivo separado com todas as propriedades necessárias, no editor de texto em que trabalha. Você pode escolher os quadros-chave para qualquer animação . Em seguida, você deve colocá-los juntos com classes CSS específicas para aplicar a qualquer texto em seu site WordPress.

Comece escrevendo um código simples em seu arquivo CSS. Um código de amostra para um texto de animação pode ser parecido com-

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Agora, para vincular esse quadro-chave a uma classe CSS, definimos um texto chamado MyAnimation. Então, logo após o código acima agora você precisa colocar o código abaixo no arquivo.

 .MyAnimation { animation-name: MyAnimation; }

Você pode encontrar todo o conhecimento básico de animação CSS e praticar os códigos aqui!

Você pode repetir este procedimento para criar quantas animações forem possíveis de acordo com sua necessidade. Em seguida, salve o arquivo como animate.css. Alternativamente, você pode baixar o arquivo Animate.css . É um arquivo muito apreciado que contém os quadros-chave e as classes CSS para toneladas de designs de animação populares. Além disso, usar o arquivo diminuirá sua dor de codificar a animação complexa.

O código acima irá animar o texto da sua tag h1 ' MyAnimation '. Você pode alterar a duração da animação alterando os “3s” para um valor diferente . Você também pode alterar as cores alterando os valores hexadecimais. Depois de salvar o arquivo CSS, você pode fazer mais alterações na aparência do seu site, editar o arquivo CSS. Você pode alterar a fonte, o tamanho do texto e a cor do texto editando o arquivo CSS. Você também pode alterar a cor de fundo e o tamanho do cabeçalho alterando o arquivo CSS.

Carregando seu arquivo animate.css para o site WordPress

Depois de terminar o trabalho do arquivo, carregue-o no diretório do seu tema. Dividimos todo o processo em três etapas,

Passo 1

Vá para o site usando File Transfer Protocol (FTP) -> Escolha o cliente FTP (FileZilla, WinSCP, Cyberduck, etc.) -> Selecione as credenciais necessárias em sua conta de hospedagem.

Passo 2

Acesse seu diretório public_html -> Navegue até wp-content –> Temas -> Selecione a pasta do tema ativo ou filho

Etapa 3

Agora, procure um subdiretório chamado css. Se você obtê-lo, carregue seu arquivo animate.css ou animate.min.css do arquivo Animate.css com o subdiretório.

No entanto, se você não tiver a pasta do subdiretório, poderá criar facilmente uma nova. Para isso, logo após carregar o arquivo faça uma edição simples para criar o novo arquivo e pronto.

Chame a folha de estilo do Animate por meio de functions.php

Você encontrará o arquivo functions.php na pasta do seu tema ativo. Agora, você precisa adicionar este trecho de código para chamar o Animate Stylesheet:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Lembre -se, se você usou o arquivo animate.min.css de Animate.css, você precisará escrever animate.min.css na linha final em vez de animate.css. Depois de salvar todas as alterações, vá para o painel do WordPress.

Aplicar animações usando classes CSS

Então agora é possível aplicar qualquer classe que você quiser no arquivo animate.css para ver diferentes efeitos de animação em posts e páginas. Além disso, o arquivo Animate.css permite que você faça referência a uma lista completa de todos.

Por fim, selecione uma postagem ou página no Editor clássico -> Mude para o editor de texto -> Ou clique no ícone de três pontos na barra de ferramentas do bloco, se for um Editor de bloco -> Selecione Editar como HTML-> Adicione o arquivo animado class e a classe da sua animação para a tag do elemento -> Visualização

Estas são duas técnicas eficazes para adicionar texto animado ao seu site e podem ajudar a torná-lo mais envolvente e visualmente atraente . Ao usar uma dessas técnicas, você pode adicionar algum movimento e interesse às suas páginas.

No entanto, aplicar CSS pode ser um pouco difícil se você não tiver nenhuma ideia de codificação. Portanto, é recomendável obter ajuda especializada para criar animações CSS no WordPress. Como alternativa, o texto animado sofisticado do ElementsKit é um widget inteligente que ajuda você a criar qualquer animação elegante rapidamente. Com o widget, você pode transformar os textos escolhidos em animações sofisticadas.