Hai bisogno di un pulsante in qualsiasi punto del sito per aprire un popup Elementor, ma il trigger standard "al click" funziona solo all'interno di una singola pagina? Questa esigenza si risolve in cinque minuti senza plugin di terze parti e senza modifiche al codice.

Il meccanismo integrato di Elementor Pro, un link àncora combinato con il selettore CSS Open By Selector. Una volta configurato, ottieni un popup che si apre da qualsiasi pagina del tuo sito: da una voce di menu, un link testuale o un pulsante nel footer. Di seguito trovi una guida passo passo, dalla creazione del popup al test sul sito live. Ogni passaggio è illustrato con uno screenshot tratto da una configurazione reale.

💡 Panoramica rapida:

• Crea un popup in Elementor Templates → Popup e pubblicalo
• Nelle condizioni di visualizzazione, seleziona "Intero sito": questo è il punto chiave del metodo
• Nelle impostazioni globali del popup, attiva "Disabilita lo scroll della pagina" e "Previeni popup multipli"
• Nella scheda Avanzate, inserisci il selettore a[href="#your-anchor"] nel campo Open By Selector
• Inserisci link con l'àncora #your-anchor in tutto il sito: il popup si aprirà da qualsiasi posizione

Passaggio 1: creare un popup in Elementor

Apri Template → Popup nel menu laterale di WordPress e clicca su "Aggiungi nuovo". Scegli un template già pronto dalla libreria di Elementor oppure parti da una tela vuota. Assegna al popup un nome significativo, ad esempio "Popup Contatti" o "Modulo di richiesta", in modo da ritrovarlo facilmente nell'elenco in seguito. Il design può essere qualsiasi cosa: un modulo di contatto, l'iscrizione alla newsletter, un modulo di feedback o un banner promozionale.

Componi il contenuto nel builder di Elementor come faresti per una pagina normale: aggiungi un titolo, un modulo, del testo e il pulsante di chiusura. Quando è pronto, clicca su Pubblica.

Dopo la pubblicazione, Elementor aprirà la schermata delle condizioni, dei trigger e delle regole aggiuntive. Qui imposteremo l'unica configurazione critica.

Passaggio 2: condizione "Intero sito"

Nella schermata delle condizioni, trova l'elenco a discesa e seleziona Intero sito. Questa è l'unica condizione che devi impostare.

Nota: anche se prevedi di mostrare il popup solo su pagine specifiche, scegliere "Intero sito" è la strada più semplice. La visualizzazione stessa non sarà controllata dalla condizione di pagina, ma dalla presenza del link àncora #contact nell'URL. Nessuna àncora nella barra degli indirizzi, nessun popup.

La schermata dei trigger e delle regole aggiuntive può essere saltata: clicca su Avanti, poi su Salva e chiudi. Il metodo del link àncora funziona indipendentemente da queste impostazioni.

Passaggio 3: impostazioni globali del popup

Clicca sull'icona a forma di ingranaggio nell'angolo in basso a sinistra della schermata di modifica del popup: si aprirà il pannello Impostazioni Popup. Vai alla scheda Avanzate.

Qui configura il comportamento adatto al tuo scopo. Consigliamo di attivare:

• Disabilita lo scroll della pagina, così la pagina di sfondo non scorre mentre il popup è aperto;
• Previeni popup multipli, per evitare che più popup si sovrappongano.

Lascia gli altri parametri sui valori predefiniti. La cosa principale è il campo in fondo alla scheda, il motivo per cui abbiamo fatto tutto questo.

Passaggio 4: Open By Selector, la magia dell'àncora

Nel campo Open By Selector, inserisci un selettore CSS che "ascolta" il link àncora. Il formato è rigoroso:

1
a[href="#contact"]

Al posto di #contact, sostituisci la tua àncora: #popup / #callback / #sale o qualsiasi altro identificatore univoco. Il selettore risponde al click su qualsiasi elemento <a> il cui attributo href corrisponda alla tua àncora.

Salva il popup. Ora è in attesa che un visitatore segua un link con l'àncora richiesta.

