Unisciti alla nostra lista e ricevi le ultime novità. Iscriviti per non perdere nessun aggiornamento.
Indice dei contenuti
Video passo dopo passo
Cos’è una finestra popup?
Una finestra popup, messaggio popup o in inglese popup è una finestra che appare («emerge») mentre navighi su un sito web. Vengono utilizzate per molte ragioni: offrire sconti, notifiche, invitare a iscriversi a una newsletter, promuovere contenuti e altro.
Ma non ci dilungheremo troppo sui popup perché questo argomento non riguarda come crearli, ma come possiamo aprirli tramite un link simile a questo:
Impareremo anche in questo argomento come configurare la nostra finestra popup affinché abbia un link come questo: #link-popup
«link-popup» è un nome inventato da noi, più avanti vedremo come possiamo stabilire l’ID che vogliamo per aprire il nostro popup.
Rendere il nostro popup attivo su tutto il sito web
Qualcosa di molto importante che dobbiamo fare è stabilire la condizione che la nostra finestra popup sia attiva su Tutto il sito. Immagina di aggiungere il link in un articolo del blog o nel nostro menu principale: se non abbiamo questa condizione di visualizzazione, può darsi che in alcune parti del nostro sito web il popup non sia attivo e non si apra. Vediamo come si fa.
Apriamo con Elementor il Messaggio popup.
Clic sulla freccetta che si trova proprio a destra del pulsante Aggiorna > clic sull’opzione Condizioni di visualizzazione del menu popup.
Si aprirà una finestra popup con diverse schede nella parte sinistra, lasciamo quella Condizioni > clic sul pulsante Aggiungi condizione e lasciamo la condizione predefinita che è Tutto il sito.
Ora dobbiamo solo salvare facendo clic sul link Salva e chiudi oppure sul pulsante Avanti e poi sul pulsante Salva e chiudi.
Ora la nostra finestra popup sarà attiva su tutto il nostro sito web. Non è necessario configurare Trigger o Regole avanzate se non ne hai bisogno.
Come ottenere il link che apre il nostro messaggio popup
Vedremo tre modi per ottenere il link che apre il nostro popup. Dobbiamo sapere che ogni popup ha il proprio link e questo non varia, quindi una volta ottenuto possiamo usarlo in qualsiasi parte del nostro sito web, tutte le volte che vogliamo.
Aggiungere l’azione apri finestra popup a un widget
Per i primi due modi dobbiamo aggiungere a un widget di Elementor l’azione di aprire il popup. Possiamo usare qualsiasi widget che disponga del campo link, in questo esempio lo faremo con il widget Pulsante.
Facciamo clic sul pulsante per selezionarlo.
Nella scheda Contenuto facciamo clic sul pulsante Tag dinamici della proprietà Link > selezioniamo l’azione Finestra popup.
Fai clic su Finestra popup > fai clic su Tutto e scrivi il nome che hai dato al popup, una volta che inizi a scrivere si mostreranno risultati corrispondenti, ora fai clic sul nome del popup.
Infine fai clic sul pulsante Aggiorna per salvare le modifiche.
Una volta fatto questo, il pulsante avrà assegnata l’azione di aprire il popup e noi potremo ottenere il link attraverso lo stesso.
Ottenere il link della finestra popup dall’inspector del browser
Una volta aggiunta l’azione di aprire la finestra popup a un widget, in questo caso un pulsante, dobbiamo solo aprire la pagina dove l’abbiamo inserito nel browser e seguire questi passaggi:
Apriamo la pagina dove si trova il pulsante nel browser (in questo caso Google Chrome).
Clic con il pulsante destro sopra il pulsante > clic su Ispeziona del menu popup.
Dall’Inspector facciamo clic con il pulsante destro sopra il link che include l’azione di apertura, possiamo distinguerlo perché inizia con #elementor-action… > clic su Edit attribute del menu popup.
Ora il link ci verrà mostrato ombreggiato, ciò significa che è selezionato e possiamo già copiarlo premendo CTRL+C o facendo clic con il pulsante destro sopra lo stesso > clic su Copia del menu popup.
Ora abbiamo l’URL che attiva l’azione di aprire il popup. Possiamo incollarla in un file di testo per poi fare copia e incolla e usarla dove vogliamo.
Ottenere il link interno della finestra popup da un widget
Un altro modo per ottenere il link interno della finestra popup è copiando il link direttamente dal widget, in questo caso dal pulsante. Vediamo come farlo:
Clic con il pulsante destro del mouse sul pulsante > clic su Copia indirizzo link
Usiamo il blocco note per incollare il link con CTRL+V
Selezioniamo e cancelliamo tutto ciò che c’è dietro #elementor-action…
E abbiamo già il link che apre il popup. Il pulsante ha già svolto la sua funzione e possiamo cancellarlo, questo non influirà su nulla dato che il link è sempre lo stesso per quel popup.
Ottenere il link interno della finestra popup con un plugin
Questo plugin ha un’unica funzionalità ed è aggiungere un pulsante a destra di ogni template di finestra popup che, quando lo premi, ti mostra il link che apre il popup affinché tu possa copiarlo e usarlo dove vuoi.
Nell’elenco dei template troverai il pulsante Show URLs a destra di ciascuno, fai clic su di esso e si mostrerà un popup con tutti i link disponibili per quel messaggio popup.
Per mostrare il popup abbiamo bisogno solo del primo (Open), ma questo plugin fornisce anche altri tre: Toggle, Close e Close (Don’t Show Again).
Configurare il nostro link personalizzato per aprire un popup
Possiamo anche personalizzare e accorciare il link dei nostri popup, per farlo segui questi passaggi:
Apriamo nel costruttore di Elementor il popup.
Vai alle impostazioni della finestra popup facendo clic sull’icona di impostazioni nell’angolo in basso a sinistra.
Nella scheda Avanzato > Apri per selettore, crea un codice abbreviato di link di attivazione ancora, esempio: a[href="#enlace-popup"]
Applica questo link in qualsiasi parte del tuo sito web collegandolo con il link attivatore ancora (esempio: #link-popup)
Il testo #link-popup è a nostra scelta, possiamo stabilire il nome che vogliamo sempre senza spazi né caratteri speciali e preferibilmente in minuscolo. Ricorda di stabilire le condizioni di visualizzazione della finestra popup su Tutto il sito.
Come applicare il link ottenuto per aprire la finestra popup
Una volta che abbiamo il link possiamo già applicarlo a qualsiasi link creato con Elementor, Gutenberg o persino nel menu del nostro sito web. Vediamo alcuni esempi.
Applicare link al widget Editor di testo
Nell’Editor di testo selezioniamo il testo a cui vogliamo applicare il link di apertura del popup.
Facciamo clic sullo strumento Inserisci/Modifica un link (Ctrl+k).
Poi premiamo Ctrl+V per incollare il link, tenendo conto che precedentemente avremo copiato il link con Ctrl+C.
Ora resta solo fare clic sul pulsante Aggiorna e provare il nostro link di apertura del popup.
Applicare link al testo di un post con l’editor Gutenberg
Non solo possiamo applicarlo a un testo, anche a un pulsante o a qualsiasi elemento che ammetta l’aggiunta di link.
Apriamo un articolo nell’Editor gutenberg, selezioniamo il testo a cui vogliamo applicare il link di apertura del popup.
Facciamo clic sullo strumento Link Ctrl+K.
Poi premiamo Ctrl+V per incollare il link, tenendo conto che precedentemente avremo copiato il link con Ctrl+C.
Ora resta solo fare clic sul pulsante Aggiorna e provare il nostro link di apertura del popup.
Applicare link nel menu di WordPress
Apriamo il menu da Aspetto > Menu.
Facciamo clic sul menu a tendina Link personalizzati e incolliamo con Ctrl+V il link interno del popup e scriviamo un nome in Testo del link.
Infine facciamo clic sul pulsante Salva menu.
Ora sai già come applicare il link di apertura di una finestra popup in qualsiasi parte del tuo sito web.
«Non funziona, la mia finestra popup non appare»
Verifica se la finestra popup può essere attivata tramite il link di azione dinamico di Elementor. Se non si attiva, allora deve esserci qualcosa di sbagliato nella configurazione della tua finestra popup, non nell’URL di attivazione.
Assicurati di aver configurato correttamente le «Condizioni di visualizzazione» della finestra popup. Altrimenti, la tua finestra popup non apparirà.
Assicurati di aver copiato correttamente l’URL di attivazione nel tuo link.
Verifica se c’è un errore javascript che può essere causato da altri plugin (consulta gli Strumenti per sviluppatori > Console del tuo browser).
Se non hai configurato il tuo link personalizzato, l’URL di attivazione funziona solo con il tag <a>. Per attivare il trigger di apertura, Elementor usa un codice Javascript che rileva solo il link nel tag <a>.
impostazioni nell’angolo in basso a sinistra.
