Hai visto queste bellissime animazioni CSS su siti Web popolari? Effetti di animazione come il contenuto che scivola, che si dissolve, le sue immagini che rimbalzano, ecc…. ? Vuoi anche aggiungere animazioni CSS a WordPress?

In questo articolo, ti mostreremo come aggiungere facilmente animazioni CSS a WordPress senza scrivere alcun codice.

Quando e perché si dovrebbe usare le animazioni CSS?

Le animazioni CSS consentono di attirare l'attenzione dell'utente su diverse parti della pagina. Puoi usarli per animare le funzionalità del prodotto o un pulsante di invito all'azione. Molti siti Web utilizzano animazioni CSS quando l'utente scorre la pagina verso il basso. Aggiunge un po 'di personalità alla pagina e sottolinea gli elementi più importanti.

Le animazioni CSS sono anche più veloci rispetto all'utilizzo di flash o video. Si caricano rapidamente e sono supportati dalla maggior parte dei browser Web moderni. Puoi aggiungere animazioni CSS manualmente al tuo tema WordPress o al tuo foglio di stile. tema bambino. Tuttavia, la maggior parte dei principianti non desidera modificare i propri file dei temi o apprendere i CSS.

Detto questo, in questo tutorial vedremo come aggiungere facilmente animazioni CSS al tuo sito Web WordPress.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come impostare le animazioni CSS

Useremo un plugin per questo tutorial. Ti permette di creare animazioni CSS usando Editor visuale WYSIWYG. La prima cosa che devi fare è installare e attivare il plugin Animarla!. Il plugin funziona senza configurazione e non esiste un pannello di controllo.

Scopri Come installare un plugin in WordPress se non l'hai mai fatto.

Crea un nuovo post e vedrai un nuovo pulsante sulla barra degli strumenti dell'editor visivo.

aggiungi animazioni CSS su WordPress - animateit-button

Cliccando sul pulsante, vedrai apparire una nuova finestra in cui puoi disegnare le tue animazioni CSS. Il plugin supporta molte animazioni CSS che sono tutte tra cui scegliere.

Animazione-editore

Per prima cosa devi selezionare lo stile di animazione. Dopodiché, devi scegliere il tempo di attesa prima dell'animazione e la durata dell'animazione. Infine, puoi specificare quando inizierà l'animazione.

Inoltre vai oltre scoprendo Come aggiungere animazioni impressionanti al tuo blog

Il plugin offre tre scelte. È possibile eseguire l'animazione al clic, al passaggio del mouse o durante lo scorrimento.

aggiungi animazioni CSS a WordPress - animateon

Una volta che sei soddisfatto delle impostazioni, puoi fare clic sul pulsante " si anima Per vedere l'anteprima dell'animazione.

Quindi fare clic sul pulsante inserire per aggiungere un'animazione al tuo post o alla tua pagina. Noterai che il plugin aggiungerà uno shortcode con contenuto fittizio nell'editor visivo.

animare-shortcode

È necessario rimuovere il contenuto fittizio all'interno dello shortcode e sostituirlo con il proprio contenuto, immagini o qualsiasi altra cosa si desideri animare.

Scopri anche Come aggiungere mappe interattive al tuo sito Web WordPress

content-shortcode

Tutto quello che devi fare ora è pubblicare i tuoi contenuti e visualizzarli in anteprima.

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. ChimpMate Pro

Lo scimpanzé è il WordPress Plugin Il pop-up premium di MailChimp, che ti aiuterà a convertire i tuoi lettori in abbonati. È stato progettato per far crescere la tua lista e-mail senza irritare i visitatori con fastidiosi pop-up.Scimpanzé Mate Pro

È completamente personalizzabile e padroneggerai quando e dove visualizzare i popup. Le altre sue caratteristiche sono: supporto di diversi browser e ha ppiù opzioni di pianificazione, un layout completamente personalizzabile, asupporto del cliente reattivo, iperfetta integrazione con WooCommerce, una excellente gestione della cache, perfetta integrazione con molti Temi WordPress, supporto multilingue grazie a al plugin WPML, enon molto più.

DownloadDemo | Web hosting

2. WooCommerce Cardstream Payment Gateway

CardStream è l'unico provider di gateway di pagamento indipendente. Questo WordPress Plugin premium ti consente di accettare pagamenti direttamente sul tuo negozio online WooCommerce tramite Cardstream.

WooCommerce Cardstream Payment Gateway

Ti dà anche la possibilità di accettare pagamenti utilizzando la soluzione ospitata da Cardstream.

DownloadDemo | Web hosting

3. Data Source

DataSource è un WordPress Plugin premium focalizzato sulla presentazione visiva dei tuoi dati in qualsiasi pagina del tuo sito web. Ti consente di presentare dati da file CSV, XML, Excel, fogli di calcolo Google, database MySQL o tipi di post personalizzati come tabelle ordinabili e filtrabili, diversi grafici, mappe e altro ancora.I plugin wordpress di origine dati inseriscono tabelle grafiche sito web modulo blog

Tra le sue caratteristiche, troverai tra l'altro: un iinterfaccia intuitiva, tableaux basato sul modello dei tuoi dati, tabilitabili, filtrabili e reattivi, iupport di Google Maps e plurilingue, aassistenza clienti reattiva, uno mmanuale utente, un iinstallazione rapida, et di più

Download Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco ! Questo è tutto per questo tutorial, speriamo che ti abbia aiutato a imparare come integrare le animazioni CSS in WordPress. Non esitare a condividi con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...