Aggiunta di Lightbox al sito WordPress: guida definitiva per principianti

Lightbox è una delle tante funzionalità interessanti e popolari per un sito Web basato su immagini. Ma non tutti sanno come aggiungere lightbox a un sito Web WordPress, in particolare, un principiante. Pertanto, presentiamo questa guida per principianti per aiutarli ad aggiungere lightbox ai siti Web di WordPress.

Che cos'è Lightbox e come aggiungerlo?

Lightbox è una galleria di immagini modale che mostra la tua immagine e il tuo video creando un pop-up a schermo intero e oscurando il resto della pagina . Per esempio:

Questo bellissimo e fantasioso effetto è estremamente utile per un portfolio, una fotografia o qualsiasi sito Web basato su immagini. Ti consente di visualizzare l'immagine in modo chiaro e rende il tuo sito web più eccezionale .

Normalmente, ci sono 3 modi per avere lightbox per un sito WordPress:

• Aggiunta di shortcode
• Installazione di un plugin
• Utilizzando un tema che supporta lightbox.

Per i principianti, suggeriamo di utilizzare un plug-in o di trovare un tema con quella funzione pronta in mente perché l'aggiunta di shortcode è solo per utenti avanzati.

Visualizza lightbox se il tuo tema lo supporta

Non c'è niente da dire se il tuo tema mostra già la lightbox per le gallerie/immagini. Ma sappiamo che molti temi hanno bisogno di qualche passaggio in più per mostrarlo. Ad esempio, questo tema ePortfolio supporta il lightbox ma è necessario collegare la galleria al file multimediale per mostrare il lightbox.

Normalmente, ci sono due opzioni: collegamento al file multimediale o alla pagina degli allegati . Quando colleghi un'immagine/galleria a una pagina degli allegati, quando fai clic sull'immagine verrà aperta una nuova pagina separata contenente solo l'immagine. Se ti colleghi a un file multimediale, mostrerà solo l'immagine, non la pagina, in questo modo:

Ecco la guida per farlo.

Per prima cosa, vai all'editor dei post , quindi fai clic sulla galleria.

Se usi l'editor Gutenberg, guarda nella barra laterale destra, vedrai la sezione Link a .

Per quanto riguarda una singola immagine, devi fare clic su questa icona nella barra degli strumenti:

Nell'editor classico, la sezione Collegamento a viene visualizzata quando crei o modifichi una galleria e una singola immagine.

Quindi, scegli File multimediale e fai clic su Inserisci galleria per terminare. Quando aggiorni o pubblichi il post, fai clic su quella galleria/immagine, vedrai che la lightbox è in esecuzione.

Se il tuo tema supporta il lightbox, questa azione può abilitare il lightbox per la galleria/immagine che desideri. Altrimenti, non ci sarà alcun lightbox.

Tuttavia, la configurazione può essere diversa con temi diversi. Ad esempio, alcuni potrebbero richiedere di lavorare nel Customizer, alcuni potrebbero aver bisogno di inserire un collegamento alla pagina degli allegati invece del file multimediale. Pertanto, dovresti controllare attentamente il tema .

Qualunque sia il tema che usi, è comunque necessario sapere come collegare una galleria/immagine a un file multimediale perché sarà utile aggiungere lightbox utilizzando un plug-in di seguito.

Aggiungere Lightbox usando un plugin

In effetti, aggiungere lightbox non è affatto difficile. Cercando la parola chiave "plugin lightbox", vedrai una serie di plugin per questo effetto. Per quanto riguarda la nostra ricerca, ordiniamo i plugin in due tipi: i plugin complicati e i plugin semplici per aggiungere lightbox.

Per quanto riguarda i plugin complicati, ci sono opzioni molto più sofisticate per personalizzare altamente la lightbox come la dimensione dell'immagine, il colore del bordo, gli stili della lightbox, ... Ad esempio, Responsive Lightbox & Gallery e FooBox Image Lightbox hanno più strumenti di personalizzazione. Ma è più difficile da usare se sei un principiante. Inoltre, il risultato non è poi così diverso da un semplice plugin. Ecco perché preferiamo usare un semplice plugin come Simple Lightbox .

Questo plugin è facile da usare, abbastanza popolare con oltre 200.000 installazioni attive e valutato con 160 cinque stelle. Inoltre, il design della lightbox è buono.

Passaggio 1: installa e attiva il plug-in Simple Lightbox

Nella tua Dashboard > Plugin > Aggiungi nuovo , devi solo digitare "semplice lightbox" e fare clic su Installa il plug-in, quindi su Attivalo .

Passaggio 2: configura il plug-in Simple Lightbox

In Plugin > Plugin installati , fai clic su Impostazioni nella scheda Lightbox semplice .

Scheda di attivazione dell'impostazione Lightbox semplice

La scheda Attivazione consente di abilitare/disabilitare alcuni parametri. La casella più importante da spuntare è Abilita funzionalità lightbox , che abilita la lightbox per la tua galleria. Se non scegli questa casella, le altre sezioni sono tutte prive di significato.

