Fare di più con le immagini sul tuo sito Web WordPress

Come dice il vecchio proverbio, "un'immagine vale più di mille parole". Nel caso del web design, le immagini di tutti i tipi sono usate per aiutare a raccontare una storia. I post sul blog spesso li usano per riassumere un punto, mentre altri esempi orientati alle vendite utilizzano immagini per illustrare il motivo per cui un prodotto o un servizio vale la pena acquistare. Sono una parte indispensabile di qualsiasi sito web.

Fortunatamente per noi, quindi, che WordPress regala alle nostre immagini il trattamento regale. Le sue funzionalità multimediali integrate ci permettono di catalogare le nostre immagini, di cercarle e persino di apportare alcune modifiche minori.

Mentre questo ci fornisce un po 'di energia, i plugin giusti possono aiutarci a fare ancora di più. Oggi daremo un'occhiata a cinque plug-in di WordPress che è possibile utilizzare per offrire maggiore flessibilità e funzionalità alle immagini del tuo sito. Ogni plug-in è disponibile per il download con l'abbonamento annuale a Envato Elements. Gli abbonati hanno accesso a oltre 450 temi e plug-in WordPress, oltre a centinaia di migliaia di elementi di design di alta qualità, il tutto a un prezzo conveniente.

1. Costruisci una galleria di immagini di fascia alta

WordPress ha un modo integrato per creare gallerie di immagini. Ma il risultato finale è qualcosa di molto semplice. Le gallerie hanno il potenziale per fare molto di più. Possono mostrare i tuoi argomenti (sia che si tratti delle tue abilità fotografiche o della tua collezione di auto d'epoca) e aggiungere un po 'di interattività al mix. Ma dovrai usare un plugin per creare qualcosa che sia allo stesso tempo bello e funzionale.

Galleria globale - Galleria responsive di Wordpress

Global Gallery è un plugin che può fare tutto. Usalo per creare gallerie di immagini, cursori o caroselli personalizzati. Puoi importare immagini da social media e siti di condivisione di foto o caricarle direttamente tramite la galleria multimediale di WordPress. Il plug-in consente inoltre di contrassegnare le immagini, che è possibile utilizzare per creare un'interfaccia di portfolio filtrabile. Scoprirai anche che ci sono una varietà di layout e impostazioni disponibili da modificare. Inoltre, tutto è reattivo e funzionerà su qualsiasi schermo.

2. Aggiungi interattività alle tue immagini

Le mappe di immagini sono in circolazione da un bel po 'di tempo e sono comunque incredibilmente utili. Per chi non lo sapesse, una mappa immagine si presenta come qualsiasi altra immagine sul tuo sito Web, ma la sua magia deriva dal fatto che puoi disegnare su misura le aree "hotspot" cliccabili su quell'immagine. Ciò significa che puoi collegare parti diverse di un'immagine a luoghi diversi o aggiungere altri effetti. Ad esempio, potresti avere una foto di gruppo dello staff della tua azienda. È possibile utilizzare una mappa immagine per posizionare un collegamento sul volto di ogni persona che indirizza alla propria biografia specifica.

Mappa immagine Pro

Per impostazione predefinita, WordPress non gestisce molto bene le mappe immagine. E poi c'è anche il problema che non sono affatto reattivi, e che gli hotspot non si adattano correttamente agli schermi più piccoli. Ecco dove Image Map Pro è così utile. Disegna forme personalizzate sulle tue immagini che possono essere utilizzate per aggiungere link o per visualizzare suggerimenti di rich media. È anche completamente reattivo e supporta gli eventi touch.

3. Rendere i confronti un'esperienza più visiva

Uno dei metodi più efficaci per dimostrare la differenza tra i soggetti è la classica immagine prima e dopo. Li vediamo ovunque per una buona ragione: funzionano. È altamente visivo e spesso è così facile capire che non è necessaria alcuna ulteriore spiegazione. Raggiungono il punto meglio delle parole da solo.

Confronto tra WordPress Plugin e immagini precedenti e successive

Il confronto delle immagini non solo fornisce un modo semplice per aggiungere immagini pre e post sul tuo sito Web WordPress, ma le rende anche interattive. Gli utenti possono trascinare una linea di confronto (in orizzontale o in verticale - a seconda della configurazione) per rivelare parti nascoste di un'immagine combinata. Questo porta quel tocco in più di attenzione dell'utente che meglio assicura la loro attenzione.

E se sei interessante nel sporcarti le mani con JavaScript e costruisci il tuo, dai un'occhiata a questo tutorial di Adi Purdila:

• 

  Come creare un cursore a schermo diviso con JavaScript

  Nel video tutorial di oggi ti mostrerò come creare un elemento "a schermo diviso" (o l'interfaccia utente, qualunque sia il nome che preferisci chiamarlo) utilizzando JavaScript. Ispirazione…

4. Crea splendidi effetti speciali

L'aggiunta di effetti speciali alle immagini può dare al tuo sito un aspetto unico e allo stesso tempo aiuta a disegnare l'occhio di un utente su un'area specifica di una pagina. Ci sono una varietà di cose che puoi fare, dai filtri di immagini simili a Instagram fino all'implementazione dell'animazione. La cosa bella è che non devi più essere un esperto di Photoshop per farlo. Con CSS3, molti di questi effetti sono incorporati direttamente.

Imager - Amazing Image Tool per WordPress

Con Imager puoi aggiungere facilmente oltre 60 effetti speciali alle immagini del tuo sito. Filtri, animazioni e effetti mouseover sono a portata di mano. Il plug-in serve anche come utility per immagini in piena regola, consentendo di creare dimensioni di immagine personalizzate, rigenerazione di miniature, filigrane e altro.

E ancora, ecco Adi Purdila per spiegare di più sui filtri e sui CSS:

• 

  Come applicare filtri Instagram nel browser utilizzando puro CSS

  Vediamo come è possibile creare effetti di filtro simili a Instagram nel browser usando nient'altro che i CSS. Diamo un'occhiata!

5. Rendere la partecipazione dei partecipanti più divertente

Se i social media ci hanno insegnato una cosa, è che le persone amano condividere le immagini. Memes e GIFs ci fanno ridere e sono spesso usati per aiutare a diffondere idee. Nella giusta situazione, ha senso sfruttare questa tecnologia per aumentare il coinvolgimento degli utenti sui nostri siti web. Tuttavia, sembra che questa sia una risorsa relativamente non sfruttata al di fuori dello spazio sociale.

Commento del WP Immagini e video

Per i siti che incoraggiano i commenti dei lettori, le immagini e i video dei commenti WP potrebbero essere la cosa giusta per innescare più conversazioni. Non solo consente il caricamento di media dell'utente, ma consente anche la condivisione di contenuti multimediali da siti come YouTube e Vimeo. Questa piccola aggiunta di divertimento potrebbe fare una grande differenza quando si tratta della partecipazione degli utenti.

Più che una semplice decorazione

Tradizionalmente, le immagini sono state utilizzate per aggiungere un elemento decorativo ai siti web. Ma, come abbiamo visto, sono anche in grado di essere uno strumento completo a 360 gradi. I plugin di cui sopra ti aiuteranno a utilizzarli in modi che aiutano a raccontare la tua storia e aggiungere nuovi livelli di interattività al tuo sito.