Come creare un Popup modal di accesso WordPress (passo dopo passo)

Vuoi aggiungere un modal di accesso a WordPress sul tuo sito? Un popup di accesso modale consente agli utenti di accedere rapidamente al tuo sito Web senza uscire dalla pagina che stanno visualizzando. Ciò migliora l'esperienza utente e il coinvolgimento sul tuo sito web. In questo articolo, ti mostreremo come creare facilmente una modal popup di accesso a WordPress, passo dopo passo.

Perché creare un pulsante popup di accesso WordPress?

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

Normalmente, quando gli utenti fanno clic sul collegamento di accesso, vengono indirizzati alla pagina di accesso di WordPress predefinita o ad 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.

Un popup di accesso modale consente di visualizzare il modulo di accesso senza inviare utenti a una pagina diversa. Una volta effettuato l'accesso, è possibile reindirizzare gli utenti a qualsiasi pagina desiderata.

Un popup di accesso modale è più veloce e migliora l'esperienza utente sul tuo sito web. Un'esperienza utente più veloce e più lucida può aumentare le vendite e le conversioni.

Detto questo, diamo un'occhiata a come creare facilmente un popup di accesso modale in WordPress. Ti mostreremo due metodi per farlo e potrai scegliere quello che meglio si adatta alle tue esigenze.

Metodo 1. Creare un popup di accesso modale utilizzando il login CSH

Questo metodo è più semplice e consigliato per la maggior parte degli utenti.

La prima cosa che devi fare è installare e attivare il plugin di accesso CSH. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, devi andare a Login modale pagina nell'area amministrativa di WordPress e selezionare un tipo per il modulo di accesso modale.

Dopo aver selezionato il tipo di casella di accesso modale, è possibile scorrere verso il basso e gestire i reindirizzamenti di accesso / disconnessione per il modulo. Puoi anche consentire agli utenti di generare le proprie password.

Successivamente, è necessario scorrere verso il basso per stili sezione e selezionare il layout, visualizzare le etichette, il colore di sfondo, il colore del pulsante, il colore del collegamento e altro.

Inoltre, puoi aggiungere email di registrazione, oggetto email, utilizzare Google reCaptcha e altro. Questo plugin consente anche di aggiungere login social come Facebook, Twitter e Google.

Assicurati di salvare le modifiche e copia lo shortcode situato nella parte superiore di questa pagina. Dovrai creare una nuova pagina in WordPress o modificarne una esistente per aggiungere lo shortcode nell'editor di contenuti.

Puoi anche aggiungere l'accesso modale nella barra laterale di WordPress. Semplicemente vai Aspetto »Widget trascinare e rilasciare il Accesso CSH widget nella barra laterale del tuo sito.

Il login modale CSH può anche essere aggiunto nei file dei modelli di siti web. Una volta aggiunto sul tuo sito, visita il tuo sito WordPress per vedere il link di accesso modale in azione.

Metodo 2. Creare un popup di accesso modale con WPForms e OptinMonster

Per questo metodo è necessario il plug-in WPForms e OptinMontser. Se hai già questi due plugin, questo metodo è la soluzione migliore per te.

WPForms è il miglior plugin per moduli di contatto WordPress. Avrai bisogno almeno del piano Pro per accedere al componente di registrazione dell'utente.

OptinMonster è il miglior software di lead generation sul mercato. Ti aiuta a convertire i visitatori del sito Web in abbonati e clienti. Avrai bisogno almeno del piano Pro per accedere alla funzione MonsterLinks utilizzata in questo articolo.

Pronto? Iniziamo.

Utilizzo di WPForms per creare un modulo di accesso utente

Innanzitutto, è necessario installare e attivare il plug-in WPForms. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, devi andare a WPForms »Addon pagina per installare e attivare il Addon registrazione utente.

Dopo aver attivato l'addon, devi andare a WPForms »Aggiungi nuovo pagina per creare il modulo di accesso utente.

Una volta avviato il builder WPForms, è necessario scegliere il pre-costruito Modulo di accesso utente modello.

Questo modello di modulo di accesso contiene i campi email e password che funzioneranno in modo simile al modulo di accesso WordPress predefinito. È possibile trascinare e rilasciare eventuali campi aggiuntivi dal lato sinistro dello schermo, se necessario.

