Login

corsi online di WordPress

Mettere il sito offline con WP Maintenance Mode

Per migliorare l'impatto visivo di un'immagine possiamo utilizzare l'effetto lightbox. Uno dei plugin più conosciuti per ottenere questo tipo di effetto è Simple Lightbox.

Innanzitutto cosa si intende con "effetto lightbox" su un'immagine? Si tratta di una finestra contenente l'immagine che appare in sovraimpressione nella pagina, al clic dell'utente sull'immagine originale, con il sito che rimane sullo sfondo con effetto opacizzato. Può essere utile, in particolare, per mostrare la versione ingrandita dell'immagine e migliorare così la fruizione da parte dell'utente.

Installato e attivato Simple Lightbox, definiamo le opzioni generali nella sezione Aspetto dell'area amministrativa (voce Lightbox).

Simple Lightbox per creare effetto lightbox


Nel box Activation abilitiamo il plugin e quindi l'effetto lightbox per le immagini.
Per abilitare questa funzionalità flagghiamo Enable Lightbox Functionality. Possiamo quindi decidere se abilitare questa funzione in modo specifico per le immagini presenti nell'home page, sui singoli articoli, sulle pagine, negli archivi (archivi delle categorie, archivi dei tag, ecc) e a livello dei widget. Se vogliamo mostrare in ogni situazione le immagini con effetto lightbox flagghiamo tutte le opzioni presenti nel box.

Nel box Grouping decidiamo se utilizzare una funzionalità di Simple Lightbox che permette di raggruppare più immagini presenti in una pagina all'interno di un'unica slideshow.

Attivare effetto lightbox con Simple Lightbox


Per farlo manteniamo abilitata l'opzione Group items (for displaying as a slideshow).
Se abbiamo una pagina con più articoli, come ad esempio nel caso di un archivio di articoli, possiamo far sì che venga creata una slideshow specifica per ogni singolo articolo, e non un'unica slideshow generale. In questo caso occorre attivare l'opzione Group items by Post (e.g. on pages with multiple posts).

Nel box UI definiamo lo stile e le caratteristiche dell'effetto lightbox.

Simple lightox impostazioni stile


Tra le varie opzioni:
- Theme: scegliamo il tema, che può essere chiaro (Light) o scuro (Dark);
- Resize lightbox to fit in window: tramite questa funzione la finestra della lightbox viene ridimensionata in base allo schermo;
- Start Slideshow automatically: la slideshow che raggruppa le immagini di una pagina parte in automatico;
- Slide Duration: definisce il tempo in secondi che intercorre tra un'immagine e l'altra nella slideshow;
- Overlay Opacity: qui definiamo il grado di opacità dello sfondo, quando si apre la finestra con effetto lightbox (opacità crescente nella scala da 0 a 1).

Nel box Labels possiamo tradurre alcune parti di testo che compaiono in particolare con le slideshow.

Simple lightbox opzioni labels

Vediamo adesso come si presente l'effetto lightbox.

Nell'esempio sottostante ritroviamo un'immagine inserita all'interno di un articolo. L'immagine occupa uno spazio di 549x366 px, ma l'originale è di 1024x682 px.

Simple lightbox immagine

Cliccando sull'immagine vedremo questo effetto, con tema chiaro (Light): l'immagine in sovraimpressione con la sua dimensione originale e dietro lo sfondo opacizzato del sito. In alternativa possiamo utilizzare la versione scura, selezionando nel box UI il tema Dark.

6 effetto lightbox con simple lightbox

In alto a destra, nella finestra della lightbox, notiamo una X. Cliccandovi possiamo chiudere la finestra. In alternativa, per chiuderla, basta cliccare sullo sfondo.

Vediamo adesso il caso in cui sia presente più di un'immagine nella stessa pagina.

Simple Lightbox slideshow

Cliccando sulla singola immagine, se attivata l'opzione Group items (for displaying as a slideshow), si apre la finestra con effetto lightbox contenente la slideshow delle immagini della pagina.

Lightbox slideshow

In alto a destra troviamo il pulsante per chiudere la finestra e mettere in pausa la lightbox (questo se abbiamo scelto di far partire la lightbox in automatico). Sono poi presenti le frecce per scorrere avanti o indietro le immagini, e nella parte sottostante l'indicazione del numero dell'immagine. Per mostrare in quest'area il titolo dell'immagine dobbiamo compilare il campo Didascalia nei Dettagli Immagine, utilizzando il normale editor delle immagini di WordPress.

Effetto lightbox con Simple Lightbox

Canali social WPCORSI

facebook wpcorsitwitter wpcorsicanale YouTube wordpress

 

Login or Registrati