Kuinka luoda kaunis räätälöity kirjautumissivu verkkosivustollesi
Kirjautumissivu, aivan kuten verkkosivuston aloitussivu, on erittäin tärkeä yritysten omistajille, jotka haluavat muuntaa liikennettä. Aivan kuten aloitussivun, myös kirjautumissivun on oltava hienostunut, jotta kävijät voivat vain antaa tietonsa ilman suurta vaivaa.
Useimmat parhaista kirjautumissivuista ovat yksinkertaisia, niissä on käytetty minimalistista tyyliä ilman mainoksia ja markkinointitemppuja; vain kirjautumislomake, jossa on taustakuva tai kaksi.
On olemassa muutamia eri tapoja luoda kirjautumissivuja, jotka houkuttelevat kävijöitä ja rohkaisevat heitä palaamaan.
- Jos olet hyvä koodaamassa (yksinkertainen HTML ja CSS ), sinun pitäisi pystyä luomaan yksinkertainen mutta houkutteleva kirjautumissivu muutamalla peruskoodilla.
- Aloittelijoille on helpompi muokata verkkosivuston rakentajan mallin mukana tulevaa kirjautumissivua. Useimmat verkkosivustojen rakentajat ja mallit (WordPress, Weebly, Shopify, Joomla ja muut) sisältävät valmiita malleja, ja sinun tarvitsee vain muokata niitä tarpeidesi mukaan.
- Voit myös käyttää yksinkertaisia laajennuksia ja teemoja kirjautumissivun luomiseen. Lisäosat ovat hyviä, koska niiden avulla voit mukauttaa kirjautumissivuasi napin painalluksella. Niitä voivat käyttää sekä aloittelijat että kokeneet web-suunnittelijat.
Tapa, jonka valitset verkkosivustosi kirjautumissivun mukauttamiseen, määräytyy taitotasosi mukaan. Vaikka koodaus voi olla hyvä tapa yhdelle henkilölle, toinen ei välttämättä tiedä, mihin koodi sijoitetaan. Plugins ovat hyviä, mutta jotkut ovat premium.
Lue, kuinka voit luoda kauniin kirjautumissivun ja muokata sitä.
Käytä Simple HTML/CSS:ää
Kirjautumislomakkeen luominen ja mukauttaminen HTML:ssä ja CSS:ssä tapahtuu kolmessa helpossa vaiheessa: käsittele HTML-merkintää, sijoita kirjautumislomakkeen eri elementit ja lopuksi muotoile eri elementit näyttämään houkuttelevilta.
HTML-merkintä
Täällä voit lisätä yksinkertaisia HTML-tageja todellisen lomakkeen luomiseksi. HTML-osa koostuu säilöstä, itse lomakkeesta ja muutamasta muusta syötteestä. Syöttämällä koodin oikein voit luoda yksinkertaisen kirjautumislomakkeen, jossa on käyttäjätunnusosa, salasanaosa, valintaruutu ja kirjautumispainike. Komponentit eivät kuitenkaan ole järjestetty hyvin.
<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>Elementtien sijoittaminen
Tämän jälkeen voit muotoilla lomakkeen eri osia lisäämällä alla olevan kaltaisen yksinkertaisen koodin. Tämä sijoittaa eri komponentit eri asentoihin.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Tämän jälkeen voit sijoittaa kirjautumissivusi eri elementit määritystesi mukaan. Ensinnäkin sinun on määritettävä peruselementit, kuten fontin väri, ja asetettava sitten lomake sivusi keskelle tasapainon saavuttamiseksi. Täällä voit lisätä minkä tahansa fontin värin, mitä pidät kauniina. On kuitenkin aina suositeltavaa varmistaa, että lomake on yksinkertainen, jotta kävijöitä ei hämmennetä.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}Tässä vaiheessa lomake saattaa vielä näyttää töykeältä, ja voit parantaa sitä lisäämällä hieman rakenteellista tyyliä. Tee tämä ensin varmistamalla, että kirjautumislomakkeesi elementit eivät puristu yhteen ja ovat helposti luettavissa. Voit lisätä seuraavan koodin varmistaaksesi lomakkeesi siisteyden.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Kirjautumislomakkeesi näyttää nyt yksinkertaiselta ja lähes täydelliseltä, ja eri elementit on sijoitettu hyvin. Sinun on kuitenkin muotoiltava kirjautumislomakkeesi eri syöttöalueet, jotta ne näyttävät entistä paremmilta. Täällä määrität värin, fontin koon, lisäät täyttöä, marginaaleja, eri elementtien leveyttä ja muita perustietoja, kuten värin, joka tulee näkyviin, kun viet hiiren osoitinta tai napsautat elementtiä. Lisää alla oleva koodi.
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;
}Koska haluat kirjautumissivusi näyttävän entistä kauniimmalta, voit lisätä hieman enemmän muokkauksia, jotta kirjautumispainike ja valintaruutu näyttävät hieman tyylikkäältä. Lisää seuraava koodi.
#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;
}Muotoile lomakeelementit
Tässä vaiheessa elementit ovat hyvin sijoitettuja ja näyttävät riittävän hienostuneilta. Kirjautumislomake on valmis, mutta voit silti tehdä siitä hieman kauniimman lisäämällä CSS-tyylikoodeja. Voit aloittaa prosessin tekemällä säiliön kulmat pyöristetyiksi ja antamalla sille sitten varjon parantaaksesi sen ulkonäköä ja tuomalla esiin syvyyden tunteen. Syötä tämä koodi alla olevaan säiliöalueeseen.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Yllä olevan koodin lisääminen säilöalueelle saa säilön koodin näyttämään alla olevan:
#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 );Kun olet muotoillut säilön, voit nyt muotoilla eri syöttöalueita samalla koodilla. Lisää alla oleva koodi, niin syöttöalueesi näyttävät paljon mukavammilta kuin alussa.
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;
}Nyt koko salasanan syöttökoodi näyttää alla olevalta. Kirjautumislomake näyttää upealta, mutta voit tehdä vielä enemmän tyyliä parantaaksesi lomakkeesi ulkoasua entisestään.
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;
}Sinun on nyt saatava kirjautumispainike näyttämään paremmalta ja selkeämmältä. Voit tehdä tämän kirjoittamalla alla olevan koodin koodisi lähetys-osioon.
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ähetysosion koko koodi näyttää alla olevalta ja olet vaihtanut kirjautumispainikkeesi väriä ja muita ominaisuuksia, ja sinulla on alla olevan kaltainen yksinkertainen kirjautumislomake.
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;
}Kirjautumislomake näyttää nyt hyvältä. Lomake kannattaa jättää näin yksinkertaiseksi. Sen sijaan, että lisäisit muita elementtejä ja sotkeisit sivua, voit lisätä yrityksesi logon ja yhden kuvan. Vierailijoita häiritsee niin monet yksityiskohdat. Haluat siis verkkosivuston kirjautumissivun, joka on niin yksinkertainen kuin se voi olla, mutta silti kaunis ja houkutteleva, joka saa kävijät palaamaan takaisin. Voit ottaa esimerkkejä kirjautumislomakkeista joistakin suosituista verkkosivustoista, kuten Snoggle News, Dropbox, Freshbooks, MailChimp ja Theidealist. Myös web-sivustot, kuten Google ja Facebook, ovat käyttäneet minimalistista tyyliä, ja niiden kirjautumissivut näyttävät upeilta pelkällä kirjautumislomakkeella, yrityksen logolla ja muutamalla muulla yksityiskohdalla.
jQuery-kirjautumislaatikot
jQuery Login Boxeja on käytetty useilla verkkosivustoilla, ja ne näyttävät aina innovatiivisilta ja ovat löytäneet tiensä uuden aikakauden verkkosivustojen kirjautumislomakemalleihin. Ne näyttävät yksinkertaisilta mutta tyylikkäiltä. Toisin kuin ennen, kirjautuminen tapahtuu nykyään yksinkertaisella sivulla, eikä sinun tarvitse huolehtia jQueryn vastoinkäymisistä.
jQueryn avulla voit luoda kirjautumispainikkeen verkkosivustosi etusivulle, joka ohjaa kävijät kirjautumissivulle, joka on jQuery-käyttöinen. Lomake sisältää Ajax-kutsun ja käyttää ulkoista PHP-komentosarjaa tarkistaakseen kirjautumistiedot käyttöoikeuden myöntämiseksi tai estämiseksi. jQueryn avulla on helppo lisätä rekisteröintilinkki kirjautumisruudun alle. Tämä tekee prosessista sujuvamman ja antaa käyttäjälle sujuvan kokemuksen. Vierailijoiden on helppo löytää verkkosivustosi rekisteröinti-/kirjautumissivu. Voit myös käyttää samaa kirjautumisruutua päästäksesi tilillesi.
Aivan kuten silloin, kun käytät HTML:ää ja CSS:ää kirjautumissivusi luomiseen ja tyyliin, sinun on annettava tässä oleva kirjautumisruutu kertoa hieman yrityksestäsi tavalla, joka ei sotke sivua. jQuerylla luomasi kirjautumislomake on yksinkertainen ja näyttää kauniilta. Sinun on kuitenkin lisättävä kuva tai pelkkä yrityksesi logo tehdäksesi siitä houkuttelevamman. Kirjautumissivujen tulee olla käyttäjäystävällisiä.
Web-sivuston rakentajan kirjautumislomakemallit
Paras aloittelijaystävällinen tapa luoda houkutteleva kirjautumislomake on verkkosivustojen rakentajan kirjautumislomakemallien avulla. Täällä sinun ei tarvitse osata koodausta, etkä edes tarvitse olla koskaan luonut muita verkkosivustoja; kirjautumislomakkeet luodaan napin painalluksella. Verkkosivustojen rakentajat, kuten Weebly ja WordPress, tarjoavat freemium- ja premium-lomakkeita.
Luo kirjautumissivu asentamalla lomakelaajennukset ja sitten käymällä mallin/laajennuksen asetussivulla muokataksesi sitä mieleiseksesi. WordPressissä sinun tulee asentaa WPForms ja antaa sitten ostokoodisi vahvistaaksesi. Vieraile asetussivulla ja napsauta Lisäosat. Täällä voit lisätä minkä tahansa elementin. Napsauta User Registration Addon, ja olet valmis.
Napsauta "Luo uusi sivu" ja valitse sitten "Käyttäjän sisäänkirjautuminen" -lomake. Näkyviin tulee malli, jossa kaikki kentät on valmiiksi luotu, ja sinun tarvitsee vain napsauttaa kenttää muokataksesi sitä. Kun olet muokannut jokaista kenttää, napsauta Asetukset-välilehti ja päättää, mitä pitäisi tapahtua vierailijan kirjautumisen jälkeen. Voit ohjata hänet tiettyyn URL-osoitteeseen.
Kun olet luonut lomakkeen, luo kirjautumislomakkeelle uusi sivu. Näkyviin tulee editori ja napsauta sen yläreunassa "Lisää lomake". Näyttöön tulee ponnahdusikkuna, ja voit valita juuri luomasi lomakkeen. Voit jatkaa sivun muokkaamista vastaamaan paremmin tarpeitasi tai voit tallentaa ja julkaista. Voit lisätä juuri luomasi mukautetun kirjautumistunnuksen widgetiksi verkkosivustosi sivupalkkiin.
Kun käsitellään verkkosivuston rakentajan toimittamia kirjautumismalleja, prosessi on enemmän tai vähemmän sama; asenna malli, muokkaa sitä mieleiseksesi, luo uusi sivu ja lisää luomasi lomake. Tätä suositellaan niille, jotka ovat uusia verkkosivustojen suunnittelussa.
Kolmannen osapuolen teemat ja laajennukset
Teemat
Verkkosivustosi rakentaja on saattanut tarjota kirjautumismallin tai teeman ilmaiseksi tai palkkiona, mutta se ei välttämättä vastaa tarpeitasi. Onneksi on olemassa lukuisia kolmannen osapuolen teemoja ja laajennuksia erityisesti WordPressille. Teemat ovat kuin malleja koko verkkosivustolle, jotka tuovat sisään erilaisia tyylejä ja useimmilla niistä saat tyylikkään ja houkuttelevan kirjautumissivun; teema ei vaikuta vain kirjautumissivuun, vaan myös muihin verkkosivustosi osa-alueisiin.
Sinun on valittava teema, jolla on suosikkisi kirjautumissivu. Hyvä asia on, että useimmilla teemoilla voit tutustua ominaisuuksiin ennen asennusta. Teemat maksavat jotain 2 dollarista yli 100 dollariin. Teemoja, kuten Web Builder -malleja, on helppo muokata. Voit muuttaa suunnittelun värejä, fontteja ja kokoja mielesi ja makusi mukaan.
Teemat voivat olla peräisin verkkosivustosi rakentajalta, premium-teemoilta tai kolmannen osapuolen kehittäjiltä, kuten Themeforest.
Plugins
Lisäosat ovat yksinkertaisia; toisin kuin teemoja, jotka vaikuttavat lähes kaikkiin sivustosi osa-alueisiin, sivustossasi on laajennuksia eri puolille. Voit siis asentaa laajennuksen vain luodaksesi kirjautumislomakkeen tai rekisteröintilomakkeen. Laajennukset ovat saatavilla ilmaiseksi, ja jotkin ovat premium; Valitse yksi budjettisi ja tarpeidesi perusteella.
Kaikilla verkkosivustojen rakentajilla on laajennuksia, joista voit valita; Käytätkö Weeblyä, Joomlaa tai WordPressiä, teemoja on useita. Jos haluat luoda kirjautumissivun laajennuksen avulla, käy kojelaudassasi nähdäksesi luettelon verkkosivustosi rakentajalle saatavilla olevista laajennuksista. Asenna haluamasi laajennus ja sinut ohjataan kassasivulle, jossa maksat laajennuksesta.
Kun olet asentanut laajennuksen, sinua pyydetään muokkaamaan eri elementtejä; napsauta kutakin muokattavaa elementtiä ja napsauta sitten Tallenna muutokset. Luo uusi sivu ja lisää laajennuksella luomasi lomake.
Johtopäätös
Kirjautumissivun on oltava yhtä yksinkertainen kuin houkutteleva. Erilaisia kirjautumissivujen ulkoasuja on nähty viime aikoina. Valitse vain se kirjautumissivun luontitapa, johon olet tyytyväinen; älä valitse koodausta, jos et tunne koodeja hyvin. Suunnitteluapua saat ammattilaiselta, mutta mikä parasta, voit saada apua kirjautumissivusi suunnitteluun.
Ihmiset ovat myös käyttäneet sosiaalisia tunnuksia. Täällä voit antaa vierailijoiden kirjautua sisään sosiaalisen median tilitietoillaan, kuten Facebook tai Twitter. Tämä on myös hyvä vaihtoehto, koska se on riittävän yksinkertainen ja parantaa myös yrityksesi sosiaalista mediaa ja suorituskykyä. Voit tutustua suosittujen verkkosivustojen kirjautumissivuihin saadaksesi tietoa verkkosivustosi kirjautumissivun tyylistä. sotkematta sitä ja jättämättä pois yksityiskohtia.