Quindi, fare clic su Parola d'ordine campo nella sezione di anteprima, e mostrerà le opzioni del campo sul lato sinistro. È possibile aggiungere il codice indicato di seguito nella casella di descrizione di Parola d'ordine campo per visualizzare le opzioni come dimenticare la password e la registrazione dell'utente.

 Non ricordi la tua password? Clicca qui. Non hai un account? Registrati qui. 

Dopo di che è necessario fare clic sul Salvare pulsante e quindi fare clic su Incorporare pulsante.

Si aprirà una finestra popup con il codice di incorporamento. Devi copiare questo codice e salvarlo per usarlo in seguito.

Il tuo modulo di accesso è pronto. Ora puoi andare avanti e creare il popup modale.

Utilizzando OptinMonster per creare una finestra popup modale

Per prima cosa dovrai installare e attivare il plugin OptinMonster. Per ulteriori dettagli, consulta la nostra guida passo passo su come installare un plug-in di WordPress.

Dopo l'attivazione, devi andare a OptinMonster nell'area di amministrazione di WordPress e fai clic su Crea una nuova campagna pulsante.

La dashboard di OptinMonster si aprirà su una nuova pagina Web.

Una volta dentro, è necessario selezionare Lightbox popup come tipo di campagna, in modo da poter aggiungere il modulo di accesso nel popup.

Quindi, è necessario selezionare il Tela modello di campagna che è un modello vuoto e consente di aggiungere codice personalizzato e codici brevi.

Ti chiederà di aggiungere un nome alla tua lightbox e selezionare il sito web in cui desideri caricare questo popup.

Una volta che fai clic sul Inizia a costruire pulsante, verrai reindirizzato alla pagina di impostazione della campagna di OptinMonster.

Da qui, devi andare a optin scheda e impostare la larghezza e l'altezza della tela, aggiungere codice di accesso modulo di accesso in HTML su tela personalizzato campo, gestire la visualizzazione e gli effetti sonori per popup modali e altro ancora.

Nota: Il codice di incorporamento del modulo di accesso deve essere il codice che hai copiato dopo aver creato il modulo di accesso nel passaggio precedente.

Poiché stai creando un popup di accesso modale, devi andare alla scheda di configurazione e impostare il valore '0' per Durata del cookie e Successo Durata del cookie. Visualizzerà il modulo a tutti i visitatori ogni volta che farà clic sul tuo link.

Successivamente, è necessario visitare il Regole di visualizzazione scheda ed espandere MonsterLink per cambiare lo stato in attivo.

Assicurati di cliccare sul Salvare pulsante nell'angolo in alto a destra e vai a Pubblicare sezione per rendere attivo lo stato.

Ora puoi aggiungere questo popup di accesso modale nelle tue pagine o post di WordPress.

Aggiunta di accesso modale in WordPress

Devi tornare a OptinMonster nell'area di amministrazione di WordPress e ti mostrerà l'elenco delle campagne. Se non vedi la tua campagna creata di recente per l'accesso modale, quindi fai clic su Aggiorna campagne pulsante.

Successivamente, devi modificare le impostazioni di output della campagna per abilitare optin sul tuo sito e selezionare chi dovrebbe vedere il popup di accesso modale. Assicurati di cliccare sul Salva le impostazioni pulsante.

Dopodiché è necessario tornare alla pagina di panoramica delle campagne e copiare lo slug visibile sotto l'opzione live della campagna. Questo slug unico può essere utilizzato in shortcode e codice per visualizzare l'accesso modale in WordPress.

Successivamente, puoi creare una nuova pagina di WordPress o modificarne una esistente e aggiungere questo codice con il tuo slug di campagna unico.

 Accedi / Registrati 

Puoi anche aggiungere il codice sopra nei menu di WordPress, nella barra laterale o in qualsiasi altra area del tuo sito.

Assicurati di salvare le modifiche alla pagina di WordPress e visita il tuo sito per vedere il login modale in azione.

Speriamo che questo articolo ti abbia aiutato a imparare come creare un login modale in WordPress. Potresti anche voler vedere la nostra lista completa dei migliori plugin per la pagina di login di WordPress e progettare facilmente la tua pagina di accesso.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.