Cum să creați o pagină de conectare personalizată frumoasă pentru site-ul dvs. web
Publicat: 2017-08-10Pagina de autentificare, la fel ca pagina de destinație a unui site web, este foarte importantă pentru proprietarii de afaceri care doresc să convertească traficul. La fel ca pagina de destinație, pagina de autentificare trebuie să fie sofisticată pentru ca vizitatorii să-și furnizeze doar detaliile fără prea multe bătăi de cap.
Majoritatea celor mai bune pagini de conectare sunt simple, au folosit un stil minimalist, fără reclame și trucuri de marketing; doar formularul de conectare cu o imagine de fundal sau două.
Există câteva moduri diferite de a crea pagini de conectare care atrag vizitatorii și îi încurajează să revină.
- Dacă sunteți bun la codificare (HTML simplu și CSS), ar trebui să puteți crea o pagină de conectare simplă, dar atrăgătoare, cu câteva coduri de bază.
- Pentru începători, este mai ușor să personalizezi pagina de conectare care vine cu șablonul constructorului de site-uri web. Majoritatea constructorilor și șabloanelor de site-uri web ( WordPress , Weebly , Shopify , Joomla și altele) vin cu șabloane gata și tot ce trebuie să faceți este să le editați pentru a vă satisface nevoile.
- De asemenea, puteți utiliza pluginuri și teme simple pentru a crea o pagină de conectare. Pluginurile sunt bune, deoarece vă permit să vă personalizați pagina de autentificare cu un clic pe un buton. Ele pot fi folosite de începători, precum și de designeri web experimentați.
Metoda pe care o alegeți pentru a vă personaliza pagina de conectare a site-ului dvs. va fi determinată de nivelul dvs. de calificare. În timp ce codificarea poate fi o metodă bună pentru o persoană, alta poate să nu știe unde să plaseze ce cod. Pluginurile sunt bune, dar unele sunt premium.
Citiți mai departe pentru a afla cum puteți crea și personaliza o pagină frumoasă de conectare.
Utilizați HTML/CSS simplu
Crearea și personalizarea unui formular de autentificare în HTML și CSS se face în trei pași simpli: gestionați marcajul HTML, poziționați diferitele elemente ale formularului de conectare și, în sfârșit, stilați diferitele elemente pentru a le face să arate atrăgătoare.
Marcaj HTML
Aici, veți adăuga etichete HTML simple pentru a crea formularul real. Partea HTML constă dintr-un container, formularul în sine și alte câteva intrări. Introducând codul corect, veți putea crea un formular simplu de conectare cu o parte de nume de utilizator, o parte de parolă, o casetă de selectare și un buton de conectare. Componentele, însă, nu sunt bine aranjate.
<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>
Poziţionarea Elementelor
Puteți apoi să stilați diferitele părți ale formularului adăugând un cod simplu precum cel de mai jos. Acest lucru va plasa diferitele componente în poziții diferite.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}
După aceasta, puteți poziționa diferitele elemente ale paginii dvs. de autentificare conform specificațiilor dvs. În primul rând, va trebui să specificați elementele de bază, cum ar fi culoarea fontului și apoi să poziționați formularul în centrul paginii pentru echilibru. Aici, puteți adăuga orice culoare de font doriți, indiferent ce considerați frumos. Cu toate acestea, este întotdeauna recomandabil să vă asigurați că formularul rămâne simplu pentru a nu deruta vizitatorii.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}
În acest moment, forma poate arăta în continuare neplăcută și o puteți îmbunătăți adăugând un pic de stil structural. Pentru a face acest lucru, începeți prin a vă asigura că elementele formularului dvs. de conectare nu sunt strânse împreună și sunt ușor de citit. Puteți adăuga următorul cod pentru a vă asigura acea claritate pe formular.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}
Formularul dvs. de conectare va arăta acum simplu și aproape complet, cu diferitele elemente bine poziționate. Cu toate acestea, trebuie să stilați diferitele zone de intrare ale formularului de autentificare pentru a le face să arate și mai bine. Aici, veți specifica culoarea, dimensiunea fontului, adăugați o umplutură, margini, lățimea diferitelor elemente și alte elemente de bază, cum ar fi culoarea care apare atunci când treceți mouse-ul sau faceți clic pe un element. Adăugați codul de mai jos.
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;
}
Deoarece doriți ca pagina dvs. de autentificare să arate și mai frumoasă, puteți adăuga puțin mai multe personalizări pentru ca butonul de conectare și caseta de selectare să arate puțin elegant. Adăugați următorul cod.
#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;
}
Stilați elementele de formular
În acest moment, elementele sunt bine poziționate și arată suficient de sofisticate. Formularul de conectare este gata, dar îl puteți face un pic mai frumos adăugând coduri de stil CSS. Puteți începe procesul făcând containerului colțuri rotunjite și apoi oferindu-i o umbră pentru a-și îmbunătăți aspectul și a scoate un sentiment de profunzime. Pentru a face acest lucru, introduceți acest cod de mai jos în zona containerului.
background: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
Adăugarea codului de mai sus în zona containerului va face ca codul containerului să arate ca cel de mai jos:
#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 );
După ce ați modelat containerul, acum puteți stila diferitele zone de intrare cu un cod similar. Adăugați codul de mai jos și zonele dvs. de introducere vor arăta mult mai frumos decât erau la început.
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; }
Acum, întregul cod de introducere a parolei va arăta ca cel de mai jos. Formularul de autentificare va arăta minunat, dar există încă mai multe stiluri pe care le puteți face pentru a îmbunătăți aspectul formularului și mai mult.
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;
}
Acum trebuie să faceți butonul de conectare să arate mai bine și distinct. Pentru a face acest lucru, introduceți codul de mai jos în secțiunea de trimitere a codului dvs.
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; }
Întregul cod al secțiunii de trimitere va arăta ca cel de mai jos și ți-ai schimbat culoarea butonului de autentificare și alte aspecte și vei avea un formular simplu de autentificare ca cel de mai jos.
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;
}
Formularul de conectare arată acum bine. Este recomandabil să lăsați formularul atât de simplu. În loc să adăugați alte elemente și să aglomerați pagina, puteți adăuga sigla companiei dvs. și o singură imagine. Vizitatorii tind să fie distrași de atâtea detalii. Prin urmare, veți dori să aveți o pagină de conectare a site-ului care este cât se poate de simplă, dar totuși frumoasă și atrăgătoare, făcând vizitatorii să revină. Puteți lua exemple de formulare de conectare de pe unele site-uri web populare, cum ar fi Snoggle News , Dropbox , Freshbooks , MailChimp și Theidealist , printre altele. Site-urile web precum Google și Facebook au folosit, de asemenea, stilul minimalist, iar paginile lor de conectare arată grozav doar cu un formular de conectare, logo-ul companiei și alte câteva detalii.
Casete de conectare jQuery
Casetele de autentificare jQuery au fost folosite pe un număr mare de site-uri web și sunt întotdeauna inovatoare și și-au găsit drumul în modelele de formulare de autentificare ale site-urilor nou-age. Arata simplu, dar elegant. Spre deosebire de trecut, autentificarea se face în zilele noastre într-o pagină simplă și nu trebuie să vă faceți griji cu privire la eventualele eșecuri jQuery.
Cu jQuery, puteți crea un buton de conectare pe pagina de pornire a site-ului dvs., care vă direcționează vizitatorii către pagina de conectare care este alimentată de jQuery. Formularul conține apel Ajax și folosește un script PHP extern pentru a verifica datele de conectare pentru a acorda sau a refuza accesul. Cu jQuery, este ușor să adăugați un link de înregistrare chiar sub caseta de conectare. Acest lucru face procesul mai ușor și permite utilizatorului o experiență lină. Vizitatorilor tăi le va fi ușor să găsească pagina de înregistrare/înregistrare pe site-ul tău. De asemenea, puteți utiliza aceeași casetă de conectare pentru a vă accesa contul.
La fel ca atunci când utilizați HTML și CSS pentru a crea și a stila pagina dvs. de autentificare, trebuie să aveți caseta de autentificare aici să vorbească puțin despre afacerea dvs. într-un mod care să nu aglomereze pagina. Formularul de conectare pe care îl creați cu jQuery este simplu și arată frumos. Cu toate acestea, va trebui să adăugați o imagine sau doar logo-ul afacerii dvs. pentru a o face mai atrăgătoare. Paginile de conectare ar trebui să fie ușor de utilizat.
Șabloane de formulare de conectare pentru constructorul de site-uri web
Cel mai bun mod prietenos pentru începători de a crea un formular de autentificare atrăgător este prin șabloanele de formulare de conectare ale constructorului de site-uri web. Aici, nu trebuie să știi codificare și nici măcar nu trebuie să fi creat vreodată un alt site web; formularele de conectare sunt create cu un clic pe un buton. Creatorii de site-uri web precum Weebly și WordPress oferă formulare freemium și premium.
Pentru a crea pagina de autentificare, instalați pluginurile de formular și apoi vizitați pagina de setări a șablonului/pluginului pentru a-l personaliza după bunul plac. În WordPress, va trebui să instalați WPForms și apoi să introduceți codul de achiziție pentru a verifica. Vizitați pagina de setări și faceți clic pe Addons. Aici, puteți adăuga orice element doriți. Faceți clic pe Supliment pentru înregistrarea utilizatorului și sunteți gata.
Faceți clic pe „Creați o pagină nouă” și apoi selectați formularul de „autentificare utilizator”. Va apărea un șablon cu toate câmpurile pre-create și tot ce trebuie să faceți este să faceți clic pe un câmp pentru a-l edita. După editarea fiecărui câmp, faceți clic pe fila de setări și decideți ce ar trebui să se întâmple după ce un vizitator s-a conectat; le puteți direcționa către o anumită adresă URL.
După ce ați creat formularul, creați o pagină nouă pentru formularul de conectare. Va apărea un editor și în partea de sus, faceți clic pe „adăugați formular”. Va apărea o fereastră pop-up și puteți selecta formularul pe care tocmai l-ați creat. Puteți continua să editați pagina pentru a vă satisface mai bine nevoile sau puteți salva și publica. Puteți adăuga datele de conectare personalizate pe care tocmai le-ați creat ca widget pe bara laterală a site-ului dvs. web.
Când aveți de-a face cu șabloanele de autentificare furnizate de către constructorul de site-uri web, procesul este mai mult sau mai puțin același; instalați șablonul, editați-l după bunul plac, creați o pagină nouă și introduceți formularul creat. Acest lucru este recomandat celor care sunt noi în designul site-urilor web.
Teme și pluginuri de la terți
Teme
Este posibil ca constructorul dvs. de site-uri web să fi furnizat un șablon sau o temă de conectare, gratuit sau premium, dar este posibil să nu vă satisfacă nevoile. Din fericire, există numeroase teme și pluginuri terțe, în special pentru WordPress. Temele sunt ca șabloanele pentru întregul site web care aduc stiluri diferite și cu majoritatea dintre ele, vei putea obține o pagină de autentificare elegantă și atractivă; tema nu afectează numai pagina de conectare, ci și alte aspecte ale site-ului dvs.
Va trebui să alegeți o temă cu o pagină de conectare care vă place. Lucrul bun este că, cu majoritatea temelor, puteți face un tur al funcțiilor înainte de a le instala. Temele costă între 2 USD și până la mai mult de 100 USD. Temele, la fel ca șabloanele web builder, sunt ușor de editat. Puteți modifica culorile designului, fonturile și dimensiunile după bunul plac și gusturile dvs.
Temele pot fi de la generatorul de site-uri web, teme premium sau pot fi de la dezvoltatori terți, cum ar fi Themeforest .
Pluginuri
Pluginurile sunt simple; Spre deosebire de temele care afectează aproape toate aspectele site-ului dvs., există pluginuri pentru diferite aspecte ale site-ului dvs. Prin urmare, puteți instala un plugin doar pentru a crea un formular de conectare sau un formular de înregistrare. Pluginurile sunt disponibile gratuit, iar unele sunt premium; alege unul în funcție de bugetul și nevoile tale.
Toți creatorii de site-uri web vor avea pluginuri din care să alegeți; indiferent dacă utilizați Weebly , Joomla sau WordPress , există numeroase teme. Pentru a crea o pagină de conectare utilizând un plugin, accesați tabloul de bord pentru a vedea lista de pluginuri disponibile pentru constructorul de site-uri web. Instalați pluginul pe care îl doriți și veți fi dus la o pagină de plată unde plătiți pentru plugin.
După instalarea pluginului, vi se va solicita să editați diferitele elemente; faceți clic pe fiecare element pentru a edita și apoi faceți clic pe Salvați modificările. Creați o pagină nouă și adăugați formularul pe care l-ați creat folosind pluginul.
Concluzie
O pagină de conectare trebuie să fie simplă la fel de mult pe cât trebuie să fie atrăgătoare. În trecutul recent, au fost observate diferite modele de pagini de autentificare. Alegeți doar metoda de creare a paginii de autentificare cu care vă simțiți confortabil; nu alegeți să codificați dacă nu sunteți bine versat cu coduri. Puteți obține asistență pentru proiectare de la un profesionist, dar și mai bine, puteți obține ajutor pentru proiectarea paginii de autentificare.
Oamenii au folosit și autentificarea socială. Aici, le permiteți vizitatorilor să se conecteze cu detaliile contului lor de rețele sociale, cum ar fi Facebook sau Twitter. Aceasta este și o opțiune bună, având în vedere că este suficient de simplă și, de asemenea, îmbunătățește prezența și performanța pe rețelele sociale ale companiei tale. Puteți consulta paginile de conectare ale site-urilor web populare pentru a obține informații despre cum să stilați pagina de autentificare a site-ului dvs.; fără să-l aglomerați și fără a omite detalii.