Vuoi personalizzare la pagina di accesso sul tuo sito WordPress? Con WPForms, hai molti modi per stilizzare i tuoi moduli di accesso, senza bisogno di alcuna codifica!

In questo post, ti mostreremo 7 diversi esempi di pagine di login da siti popolari e come ricrearli.

Ti guideremo attraverso il processo di creazione di ogni modulo nello stesso stile degli esempi che presentiamo qui, con pochi clic del mouse.

Iniziamo!

Crea Ora la Tua Pagina di Login! :)

Cosa Rende una Pagina di Login Efficace?

La tua pagina di login contiene probabilmente alcuni campi in cui gli utenti digitano il loro nome utente, indirizzo email, password e altro. È un luogo in cui i visitatori del sito web inseriscono le proprie credenziali per accedere al tuo sito.

Questi visitatori potrebbero avere un account sul tuo sito, o qualche altro motivo per dover accedere al tuo sito web. Le pagine di login efficaci tendono a condividere le stesse decisioni, anche quando non si assomigliano affatto in superficie.

• Un compito, dichiarato chiaramente: Una pagina di login richiede le credenziali e si toglie di mezzo per ridurre le distrazioni e aiutare gli utenti ad accedere ai propri account.
• Un'uscita per chi non ha un account: Un numero sorprendente di visitatori della pagina di login si trova nel posto sbagliato. Un link di iscrizione visibile li salva dal rimbalzo.
• Un link di reset password facile da trovare: Le password dimenticate sono la ragione più comune per cui qualcuno atterra su una pagina di login due volte di seguito.
• Brand sufficiente per farla sentire come il tuo sito: un logo o un'immagine di intestazione sono solitamente sufficienti. I lettori si innervosiscono a digitare una password in una pagina dall'aspetto generico.
• Protezione antispam che non penalizza le persone reali: i bot prendono di mira costantemente i moduli di accesso. Una casella di controllo o un controllo invisibile ne bloccano la maggior parte senza aggiungere attrito.
• Spazio per respirare su un telefono: campi angusti e minuscoli obiettivi di tocco falliscono sui dispositivi mobili molto prima che sui desktop.

7 Esempi di pagine di accesso

Ogni esempio seguente è una pagina live che puoi visitare subito. Sotto ognuna ho evidenziato la scelta di design specifica che la rende efficace, così puoi adottare il modello piuttosto che copiare i pixel.

1. HubSpot

Questa pagina di accesso sul sito web di HubSpot è abbastanza basilare e senza molti dettagli inclusi nel modulo. Il modulo consiste semplicemente in un campo per l'email, una password, una casella di controllo e un pulsante di accesso.

La cosa di un modulo come questo è che è un po' come le fondamenta di tutti gli altri esempi di moduli di accesso. Ha gli elementi più basilari necessari per una pagina di accesso.

E, se preferisci, anche la tua pagina di accesso può essere semplificata così. WPForms è il miglior plugin per la creazione di moduli per WordPress, e rende super facile aggiungere una pagina di accesso personalizzata al tuo sito web.

Innanzitutto, dovrai installare WPForms e iscriverti al Piano Pro per accedere al componente aggiuntivo User Registration. Dopo aver inserito la chiave di licenza nelle impostazioni di WPForms, vai su WPForms » Componenti aggiuntivi nella tua dashboard.

Scorri i componenti aggiuntivi disponibili per trovare il componente aggiuntivo User Registration, che installerai anche tu. Assicurati di attivare il componente aggiuntivo una volta installato.

Ora sei pronto per creare il tuo modulo di accesso. Vai su WPForms » Crea nuovo e trova il modello Modulo di accesso utente dai tuoi modelli di componenti aggiuntivi disponibili.

Fai clic sul pulsante Usa modello per selezionare questo modello e aprire il generatore di moduli. Il generatore di moduli WPForms ti consente di modificare facilmente questo modello predefinito per adattarlo alle tue esigenze.

Troverai un'ampia selezione di campi modulo che coprono virtualmente qualsiasi elemento desideri nel tuo modulo online. Tutto ciò che devi fare è semplicemente trascinare e rilasciare ogni campo nella posizione desiderata.

Vedrai che il Modulo di accesso utente ha già caricato i campi necessari. Ma, come tutti i modelli WPForms, questo modulo è altamente personalizzabile, quindi puoi aggiungere e modificare i campi sul tuo modulo in una varietà di modi.

Per questo modulo, modifichiamo il pulsante Invia in fondo al modulo in modo che legga 'Accedi' come l'esempio della pagina di accesso di HubSpot. Fai semplicemente clic sul pulsante per espandere le sue impostazioni.

