Come creare un popup modale di accesso WordPress (passo dopo passo)

Aggiungere una modale popup di accesso a WordPress al tuo sito può rendere l'accesso più agevole per i tuoi utenti. Permette ai visitatori di accedere senza lasciare la pagina corrente, migliorando la loro esperienza complessiva.

Abbiamo visto diversi siti web di successo utilizzare questa funzionalità per mantenere gli utenti coinvolti e migliorare l'interazione del sito. È un modo semplice ma efficace per ottimizzare il processo di accesso.

In questo articolo, ti guideremo attraverso i passaggi per creare una modale popup di accesso a WordPress.

Perché creare una modale popup di accesso a WordPress?

Se gestisci un negozio online, vendi corsi online o hai un sito di appartenenza, allora probabilmente consenti agli utenti di registrarsi e accedere al tuo sito web.

Di solito, quando gli utenti fanno clic sul link di accesso, vengono indirizzati alla pagina di accesso predefinita di WordPress o a un'altra pagina di accesso personalizzata sul tuo sito web. Una volta che gli utenti hanno effettuato l'accesso, vengono reindirizzati nuovamente a un'altra pagina.

Sfortunatamente, questo può essere scomodo per gli utenti.

Una modale popup di accesso ti consente di visualizzare il modulo senza inviare gli utenti a una pagina diversa. Una volta effettuato l'accesso, puoi reindirizzare gli utenti a qualsiasi pagina desideri. Poiché il processo è più rapido e raffinato, può contribuire a migliorare l'esperienza utente e aumentare le tue conversioni.

Tenendo conto di ciò, ti mostreremo come creare facilmente un popup di accesso modale in WordPress utilizzando un plugin gratuito e plugin premium. Puoi semplicemente fare clic sui collegamenti sottostanti per passare al metodo preferito:

• Metodo 1: Crea un popup di accesso modale utilizzando Login/Signup Popup
• Metodo 2: Crea un popup di accesso modale utilizzando WPForms & OptinMonster
• Suggerimento bonus: traccia il percorso dell'utente nei moduli di lead di WordPress

Pronto? Iniziamo!

Metodo 1: Crea un popup di accesso modale utilizzando Login/Signup Popup

Per il primo metodo, utilizzeremo il plugin Login/Signup Popup, un plugin gratuito che consente ai tuoi utenti di accedere o registrarsi facilmente sul tuo sito.

Innanzitutto, dovrai installare e attivare il plugin Login/Signup Popup. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su Login/Signup Popup » Impostazioni dal pannello di amministrazione di WordPress.

Nelle impostazioni 'Generali', puoi abilitare la registrazione, l'accesso automatico dell'utente o la registrazione e gestire il ripristino della password.

Oltre a ciò, il plugin ti consente anche di selezionare il ruolo utente di WordPress che verrà assegnato ai nuovi utenti registrati. Per impostazione predefinita, assegnerà il ruolo di 'Abbonato'.

Scorrendo verso il basso, vedrai altre impostazioni. Ad esempio, puoi aggiungere un URL di reindirizzamento quando un utente accede o si registra.

Non dimenticare di fare clic sul pulsante 'Salva' se hai apportato modifiche.

Successivamente, puoi passare alla scheda 'Stile' e modificare la tua finestra popup di accesso/registrazione. Il plugin ti consente di modificare la posizione, la larghezza, l'altezza, il colore di sfondo, il colore del testo e altro ancora.

Dopo di che, puoi anche personalizzare i campi del modulo nella finestra popup.

Vai semplicemente su Login/Signup Popup » Fields dalla tua bacheca di WordPress. Qui puoi attivare diversi campi del modulo, modificare le loro etichette, renderli campi obbligatori e altro ancora.

Oltre a ciò, c'è anche un'opzione per aggiungere altri campi alla tua finestra popup di accesso/registrazione.

Fai semplicemente clic sul pulsante ‘+ Aggiungi campo’ in alto e seleziona i campi del modulo aggiuntivi da aggiungere al popup del tuo modulo di accesso.

Dopo aver personalizzato i campi del modulo, puoi ora aggiungere il popup del modulo di accesso al tuo sito web. Il plugin offre diversi modi per aggiungere il popup al tuo sito.