Il resto delle caselle è opzionale per te. Puoi selezionare per visualizzare la lightbox sulla tua home page, singoli post, pagine, pagine di archivio, widget e menu.

Assicurati di volere davvero la lightbox per le sezioni giuste perché troppe lightbox potrebbero rendere il tuo sito web un po' sfarzoso.

Scheda Raggruppamento dell'impostazione Lightbox semplice

Scorrendo verso il basso, c'è la scheda Raggruppamento . Deciderà il modo in cui visualizzerai il lightbox sotto forma di slider o singola immagine.

Raggruppa elementi: selezionalo per visualizzare la tua immagine/galleria come uno slider, che ti consente di navigare da un'immagine all'altra. Solo quando attivi questa funzione, le altre sezioni di questa scheda possono avere effetto. In caso contrario, le altre sezioni di raggruppamento non funzionano.

Raggruppa gli elementi per Post: spuntando questa casella, raggruppi tutti gli elementi da un singolo post a uno slider lightbox . Fallo quando vuoi raggruppare solo le immagini/gallerie all'interno di un post ed escludere altre immagini/gallerie da altri post, widget e menu.

Raggruppa gli elementi della galleria separatamente, Raggruppa gli elementi del widget separatamente e Raggruppa gli elementi del menu separatamente: metti un segno di spunta su ciascuno di essi per raggruppare gli elementi in una galleria di un singolo post, gli elementi in un widget o gli elementi del menu rispettivamente . Significa che puoi semplicemente navigare verso gli elementi successivi nella stessa galleria, widget o menu nello slider lightbox. Pensiamo che dovresti farlo quando non vuoi rovinare i lightbox in parti diverse, il che potrebbe confondere i tuoi visitatori.

Scheda UI dell'impostazione Lightbox semplice

La scheda UI ha sezioni per modificare lo stile della lightbox. Presta attenzione a questo se desideri personalizzare il display della tua lightbox.

Tema: ci sono 2 stili per la tua lightbox. Basta sceglierne uno che si adatti ai tuoi gusti.

Stile scuro

Stile leggero

Ridimensiona la lightbox per adattarla alla finestra: consiglio vivamente di attivare questa sezione per avere un bel display. Altrimenti, l'immagine è a schermo intero e non puoi visualizzare l'intera immagine in questo modo.

Abilita animazioni: selezionare per abilitare l'effetto di caricamento.

Deselezionare per disabilitare l'effetto, rendendo la navigazione più veloce.

Avvia presentazione automaticamente: lascia che si sposti automaticamente all'immagine successiva quando abiliti questa sezione.

Durata della diapositiva: se attivi la sezione della presentazione automatica sopra, puoi scegliere qui la durata della diapositiva.

Ripeti gli elementi: vuoi ripetere gli elementi dopo un round di una diapositiva? Se sì, fai clic su questa casella.

Opacità sovrapposizione (0 – 1): è possibile modificare l'opacità della sovrapposizione dello sfondo. Più bassa è l'opacità, più chiara è la visualizzazione del post dietro. Ad esempio, impostiamo l'opacità su 0,1 in modo che lo sfondo possa essere visto molto chiaramente.

Abilita titolo predefinito: puoi scegliere di visualizzare il titolo dell'immagine facendo clic su questa casella. Ecco come viene mostrato il titolo.

Scheda Etichetta di Lightbox semplice

Infine, questa scheda ti consentirà di modificare l'etichetta per ciascun pulsante. Ma queste sezioni non hanno effetto a meno che non si aggiunga lo shortcode durante la modifica del tema. Quindi, in questo tutorial per principianti, non devi occuparti di questa scheda.

Quando hai finito con tutte le impostazioni del plug-in Simple Lightbox, fai clic su Salva modifiche proprio sotto la scheda Etichetta .

Passaggio 3: collega le immagini/galleria al file multimediale per visualizzare Lightbox

Per decidere quale immagine/galleria aggiungere lightbox, devi inserire il collegamento del file multimediale a quell'immagine/galleria. Se non aggiungi il link al file multimediale, la lightbox non può essere mostrata.

Basta seguire la guida che abbiamo menzionato nella parte "Display Lightbox se il tuo tema lo supporta". Vedi, abbiamo detto che dovresti assolutamente sapere come farlo se vuoi usare il plugin Simple Lightbox.

Le ultime parole

Sopra c'è il modo più semplice per aggiungere lightbox al tuo sito WordPress. Soprattutto se sei un principiante, l'utilizzo del plug-in Simple Lightbox è un modo semplice ed efficace. A seconda della tua richiesta, del tuo sito web e della tua estetica, puoi scegliere diversi plug-in lightbox per avere il risultato più desiderabile. Oppure puoi scegliere di trovare un tema WordPress che supporti lightbox e configurarlo per visualizzare quell'effetto.

Se desideri ulteriori istruzioni sui complicati plug-in lightbox, lascia un commento qui sotto e continua a seguirci.