Come creare una bella pagina di accesso personalizzata per il tuo sito web
La pagina di accesso, proprio come la pagina di destinazione di un sito Web, è molto importante per gli imprenditori che desiderano convertire il traffico. Proprio come la pagina di destinazione, la pagina di accesso deve essere sofisticata affinché i visitatori forniscano semplicemente i propri dettagli senza troppi problemi.
La maggior parte delle migliori pagine di accesso sono semplici, hanno utilizzato uno stile minimalista senza pubblicità e trucchi di marketing; solo il login nel modulo con una o due immagini di sfondo.
Esistono diversi modi per creare pagine di accesso che attirino i visitatori e li incoraggino a tornare.
- Se sei bravo a programmare (HTML e CSS semplici ), dovresti essere in grado di creare una pagina di accesso semplice ma accattivante con alcuni codici di base.
- Per i neofiti, è più semplice personalizzare la pagina di accesso fornita con il modello del costruttore di siti web. La maggior parte dei costruttori di siti Web e dei modelli (WordPress, Weebly, Shopify, Joomla e altri) viene fornita con modelli già pronti e tutto ciò che devi fare è modificarli per soddisfare le tue esigenze.
- Puoi anche utilizzare semplici plugin e temi per creare una pagina di accesso. I plugin sono utili perché ti consentono di personalizzare la tua pagina di accesso con un clic di un pulsante. Possono essere utilizzati sia dai neofiti che dai web designer esperti.
Il metodo che scegli per personalizzare la tua pagina di accesso al sito web sarà determinato dal tuo livello di abilità. Mentre la codifica può essere un buon metodo per una persona, un’altra potrebbe non sapere dove posizionare quale codice. I plugin sono buoni, ma alcuni sono premium.
Continua a leggere per scoprire come creare e personalizzare una bellissima pagina di accesso.
Usa HTML/CSS semplici
La creazione e la personalizzazione di un modulo di accesso in HTML e CSS avviene in tre semplici passaggi: gestire il markup HTML, posizionare i diversi elementi del modulo di accesso e, infine, modellare i diversi elementi per renderli accattivanti.
Marcatura HTML
Qui aggiungerai semplici tag HTML per creare il modulo effettivo. La parte HTML consiste in un contenitore, il modulo stesso e un paio di altri input. Inserendo correttamente il codice, sarai in grado di creare un semplice modulo di accesso con una parte nome utente, una parte password, una casella di controllo e un pulsante di accesso. I componenti, tuttavia, non sono disposti bene.
<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>Posizionamento degli elementi
Puoi quindi modellare le diverse parti del modulo aggiungendo un semplice codice come quello qui sotto. Questo posizionerà i diversi componenti in posizioni diverse.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Successivamente, puoi posizionare i diversi elementi della tua pagina di accesso secondo le tue specifiche. Prima di tutto, dovrai specificare gli elementi di base, come il colore del carattere e quindi posizionare il modulo al centro della pagina per bilanciare. Qui puoi aggiungere qualsiasi colore di carattere che ti piace, qualunque cosa tu consideri bella. Tuttavia, è sempre consigliabile assicurarsi che il modulo rimanga semplice per non confondere i visitatori.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}A questo punto, il modulo potrebbe ancora sembrare traballante e puoi migliorarlo aggiungendo un po’ di stile strutturale. Per fare ciò, inizia assicurandoti che gli elementi del tuo modulo di accesso non siano schiacciati e siano facilmente leggibili. È possibile aggiungere il seguente codice per garantire la pulizia del modulo.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Il tuo modulo di accesso apparirà ora semplice e quasi completo con i diversi elementi ben posizionati. Tuttavia, è necessario definire lo stile delle varie aree di input del modulo di accesso per renderle ancora migliori. Qui dovrai specificare il colore, la dimensione del carattere, aggiungere un po’ di riempimento, i margini, la larghezza dei diversi elementi e altre nozioni di base come il colore che appare quando passi il mouse o fai clic su un elemento. Aggiungi il codice qui sotto.
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue", Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}Dal momento che vuoi che la tua pagina di accesso appaia ancora più bella, puoi aggiungere un po ‘più di personalizzazioni per rendere il pulsante di accesso e la casella di controllo un po’ eleganti. Aggiungi il seguente codice.
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}Modella gli elementi del modulo
A questo punto, gli elementi sono ben posizionati e sembrano abbastanza sofisticati. Il modulo di accesso è pronto ma puoi ancora renderlo un po’ più bello aggiungendo i codici di stile CSS. Puoi iniziare il processo arrotondando gli angoli del contenitore e quindi dandogli un’ombra per migliorarne l’aspetto e far emergere un senso di profondità. Per farlo, inserisci questo codice qui sotto nell’area del contenitore.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );L’aggiunta del codice precedente all’area del contenitore renderà il codice del contenitore simile a quello riportato di seguito:
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Dopo aver definito lo stile del contenitore, ora puoi definire lo stile delle diverse aree di input con un codice simile. Aggiungi il codice qui sotto e le tue aree di input sembreranno molto più belle di quanto non fossero all’inizio.
border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}Ora l’intero codice di inserimento della password sarà simile a quello qui sotto. Il modulo di accesso avrà un aspetto fantastico, ma c’è ancora più stile che puoi fare per migliorare ulteriormente l’aspetto del tuo modulo.
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;
}Ora devi rendere il pulsante di accesso migliore e distinto. Per fare ciò, inserisci il codice qui sotto nella sezione di invio del tuo codice.
font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}L’intero codice della tua sezione di invio sarà simile a quello qui sotto e avrai cambiato il colore del tuo pulsante di accesso e altri aspetti, e avrai un semplice modulo di accesso come quello qui sotto.
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),
inset 0 1px 0 rgba( 255, 255, 255, .5 );
cursor: pointer;
}Il modulo di accesso ora ha un bell’aspetto. Si consiglia di lasciare il modulo così semplice. Invece di aggiungere altri elementi e ingombrare la pagina, puoi aggiungere il logo della tua attività e una singola immagine. I visitatori tendono ad essere distratti da così tanti dettagli. Ergo, vorrai avere una pagina di accesso al sito web che sia il più semplice possibile ma comunque bella e allettante che faccia tornare i visitatori. Puoi prendere esempi di moduli di accesso da alcuni siti Web popolari come Snoggle News, Dropbox, Freshbooks, MailChimp e Theidealist tra gli altri. Anche siti web come Google e Facebook hanno utilizzato lo stile minimalista e le loro pagine di accesso hanno un bell’aspetto con solo un modulo di accesso, il logo dell’azienda e pochi altri dettagli.
Caselle di accesso jQuery
Le caselle di accesso jQuery sono state utilizzate su un gran numero di siti Web e hanno sempre un aspetto innovativo e hanno trovato la loro strada nei design dei moduli di accesso dei siti Web new-age. Sembrano semplici ma eleganti. A differenza del passato, al giorno d’oggi il login avviene in una semplice pagina e non devi preoccuparti di eventuali battute d’arresto di jQuery.
Con jQuery, puoi creare un pulsante di accesso sulla home page del tuo sito Web, che indirizza i tuoi visitatori alla pagina di accesso che è alimentata da jQuery. Il modulo contiene una chiamata Ajax e utilizza uno script PHP esterno per verificare le credenziali di accesso per concedere o negare l’accesso. Con jQuery, è facile aggiungere un link di registrazione appena sotto la casella di accesso. Ciò rende il processo più fluido e consente all’utente un’esperienza fluida. I tuoi visitatori troveranno facile individuare la pagina di registrazione/iscrizione sul tuo sito web. Puoi anche utilizzare la stessa casella di accesso per accedere al tuo account.
Proprio come quando utilizzi HTML e CSS per creare e modellare la tua pagina di accesso, devi avere la casella di accesso qui che parli un po’ della tua attività in un modo che non ingombra la pagina. Il modulo di accesso che crei con jQuery è semplice e ha un bell’aspetto. Tuttavia, dovrai aggiungere un’immagine o solo il logo della tua attività per renderlo più accattivante. Le pagine di login dovrebbero essere user-friendly.
Modelli di moduli di accesso per Website Builder
Il miglior modo per i principianti di creare un modulo di accesso accattivante è attraverso i modelli di modulo di accesso del costruttore di siti web. Qui non è necessario conoscere la codifica e non è nemmeno necessario aver mai creato nessun altro sito Web; i moduli di accesso vengono creati con il clic di un pulsante. Costruttori di siti web come Weebly e WordPress offrono moduli freemium e premium.
Per creare la pagina di accesso, installa i plug-in del modulo e quindi visita la pagina delle impostazioni del modello/plug-in per personalizzarlo a tuo piacimento. In WordPress, sarà necessario installare WPForms e quindi inserire il codice di acquisto per verificare. Visita la pagina delle impostazioni e fai clic su Componenti aggiuntivi. Qui puoi aggiungere qualsiasi elemento tu voglia. Fai clic su Componente aggiuntivo registrazione utente e sei a posto.
Fai clic su "Crea nuova pagina" e seleziona il modulo "login utente". Apparirà un modello con tutti i campi pre-creati e tutto ciò che devi fare è fare clic su un campo per modificarlo. Dopo aver modificato ciascun campo, fai clic sul scheda delle impostazioni e decidi cosa deve accadere dopo che un visitatore ha effettuato l’accesso; puoi indirizzarlo a un determinato URL.
Dopo aver creato il modulo, crea una nuova pagina per il modulo di accesso. Apparirà un editor e nella parte superiore di esso, fai clic su "aggiungi modulo". Apparirà un popup e potrai selezionare il modulo appena creato. Puoi continuare a modificare la pagina per soddisfare meglio le tue esigenze oppure puoi salvare e pubblicare. Puoi aggiungere il login personalizzato che hai appena creato come widget nella barra laterale del tuo sito web.
Quando si ha a che fare con i modelli di accesso forniti dal costruttore del sito Web, il processo è più o meno lo stesso; installa il template, modificalo a tuo piacimento, crea una nuova pagina e inserisci il form creato. Questo è raccomandato per coloro che sono nuovi nel design del sito web.
Temi e plugin di terze parti
Temi
Il tuo costruttore di siti Web potrebbe aver fornito un modello o un tema di accesso, gratuito o premium, ma potrebbe non soddisfare le tue esigenze. Fortunatamente, ci sono numerosi temi e plugin di terze parti specialmente per WordPress. I temi sono come modelli per l’intero sito Web che portano stili diversi e con la maggior parte di essi sarai in grado di ottenere una pagina di accesso elegante e attraente; Il tema non influisce solo sulla pagina di accesso, ma anche su altri aspetti del tuo sito web.
Dovrai scegliere un tema con una pagina di accesso che ami. La cosa buona è che con la maggior parte dei temi, puoi fare un tour delle funzionalità prima dell’installazione. I temi costano da $ 2 a più di $ 100. I temi, proprio come i modelli di web builder, sono facili da modificare. Puoi modificare i colori, i caratteri e le dimensioni del design a tuo piacimento e gusto.
I temi possono provenire dal tuo costruttore di siti Web, temi premium o possono provenire da sviluppatori di terze parti come Themeforest.
Plugin
I plugin sono semplici; a differenza dei temi che interessano quasi tutti gli aspetti del tuo sito web, ci sono plugin per diversi aspetti del tuo sito web. Ergo, puoi installare un plugin solo per creare un form di login o un form di registrazione. I plugin sono disponibili gratuitamente e alcuni sono premium; scegline uno in base al tuo budget e alle tue esigenze.
Tutti i costruttori di siti Web avranno plug-in tra cui scegliere; che tu stia utilizzando Weebly, Joomla o WordPress, ci sono numerosi temi. Per creare una pagina di accesso utilizzando un plug-in, visita la tua dashboard per visualizzare l’elenco dei plug-in disponibili per il tuo costruttore di siti web. Installa il plug-in che desideri e verrai indirizzato a una pagina di pagamento in cui paghi per il plug-in.
Dopo aver installato il plugin, ti verrà chiesto di modificare i diversi elementi; fare clic su ciascun elemento da modificare e quindi fare clic su salva modifiche. Crea una nuova pagina e aggiungi il modulo che hai creato utilizzando il plug-in.
Conclusione
Una pagina di accesso deve essere semplice tanto quanto accattivante. Nel recente passato sono stati osservati diversi design della pagina di accesso. Scegli solo il metodo di creazione della pagina di accesso con cui ti senti a tuo agio; non scegliere di codificare se non sei esperto di codici. Puoi ottenere assistenza per la progettazione da un professionista, ma ancora meglio, puoi ottenere assistenza per la progettazione della tua pagina di accesso.
Le persone hanno anche utilizzato gli accessi social. Qui, consenti ai visitatori di accedere con i dettagli del loro account di social media come Facebook o Twitter. Anche questa è una buona opzione visto che è abbastanza semplice e migliora anche la presenza e le prestazioni dei social media della tua azienda. Puoi controllare le pagine di accesso dei siti Web più diffusi per ottenere informazioni su come definire lo stile della pagina di accesso del tuo sito Web; senza ingombrarlo e senza tralasciare dettagli.