Quindi, per cambiare il testo del pulsante, apri la scheda Generale e scorri fino alla casella Testo del pulsante di invio.

Ora, digita ciò che desideri che il pulsante legga, come 'Accedi'. Guardando di nuovo il modulo, il pulsante in fondo al modulo si allinea meglio con la natura di accesso di questa pagina.

Ed ecco tutto ciò che devi fare per creare un modulo di accesso di base come quello utilizzato nella pagina di accesso di HubSpot. Da qui, procedi e Salva questo modulo.

Una volta salvato, questo modulo sarà disponibile per l'uso nella pagina Tutti i moduli di WPForms nella tua bacheca di WordPress.

Ora hai un semplice modulo di accesso che puoi pubblicare rapidamente sul tuo sito, o che potresti usare come base per creare pagine di accesso più dettagliate. Questi sono i passaggi di base richiesti per tutti gli esempi di pagine di accesso trattati qui.

2. WordPress.org

Dai un'occhiata alla pagina di accesso di WordPress.org. Come il primo esempio che abbiamo trattato, anche questo è abbastanza basilare. Ma ha un frammento di testo istruttivo in alto, e anche il tuo modulo può averlo.

Come abbiamo menzionato, ogni modulo creato qui richiede prima il modello Modulo di accesso utente, compreso questo. Procedi e seleziona di nuovo il modello.

Quindi, nell'editor di moduli, trascina il campo Contenuto in cima al modulo e rilascialo lì.

Come abbiamo detto prima, puoi trascinare questo campo sul tuo modulo ovunque desideri. Ma per assomigliare al testo istruttivo nella pagina di accesso sopra, mettiamo il campo in alto.

Fai clic sul campo per aprire le sue opzioni personalizzabili, che si trovano sul lato sinistro dello schermo. Quindi, usa l'editor di testo per digitare il testo istruttivo che desideri visualizzare in questo campo.

Come l'esempio sopra, potresti istruire gli utenti su come inserire le loro informazioni per accedere al tuo sito web.

Molte opzioni sono a portata di mano grazie all'editor di testo, con stili di font personalizzabili, colori e altro ancora disponibili all'interno di questo campo.

Ad esempio, guarda di nuovo la pagina di accesso di HubSpot dall'esempio 1. Nota che c'è un brevissimo frammento di testo istruttivo.

Il testo istruttivo recita: 'Non hai un account? Iscriviti' e fornisce un link a una pagina in cui gli utenti possono creare un account.

Anche questo è possibile con l'editor di testo del campo Contenuto sul tuo modulo. Per prima cosa, digita il testo delle istruzioni ed evidenzia la porzione che desideri collegare. Quindi, fai clic sull'icona del collegamento nella barra degli strumenti dell'editor di testo.

Ora, inserirai l'URL della pagina su cui desideri che gli utenti atterrino. Fai clic su OK al termine.

Ed ecco fatto! Ora hai testo istruttivo e un link sul tuo modulo.

Come sempre, salva il tuo modulo per dopo o incorporalo in una pagina. Condivideremo i dettagli su come pubblicare quando sarai pronto per la messa online della pagina di accesso sul tuo sito alla fine di questo post.

3. Immagine di intestazione

Un altro modo per personalizzare il Modulo di Accesso Utente per la tua pagina di accesso è aggiungere un'immagine di intestazione a tua scelta. L'utilizzo di un'immagine in cima al tuo modulo è un buon modo per personalizzare il tuo modulo o completare lo stile del tuo sito web.

Per aggiungere un'immagine di intestazione, utilizzerai ancora una volta il campo Contenuto e il modello Modulo di Accesso Utente. Trascina e rilascia questo campo in cima al tuo modulo come prima.

Ma questa volta, fai clic sul pulsante Aggiungi Media sopra l'editor di testo.

Ora, caricherai un'immagine a tua scelta, che apparirà sopra il testo nell'editor di testo. Puoi anche eliminare il testo questa volta, se lo desideri, e lavorare solo con l'immagine.

Fai clic sull'immagine per accedere alle sue Impostazioni di Visualizzazione e posiziona l'immagine come preferisci.

Per far sì che l'immagine nel nostro esempio agisca come una vera immagine di intestazione, centreremo l'allineamento e selezioneremo la versione a dimensione intera. Potresti regolare queste impostazioni alcune volte per capire cosa preferisci.

Assicurati di fare clic sul pulsante blu Aggiorna per applicare eventuali modifiche. Puoi anche esplorare le altre schede delle impostazioni per ulteriori opzioni, come la modifica della Dimensione campo nella scheda Avanzate.

