Ir para o conteúdo principal

Como adicionar animações CSS WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você já viu essas lindas animações CSS em sites populares? Efeitos de animação, como conteúdo escorregadio e dissipador, imagens refletidas, etc. ?

Neste artigo, mostraremos como adicionar facilmente animações CSS ao WordPress sem escrever código.

Quando e por que você deve usar animações CSS?

As animações CSS permitem chamar a atenção do usuário para diferentes partes da página. Você pode usá-los para animar os recursos do produto ou um botão de call to action. Muitos sites usam animações CSS quando o usuário rola a página para baixo. Isso adiciona uma certa personalidade à página e enfatiza os elementos mais importantes.

As animações CSS também são mais rápidas do que usar flash ou vídeos. Eles carregam rapidamente e são suportados pelos navegadores mais modernos. Você pode adicionar animações CSS manualmente ao seu tema WordPress ou à folha de estilos do seu tema criança. No entanto, a maioria dos iniciantes não deseja editar seus arquivos de temas ou aprender CSS.

Dito isto, neste tutorial, veremos como você pode adicionar facilmente animações CSS ao seu site WordPress.

Mas antes de começar, reserve um tempo para dar uma olhada Como instalar um tema WordPress

Então mvamos trabalhar!

Como configurar animações CSS

Vamos usar um plugin para este tutorial. Permite criar animações CSS usando o editor visual WYSIWYG. A primeira coisa que você precisa fazer é instalar e ativar o plugin Animá-lo!. O plugin funciona sem configuração e não há painel de controle.

Discover Como instalar um plugin no WordPress se você nunca fez isso.

Basta criar um novo artigo e você verá um novo botão na barra de ferramentas do editor visual.

animateit-button

Clicar no botão abrirá uma nova janela onde você pode criar suas animações CSS. O plug-in suporta muitas animações CSS à sua escolha.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Animação-editor

Você deve primeiro selecionar o estilo de animação. Depois disso, você deve escolher o tempo de espera antes da animação e a duração da animação. Por fim, você pode especificar quando a animação começará.

Vá além, descobrindo Como adicionar animações impressionantes para o seu blog

O plugin oferece três opções. Você pode executar a animação ao clicar, passar o mouse ou rolar.

animateon

Quando estiver satisfeito com as configurações, você pode clicar no botão " Ela anima Para ver a pré-visualização da animação.

Em seguida, clique no botão inserção para adicionar a animação ao seu artigo ou página. Você notará que o plug-in adicionará um código curto com conteúdo fictício no editor visual.

animar-Shortcode

Você deve remover o conteúdo fictício dentro do código de acesso e substituí-lo por seu próprio conteúdo, imagens ou qualquer outra coisa que queira animar.

Descubra também Como adicionar mapas interativos ao seu site WordPress

conteúdo de shortcode

Tudo o que você precisa fazer agora é publicar seu conteúdo e visualizá-lo.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Descubra também alguns plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. ChimpMate Pro

O Chimpmate é o plug-in Pop-up WordPress do MailChimp, que o ajudará a converter seus leitores em assinantes. Ele foi projetado para aumentar sua lista de emails sem irritar os visitantes, com pop-ups irritantes.

É totalmente personalizável e você dominará quando e onde exibir pop-ups. Suas outras características são: suporte de vários navegadores e tem pvárias opções de agendamento, um layout totalmente personalizável, umsuporte ao cliente responsivo, o iperfeita integração com WooCommercee umxcellente gerenciamento de cache, a perfeita integração com vários temas WordPress, suporte multilíngue, obrigado para o plugin WPML, enão muito mais.

Descarregar | Demo | hospedagem na web

2. Gateway de Pagamento WooCommerce Cardstream

A CardStream é o único provedor independente de gateway de pagamento. Este plugin do WordPress permite que você aceite pagamentos diretamente na sua loja online do WooCommerce através do Cardstream.

Também oferece a opção de aceitar pagamentos usando a solução Cardstream hospedada.

Descarregar | Demo | hospedagem na web

3. Fonte de dados

O DataSource é um plugin do WordPress focado na apresentação visual dos seus dados em qualquer página do seu site. Permite apresentar dados de arquivos CSV, XML, Excel, Google Spreadsheets, bancos de dados MySQL ou tipos personalizados de publicação como uma tabela classificável e filtrável, gráficos diferentes, mapas e muito mais.

Entre suas características, você encontrará, entre outras:interface intuitiva, tableaux com base no modelo dos seus dados, tclassificáveis, filtráveis ​​e responsivas, oupport de Google Maps e da multilíngue, umsuporte ao cliente responsivo, um mmanual do usuário, um iinstalação rápida, et mais

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Conclusão

É isso aí! Isso é tudo para este tutorial, esperamos que tenha ajudado você a aprender a integração de animações CSS no WordPress. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

...

Este artigo contém 1 comentário

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
20 ações
ação16
chilrear2
Enregistrer2