Plugin WordPress: apri un video in una Lightbox con Elementor

Pulsante Elementor Apri Lightbox video

Abbiamo adottato un sito Web con un client che è stato creato con Elementor, un fantastico plug-in di modifica drag and drop per WordPress che trasforma quanto sia facile creare layout complessi e belli che siano reattivi ... senza programmazione o la necessità di comprendere gli shortcode.

Elementor ha alcune limitazioni, una delle quali ho incontrato lavorando su un sito client. Volevano semplicemente un pulsante che aprisse un video in una Lightbox… qualcosa che Elementor non offre. Potresti aggirare il problema utilizzando un'immagine con o senza un pulsante di riproduzione ... ma Elementor ha un ottimo elemento pulsante. Sono sorpreso che non abbiano offerto questo fuori dagli schemi.

Per fortuna, c'è un plugin per questo!

Componenti aggiuntivi essenziali per Elementor

Per fortuna, ci sono molti ottimi componenti aggiuntivi per Elementor sul mercato. Tuttavia, devi stare molto attento quando selezioni uno sviluppatore di plug-in. Avere un sito WordPress costruito su Elementor crea una dipendenza da Elementor. Quindi, avere un componente aggiuntivo creato da un altro fornitore crea un'altra dipendenza. È fondamentale per il successo del tuo sito WordPress garantire che lo sviluppatore del plug-in disponga di numerose installazioni e delle entrate associate per mantenere e migliorare i plug-in man mano che le versioni di WordPress ed Elementor vengono aggiornate.

Un fantastico plugin è il Componenti aggiuntivi essenziali per Elementor. Con oltre 800,000 installazioni, il plug-in potrebbe essere il plug-in aggiuntivo di elementi più popolare per Elementor sul mercato. Una caratteristica chiave di questo plugin è la possibilità di aggiungere e configurare facilmente un lightbox per il tuo sito Web WordPress costruito con Elementor.

Pulsante Lightbox Elementor

Dopo aver installato la versione a pagamento del plug-in Essential Add-Ons for Elementor, abilita il file Lighbox e Modal per visualizzare l'elemento nei tuoi elementi Elementor. Quindi puoi cercarlo e trascinarlo facilmente nella tua pagina:

modale lightbox elementare

Quindi ti consigliamo di modificare un paio di impostazioni per l'elemento:

  • Imposta Impostazioni> Trigger su Fare clic sul pulsante
  • Imposta Impostazioni> Tipo su Pulsante
  • Imposta le Impostazioni> Testo pulsante
  • Imposta Contenuto> Tipo su Collegamento a pagina / video / mappa
  • Imposta il contenuto> Fornisci URL pagina / video / mappa all'URL del tuo video

È quindi possibile personalizzare il lightbox e lo stile dei pulsanti secondo necessità. È un'esperienza senza soluzione di continuità tra questo componente aggiuntivo ed Elementor.

pulsante lightbox elementor

Anche se quella funzione può valere la pena pagare, il plug-in Essential Add-Ons for Elementor ha un sacco di altre funzionalità incluse sia nella versione gratuita che a pagamento. Nota: la funzionalità Lightbox è nella versione a pagamento.

Componenti aggiuntivi essenziali per Elementor: elementi gratuiti