Prova la dimensione del campo Grande per vedere la tua immagine visualizzata ancora più grande in cima al tuo modulo, in vero stile immagine di intestazione.

Ancora una volta, assicurati di salvare il tuo modulo per dopo. E per altri suggerimenti relativi a questo esempio, consulta questo post completo su come aggiungere un'immagine di intestazione ai tuoi moduli.

4. SendLayer

Diamo un'occhiata alla pagina di accesso di SendLayer. In cima al modulo, sopra il testo istruttivo che abbiamo trattato in precedenza, si trova il logo del sito web.

Puoi aggiungere un logo anche al tuo modulo, utilizzando ancora una volta il campo Contenuto sul tuo Modulo di Accesso Utente.

Ricordi come hai usato il campo Contenuto per caricare un'immagine di intestazione? Perché non usare un processo simile per visualizzare un logo? Grazie al generatore di moduli, hai molteplici opzioni per posizionare i loghi sul tuo modulo.

Trascina semplicemente il campo Contenuto dove lo desideri sul tuo modulo.

Per assomigliare all'esempio sopra, posizioniamo il logo in cima al modulo. E poiché questo è un po' come un'immagine di intestazione, un logo in stile orizzontale potrebbe essere più adatto qui.

Ricorda di fare semplicemente clic sul pulsante Aggiungi Media del campo Contenuto per caricare il tuo logo.

E non dimenticare le impostazioni aggiuntive. Potresti voler centrare il logo, renderlo a dimensione intera o cambiare la dimensione del campo nelle impostazioni Avanzate.

Puoi anche modificare il testo sotto il logo come abbiamo trattato nell'esempio del testo istruttivo, il che farebbe sì che il tuo modulo qui assomigliasse molto all'esempio.

La tua pagina di accesso ora ha il tuo logo chiaramente visualizzato sul tuo modulo. Sentiti libero di aggiungere un altro logo in fondo, o ovunque altro tu voglia trascinare il campo Contenuto!

5. TrustPulse

Ora prendiamo nota della pagina di accesso di TrustPulse. Questo modulo di accesso presenta le credenziali inserite su un lato dello schermo con un piccolo logo sopra, e una grande illustrazione visualizzata sull'altro lato.

Anche tu puoi creare un modulo simile a questo utilizzando insieme il campo Layout e il campo Contenuto. Per prima cosa, trascina il campo Layout sul tuo modulo di accesso utente.

Al momento non ha molta importanza dove trascini e rilasci il campo Layout, perché alla fine trascinerai i campi precaricati del modulo all'interno del campo Layout stesso.

Per ora, trasciniamolo semplicemente in cima al modulo per rimanere organizzati. Selezionerai anche l'orientamento delle colonne all'interno del layout, che determinerà le dimensioni e il posizionamento del contenuto in questo campo.

Ora, trascina il campo Contenuto nella prima colonna del campo Layout sul tuo modulo, in modo da poter visualizzare qui un logo come nell'esempio di TrustPulse.

Usa il pulsante Aggiungi media per caricare ancora una volta il tuo logo, e poi assicurati che le impostazioni dell'immagine lo orientino e lo ridimensionino come desideri.

Successivamente, trascina e rilascia gli altri campi del modulo su quel lato del campo Layout.

Semplicemente afferra ogni campo con il mouse, trascinalo nella colonna Layout e rilascialo. Il campo Email, il campo Password e la casella di controllo saranno ora nella colonna sinistra del tuo modulo.

Ora, aggiungerai contenuto all'altra colonna nel campo Layout. Seleziona di nuovo il campo Contenuto e trascinalo nella colonna più grande sul lato destro del tuo modulo.

Ora puoi aggiungere un'illustrazione a tua scelta da visualizzare in modo predominante su questo lato del tuo modulo. Fai clic sul pulsante Aggiungi media come hai fatto sull'altro lato per caricare un'illustrazione.

E, ancora una volta, assicurati di regolare le impostazioni del campo per personalizzare le dimensioni e il posizionamento della tua illustrazione. Per un'illustrazione di grandi dimensioni come l'esempio, potresti voler rimuovere qualsiasi testo aggiuntivo dal campo Contenuto.

E ora il tuo modulo presenta il piccolo logo e le voci delle credenziali su un lato, e una grande illustrazione visualizzata sull'altro lato.

Come sempre, dovrai salvare questo modulo per conservarlo in WPForms sulla tua dashboard, e poi incorporarlo in una pagina di WordPress quando sarai pronto per usarlo.

