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?

Dovresti creare un popup modale di accesso perché rende l'accesso più veloce e fluido per i tuoi utenti senza inviarli a una pagina separata.

Nella maggior parte dei siti web, quando qualcuno fa clic sul link di accesso, viene reindirizzato alla pagina di accesso predefinita di WordPress o a una pagina di accesso personalizzata. Dopo l'accesso, viene nuovamente reindirizzato.

Questo avanti e indietro può sembrare lento e interrompere l'esperienza utente. Un popup modale di accesso risolve questo problema. Apre il modulo di accesso in una piccola finestra sulla stessa pagina.

Gli utenti possono accedere all'istante e tu puoi reindirizzarli ovunque tu voglia dopo l'accesso. Il processo sembra più rapido e professionale, il che può migliorare l'esperienza utente e persino aumentare le conversioni.

Detto questo, ti mostreremo come creare facilmente un popup modale di accesso in WordPress utilizzando sia un plugin gratuito che strumenti premium. Puoi passare al metodo che funziona meglio per te:

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 di WordPress.

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

Nelle impostazioni 'Generali', puoi abilitare la registrazione, accedere automaticamente agli utenti dopo la loro iscrizione e gestire il ripristino delle 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 'Sottoscrittore'.

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 modale popup di accesso/registrazione. Il plugin ti consente di modificare la posizione del popup, 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.

Aggiungi il popup modale 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.

Aggiungi il popup modale 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, per creare un link di accesso, useresti l'HTML in questo modo:

<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.

Usa Shortcode per aggiungere una modale popup di accesso

Un altro modo per aggiungere il popup di accesso/registrazione è utilizzare 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 'Shortcode' per mostrare la 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 congiunto di WPForms e OptinMonster ti offre potenti opzioni di progettazione, regole di visualizzazione avanzate (come la visualizzazione del popup dopo che un utente fa clic su un collegamento specifico) e una migliore integrazione con i servizi di email marketing.

WPForms è il miglior plugin per moduli di contatto di WordPress, e avrai bisogno almeno del loro piano Pro per accedere al componente aggiuntivo 'Registrazione Utente'.

OptinMonster è il miglior plugin popup di WordPress sul mercato. 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'ottima esperienza. Per maggiori dettagli, consulta la nostra recensione completa di OptinMonster.

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

Utilizzo di WPForms per creare un modulo di accesso utente

Innanzitutto, 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 di OptinMonster e iscriverti 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 di 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 dei 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 collegamento nel 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à. Sebbene Google Analytics possa 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' (disponibile con il piano Elite), che ti consente di vedere da dove provengono gli utenti, quale percorso hanno seguito e quanto tempo hanno trascorso su ciascuna pagina prima di inviare un modulo.

Se sei interessato a saperne di più, non esitare a consultare la nostra guida su come monitorare il percorso dell'utente sui moduli di lead di WordPress.

Domande frequenti sulla creazione di una modale popup di accesso per WordPress

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 utilizzi plugin ben codificati e ottimizzati come WPForms e OptinMonster, non dovresti notare alcun impatto sulle prestazioni del tuo 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 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 trovarci anche su Twitter e Facebook.