La versione gratuita ha alcuni elementi di base che possono essere aggiunti:

  • Info Box - Visualizza le informazioni chiave con il tipo di casella informazioni aggiungendo l'icona in alto e aggiungendo effetti di animazione.
  • Fisarmonica avanzata - visualizzare il contenuto, abilitare l'icona di attivazione / disattivazione, riempire la sezione della fisarmonica con il testo desiderato e renderlo interattivo per il pubblico.
  • Griglia del prodotto Woo - Mostra i prodotti WooCommerce ovunque e mostra i prodotti per categoria, tag o attributi. Aggiungi facilmente effetti al passaggio del mouse sul layout per renderlo sbalorditivo.
  • Flip box - Mostra i contenuti magnificamente con l'animazione di scorrimento a sinistra / destra al passaggio del mouse.
  • Schede avanzate – visualizzare le informazioni chiave in modo interattivo che supporti la progettazione di schede nidificate personalizzate per attirare un pubblico in un'istanza.
  • Tabella Prezzi - Crea una tabella dei prezzi dei prodotti efficace con uno stile perfetto per ottenere più vendite dai tuoi potenziali acquirenti.
  • Fisarmonica di immagine - Evidenzia le tue immagini con incredibili effetti al passaggio del mouse e clic utilizzando EA Image Accordion. 
  • Messaggio griglia - Visualizza più post del blog in un layout a griglia. È possibile scegliere il layout preferito dalle impostazioni di layout, aggiungervi un'animazione e renderlo interattivo per i visitatori.
  • Chiamare all'azione - Definisci lo stile del contenuto della tua chiamata all'azione, coloralo e collegalo per indirizzare i visitatori all'azione desiderata.
  • Conto alla rovescia - Costruisci e progetta un timer da una selezione di stili diversi.
  • Cronologia dei post - mostra post di blog, pagine o post personalizzati in uno straordinario layout verticale. Puoi impostare il tuo numero preferito di post, aggiungere effetti sorprendenti, sovrapposizione di immagini, pulsanti e altro per trascinare l'interesse del pubblico.
  • Galleria filtrabile: visualizza immagini con categorie separate, stili di griglia e personalizza il design complessivo per garantire un aspetto straordinario.

Scarica gli add-on essenziali per Elementor

Componenti aggiuntivi essenziali per Elementor: elementi a pagamento

Con la versione a pagamento, ottieni un sacco di elementi in più che forniscono veramente le massime capacità nel tuo tema basato su Elementor.

  • Lightbox e modale - mostra i tuoi video, immagini o altri contenuti con un popup. È possibile impostare le azioni di attivazione desiderate, aggiungere un'animazione e impostare il layout per massimizzare il coinvolgimento.
  • Confronto di immagini - Consenti ai tuoi potenziali acquirenti di confrontare le tue due immagini di prodotto (Vecchio contro nuovo) in un modo straordinario.
  • Giostra con logo - scegli l'effetto carosello dei tuoi desideri, aggiungi un logo e personalizza l'output per visualizzare magnificamente tutti i tuoi clienti o partner.
  • Effetti di parallasse - Consenti ai tuoi visitatori di sperimentare il tuo sito con un effetto di parallasse a più livelli che incorpora anche un'interazione al passaggio del mouse.
  • Promo - Aggiungi un'intestazione accattivante, contenuto interno, contenuto al passaggio del mouse e bellissime immagini per catturare l'attenzione del visitatore.
  • Attiva / disattiva contenuto - Aggiungi un effetto al passaggio del mouse ai tuoi contenuti che evidenzi le differenze su cui desideri che i tuoi visitatori si concentrino.
  • Google Maps - Configura un elemento della mappa, aggiungi le icone dei marcatori e rendilo interattivo per i visitatori.
  • Effetto particellare - aggiungi sezioni creative sul tuo sito web per farlo risaltare.
  • Schede interattive - porta funzionalità avanzate come lo scorrimento interno e gli effetti al passaggio del mouse sui blocchi di contenuto.
  • contenuti protetti - limitare il contenuto con una password o per ruolo utente.
  • Blocco post - mostra i tuoi post sul blog con una varietà di stili unici utilizzando la potenza del moderno CSS Flex. Puoi scegliere un layout, aggiungere animazione, aggiungere un'icona e applicare uno stile a tutto, inclusi gli effetti al passaggio del mouse.
  • Tooltip avanzato - aggiungi suggerimenti sopra e sotto il contenuto.
  • Una pagina di navigazione - Costruisci un sito web a pagina singola con pochi clic utilizzando Elementor.
  • Cursore delle testimonianze - creare un forum di testimonianze interattivo che metta in mostra diverse recensioni in modo bello in un'area di contenuto.
  • Instagram - attira l'attenzione del visitatore del tuo sito e attira più follower su Instagram visualizzando un feed Instagram sul tuo sito.
  • Hotspot immagine - Aggiungi hotspot dell'area immagine con suggerimenti personalizzati, in modo che l'utente possa fare clic sugli hotspot per rivelare un testo associato.

Un'opzione del plugin che apprezzo molto è la possibilità di abilitare o disabilitare ciascuno di questi elementi all'interno del sito. Ciò limita il sovraccarico dello script di ciascuna funzionalità aggiunto al tuo sito.

Scarica gli add-on essenziali per Elementor

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.