Hur man skapar en vacker anpassad inloggningssida för din webbplats
Inloggningssidan, precis som målsidan på en webbplats, är väldigt viktig för företagare som vill konvertera trafik. Precis som målsidan måste inloggningssidan vara sofistikerad för att besökarna ska kunna lämna sina uppgifter utan mycket krångel.
De flesta av de bästa inloggningssidorna är enkla, de har använt en minimalistisk stil utan annonser och marknadsföringstrick; bara inloggningsformuläret med en bakgrundsbild eller två.
Det finns några olika sätt att skapa inloggningssidor som uppvaktar besökare och uppmuntrar dem att komma tillbaka.
- Om du är bra på att koda, (enkel HTML och CSS ), bör du kunna skapa en enkel men tilltalande inloggningssida med några grundläggande koder.
- För nybörjare är det lättare att anpassa inloggningssidan som följer med webbplatsbyggarens mall. De flesta webbplatsbyggare och mallar (WordPress, Weebly, Shopify, Joomla och andra) kommer med färdiga mallar, och allt du behöver göra är att redigera dem för att möta dina behov.
- Du kan också använda enkla plugins och teman för att skapa en inloggningssida. Plugins är bra eftersom de låter dig anpassa din inloggningssida med en knapptryckning. De kan användas av såväl nybörjare som erfarna webbdesigners.
Metoden du väljer för att anpassa din inloggningssida för din webbplats bestäms av din kompetensnivå. Även om kodning kan vara en bra metod för en person, kanske en annan inte vet var den ska placera vilken kod. Plugins är bra, men vissa är premium.
Läs vidare för att lära dig hur du kan skapa och anpassa en vacker inloggningssida.
Använd enkel HTML/CSS
Att skapa och anpassa ett inloggningsformulär i HTML och CSS görs i tre enkla steg: hantera HTML-uppmärkning, placera de olika elementen i inloggningsformuläret och slutligen utforma de olika elementen så att de ser tilltalande ut.
HTML-uppmärkning
Här kommer du att lägga till enkla HTML-taggar för att skapa själva formuläret. HTML-delen består av en behållare, själva formuläret och ett par andra ingångar. Genom att ange koden korrekt kommer du att kunna skapa ett enkelt inloggningsformulär med en användarnamnsdel, en lösenordsdel, en kryssruta och en inloggningsknapp. Komponenterna är dock inte väl ordnade.
Placering av elementen
Du kan sedan styla de olika delarna av formuläret genom att lägga till en enkel kod som den nedan. Detta kommer att placera de olika komponenterna i olika positioner.
html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue", Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}Efter detta kan du placera de olika elementen på din inloggningssida enligt dina specifikationer. Först och främst måste du specificera de grundläggande elementen, såsom teckensnittsfärgen och sedan placera formuläret i mitten av din sida för balans. Här kan du lägga till vilken typsnittsfärg du vill, vad du än tycker är vackert. Det är dock alltid tillrådligt att se till att formuläret förblir enkelt för att inte förvirra besökarna.
#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}Vid det här laget kan formen fortfarande se knasig ut, och du kan göra den bättre genom att lägga till lite strukturell stil. För att göra detta, börja med att se till att elementen i ditt inloggningsformulär inte kläms ihop och är lättlästa. Du kan lägga till följande kod för att säkerställa att formuläret är snyggt.
form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}Ditt inloggningsformulär kommer nu att se enkelt och nästan komplett ut med de olika elementen välplacerade. Du måste dock utforma de olika inmatningsområdena i ditt inloggningsformulär för att få dem att se ännu bättre ut. Här kommer du att specificera färg, teckenstorlek, lägga till lite utfyllnad, marginaler, bredden på de olika elementen och andra grunder som färgen som visas när du håller musen eller klickar på ett element. Lägg till koden nedan.
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;
}Eftersom du vill att din inloggningssida ska se ännu vackrare ut kan du lägga till lite fler anpassningar för att få inloggningsknappen och kryssrutan att se lite snygg ut. Lägg till följande kod.
#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 formulärelementen
Vid det här laget är elementen välplacerade och ser sofistikerade ut. Inloggningsformuläret är klart men du kan fortfarande göra det lite vackrare genom att lägga till CSS-stylingkoder. Du kan starta processen genom att göra behållaren rundade hörn och sedan ge den en skugga för att förstärka utseendet och få fram en känsla av djup. För att göra det, skriv in den här koden nedan i containerområdet.
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );Om du lägger till ovanstående kod i containerområdet kommer containerkoden att se ut som den nedan:
#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 );Efter att du har formaterat behållaren kan du nu formatera de olika inmatningsområdena med en liknande kod. Lägg till koden nedan så kommer dina inmatningsområden att se mycket snyggare ut än de var i början.
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;
}Nu kommer hela lösenordsinmatningskoden att se ut som den nedan. Inloggningsformuläret kommer att se fantastiskt ut, men det finns fortfarande mer styling som du kan göra för att förbättra utseendet på ditt formulär ytterligare.
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åste nu få inloggningsknappen att se bättre och distinkt ut. För att göra detta anger du koden nedan i sändningsdelen av din kod.
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;
}Hela koden för din inlämningssektion kommer att se ut som den nedan och du kommer att ha ändrat färgen på din inloggningsknapp och andra aspekter, och du kommer att ha ett enkelt inloggningsformulär som det nedan.
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;
}Inloggningsformuläret ser nu bra ut. Det är lämpligt att lämna formuläret så enkelt. Istället för att lägga till andra element och belamra sidan kan du lägga till ditt företags logotyp och en enda bild. Besökare tenderar att distraheras av så många detaljer. Ergo kommer du att vilja ha en inloggningssida för webbplatsen som är så enkel som den kan vara men ändå vacker och lockande som får besökarna att komma tillbaka igen. Du kan ta exempel på inloggningsformulär från några populära webbplatser som Snoggle News, Dropbox, Freshbooks, MailChimp och Theidealist bland andra. Webbplatser som Google och Facebook har också använt den minimalistiska stilen, och deras inloggningssidor ser bra ut med bara ett inloggningsformulär, företagslogotyp och några andra detaljer.
jQuery inloggningsboxar
jQuery Login Boxes har använts på ett stort antal webbplatser, och de ser alltid innovativa ut och har hittat sin väg in i den nya tidens design för webbinloggningsformulär. De ser enkla men ändå stilfulla ut. Till skillnad från tidigare sker inloggning numera på en enkel sida och du behöver inte oroa dig för några jQuery-bakslag.
Med jQuery kan du skapa en inloggningsknapp på din hemsidas hemsida, som leder dina besökare till inloggningssidan som är jQuery-driven. Formuläret innehåller Ajax-anrop och använder ett externt PHP-skript för att verifiera inloggningsuppgifterna för att antingen bevilja eller neka åtkomst. Med jQuery är det enkelt att lägga till en registreringslänk precis under inloggningsrutan. Detta gör processen smidigare och ger användaren en smidig upplevelse. Dina besökare kommer att finna det enkelt att hitta registrerings-/registreringssidan på din webbplats. Du kan också använda samma inloggningsruta för att komma åt ditt konto.
Precis som när du använder HTML och CSS för att skapa och styla din inloggningssida, måste du få inloggningsrutan här att tala lite om din verksamhet på ett sätt som inte rör ner sidan. Inloggningsformuläret du skapar med jQuery är enkelt och ser vackert ut. Du måste dock lägga till en bild eller bara din företagslogotyp för att göra det mer tilltalande. Inloggningssidor ska vara användarvänliga.
Mallar för inloggningsformulär för webbplatsbyggare
Det bästa nybörjarvänliga sättet att skapa ett tilltalande inloggningsformulär är genom webbplatsbyggarens mallar för inloggningsformulär. Här behöver du inte kunna kodning, och du behöver inte ens ha skapat någon annan webbplats; inloggningsformulär skapas med ett knapptryck. Webbplatsbyggare som Weebly och WordPress erbjuder freemium och premiumformer.
För att skapa inloggningssidan, installera formulärpluginerna och besök sedan inställningssidan för mallen/pluginen för att anpassa den efter dina önskemål. I WordPress kommer du att behöva installera WPForms och sedan ange din köpkod för att verifiera. Besök inställningssidan och klicka på Addons. Här kan du lägga till vilket element du vill. Klicka på User Registration Addon, så är du klar.
Klicka på ”Skapa ny sida” och välj sedan formuläret ”användarinloggning”. En mall visas med alla fält förskapade, och allt du behöver göra är att klicka på ett fält för att redigera det. Efter att ha redigerat varje fält, klicka på inställningsfliken och bestäm vad som ska hända efter att en besökare har loggat in; du kan dirigera dem till en viss URL.
När du har skapat formuläret skapar du en ny sida för inloggningsformuläret. En redigerare visas och högst upp i den klickar du på ”lägg till formulär”. En popup kommer att visas och du kan välja formuläret du just skapade. Du kan fortsätta att redigera sidan för att bättre möta dina behov, eller så kan du spara och publicera. Du kan lägga till den anpassade inloggningen du just skapade som en widget i sidofältet på din webbplats.
När det gäller inloggningsmallar som tillhandahålls av webbplatsbyggaren är processen mer eller mindre densamma; installera mallen, redigera den efter eget tycke, skapa en ny sida och infoga ditt skapade formulär. Detta rekommenderas för dig som är ny inom webbdesign.
Tredje parts teman och plugins
teman
Din webbplatsbyggare kan ha tillhandahållit en inloggningsmall eller -tema, gratis eller premium, men det kanske inte uppfyller dina behov. Lyckligtvis finns det många tredjepartsteman och plugins speciellt för WordPress. Teman är som mallar för hela webbplatsen som tar in olika stilar och med de flesta av dem kommer du att kunna få en snygg och attraktiv inloggningssida; tema påverkar inte bara inloggningssidan utan även andra aspekter av din webbplats.
Du måste välja ett tema med en inloggningssida som du älskar. Det som är bra är att med de flesta teman kan du få en rundtur i funktionerna innan du installerar. Teman kostar allt mellan $2 och upp till mer än $100. Teman, precis som webbbyggarmallarna, är lätta att redigera. Du kan ändra designfärger, typsnitt och storlekar efter eget tycke och smak.
Teman kan vara från din webbplatsbyggare, premiumteman eller kan vara från tredjepartsutvecklare som Themeforest.
Plugins
Plugins är enkla; till skillnad från teman som påverkar nästan alla aspekter av din webbplats, finns det plugins för olika aspekter av din webbplats. Ergo kan du installera ett plugin bara för att skapa ett inloggningsformulär eller ett registreringsformulär. Plugins är tillgängliga gratis och vissa är premium; välj en baserat på din budget och dina behov.
Alla webbplatsbyggare kommer att ha plugins som du kan välja mellan; oavsett om du använder Weebly, Joomla eller WordPress finns det många teman. För att skapa en inloggningssida med ett plugin, besök din instrumentpanel för att se listan över tillgängliga plugins för din webbplatsbyggare. Installera plugin du vill ha så kommer du till en kassasida där du betalar för plugin.
Efter att ha installerat insticksprogrammet kommer du att uppmanas att redigera de olika elementen; klicka på varje element för att redigera och klicka sedan på spara ändringar. Skapa en ny sida och lägg till formuläret du har skapat med plugin-programmet.
Slutsats
En inloggningssida måste vara enkel lika mycket som den måste vara tilltalande. Olika inloggningssidor har setts på senare tid. Välj bara den metod för att skapa inloggningssidor som du är bekväm med; välj inte att koda om du inte är väl insatt i koder. Du kan få designhjälp av en professionell, men ännu bättre, du kan få hjälp med att designa din inloggningssida.
Människor har också använt sociala inloggningar. Här låter du besökarna logga in med sina kontouppgifter för sociala medier som Facebook eller Twitter. Detta är också ett bra alternativ eftersom det är tillräckligt enkelt och även förbättrar ditt företags närvaro och prestanda på sociala medier. Du kan kolla in inloggningssidorna på populära webbplatser för att få insikter om hur du utformar din webbplatsinloggningssida; utan att belamra det och utan att utelämna detaljer.