Come creare overlay e hover Flipbox in WordPress

Vuoi aggiungere overlay flipbox ed effetti di hover sulle immagini al tuo sito WordPress?

Anche se stai utilizzando un tema WordPress di alta qualità, potresti sentirti limitato dalle opzioni di personalizzazione. In questo caso, puoi utilizzare i flipbox e gli hover sulle immagini per aggiungere effetti animati accattivanti al tuo sito.

In questo articolo, ti mostreremo come aggiungere overlay flip box e hover sulle immagini al tuo sito WordPress.

Cos'è un Flipbox?

Un flipbox è una casella che si gira quando ci passi sopra il mouse. Puoi aggiungere questo effetto hover a contenuti come immagini e caselle di testo.

Simile ad altri contenuti animati come GIF e slider responsive, l'effetto flipbox può renderlo più interattivo e coinvolgente. Ad esempio, potresti mostrare la foto e il nome di un autore, e poi utilizzare un'animazione flipbox per rivelare la sua biografia quando un lettore ci passa sopra il mouse.

Se sei un freelancer WordPress, potresti mostrare i loghi dei tuoi clienti e poi utilizzare un'animazione flip per rivelare un link a ciascun progetto.

Sebbene questi effetti animati possano migliorare l'esperienza utente del tuo sito web, è importante non esagerare. Un gran numero di animazioni può diventare opprimente e confuso, e potrebbe persino influire sulle prestazioni del tuo sito web.

Detto questo, diamo un'occhiata a come puoi aggiungere overlay flipbox ed effetti di hover delle immagini al tuo sito web WordPress.

Come creare overlay flipbox ed effetti di hover in WordPress

Ci sono molti modi diversi per aggiungere animazioni a WordPress, incluso l'uso del page builder SeedProd o la scrittura di codice personalizzato.

Tuttavia, il modo migliore per creare effetti flipbox e hover è utilizzare il plugin Flipbox – Awesomes Flip Boxes Image Overlay. Questo plugin gratuito è dotato di diversi stili di flipbox che presentano un mix di immagini, testo e pulsanti di invito all'azione. 

Crea un nuovo Flipbox

La prima cosa che dovrai fare è installare e attivare il plugin Flipbox – Awesomes Flip Boxes Image Overlay. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Una volta installato e attivato il plugin, puoi creare il tuo primo flipbox andando su Flip Box » Crea Nuovo.

Questo mostra tutti i diversi modelli che puoi utilizzare.

Se non desideri utilizzare nessuno di questi design, fai clic su 'Importa modelli'.

Se vedi un modello che desideri utilizzare, fai clic su ‘Importa’ per aggiungerlo al tuo blog WordPress o sito web.

Dopo aver scelto un design, devi fare clic sul pulsante ‘Crea stile’.

Nel popup che appare, digita un nome per il design del flipbox. Questo è solo per riferimento, quindi puoi usare quello che vuoi.

Puoi anche scegliere quale layout utilizzare facendo clic su 1°, 2° o 3°.

Fatto ciò, fai clic su ‘Salva’.

Aggiungi contenuto al tuo Flipbox

Puoi cambiare l'aspetto del flipbox utilizzando le schede Generale, Fronte e Retro.

Puoi cambiare i font, il padding e i margini. La maggior parte di queste impostazioni è autoesplicativa, quindi vale la pena esaminarle per vedere quali diversi effetti puoi creare.

Quando sei soddisfatto dell'aspetto della casella, è ora di aggiungere del contenuto. Scorri semplicemente l'anteprima del flipbox in fondo allo schermo e passaci sopra il mouse.

Quando appare, fai clic sul pulsante ‘Modifica’.

Per cambiare il titolo che appare sulla parte anteriore del flipbox, puoi digitarlo nel campo ‘Titolo Fronte’.

Dopodiché, puoi cambiare l'icona frontale facendo clic sul campo ‘Icona Font’ e quindi scegliendo una nuova immagine dal popup che appare.

Successivamente, puoi aggiungere un'immagine alla parte anteriore del flipbox. Fai semplicemente clic su ‘Carica immagine’ e quindi scegli un file dalla libreria multimediale o carica una nuova immagine dal tuo computer.

Se non hai già un'immagine che desideri utilizzare, puoi crearne una utilizzando software di web design come Canva.

Quando sei soddisfatto del flipbox anteriore, è ora di progettare il retro. Per iniziare, digita il contenuto che desideri visualizzare nella casella ‘Informazioni backend’.

Spesso, vorrai utilizzare una call to action per inviare i visitatori a una pagina correlata, come l'elenco di un prodotto popolare, le informazioni sui prezzi o altri contenuti.

Per modificare il testo che appare sul pulsante della call to action, digita semplicemente in ‘Testo pulsante backend’. Puoi quindi aggiungere l'URL di destinazione nel campo ‘Link’.

Infine, fai clic su ‘Carica ora’ per cambiare l'immagine di sfondo.

Quando sei soddisfatto di come è impostato il retro del flipbox, è ora di fare clic su ‘Invia’.

L'anteprima verrà ora aggiornata per mostrare tutte le tue modifiche.

Crea Flipbox Multipli

A questo punto, potresti voler aggiungere altre caselle facendo clic sul ‘+’ nella sezione ‘Aggiungi nuovi Flip Box’.

Questo ti permette di creare più flipbox con lo stesso stile e poi organizzarli in colonne e righe.

Ora puoi creare altri flipbox seguendo il processo descritto sopra.

Ad esempio, potresti creare un flipbox per ciascuno dei tuoi piani tariffari.

Aggiungi il Flipbox al tuo sito web WordPress

Quando sei soddisfatto del flipbox, puoi aggiungerlo al tuo sito web WordPress utilizzando uno shortcode che il plugin fornisce automaticamente.

Sul lato destro dello schermo, copia semplicemente il valore nella casella ‘Shortcode’.

Ora puoi aggiungere il flipbox a qualsiasi pagina, post o area pronta per i widget utilizzando lo shortcode.

Per istruzioni passo passo su come posizionare lo shortcode, consulta la nostra guida su come aggiungere uno shortcode in WordPress.

Il plugin ha anche un widget flipbox che puoi aggiungere a qualsiasi area pronta per i widget del tuo tema WordPress.

Se hai creato più di un'animazione flipbox, dovrai conoscere l'ID. Per ottenere queste informazioni, puoi andare su Flip Box » Flip Box e guardare nella colonna 'ID'.

Nell'immagine seguente, l'ID del flipbox è 1.

Una volta che hai queste informazioni, vai su Aspetto » Widget.

Qui, devi fare clic sul pulsante '+'.

Ora puoi digitare 'Flipbox'.

Quando appare il widget giusto, trascinalo e rilascialo nella barra laterale, nel footer o in una sezione simile.

Il widget Flipbox mostrerà una delle tue animazioni per impostazione predefinita.

Per mostrare un flipbox diverso invece, digita il suo ID nel campo.

Quando sei soddisfatto dell'aspetto del widget, fai clic su 'Aggiorna'.

Per maggiori informazioni, consulta la nostra guida su come aggiungere e utilizzare i widget in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere overlay e hover flipbox al tuo sito WordPress. Potresti anche voler consultare la nostra guida su come creare una galleria di immagini, o vedere la nostra selezione di esperti dei migliori plugin slider per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.