6. ExactMetrics

Successivamente, esamineremo la pagina di accesso di ExactMetrics, che è in qualche modo simile all'accesso precedente, ma con un pulsante di invito all'azione su un lato del modulo invece di un'illustrazione.

Un lato ha un piccolo logo, l'inserimento dell'email, l'inserimento della password e il pulsante di accesso, e l'altro lato ha parecchio testo, seguito da una CTA cliccabile.

Per creare un aspetto simile con il tuo modulo, devi semplicemente seguire i passaggi che abbiamo trattato nell'esempio precedente: aggiungendo prima il campo Layout al tuo modulo di accesso utente e trascinando i campi su un lato o colonna del layout.

Ricorda, devi semplicemente trascinare il campo Contenuto nel Layout per caricare il tuo logo, e poi trascinare anche i campi rimanenti sul modulo su quel lato del Layout.

Ma poi, per l'altro lato del campo Layout, nella seconda colonna, non preoccuparti di caricare nulla. Modificherai semplicemente il testo già presente.

Nota come parte del testo precaricato sia più grande e in grassetto rispetto a ciò che si trova sotto, simile allo stile del testo nell'esempio.

Questo rende facile modellare il tuo testo come quello dell'esempio, ma non dimenticare tutti gli altri modi per utilizzare l'editor di testo a tuo vantaggio. Puoi cambiare la dimensione, l'orientamento, il colore del testo e altro ancora, come ritieni opportuno.

E all'interno dell'editor di testo del campo Contenuto, puoi persino inserire uno snippet di codice per creare un pulsante CTA. Fai clic sulla scheda Testo della casella dell'editor di testo per copiare e incollare il codice che desideri utilizzare per creare un pulsante.

Puoi modificare il tuo snippet di codice per personalizzare l'aspetto del tuo pulsante CTA come preferisci.

Ora hai un pulsante CTA sul tuo modulo! Ancora una volta, dovrai salvare questo modulo e quindi incorporarlo in una pagina WordPress quando sarai pronto per utilizzarlo.

7. WPForms

Ora che abbiamo esplorato i modi più complessi per personalizzare un modulo di accesso, diamo un'occhiata a uno degli elementi di sicurezza più semplici da aggiungere al tuo modulo, ovunque tu voglia.

La verifica reCAPTCHA aiuta a proteggere il tuo sito WordPress da bot e spam che potrebbero tentare di utilizzare i tuoi moduli per accedere al tuo sito.

Come puoi vedere, lo utilizziamo sulla nostra pagina di accesso qui su WPForms.

Puoi aggiungere facilmente un campo reCAPTCHA anche a uno qualsiasi dei tuoi moduli di accesso. Ma prima, dovrai configurarlo nelle impostazioni di WPForms.

Dal tuo pannello di controllo WordPress, vai su WPForms e poi su Impostazioni. Quindi, assicurati di essere nella schermata CAPTCHA.

Seleziona l'opzione reCAPTCHA dal centro della schermata.

Quindi sceglierai il tipo di verifica reCAPTCHA che desideri utilizzare. Selezioniamo Checkbox reCAPTCHA v2.

Successivamente, dovrai inserire una Chiave del sito e una Chiave segreta in questa pagina delle impostazioni, fornite da Google. Per ricevere queste chiavi, devi seguire il processo di configurazione nella console di amministrazione reCAPTCHA di Google.

Per ulteriori informazioni, insieme a un tutorial completamente dettagliato su come farlo, consulta il nostro articolo su  come configurare e utilizzare reCAPTCHA con i tuoi moduli WordPress.

Non dimenticare di fare clic su Salva in fondo a questa schermata per applicare queste impostazioni al tuo campo reCAPTCHA.

Ora sei pronto per aggiungere la verifica reCAPTCHA al tuo modulo. Tornato alla pagina di creazione del modulo, devi solo fare clic sul campo reCAPTCHA per abilitarlo sul tuo modulo di accesso utente.

E questo è tutto! Il tuo modulo di accesso è ora protetto da bot e spam che altrimenti potrebbero infiltrarsi nel tuo sito.

Inoltre, l'icona reCAPTCHA viene quindi visualizzata sul tuo modulo, il che indica ai tuoi utenti che le loro informazioni sono sicure.

Come aggiungere una pagina di accesso personalizzata a WordPress

La cosa utile del generatore di moduli di WPForms è che tutte le opzioni personalizzabili e le scelte di stile ispirate da questi esempi possono essere create direttamente sul modulo stesso.

