Hvordan lage en vakker tilpasset påloggingsside for nettstedet ditt
Påloggingssiden, akkurat som landingssiden til et nettsted, er svært viktig for bedriftseiere som ønsker å konvertere trafikk. Akkurat som landingssiden, må påloggingssiden være sofistikert for at besøkende bare skal kunne oppgi detaljene sine uten mye problemer.
De fleste av de beste påloggingssidene er enkle, de har brukt en minimalistisk stil uten annonser og markedsføringsgimmicker; bare påloggingsskjemaet med et bakgrunnsbilde eller to.
Det er noen forskjellige måter å lage påloggingssider på som frister besøkende og oppmuntrer dem til å komme tilbake.
- Hvis du er god til å kode (enkel HTML og CSS ), bør du kunne lage en enkel, men likevel tiltalende påloggingsside med noen få grunnleggende koder.
- For nybegynnere er det enklere å tilpasse påloggingssiden som følger med malen til nettstedbyggeren. De fleste nettstedbyggere og maler (WordPress, Weebly, Shopify, Joomla og andre) kommer med ferdige maler, og alt du trenger å gjøre er å redigere dem for å møte dine behov.
- Du kan også bruke enkle plugins og temaer for å lage en påloggingsside. Plugins er bra fordi de lar deg tilpasse påloggingssiden din med et klikk på en knapp. De kan brukes av nybegynnere så vel som erfarne webdesignere.
Metoden du velger for å tilpasse påloggingssiden til nettstedet ditt, avgjøres av ferdighetsnivået ditt. Mens koding kan være en god metode for én person, kan det hende at en annen ikke vet hvor han skal plassere hvilken kode. Plugins er bra, men noen er premium.
Les videre for å lære hvordan du kan opprette og tilpasse en vakker påloggingsside.
Bruk enkel HTML/CSS
Å lage og tilpasse et påloggingsskjema i HTML og CSS gjøres i tre enkle trinn: håndtere HTML-oppmerking, plasser de forskjellige elementene i påloggingsskjemaet og til slutt, stil de forskjellige elementene for å få dem til å se tiltalende ut.
HTML-oppmerking
Her vil du legge til enkle HTML-koder for å lage selve skjemaet. HTML-delen består av en beholder, selve skjemaet og et par andre innganger. Ved å taste inn koden riktig vil du kunne lage et enkelt påloggingsskjema med en brukernavndel, en passorddel, en avkrysningsboks og en påloggingsknapp. Komponentene er imidlertid ikke godt ordnet.
<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>Plassering av elementene
Du kan deretter style de forskjellige delene av skjemaet ved å legge til en enkel kode som den nedenfor. Dette vil plassere de forskjellige komponentene i forskjellige posisjoner.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Etter dette kan du plassere de forskjellige elementene på påloggingssiden din i henhold til spesifikasjonene dine. Først må du spesifisere de grunnleggende elementene, for eksempel skriftfargen og deretter plassere skjemaet i midten av siden for balanse. Her kan du legge til hvilken som helst skriftfarge du liker, uansett hva du synes er vakker. Det er imidlertid alltid lurt å sørge for at skjemaet forblir enkelt for ikke å forvirre de besøkende.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}På dette tidspunktet kan det hende at formen fortsatt ser skjev ut, og du kan gjøre den bedre ved å legge til litt strukturell stil. For å gjøre dette, start med å sørge for at elementene i påloggingsskjemaet ditt ikke er klemt sammen og er lett lesbare. Du kan legge til følgende kode for å sikre at skjemaet er ryddig.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Påloggingsskjemaet ditt vil nå se enkelt og nesten komplett ut med de forskjellige elementene godt plassert. Du må imidlertid style de forskjellige inndataområdene i påloggingsskjemaet ditt for å få dem til å se enda bedre ut. Her vil du spesifisere farge, skriftstørrelse, legge til litt polstring, marger, bredden på de forskjellige elementene og andre grunnleggende ting som fargen som vises når du holder musen eller klikker på et element. Legg til koden nedenfor.
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;
}Siden du vil at påloggingssiden din skal se enda vakrere ut, kan du legge til litt flere tilpasninger for å få påloggingsknappen og avkrysningsboksen til å se litt stilig ut. Legg til følgende kode.
#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;
}Stil skjemaelementene
På dette tidspunktet er elementene godt plassert og ser sofistikerte nok ut. Påloggingsskjemaet er klart, men du kan fortsatt gjøre det litt vakrere ved å legge til CSS-stylingkoder. Du kan starte prosessen ved å gjøre beholderen avrundede hjørner, og deretter gi den en skygge for å forbedre utseendet og få frem en følelse av dybde. For å gjøre det, skriv inn denne koden nedenfor til containerområdet.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Hvis du legger til koden ovenfor i beholderområdet, vil beholderkoden se ut som den nedenfor:
#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 );Etter at du har stylet beholderen, kan du nå style de forskjellige inndataområdene med en lignende kode. Legg til koden nedenfor, og inndataområdene dine vil se mye finere ut enn de var i begynnelsen.
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å vil hele passordinntastingskoden se ut som den nedenfor. Påloggingsskjemaet vil se fantastisk ut, men det er fortsatt mer styling du kan gjøre for å forbedre utseendet til skjemaet enda mer.
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;
}Du må nå få påloggingsknappen til å se bedre og tydelig ut. For å gjøre dette, skriv inn koden nedenfor i innsendingsdelen av koden.
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;
}Hele koden for innsendingsdelen vil se ut som den nedenfor, og du vil ha endret fargen på påloggingsknappen og andre aspekter, og du vil ha et enkelt påloggingsskjema som det nedenfor.
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;
}Påloggingsskjemaet ser nå bra ut. Det anbefales å la skjemaet være så enkelt. I stedet for å legge til andre elementer og rote siden, kan du legge til bedriftens logo og ett enkelt bilde. Besøkende har en tendens til å bli distrahert av så mange detaljer. Ergo vil du ønske å ha en nettside påloggingsside som er så enkel som den kan være, men likevel vakker og fristende som får de besøkende til å komme tilbake igjen. Du kan ta eksempler på påloggingsskjemaer fra noen populære nettsteder som Snoggle News, Dropbox, Freshbooks, MailChimp og Theidealist blant andre. Nettsteder som Google og Facebook har også brukt den minimalistiske stilen, og påloggingssidene deres ser bra ut med bare et påloggingsskjema, firmalogo og noen få andre detaljer.
jQuery påloggingsbokser
jQuery-påloggingsbokser har blitt brukt på et stort antall nettsteder, og de ser alltid innovative ut og har funnet veien inn i den nye tidens design for påloggingsskjemaer for nettsider. De ser enkle, men stilige ut. I motsetning til tidligere, skjer pålogging i dag på en enkel side, og du trenger ikke å bekymre deg for eventuelle jQuery-tilbakeslag.
Med jQuery kan du opprette en påloggingsknapp på hjemmesiden til nettstedet ditt, som leder de besøkende til påloggingssiden som er drevet av jQuery. Skjemaet inneholder Ajax-anrop og bruker et eksternt PHP-skript for å verifisere påloggingsinformasjonen for å enten gi eller nekte tilgang. Med jQuery er det enkelt å legge til en registreringslenke rett under påloggingsboksen. Dette gjør prosessen jevnere og gir brukeren en jevn opplevelse. Dine besøkende vil finne det enkelt å finne registrerings-/registreringssiden på nettstedet ditt. Du kan også bruke den samme påloggingsboksen for å få tilgang til kontoen din.
Akkurat som når du bruker HTML og CSS for å lage og style påloggingssiden din, må du ha påloggingsboksen her til å snakke litt om virksomheten din på en måte som ikke roter til siden. Påloggingsskjemaet du lager med jQuery er enkelt og ser vakkert ut. Du må imidlertid legge til et bilde eller bare bedriftslogoen din for å gjøre det mer attraktivt. Påloggingssidene skal være brukervennlige.
Påloggingsskjemamaler for nettstedbygger
Den beste nybegynnervennlige måten å lage et tiltalende påloggingsskjema på er gjennom nettstedbyggerens påloggingsskjemamaler. Her trenger du ikke å kunne koding, og du trenger ikke engang å ha laget noen annen nettside; påloggingsskjemaer opprettes med et klikk på en knapp. Nettstedbyggere som Weebly og WordPress tilbyr freemium og premium-former.
For å opprette påloggingssiden, installer skjemapluginene og besøk deretter innstillingssiden til malen/pluginen for å tilpasse den etter eget ønske. I WordPress må du installere WPForms og deretter skrive inn kjøpskoden for å bekrefte. Gå til innstillingssiden og klikk på Addons. Her kan du legge til hvilket som helst element du ønsker. Klikk User Registration Addon, og du er i gang.
Klikk "Opprett ny side" og velg deretter "brukerpålogging"-skjemaet. En mal vil vises med alle feltene som er forhåndsopprettet, og alt du trenger å gjøre er å klikke på et felt for å redigere det. Etter å ha redigert hvert felt, klikker du på Innstillinger-fanen og bestemme hva som skal skje etter at en besøkende har logget på; du kan henvise dem til en bestemt URL.
Etter at du har opprettet skjemaet, oppretter du en ny side for påloggingsskjemaet. En editor vises og øverst i den klikker du på "legg til skjema". En popup vises, og du kan velge skjemaet du nettopp opprettet. Du kan fortsette å redigere siden for å møte dine behov bedre, eller du kan lagre og publisere. Du kan legge til den tilpassede påloggingen du nettopp opprettet som en widget på sidefeltet på nettstedet ditt.
Når du har å gjøre med påloggingsmaler levert av nettstedsbyggeren, er prosessen mer eller mindre den samme; installer malen, rediger den etter eget ønske, lag en ny side og sett inn det opprettede skjemaet. Dette anbefales for de som er nye innen webdesign.
Tredjepartstemaer og plugins
Temaer
Nettstedbyggeren din kan ha gitt en påloggingsmal eller -tema, gratis eller premium, men det kan hende den ikke oppfyller dine behov. Heldigvis er det mange tredjepartstemaer og plugins spesielt for WordPress. Temaer er som maler for hele nettsiden som bringer inn ulike stiler og med de fleste av dem vil du kunne få en stilig og attraktiv påloggingsside; tema påvirker ikke bare påloggingssiden, men også andre aspekter ved nettstedet ditt.
Du må velge et tema med en påloggingsside du liker. Det gode er at med de fleste temaer kan du få en omvisning i funksjonene før du installerer. Temaer koster alt mellom $2 og opp til mer enn $100. Temaer, akkurat som nettbyggermalene, er enkle å redigere. Du kan endre designfarger, fonter og størrelser etter din smak og smak.
Temaer kan være fra nettstedbyggeren din, premium-temaer, eller kan være fra tredjepartsutviklere som Themeforest.
Plugins
Plugins er enkle; i motsetning til temaer som påvirker nesten alle aspekter av nettstedet ditt, finnes det plugins for forskjellige aspekter av nettstedet ditt. Ergo kan du installere en plugin bare for å lage et påloggingsskjema eller et registreringsskjema. Plugins er tilgjengelige gratis, og noen er premium; velg en basert på ditt budsjett og dine behov.
Alle nettstedbyggere vil ha plugins du kan velge mellom; enten du bruker Weebly, Joomla eller WordPress, er det mange temaer. For å opprette en påloggingsside ved hjelp av en plugin, besøk dashbordet for å se listen over tilgjengelige plugins for nettstedbyggeren din. Installer plugin-en du ønsker, og du vil bli tatt til en betalingsside hvor du betaler for plugin-en.
Etter at du har installert plugin, vil du bli bedt om å redigere de forskjellige elementene; klikk på hvert element for å redigere og klikk deretter lagre endringer. Opprett en ny side og legg til skjemaet du har opprettet ved hjelp av plugin.
Konklusjon
En påloggingsside må være enkel like mye som den må være tiltalende. Ulike design av påloggingssider har vært vitne til i den siste tiden. Velg bare metoden for opprettelse av påloggingssiden som du er komfortabel med; ikke velg å kode hvis du ikke er godt kjent med koder. Du kan få designhjelp fra en profesjonell, men enda bedre, du kan få hjelp til å designe påloggingssiden din.
Folk har også brukt sosiale pålogginger. Her lar du besøkende logge på med sine sosiale medier kontodetaljer som Facebook eller Twitter. Dette er også et godt alternativ, siden det er enkelt nok og også forbedrer bedriftens tilstedeværelse og ytelse på sosiale medier. Du kan sjekke innloggingssidene til populære nettsteder for å få innsikt i hvordan du kan style innloggingssiden for nettstedet ditt; uten å rote til det og uten å utelate detaljer.