1. Aggiungi il popup del modulo di accesso ai menu

Innanzitutto, puoi andare su Aspetto » Menu dalla tua bacheca di WordPress.

Dopodiché, puoi vedere le voci di menu ‘Popup di accesso/registrazione’. Seleziona semplicemente le voci che desideri mostrare e fai clic sul pulsante ‘Aggiungi al menu’.

Per maggiori dettagli, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.

2. Aggiungi il popup del modulo di accesso come collegamenti di ancoraggio

Successivamente, puoi aggiungere #login o #register alla fine dell'URL del tuo sito web e posizionare il popup di accesso come collegamento interno.

Ad esempio, il tuo URL potrebbe apparire così:

<a href="https://www.myawesomesite.com/#login">Login</a>

Per fare ciò, puoi modificare un post o una pagina.

Una volta che sei nell'editor di contenuti, dovrai fare clic sui 3 puntini e selezionare l'opzione ‘Modifica come HTML’.

Dopodiché, puoi aggiungere il collegamento interno al testo di ancoraggio di accesso.

Puoi saperne di più seguendo la nostra guida su come aggiungere collegamenti di ancoraggio in WordPress.

3. Usa gli shortcode per aggiungere il popup del modulo di accesso

Un altro modo per aggiungere il popup di accesso/registrazione è utilizzare gli shortcode.

Puoi semplicemente inserire lo shortcode [xoo_el_action] ovunque sul tuo sito per creare un link/pulsante per aprire il popup.

Ad esempio, puoi andare su Aspetto » Widget e aggiungere un blocco widget shortcode per mostrare il popup di accesso nella barra laterale del tuo sito web.

Una volta terminato, fai semplicemente clic sul pulsante ‘Aggiorna’.

Ora puoi visitare il tuo sito web per vedere il popup di accesso in azione.

Metodo 2: Crea un popup di accesso modale utilizzando WPForms & OptinMonster

Questo metodo è ottimo per coloro che desiderano un maggiore controllo sul design e sul comportamento del proprio popup di accesso.

L'utilizzo di WPForms e OptinMonster insieme ti offre potenti opzioni di design, regole di visualizzazione avanzate (come mostrare il popup dopo che un utente fa clic su un link specifico) e una migliore integrazione con i servizi di email marketing.

WPForms è il miglior plugin per moduli di contatto WordPress e avrai bisogno almeno del loro piano Pro per accedere all'addon ‘User Registration’.

OptinMonster è il miglior plugin per popup WordPress sul mercato. Ti aiuta a convertire i visitatori del sito web in iscritti e clienti.

Su WPBeginner, lo abbiamo utilizzato più volte per creare popup interattivi e abbiamo avuto un'esperienza eccellente. Per maggiori dettagli, consulta la nostra recensione completa di OptinMonster.

Tieni presente che avrai bisogno almeno del piano Pro per accedere alla funzionalità MonsterLinks dello strumento che mostriamo in questo articolo.

Utilizzo di WPForms per creare un modulo di accesso utente

Per prima cosa, installiamo e attiviamo il plugin WPForms. Per maggiori dettagli, puoi consultare la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, dovrai recarti su WPForms » Impostazioni dalla tua bacheca di WordPress e inserire la licenza.

Puoi trovare la chiave nella tua area account WPForms.

Successivamente, andiamo su WPForms » Componenti aggiuntivi per installare e attivare il 'Componente aggiuntivo Registrazione Utente'.

Dopo aver attivato il componente aggiuntivo, dovrai andare su WPForms » Aggiungi Nuovo e creare un nuovo modulo.

Nella schermata successiva, dovrai prima dare un nome al tuo modulo.

Quindi, sceglierai un modello di modulo predefinito dalla galleria dei modelli. Puoi usare la barra di ricerca per trovare facilmente il modello 'Modulo di accesso utente'.

Una volta trovato, puoi fare clic sul pulsante 'Usa modello'.

Questo modello di modulo di accesso ha campi email e password che funzioneranno in modo simile al modulo di accesso predefinito di WordPress.

Puoi trascinare e rilasciare eventuali campi aggiuntivi dal lato sinistro dello schermo secondo necessità.

