Kuidas luua oma veebisaidile ilus kohandatud sisselogimisleht
Sisselogimisleht, nagu ka veebisaidi maandumisleht, on väga oluline ettevõtete omanikele, kes soovivad liiklust teisendada. Nii nagu sihtleht, peab ka sisselogimisleht olema keerukas, et külastajad saaksid lihtsalt oma andmed ilma suurema vaevata esitada.
Enamik parimaid sisselogimislehti on lihtsad, neil on kasutatud minimalistlikku stiili ilma reklaamide ja turundustrikkideta; lihtsalt sisselogimisvorm koos taustapildiga või kahega.
Sisselogimislehtede loomiseks on mitu erinevat viisi, mis meelitavad külastajaid ja julgustavad neid tagasi tulema.
- Kui oskate hästi kodeerida (lihtne HTML ja CSS ), peaksite suutma luua lihtsa, kuid ahvatleva sisselogimislehe mõne põhikoodiga.
- Algajatel on lihtsam kohandada veebisaidi koostaja malliga kaasasolevat sisselogimislehte. Enamik veebisaitide koostajaid ja malle (WordPress, Weebly, Shopify, Joomla jt) on varustatud valmismallidega ning teil on vaja ainult neid oma vajadustele vastavaks muuta.
- Sisselogimislehe loomiseks saate kasutada ka lihtsaid pistikprogramme ja teemasid. Pluginad on head, kuna võimaldavad teil oma sisselogimislehte ühe nupuvajutusega kohandada. Neid saavad kasutada nii algajad kui ka kogenud veebidisainerid.
Veebisaidi sisselogimislehe kohandamiseks valitud meetodi määrab teie oskuste tase. Kuigi ühe inimese jaoks võib kodeerimine olla hea meetod, ei pruugi teine teada, kuhu see kood paigutada. Pluginad on head, kuid mõned on esmaklassilised.
Lugege edasi, et saada teada, kuidas saate luua ja kohandada ilusat sisselogimislehte.
Kasutage lihtsat HTML-i/CSS-i
Sisselogimisvormi loomine ja kohandamine HTML-is ja CSS-is toimub kolme lihtsa sammuga: tegelege HTML-i märgistusega, paigutage sisselogimisvormi erinevad elemendid ja lõpuks kujundage erinevad elemendid nii, et need näeksid ahvatlevad.
HTML-i märgistus
Siin lisate tegeliku vormi loomiseks lihtsad HTML-sildid. HTML-i osa koosneb konteinerist, vormist endast ja paarist muust sisendist. Koodi õigesti sisestades saate luua lihtsa sisselogimisvormi koos kasutajanime osa, parooliosa, linnukese ja sisselogimisnupuga. Komponendid pole aga hästi paigutatud.
Elementide positsioneerimine
Seejärel saate vormi erinevaid osi stiilida, lisades lihtsa koodi, nagu allpool toodud. See asetab erinevad komponendid erinevatesse kohtadesse.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Pärast seda saate paigutada oma sisselogimislehe erinevad elemendid vastavalt oma spetsifikatsioonidele. Kõigepealt peate määrama põhielemendid, nagu fondi värv, ja seejärel asetama vormi tasakaalu tagamiseks lehe keskele. Siin saate lisada mis tahes meelepärase fondivärvi, mida iganes ilusaks peate. Siiski on alati soovitatav jälgida, et vorm oleks lihtne, et külastajaid mitte segadusse ajada.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}Siinkohal võib vorm endiselt veider välja näha ja saate seda paremaks muuta, lisades veidi struktuurset stiili. Selleks veenduge kõigepealt, et teie sisselogimisvormi elemendid ei oleks kokku surutud ja oleksid kergesti loetavad. Vormi puhtuse tagamiseks saate lisada järgmise koodi.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Teie sisselogimisvorm näeb nüüd välja lihtne ja peaaegu täielik, kuna erinevad elemendid on hästi paigutatud. Siiski peate oma sisselogimisvormi erinevaid sisestusalasid kujundama, et need veelgi paremad välja näeksid. Siin määrate värvi, fondi suuruse, lisate polstri, veerised, erinevate elementide laiuse ja muud põhitõed, näiteks värvi, mis kuvatakse hiirekursori hõljutamisel või elemendil klõpsamisel. Lisage allolev kood.
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;
}Kuna soovite, et teie sisselogimisleht näeks veelgi ilusam välja, saate lisada veidi rohkem kohandusi, et sisselogimisnupp ja märkeruut veidi stiilsed välja näeksid. Lisage järgmine kood.
#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;
}
Stiilige vormielemendid
Sel hetkel on elemendid hästi paigutatud ja näevad piisavalt keerukad välja. Sisselogimisvorm on valmis, kuid saate selle siiski veidi ilusamaks muuta, lisades CSS-i stiilikoode. Protsessi saate alustada, muutes konteineri nurgad ümaraks ja seejärel andes sellele varju, et parandada selle välimust ja tuua esile sügavuse tunne. Selleks sisestage see kood allpool konteineri alale.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Ülaltoodud koodi lisamine konteineri alale muudab konteineri koodi järgmiseks:
#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 );Kui olete konteineri stiili kujundanud, saate nüüd stiilida erinevaid sisestusalasid sarnase koodiga. Lisage allolev kood ja teie sisestusalad näevad palju ilusamad kui alguses.
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;
}Nüüd näeb kogu parooli sisestuskood välja selline, nagu allpool. Sisselogimisvorm näeb vinge välja, kuid on veel rohkem stiili, mida saate teha, et oma vormi välimust veelgi täiustada.
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;
}Nüüd peate muutma sisselogimisnupu paremaks ja selgemaks. Selleks sisestage oma koodi esitamise jaotisesse allolev kood.
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;
}Kogu teie esitamise jaotise kood näeb välja nagu allolev ja olete muutnud oma sisselogimisnupu värvi ja muid aspekte ning teil on lihtne sisselogimisvorm, nagu allolev.
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;
}Sisselogimisvorm näeb nüüd hea välja. Soovitav on jätta vorm nii lihtsaks. Muude elementide lisamise ja lehe risustamise asemel saate lisada oma ettevõtte logo ja ühe pildi. Külastajaid kipuvad segama nii paljud üksikasjad. Seetõttu soovite oma veebisaidi sisselogimislehte, mis on võimalikult lihtne, kuid siiski ilus ja ahvatlev, pannes külastajad uuesti tagasi tulema. Võite võtta sisselogimisvormide näiteid mõnelt populaarselt veebisaidilt, nagu Snoggle News, Dropbox, Freshbooks, MailChimp ja Theidealist. Veebisaidid, nagu Google ja Facebook, on samuti kasutanud minimalistlikku stiili ning nende sisselogimislehed näevad suurepärased välja ainult sisselogimisvormi, ettevõtte logo ja mõne muu detailiga.
jQuery sisselogimiskastid
jQuery sisselogimiskaste on kasutatud paljudel veebisaitidel ja need näevad alati uuenduslikud välja ning on leidnud tee uue ajastu veebisaitide sisselogimisvormide kujundustesse. Nad näevad välja lihtsad, kuid stiilsed. Erinevalt varasemast toimub sisselogimine tänapäeval lihtsal lehel ja te ei pea kartma jQuery tagasilöökide pärast.
jQuery abil saate luua oma veebisaidi avalehele sisselogimisnupu, mis suunab teie külastajad jQuery toega sisselogimislehele. Vorm sisaldab Ajaxi kõnet ja kasutab välist PHP-skripti, et kontrollida juurdepääsu andmiseks või keelamiseks sisselogimise mandaate. jQuery abil on lihtne lisada registreerimislink vahetult sisselogimiskasti alla. See muudab protsessi sujuvamaks ja annab kasutajale sujuva kogemuse. Teie külastajatel on teie veebisaidil registreerimis-/registreerimislehe leidmine lihtne. Sama sisselogimiskasti saate kasutada ka oma kontole juurdepääsuks.
Täpselt nagu siis, kui kasutate oma sisselogimislehe loomiseks ja stiiliks HTML-i ja CSS-i, peab ka siin olev sisselogimiskast rääkima teie ettevõttest veidi nii, et see lehte ei segaks. JQueryga loodud sisselogimisvorm on lihtne ja näeb ilus välja. Siiski peate lisama pildi või lihtsalt oma ettevõtte logo, et muuta see atraktiivsemaks. Sisselogimislehed peaksid olema kasutajasõbralikud.
Veebisaidi koostaja sisselogimisvormi mallid
Parim algajasõbralik viis ahvatleva sisselogimisvormi loomiseks on veebisaidi koostaja sisselogimisvormi mallide kaudu. Siin ei pea te teadma kodeerimist ja te ei pea isegi olema kunagi loonud ühtegi teist veebisaiti; sisselogimisvormid luuakse ühe nupuvajutusega. Veebisaitide koostajad, nagu Weebly ja WordPress, pakuvad freemium- ja premium-vorme.
Sisselogimislehe loomiseks installige vormipluginad ja seejärel külastage malli/plugina seadete lehte, et seda oma maitse järgi kohandada. WordPressis peate installima WPForms ja seejärel sisestama kinnitamiseks oma ostukoodi. Külastage seadete lehte ja klõpsake nuppu Lisad. Siin saate lisada mis tahes soovitud elemendi. Klõpsake nuppu User Registration Addon ja oletegi valmis.
Klõpsake “Loo uus leht” ja seejärel valige vorm “kasutaja sisselogimine”. Ilmub mall koos kõigi eelnevalt loodud väljadega ja selle muutmiseks peate vaid klõpsama väljal. Pärast iga välja muutmist klõpsake seadete vahekaardil ja otsustada, mis peaks juhtuma pärast seda, kui külastaja on sisse loginud; saate suunata nad teatud URL-ile.
Pärast vormi loomist looge sisselogimisvormi jaoks uus leht. Ilmub redaktor ja selle ülaosas klõpsake “Lisa vorm”. Ilmub hüpikaken ja saate valida just loodud vormi. Saate jätkata lehe muutmist, et see vastaks teie vajadustele paremini, või salvestada ja avaldada. Saate lisada just loodud kohandatud sisselogimisandmed vidinana oma veebisaidi külgribale.
Veebisaidi koostaja pakutavate sisselogimismallidega tegelemisel on protsess enam-vähem sama; installige mall, muutke seda oma maitse järgi, looge uus leht ja sisestage loodud vorm. See on soovitatav neile, kes on veebisaidi kujundamises uued.
Kolmanda osapoole teemad ja pistikprogrammid
Teemad
Teie veebisaidi koostaja võib olla andnud sisselogimismalli või teema tasuta või tasulisena, kuid see ei pruugi teie vajadustele vastata. Õnneks on spetsiaalselt WordPressi jaoks palju kolmanda osapoole teemasid ja pistikprogramme . Teemad on nagu kogu veebisaidi mallid, mis toovad sisse erinevaid stiile ja enamiku neist saate stiilse ja atraktiivse sisselogimislehe; teema ei mõjuta mitte ainult sisselogimislehte, vaid ka muid teie veebisaidi aspekte.
Peate valima meeldiva sisselogimislehega teema. Hea on see, et enamiku teemade puhul saate enne installimist tutvuda funktsioonidega. Teemad maksavad midagi vahemikus $ 2 kuni rohkem kui 100 $. Teemasid, nagu ka veebiehitaja malle, on lihtne redigeerida. Saate muuta kujunduse värve, fonte ja suurusi vastavalt oma maitsele ja maitsele.
Teemad võivad pärineda teie veebisaidi koostajalt, esmaklassilistelt teemadelt või kolmandate osapoolte arendajatelt, näiteks Themeforest.
Pluginad
Pluginad on lihtsad; Erinevalt teemadest, mis mõjutavad peaaegu kõiki teie veebisaidi aspekte, on teie veebisaidi erinevate aspektide jaoks olemas pistikprogrammid. Seega saate installida plugina lihtsalt sisselogimisvormi või registreerimisvormi loomiseks. Pluginad on saadaval tasuta ja mõned on esmaklassilised; valige üks oma eelarvest ja vajadustest lähtuvalt.
Kõigil veebisaitide koostajatel on pistikprogrammid, mille vahel saate valida; Olenemata sellest, kas kasutate Weeblyt, Joomlat või WordPressi, on palju teemasid. Pistikprogrammi abil sisselogimislehe loomiseks külastage oma armatuurlauda, et vaadata veebisaidi koostaja jaoks saadaolevate pistikprogrammide loendit. Installige soovitud pistikprogramm ja teid suunatakse kassalehele, kus maksate pistikprogrammi eest.
Pärast pistikprogrammi installimist palutakse teil redigeerida erinevaid elemente; klõpsake igal redigeerimiseks elemendil ja seejärel klõpsake nuppu Salvesta muudatused. Looge uus leht ja lisage pistikprogrammi abil loodud vorm.
Järeldus
Sisselogimisleht peab olema nii lihtne kui ka ahvatlev. Viimasel ajal on olnud erinevaid sisselogimislehtede kujundusi. Valige ainult teile sobiv sisselogimislehe loomise meetod; ära vali kodeerimist, kui sa pole koodidega hästi kursis. Kujundusabi saate professionaalilt, kuid mis veelgi parem, saate abi oma sisselogimislehe kujundamisel.
Inimesed on kasutanud ka sotsiaalseid sisselogimisi. Siin saate külastajatel sisse logida oma sotsiaalmeedia konto andmetega, nagu Facebook või Twitter. See on ka hea valik, kuna see on piisavalt lihtne ja suurendab ka teie ettevõtte kohalolekut sotsiaalmeedias ja toimivust. Saate vaadata populaarsete veebisaitide sisselogimislehti, et saada teavet veebisaidi sisselogimislehe stiili kujundamise kohta; ilma seda segamata ja detaile välja jätmata.