WordPress: come aggiungere flipbox

Esistono molti modi per arricchire il proprio sito di contenuti user-friendly ed allo stesso tempo utili. Uno di questi modi è aggiungere flipbox, dei riquadri che girano su sé stessi al passaggio del mouse rivelando informazioni, immagini o call-to-action.

Per aggiungere le flipbox all’interno di un sito sviluppato con il CMS WordPress esiste un plugin chiamato Flipbox – Awesomes Flip Boxes Image Overlay che consente di creare uno o più elementi in modo semplice e rapido. Innanzitutto, procediamo con l’installazione del plugin seguendo il percorso Plugin ->Aggiungi nuovo ed inserendo Flipbox – Awesomes Flip Boxes Image Overlay nella barra di ricerca.

Il risultato sarà il seguente:

Dopo aver fatto clic su Installa adesso e, successivamente, su Attiva, sarà possibile iniziare ad utilizzare il plugin.

Facendo clic su Flipbox, nuova voce creatasi nel menu a sinistra, basterà selezionare Create new Flipbox per essere riportati nell’editor. Come prima cosa, selezioniamo lo stile di flipbox che più ci piace tra i vari template proposti. Sarà possibile selezionare anche altri stili dopo facendo clic su Import Templates e scegliendone uno tra quelli disponibili.

Dopo aver fatto clic su Create Style, potremo iniziare ad impostare tutte le caratteristiche della flipbox selezionata indicando il nome, scegliendo una delle tre modalità di visualizzazione comprese nello stile (prima, seconda o terza) e facendo poi clic su Save.

Prima di tutto, decidiamo cosa scrivere all’interno del riquadro. Per farlo, basterà passare il mouse sopra l’anteprima in basso e fare clic su Edit. Si aprirà così una lunga finestra popup nella quale inserire, come prima cosa, tutte le caratteristiche del fronte della flipbox (titolo, info, icona e immagine).

Allo stesso modo, scendendo nel popup, potremo inserire anche tutte le informazioni del retro della flipbox. Una volta terminato, fare clic su Submit per chiudere il popup e proseguire.

Impostazioni generali

Nella prima schermata delle impostazioni si può selezionare il tipo di animazione, la sua direzione e la grandezza della flipbox. Inoltre, si potranno definire anche i margini e le eventuali ombre del riquadro. Ogni modifica verrà prontamente mostrata nell’anteprima posta in basso.

Fronte

Nella scheda Front si potranno impostare tutte le caratteristiche della facciata ad eccezione dei colori (opzione disponibile solo con la licenza Pro). Ingrandendo l’immagine in basso è possibile osservare le varie opzioni disponibili racchiuse in quattro macrogruppi:

  • Impostazioni generali
  • Opzioni Icona
  • Opzioni testo principale
  • Opzioni testo secondario

Retro

Le opzioni del retro della flipbox sono praticamente le stesse già viste per il fronte, ma con una sostituzione. Alcune tra quelle disponibili, infatti, presentano sul retro un pulsante con una call-to-action. Nel caso venissero scelte, ovviamente, le impostazioni sul lato posteriore consentirebbero anche le modifiche al bottone.

Come inserire la Flipbox

Una volta terminate tutte le operazioni, basterà copiare il codice automaticamente creato nella parte destra dell’editor degli articoli di WordPress ed incollarlo all’interno di qualsiasi pagina o articolo. Visualizzando l’anteprima sarà possibile vedere il risultato finito.

Esempio fronte

Passando il mouse sopra la flipbox, visualizzeremo invece il lato opposto. Allo stesso modo, togliendo il mouse dall’immagine, torneremo a visualizzarne la parte anteriore.

Esempio retro