Come creare l’effetto flipbox in WordPress

Immagine avatar per Andrea Di Rocco

Pubblicato da Andrea Di Rocco in

484 Visite sul post corrente.

Come creare l'effetto flipbox in WordPress

L’effetto flipbox potrebbe dare quel tocco di design in più al tuo sito WordPress, catturando l’attenzione con un effetto animato che colpirà sicuramente i tuoi visitatori.

Il flipbox è un effetto grafico che dà l’impressione di girare una scheda: passando col mouse sopra l’elemento flipbox, esso ruoterà su se stesso mostrando il retro. Puoi utilizzarlo su immagini o elementi testuali, nel riquadro che raffigura un prodotto oppure per mostrare la descrizione di un servizio.

Ecco come potrai aggiungere questa bella funzionalità al tuo sito.

Come aggiungere l’effetto flipbox nel tuo sito WordPress

Ci sono diversi sistemi per ottenere l’effetto flipbox su WordPress.

Prima di tutto, puoi realizzarlo lavorando sui CSS. Certamente non è la soluzione più semplice e nemmeno alla portata di tutti, però potrai realizzare un effetto personalizzato in tutti i dettagli e che rispecchi alla perfezione ogni tua esigenza.

Si ottiene utilizzando l’attributo transform, ma ti rimando alla guida di W3Schools per approfondire come creare un Flip Box in 3D, con movimento orizzontale o verticale.

Se non sei propenso ad utilizzare questa soluzione, e non intendi rivolgerti ad uno sviluppatore per implementarla, puoi tranquillamente usare dei sistemi molto più semplici e in totale autonomia.

Flip Box con Elementor

Se usi il page builder Elementor Pro, troverai un modulo che ti permette proprio di creare Flip Box con diversi effetti 3D e tante possibilità di personalizzazione.

Per ciascun elemento, potrai realizzare il lato A (frontale), il lato B (posteriore) e impostare gli effetti di movimento. Scegli fra diverse opzioni:

  • rotazione in orizzontale;
  • movimento dal basso verso l’alto;
  • movimento laterale;
  • effetto zoom;
  • effetto dissolvenza.

flipbox elementor

Flip Box con un plugin

Se non usi Elementor, puoi comunque realizzare i tuoi flipbox con un plugin gratuito che ti darà risultati professionali e accattivanti.

Si tratta di Flipbox – Awesomes Flip Boxes Image Overlay. Puoi scaricarlo direttamente dalla directory dei plugin nella tua Bacheca.

Esiste anche una versione Pro di questo plugin, che ti dà accesso a diversi template e include il supporto per uno, cinque o illimitati siti web. Flipbox Pro parte da 13.99$.

Il plugin Flipbox include l’integrazione con Visual Composer e con SiteOrigin, quindi puoi utilizzarlo tranquillamente con uno di questi page builder. Inoltre, genera in automatico un pratico shortcode che potrai incollare in qualsiasi punto del tuo sito web.

Installato e attivato il plugin, vai nel menu Flipbox per crearne uno nuovo. Scegli un template fra quelli disponibili. Nella sezione Create new vedrai quelli che puoi usare subito, mentre se ne vuoi aggiungere altri dovrai spostarti su Import Templates e aggiungere quello che vuoi utilizzare.

template flipbox

Clicca quindi su Create Style, assegna un nome al tuo flipbox e scegli uno dei tre stili disponibili.

Crea nuovo flipbox

Ora potrai lavorare sulle impostazioni e il design.

Impostazioni Flipbox

Nella sezione General, scegli il tipo di movimento per il box, quanti elementi devono essere mostrati e quali sono le loro dimensioni. Puoi aggiungere anche un’animazione e impostare margini, link e ombreggiatura.

Impostazioni generali

Spostati ora su Front  per creare la parte frontale dell’elemento. Potrai inserire immagini, icone e definire il font.

In Backend potrai invece impostare la parte posteriore dell’elemento (trovi le stesse impostazioni della schermata precedente).

Aspetto flipbox

La versione Pro del plugin ti permette di aggiungere anche del CSS custom e di personalizzare i colori.

Dopo aver selezionato le impostazioni generali, vai sull’anteprima del flipbox e seleziona Edit. Qui potrai lavorare sul contenuto (titolo, testi, immagini e icone).

Contenuto flip box

Se hai scelto di mostrare più flipbox, clicca su Add new flipboxes sulla destra e inserisci i contenuti.

Aggiungi un nuovo flipbox

Una volta terminato, salva cliccando su Submit. Ora potrai copiare lo shortcode appena generato e incollarlo in una qualsiasi pagina del tuo sito.

Se vuoi aggiungere i flipbox al tuo tema, muovi il mouse sulla sezione Shortcode e copia il codice PHP per aggiungerlo ai file del tema.

Shortcode e codici flipbox

Il plugin Flipbox include anche un widget, così puoi inserirlo con facilità nella sidebar o nel footer. Basterà indicare l’ID del flipbox, che troverai facilmente andando su Flipbox e osservando il numero indicato nello shortcode.

Conclusione

Spero di averti dato degli utili suggerimenti per rendere la grafica del tuo sito più interessante grazie all’inserimento di un flipbox sul tuo sito WordPress.

Cosa pensi di questo effetto grafico?

Conosci altri sistemi per implementarlo?

Per qualunque domanda, dubbio o suggerimento, ti aspetto nei commenti!

Guide correlate:

Immagine di Andrea Di Rocco autore articoli SOS WP
Andrea Di Rocco Fondatore di SOS WP™
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 700 guide su WordPress e sulla SEO che ho pubblicato su questo blog. Se ne hai voglia ti invito a leggere la mia storia, cliccando sul pulsante qui sotto.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *