Come creare una bella pagina di accesso personalizzata per il tuo sito web

Pubblicato: 2017-08-10

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 impiegato uno stile minimalista senza pubblicità e espedienti di marketing; solo il login nel modulo con una o due immagini di sfondo.

Esistono diversi modi per creare pagine di accesso che corteggiano i visitatori e li incoraggiano 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ù facile 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) sono dotati di modelli 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 il semplice clic di un pulsante. Possono essere utilizzati da principianti e web designer esperti.

Il metodo che scegli per personalizzare la pagina di accesso del tuo 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 semplice

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

Marcatura HTML

Qui aggiungerai semplici tag HTML per creare il modulo vero e proprio. La parte HTML consiste in un contenitore, il modulo stesso e un paio di altri input. Inserendo correttamente il codice, potrai creare un semplice form di login con una parte username, una parte password, una checkbox e un pulsante di login. 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

È quindi possibile definire lo stile delle diverse parti del modulo aggiungendo un codice semplice come quello riportato di seguito. 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 del 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 insieme e siano facilmente leggibili. È possibile aggiungere il codice seguente 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 ora apparirà semplice e quasi completo con i diversi elementi ben posizionati. Tuttavia, è necessario modificare lo stile delle varie aree di input del modulo di accesso per renderle ancora migliori. Qui specificherai il colore, la dimensione del carattere, aggiungendo un po' di riempimento, margini, la larghezza dei diversi elementi e altre basi 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 sia 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 codice seguente.

#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;
}

Disegna gli elementi del modulo

A questo punto, gli elementi sono ben posizionati e sembrano abbastanza sofisticati. Il modulo di accesso è pronto ma puoi comunque renderlo un po' più bello aggiungendo codici di stile CSS. Puoi iniziare il processo facendo arrotondare gli angoli del contenitore e poi dargli un'ombra per migliorarne l'aspetto e far risaltare 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 sopra all'area del contenitore renderà il codice del contenitore simile a quello seguente:

#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 disegnato lo stile del contenitore, ora puoi modellare le 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 immissione della password sarà simile a quello qui sotto. Il modulo di accesso sarà 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 sembra a posto. 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 di nuovo 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 sono fantastiche 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 del sito Web new age. Sembrano semplici ma eleganti. A differenza del passato, l'accesso al giorno d'oggi 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 definire lo stile della tua pagina di accesso, devi fare in modo che la casella di accesso qui 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 accesso dovrebbero essere facili da usare.

Modelli di modulo di accesso per la creazione di siti Web

Il miglior modo per principianti per creare un modulo di accesso accattivante è attraverso i modelli di modulo di accesso del costruttore di siti Web. Qui non è necessario conoscere la programmazione e non è nemmeno necessario aver mai creato nessun altro sito web; i moduli di accesso vengono creati con un clic di un pulsante. I costruttori di siti Web come Weebly e WordPress offrono moduli gratuiti 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, dovrai 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 desideri. Fai clic su Componente aggiuntivo per la registrazione dell'utente e sei a posto.

Fai clic su "Crea nuova pagina" e quindi seleziona il modulo "accesso 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 ogni campo, fai clic sulla scheda delle impostazioni e decidi cosa dovrebbe accadere dopo che un visitatore ha effettuato l'accesso; puoi indirizzarli a un determinato URL.

Dopo aver creato il modulo, creare una nuova pagina per il modulo di accesso. Apparirà un editor e nella parte superiore, fai clic su "aggiungi modulo". Apparirà un popup e potrai selezionare il modulo che hai appena creato. Puoi continuare a modificare la pagina per soddisfare meglio le tue esigenze, oppure puoi salvarla e pubblicarla. 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 che hai creato. Questo è raccomandato per coloro che sono nuovi nella progettazione di siti 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 solo influisce 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 gusti.

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 modulo di accesso o un modulo 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 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 plugin.

Conclusione

Una pagina di accesso deve essere tanto semplice 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 aiuto per progettare la tua pagina di accesso.

Le persone hanno anche utilizzato 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 sui social media della tua azienda. Puoi controllare le pagine di accesso di siti Web popolari per ottenere informazioni dettagliate su come definire lo stile della pagina di accesso del tuo sito Web; senza ingombrarlo e senza tralasciare i dettagli.