Draw Attention, come suggerisce il nome, è un interessante plugin che permette di pubblicare immagini interattive in WordPress per suscitare l’interesse degli utenti.
Le funzionalità dell’estensione sono molteplici (attenzione: è disponibile anche una versione a pagamento con tutte le feature) e consentono, ad esempio, di visualizzare dei box informativi o rimandare l’utente ad un’altra pagina cliccando su uno specifico elemento. Vediamo cosa offre la versione gratuita nel tutorial di oggi.
Dopo aver eseguito l’accesso all’area amministrativa del CMS, seguiamo il percorso Plugin, Aggiungi nuovo e digitiamo il nome del plugin nell’apposito box di ricerca:
Ad installazione completata, individuiamo dal menu laterale la voce Draw Attention e clicchiamoci sopra:
Ed ecco la schermata principale di modifica. Scegliamo un titolo, carichiamo l’immagine desiderata (da Drop image here nella parte destra dello schermo) e salviamo cliccando sul bottone Aggiorna (nel riquadro Pubblica, sempre in alto a destra):
Highlight Styling influisce sul set di colori che sarà utilizzato nell’area cliccabile dell’immagine. More info Box determina invece i set di colori dell’area in cui saranno mostrate maggiori informazioni (vedere passi successivi).
Ora possiamo scorrere la pagina fino alla sezione dedicata all’inserimento di un’area cliccabile (sezione Hotspot Areas):
Lo shortcode (evidenziato in rosso) permette di inserire al volo l’immagine in qualsiasi articolo/pagina del sito – basta incollarlo nell’editor di testo.
In questo tutorial abbiamo deciso di evidenziare l’area con la frase “I nostri servizi la fanno semplice” ed utilizzare l’azione (Action) Show More Info (l’altra consente di reindirizzare l’utente ad un URL personalizzato). Il testo che intendiamo visualizzare andrà inserito nel box Description.
La selezione dell’area di interesse è abbastanza semplice: ogni clic sinistro inserisce automaticamente un puntino (a sua volta trascinabile) sull’immagine che si collegherà agli altri già presenti creando un perimetro – con un po’ di lavoro del mouse si riesce ben presto ad evidenziare l’area desiderata.
Una volta ultimate le modifiche salviamo cliccando sul bottone Aggiorna e controlliamo i risultati del nostro lavoro visualizzando l’anteprima dall’omonimo bottone.
Il testo a sinistra dell’immagine principale viene visualizzato dopo che l’utente clicca sull’area di interesse. L’opacità di quest’ultima può essere modificata dalla sezione Highligh Styling.