Successivamente, puoi fare clic sul campo 'Password' e verranno visualizzate le opzioni del campo sul lato sinistro.

Puoi aggiungere il codice fornito di seguito alla casella di descrizione del campo 'Password' per visualizzare opzioni come 'password dimenticata' e 'registrazione utente'.

Can't remember your password? <a href="{url_lost_password}">Click here</a>. Don't have an account? <a href="{url_register}">Register here</a>.

Dopodiché, devi fare clic sul pulsante 'Salva' per memorizzare le modifiche e sei pronto per pubblicare il modulo.

Per iniziare, puoi semplicemente fare clic sul pulsante 'Incorpora'.

Si aprirà una finestra popup con opzioni per aggiungere il tuo modulo di accesso.

Procedi e seleziona l'opzione 'usa uno shortcode'. Apparirà come un link nella finestra, non un pulsante.

Ora dovresti vedere un codice di incorporamento per il tuo modulo.

Qui, dovrai copiare lo shortcode e salvarlo per un uso futuro.

Utilizzo di OptinMonster per creare un popup modale

A questo punto, il tuo modulo di accesso è pronto. Il passo successivo è creare il popup modale utilizzando OptinMonster.

Innanzitutto, dovrai visitare il sito Web OptinMonster e registrarti per un account.

Successivamente, dovrai installare e attivare il plugin OptinMonster. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Il plugin funge da connettore tra il tuo sito WordPress e OptinMonster.

Dopo l'attivazione, dovresti vedere la schermata di benvenuto. Fai clic sul pulsante ‘Connetti il tuo account esistente’.

Ora si aprirà una nuova finestra.

Fai semplicemente clic sul pulsante 'Connetti a WordPress'.

Una volta connesso, sei pronto per creare il tuo popup modale.

Vai semplicemente su OptinMonster nell'area di amministrazione di WordPress e fai clic sul pulsante ‘Crea la tua prima campagna’.

Nella schermata successiva, sceglierai una campagna e un modello.

Poiché stiamo creando un popup modale, selezioniamo ‘Popup’ come tipo di campagna.

Per quanto riguarda il modello, OptinMonster offre molti modelli predefiniti in modo da poterne adattare rapidamente uno, se necessario.

Una volta selezionato un modello, si aprirà una finestra popup. Ti verrà chiesto di aggiungere un nome alla tua campagna.

Dopo aver inserito un nome, puoi fare clic sul pulsante ‘Inizia a costruire’.

Fatto ciò, verrai reindirizzato al costruttore di campagne di OptinMonster.

Puoi aggiungere diversi blocchi al tuo modello dal menu sulla sinistra. Quindi, vai avanti e aggiungi il blocco WPForms.

Dopodiché, dovresti vedere le opzioni del blocco WPForms nel menu sulla sinistra.

Puoi selezionare il modulo di accesso che hai appena creato dal menu a discesa ‘Selezione modulo’.

Se non vedi il tuo modulo, seleziona semplicemente l’opzione ‘Aggiungi shortcode manualmente’ e inserisci lo shortcode che hai copiato in precedenza durante la creazione del modulo in WPForms.

Non preoccuparti se non riesci a visualizzare in anteprima il tuo modulo nel costruttore di campagne; il modulo apparirà quando pubblicherai la campagna.

Successivamente, puoi passare alla scheda ‘Regole di visualizzazione’. OptinMonster offre potenti opzioni di targeting.

Da qui, dovrai selezionare la regola di visualizzazione ‘MonsterLink™’ (Al clic).

Dopo aver selezionato l’opzione, dovresti vedere MonsterLink come regola di visualizzazione.

Fai clic sul pulsante ‘Copia codice MonsterLink’, quindi conserva il link in un posto sicuro. Ti servirà più tardi.

Ora sei pronto per rendere attiva la campagna.

Vai semplicemente alla scheda ‘Pubblica’ nella parte superiore del costruttore di campagne. Da qui, puoi impostare lo ‘Stato di pubblicazione’ su ‘Pubblica’.

Una volta fatto ciò, non dimenticare di fare clic sul pulsante ‘Salva’ nell’angolo in alto a destra per memorizzare le modifiche.

Aggiungere il modulo di accesso modale in WordPress

