Elementor gestisce nativamente le lightbox per immagini, gallery e caroselli. Se ti basta aprire la gallery cliccando sulle immagini, la configurazione è semplice: collega le immagini ai Media File e abilita la lightbox nel widget o nelle impostazioni globali.
Più particolare è il caso in cui vuoi aprire una gallery Elementor cliccando su un pulsante. Elementor non offre un controllo dedicato per questo flusso, ma puoi ottenere il risultato usando gli attributi che il builder aggiunge ai link della lightbox.
1. Verifica che la lightbox sia attiva
Da Site Settings → Lightbox verifica che la lightbox immagini sia attiva. Nel widget Gallery o Basic Gallery imposta inoltre il link delle immagini su Media Files.
2. Crea la gallery
Aggiungi le immagini alla gallery e pubblica o aggiorna la pagina. Apri quindi il frontend: il valore che ci serve viene generato soltanto nell’HTML finale della pagina.
3. Recupera l’ID della slideshow
Apri gli strumenti sviluppatore del browser, seleziona il link di una delle immagini della gallery e cerca un attributo simile a:
data-elementor-lightbox-slideshow="f6a679d"Il valore cambia da gallery a gallery. Copialo: servirà per collegare il pulsante allo stesso gruppo di immagini.
4. Crea il pulsante
Aggiungi un widget Button. Come link usa l’URL del file media della prima immagine che vuoi aprire.
Nelle opzioni avanzate del pulsante aggiungi questi attributi personalizzati:
data-elementor-open-lightbox|yes
data-elementor-lightbox-slideshow|f6a679dSostituisci f6a679d con il valore recuperato dalla tua gallery.
5. Testa dal frontend
Salva la pagina, svuota eventuali cache e prova il pulsante da frontend. Dovrebbe aprire la prima immagine e permettere di navigare tra le immagini appartenenti allo stesso gruppo lightbox.
Attenzione: è un workaround
data-elementor-lightbox-slideshow è un attributo usato internamente da Elementor per raggruppare le immagini. È presente anche nelle versioni recenti del builder, ma non va considerato un’API pubblica stabile.
Dopo aggiornamenti importanti di Elementor conviene quindi verificare che il markup non sia cambiato e recuperare nuovamente il valore dal frontend.
Se non ti serve il pulsante, usa la soluzione standard
Se l’obiettivo è semplicemente aprire le immagini in lightbox, evita questo workaround: usa direttamente Gallery o Basic Gallery con Media Files + Lightbox. È più semplice, più stabile e più facile da mantenere.
Se stai lavorando su un progetto Elementor più complesso, trovi anche i miei servizi Elementor e la guida su come usare Elementor senza appesantire il sito.