Tuttavia, alcuni degli stili ottenuti in questi esempi potrebbero essere il risultato di modifiche aggiuntive sulla pagina di accesso.

Quindi, per ulteriori suggerimenti approfonditi su come ottenere ancora più stile con WPForms sulla tua pagina WordPress, consulta questo articolo completo su come stilizzare i moduli con CSS.

Inoltre, tieni presente che con tutti i tuoi moduli creati e gli esempi che abbiamo trattato qui, dovrai salvare il modulo quando avrai finito di modificarlo.

Quindi, forse più tardi, se necessario, puoi incorporare il modulo in una pagina e pubblicarlo quando sei pronto. Oppure, dall'editor di moduli, puoi procedere e incorporare subito il tuo modulo in una pagina.

Facendo clic su Incorpora puoi incorporare il tuo modulo di accesso in una pagina già creata per il tuo sito web, oppure puoi creare subito una nuova pagina per questo modulo di accesso.

Se decidi di creare una nuova pagina, dovrai darle un nome, proprio come le altre pagine del tuo sito web sono nominate, in modo da poterle trovare facilmente nella dashboard di WordPress.

Fai clic su Iniziamo! per continuare. WPForms aggiungerà automaticamente il tuo modulo di accesso alla tua nuova pagina.

Dopo che il tuo modulo è stato incorporato, puoi sempre modificare alcune cose aggiuntive sulla pagina WordPress stessa accedendo alle impostazioni del blocco WPForms e modificando altri elementi di stile della pagina.

Dai un'occhiata a questo articolo per altre idee su come modificare e personalizzare la tua pagina di accesso WordPress.

E ricorda che, come tutte le tue pagine WordPress, dovrai pubblicare la pagina con il tuo modulo incorporato per renderla live sul tuo sito web. Puoi anche visualizzare in anteprima la pagina prima di pubblicarla, o salvare la bozza per dopo.

Per ulteriori letture su questo argomento, consulta questo tutorial che copre come visualizzare moduli di accesso e registrazione.

FAQ sugli Esempi di Pagine di Login

La progettazione della pagina di accesso è molto richiesta dai proprietari di siti WordPress, soprattutto una volta che un sito inizia ad accettare registrazioni. Ecco le domande che mi vengono poste più spesso.

Come creo una pagina di login personalizzata in WordPress?

Installa l'addon User Registration, inizia dal modello User Login Form, personalizzalo nell'editor di moduli, quindi incorporalo in una pagina e pubblicalo. WordPress manterrà la sua schermata di accesso predefinita in wp-login.php e la tua pagina personalizzata funzionerà parallelamente ad essa anziché sostituirla.

Posso aggiungere un link di iscrizione alla mia pagina di login?

Sì, e dovresti farlo se la registrazione è aperta sul tuo sito. Aggiungi un campo Contenuto al tuo modulo di accesso e usa lo strumento link dell'editor di testo per puntare alla tua pagina di registrazione. La frase di HubSpot “Non hai un account? Iscriviti” è il modello da copiare.

Ho bisogno di un CAPTCHA sulla mia pagina di login?

Per qualsiasi sito con account utente reali, sì. I moduli di accesso ricevono traffico automatizzato, indipendentemente dal fatto che tu l'abbia notato o meno, e i tentativi falliti non compaiono in modo evidente. reCAPTCHA, hCaptcha e Cloudflare Turnstile funzionano tutti con WPForms su ogni licenza, inclusa la versione gratuita.

Posso usare una pagina di login personalizzata invece di wp-login.php?

La tua pagina personalizzata può diventare la pagina di accesso a cui ti colleghi ovunque, ma wp-login.php rimane attivo in background perché il core di WordPress dipende da esso. Nasconderlo o spostarlo richiede un plugin dedicato anziché un modulo, e c'è una panoramica delle opzioni nella nostra guida ai plugin per la pagina di accesso.

Successivamente, Trasforma i Tuoi Nuovi Iscritti in Utenti Registrati

Una pagina di accesso guadagna la sua utilità solo quando le persone hanno account a cui accedere. Se stai creando anche il lato della registrazione, consulta la nostra guida su come creare un modulo di registrazione WordPress con PayPal.

Copre l'iscrizione di nuovi utenti e l'accettazione del pagamento nello stesso passaggio, che è la cosa successiva che le persone di solito desiderano dopo una pagina di accesso.

E se hai bisogno di un registro di chi si è iscritto e quando, dai un'occhiata a come stampare in PDF le tue richieste di modulo.

Crea ora la tua pagina di accesso

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e  X (Twitter) per altri tutorial e guide gratuite su WordPress.