Come aggiungere facilmente animazioni CSS in WordPress

Hai visto quelle belle animazioni CSS su siti popolari? Effetti animati come contenuti scorrevoli, dissolvenze nei riquadri delle caratteristiche, rimbalzo delle immagini, ecc. In questo articolo, ti mostreremo come aggiungere facilmente animazioni CSS in WordPress senza scrivere alcun codice.

Quando e perché dovresti usare le animazioni CSS?

Le animazioni CSS ti consentono di attirare l'attenzione dell'utente su diverse parti della pagina.

È possibile utilizzarli per animare le funzioni del prodotto o un pulsante di invito all'azione.

Molti siti Web utilizzano le animazioni CSS mentre gli utenti scorrono verso il basso in una pagina. Questo aggiunge un elemento di storytelling alla pagina con gli oggetti che avanzano man mano che gli utenti scorrono verso il basso.

Le animazioni CSS sono anche più veloci di flash o video. Si caricano rapidamente e sono supportati dalla maggior parte dei browser Web moderni.

È possibile aggiungere manualmente le animazioni CSS al tema WordPress o al foglio di stile del tema figlio. Tuttavia, la maggior parte dei principianti non desidera modificare i file dei temi o dedicare tempo all'apprendimento dei CSS.

Detto questo, vediamo come è possibile aggiungere facilmente animazioni CSS al tuo sito WordPress.

Configurazione di CSS Animate! Collegare

Useremo un plugin per questo tutorial. Ti permette di creare animazioni CSS usando un editor WYSIWYG.

La prima cosa che devi fare è installare e attivare l'animazione! collegare. Il plugin funziona immediatamente e non ci sono impostazioni da configurare.

Crea semplicemente un nuovo post e noterai un nuovo pulsante nell'editor visivo di WordPress denominato "Anima!".

Facendo clic sul pulsante verrà visualizzato un popup in cui è possibile progettare l'animazione CSS. Il plugin supporta molte animazioni CSS tra cui scegliere.

Per prima cosa devi selezionare uno stile di animazione. Dopodiché è necessario scegliere il ritardo dell'animazione e il tempo di durata. Infine, è necessario selezionare quando si desidera visualizzare l'animazione.

Il plugin offre tre scelte. È possibile eseguire l'animazione al clic, al passaggio del mouse o scorrere l'offset.

Una volta che sei soddisfatto delle impostazioni, puoi fare clic sul pulsante Anima per vedere un'anteprima dell'animazione.

Successivamente, fai clic sul pulsante di inserimento per aggiungere l'animazione al tuo post o pagina di WordPress. Noterai che il plugin aggiungerà uno shortcode con qualche contenuto fittizio al suo interno nell'editor di post.

È necessario eliminare il contenuto fittizio all'interno dello shortcode e sostituirlo con il proprio contenuto, le immagini o qualsiasi altra cosa che si desidera animare.

Ora che sei giù, fai clic per salvare o pubblicare il post e quindi fare clic sul pulsante di anteprima. Vedrai i tuoi contenuti magnificamente animati.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente animazioni CSS in WordPress. Potresti anche voler vedere il nostro confronto tra i 5 migliori costruttori di pagine di WordPress.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.