Passaggio 5: inserire i link àncora in tutto il sito

Non resta che aggiungere i link da cui il visitatore aprirà il popup. Qualsiasi widget Elementor dotato di un campo link va bene: Pulsante, Editor di testo, Immagine, Icon Box.

Nel campo link, invece di un URL normale, inserisci #contact (o la tua àncora). Nel frontend, il funzionamento è il seguente: al click, il browser aggiunge #contact alla barra degli indirizzi, il selettore a[href="#contact"] si attiva e il popup si apre.

Nella pratica, utilizziamo tre scenari tipici:

• Pulsante nella hero section, "Richiedi una chiamata" con href #callback;
• Voce di menu, in Aspetto → Menu aggiungi un link personalizzato con l'àncora #contact;
• Link testuale nel corpo dell'articolo, seleziona il testo e inserisci l'àncora nel pannello dei link.

Fai una prova: apri una pagina qualsiasi del tuo sito, aggiungi #contact alla barra degli indirizzi e premi Invio: il popup dovrebbe apparire. Se così non fosse, torna al passaggio 4 e verifica il selettore.

Video: configurazione in 3 minuti

Il video ufficiale di Elementor mostra il processo dall'inizio alla fine, dalla creazione del popup al test sul sito live.

⁉️🤔 Domande frequenti

Il metodo funziona senza Elementor Pro?

No. Il modulo Popup Builder è incluso solo in Elementor Pro. Nella versione gratuita del builder, i popup non sono disponibili. Se stai usando la versione Free, valuta la combinazione di Elementor con un plugin popup separato (ad esempio, Popup Maker), ma la configurazione sarà diversa, tramite selettori jQuery anziché tramite lo standard Open By Selector.

La condizione "Intero sito" è obbligatoria?

Sì, è un requisito fondamentale del metodo. Se lasci la condizione su "Pagine specifiche", il popup verrà mostrato solo sulle pagine selezionate e soltanto al caricamento della pagina, non al click sull'àncora. La modalità "Intero sito" cede il controllo al selettore Open By Selector.

Si possono creare più popup diversi con àncore diverse?

Sì. Crea un popup separato per ogni àncora. Ad esempio, un popup "Contatti" con selettore a[href="#contact"] e un popup "Offerta" con a[href="#sale"]. Entrambi sono impostati su "Intero sito" e si attivano indipendentemente in base alla propria àncora.

Perché il popup non si apre con l'àncora?

Verifica tre aspetti. Primo: #your-anchor deve comparire nella barra degli indirizzi; il browser lo aggiunge solo quando si clicca su un <a> con l'href corrispondente, l'inserimento diretto da tastiera potrebbe non funzionare. Secondo: il campo Open By Selector deve contenere esattamente a[href="#contact"], senza spazi aggiuntivi e con il tipo di virgolette corretto. Terzo: apri la console del browser (F12) e cerca errori JavaScript: un conflitto con un altro plugin potrebbe bloccare il trigger.

Questo influisce sulla SEO?

No. I link àncora con cancelletto non vengono indicizzati dai motori di ricerca come pagine separate. Per Google, si tratta di un elemento tecnico di navigazione, non di contenuto duplicato.

Cosa fare se i trigger standard non bastano

Il link àncora tramite Open By Selector è il modo più universale per aprire un popup Elementor da qualsiasi punto del tuo sito. Non dipende dalla pagina in cui si trova il visitatore e non richiede modifiche al file functions.php.

Se l'esigenza diventa più complessa, ad esempio il popup deve aprirsi allo scroll fino a un blocco specifico o 10 secondi dopo l'ingresso nel sito, utilizza i trigger standard di Elementor: On Scroll, On Page Load, On Exit Intent. Si configurano nella stessa schermata in cui abbiamo selezionato "Intero sito" e si combinano perfettamente con il metodo dell'àncora.

Provalo su un sito di test: crea un popup, inserisci a[href="#test"], posiziona un pulsante con questa àncora nella homepage. L'intero processo richiede meno di cinque minuti.