Ora puoi creare una nuova pagina WordPress o modificarne una esistente.

Una volta che sei nell’editor di contenuti, puoi fare clic sul pulsante ‘+’ e aggiungere un blocco ‘HTML personalizzato’.

Dopo di che, dovrai incollare il MonsterLink nel blocco HTML personalizzato. Dovrebbe apparire più o meno così:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Per impostazione predefinita, il testo del link nel tuo codice MonsterLink dirà ‘Iscriviti ora’, poiché viene spesso utilizzato per le iscrizioni via email.

Ecco un esempio del codice predefinito:

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">Subscribe Now</a>

Poiché si tratta di un modulo di accesso, vorrai cambiare quel testo. Per questo tutorial, lo abbiamo cambiato in ‘accedi o registrati’, come puoi vedere nello snippet di codice sottostante.

<a href="https://app.monstercampaigns.com/c/pimhy1fgvnqqqtormzmw/" target="_blank" rel="noopener noreferrer">log in or register</a>

Puoi anche aggiungere il codice sopra ai tuoi menu di WordPress, alla barra laterale o a qualsiasi altra area del tuo sito.

Assicurati solo di salvare le modifiche alla pagina di WordPress e visita il tuo sito per vedere il popup di accesso in azione.

Suggerimento bonus: traccia il percorso dell'utente nei moduli di lead di WordPress

Ora che hai imparato come creare un popup di accesso in WordPress, vediamo come tracciare i percorsi degli utenti per i tuoi moduli di WordPress.

Questo può essere particolarmente utile per il tuo modulo di accesso, poiché può rivelare quali contenuti gli utenti guardano subito prima di decidere di accedere o registrarsi. Queste informazioni possono aiutarti a migliorare la navigazione e l'esperienza utente del tuo sito.

Sapere cosa incoraggia gli utenti a completare i moduli ti consente di ricreare quel processo per ottenere più lead e far crescere la tua attività. Mentre Google Analytics può mostrare alcune attività degli utenti, non collega il comportamento direttamente all'utente specifico che ha inviato il modulo.

È qui che entra in gioco WPForms. È un popolare plugin per la creazione di moduli che include un componente aggiuntivo 'User Journey', che ti consente di vedere da dove provengono gli utenti, quale percorso hanno seguito e quanto tempo hanno trascorso su ogni pagina prima di inviare un modulo.

Se sei interessato a saperne di più, sentiti libero di fare riferimento alla nostra guida su come tracciare il percorso dell'utente sui moduli di lead di WordPress.

Domande frequenti (FAQ)

Ecco alcune domande frequenti poste dai nostri lettori sull'aggiunta di una finestra modale di accesso in WordPress:

Posso personalizzare il design della mia finestra modale di accesso di WordPress?

Sì, assolutamente. Entrambi i metodi che abbiamo trattato offrono opzioni di personalizzazione per adattarsi al branding del tuo sito web. Di solito puoi cambiare colori, font, dimensioni e aggiungere il tuo logo per creare un aspetto uniforme.

Una finestra modale di accesso funzionerà sui dispositivi mobili?

Sì. I moderni plugin per popup come OptinMonster sono costruiti per essere completamente reattivi. Ciò significa che la tua finestra modale di accesso si adatterà automaticamente per apparire al meglio su desktop, tablet e smartphone.

I popup di accesso rallentano un sito web?

Quando si utilizzano plugin ben codificati e ottimizzati come WPForms e OptinMonster, non dovrebbe esserci alcun impatto notevole sulle prestazioni del sito. Questi strumenti sono progettati per essere leggeri e caricarsi in modo efficiente.

Posso aggiungere pulsanti di accesso social al mio popup?

Alcuni plugin offrono la funzionalità di accesso social come funzionalità integrata o premium. Ad esempio, la versione pro del plugin Login/Signup Popup supporta gli accessi social. Questo può rendere ancora più facile per gli utenti accedere.

Speriamo che questo articolo ti abbia aiutato a imparare come creare una modale di popup di accesso in WordPress. Puoi anche consultare il nostro elenco completo dei migliori plugin per la pagina di accesso di WordPress e la nostra guida su come reindirizzare gli utenti dopo un accesso riuscito in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.