Come Creare una Gallery in Elementor

Elementor è uno dei plugin più popolari per la creazione di siti web su WordPress. Offre una vasta gamma di funzionalità che consentono agli utenti di personalizzare facilmente il loro sito web. Una delle funzionalità più utili di Elementor è la possibilità di creare una gallery di immagini e aprire le immagini in una lightbox al click di un pulsante. In questo articolo, ti guideremo passo dopo passo su come creare una gallery in Elementor e aprire le immagini in una lightbox.

Prima di iniziare, assicurati di avere Elementor installato e attivato sul tuo sito WordPress. Una volta fatto ciò, segui questi semplici passaggi per creare la tua gallery.

Passo 1: Aggiungi un nuovo blocco di Elementor alla tua pagina. Puoi farlo facendo clic sul pulsante “Modifica con Elementor” nella parte superiore della pagina.

Passo 2: Una volta che sei nel builder di Elementor, trascina e rilascia il widget “Galleria immagini” nella tua pagina. Questo widget ti permetterà di caricare le immagini che desideri includere nella tua gallery.

Passo 3: Dopo aver aggiunto il widget “Galleria immagini”, fai clic sul pulsante “Aggiungi immagini” per caricare le tue immagini. Puoi selezionare più immagini contemporaneamente o caricarle una alla volta.

Passo 4: Dopo aver caricato le immagini, puoi personalizzare l’aspetto della tua gallery utilizzando le opzioni disponibili nel pannello di configurazione del widget. Puoi regolare la dimensione delle immagini, il numero di colonne, l’interlinea e molto altro ancora. L’opzione lightbox è quella predefinita per Elementor, questo vuol dire che tutte le gallery si aprono di default in una lightbox.

Passo 5: A questo punto potremmo creare il nostro pulsante, ma prima di farlo abbiamo bisogno di ricavarci il codice unico che identifica la nostra gallery. Per farlo pubblichiamo la pagina o visualizziamone un’ anteprima, tasto F12 per dare uno sguardo al codice della pagina, selezioniamo il link di una delle immagini della gallery e troviamo il valore definito da “data-elementor-lightbox-slideshow” che nel nostro caso è “f6a679d”.

Passo 6: E’ il momento di aggiungere il pulsante che aprirà le immagini in una lightbox. Per fare ciò, trascina e rilascia il widget “Bottone”.

Passo 6: Dopo aver aggiunto il widget “Bottone”, fai clic su di esso per aprire il pannello di configurazione. Nella sezione “Link”, inserisci il link della prima delle immagini che vuoi appaia nella gallery.

Passo 7: Clicca su Opzioni link ed inserisci nel campo Attributi personalizzati il nome e il valore del campo trovati nel codice in questo modo, ovvero “data-elementor-lightbox-slideshow|f6a679d”

Passo 8: A questo punto ti ritroverai il pulsante che ti apre la tua gallery da mettere dove vuoi, l’ unica cosa che resta da fare è eliminare la foto inserita tramite link (altrimenti viene visualizzata due volte) e nascondere la gallery tramite le opzioni responsive di Elementor.

🙂