Placering av elementen<\/code>
\n<\/h3>\n\n Du kan sedan styla de olika delarna av formul\u00e4ret genom att l\u00e4gga till en enkel kod som den nedan. Detta kommer att placera de olika komponenterna i olika positioner.<\/code>\n<\/p>\n<code>html, body {\nwidth: 100 %;\nheight: 100 %;\nfont-family: \"Helvetica Neue\", Helvetica, sans\n-serif;\ncolor: # 444 ;\n-webkit-font-smoothing: antialiased;\nbackground: #f0f0f0;\n}<\/code><\/code><\/pre>\n\n Efter detta kan du placera de olika elementen p\u00e5 din inloggningssida enligt dina specifikationer. F\u00f6rst och fr\u00e4mst m\u00e5ste du specificera de grundl\u00e4ggande elementen, s\u00e5som teckensnittsf\u00e4rgen och sedan placera formul\u00e4ret i mitten av din sida f\u00f6r balans. H\u00e4r kan du l\u00e4gga till vilken typsnittsf\u00e4rg du vill, vad du \u00e4n tycker \u00e4r vackert. Det \u00e4r dock alltid tillr\u00e5dligt att se till att formul\u00e4ret f\u00f6rblir enkelt f\u00f6r att inte f\u00f6rvirra bes\u00f6karna.\n<\/p>\n
#container {\nposition: fixed;\nwidth: 340px;\nheight: 280 px;\ntop: 50%;\nleft: 50%;\nmargin-top: -140 px;\nmargin-left: -170 px;\n}<\/code><\/pre>\n\n Vid det h\u00e4r laget kan formen fortfarande se knasig ut, och du kan g\u00f6ra den b\u00e4ttre genom att l\u00e4gga till lite strukturell stil. F\u00f6r att g\u00f6ra detta, b\u00f6rja med att se till att elementen i ditt inloggningsformul\u00e4r inte kl\u00e4ms ihop och \u00e4r l\u00e4ttl\u00e4sta. Du kan l\u00e4gga till f\u00f6ljande kod f\u00f6r att s\u00e4kerst\u00e4lla att formul\u00e4ret \u00e4r snyggt.\n<\/p>\n
form {\nmargin: 0 auto;\nmargin-top: 20 px;\n}\nlabel {\ncolor: # 555 ;\ndisplay: inline-block;\nmargin-left: 18 px;\npadding-top: 10px;\nfont-size: 14px;\n}<\/code><\/pre>\n\n Ditt inloggningsformul\u00e4r kommer nu att se enkelt och n\u00e4stan komplett ut med de olika elementen v\u00e4lplacerade. Du m\u00e5ste dock utforma de olika inmatningsomr\u00e5dena i ditt inloggningsformul\u00e4r f\u00f6r att f\u00e5 dem att se \u00e4nnu b\u00e4ttre ut. H\u00e4r kommer du att specificera f\u00e4rg, teckenstorlek, l\u00e4gga till lite utfyllnad, marginaler, bredden p\u00e5 de olika elementen och andra grunder som f\u00e4rgen som visas n\u00e4r du h\u00e5ller musen eller klickar p\u00e5 ett element. L\u00e4gg till koden nedan.\n<\/p>\n
p a {\nfont-size: 11px;\ncolor: #aaa;\nfloat: right;\nmargin-top: -13 px;\nmargin-right: 20 px;\n}\np a:hover {\ncolor: # 555 ;\n}\ninput {\nfont-family: \"Helvetica Neue\", Helvetica,\nsans-serif;\nfont-size: 12px;\noutline: none;\n}\ninput[type=text],\ninput[type=password] {\ncolor: # 777 ;\npadding-left: 10px;\nmargin: 10 px;\nmargin-top: 12 px;\nmargin-left: 18 px;\nwidth: 290px;\nheight: 35px;\n}<\/code><\/pre>\n\n Eftersom du vill att din inloggningssida ska se \u00e4nnu vackrare ut kan du l\u00e4gga till lite fler anpassningar f\u00f6r att f\u00e5 inloggningsknappen och kryssrutan att se lite snygg ut. L\u00e4gg till f\u00f6ljande kod.\n<\/p>\n
#lower {\nbackground: #ecf2f5;\nwidth: 100%;\nheight: 69px;\nmargin-top: 20 px;\n}\ninput[type=checkbox] {\nmargin-left: 20 px;\nmargin-top: 30 px;\n}\n.check {\nmargin-left: 3px;\n}\ninput[type=submit] {\nfloat: right;\nmargin-right: 20 px;\nmargin-top: 20 px;\nwidth: 80px;\nheight: 30px;\n}<\/code><\/pre>\n\n Stil formul\u00e4relementen
\n<\/h3>\n
\n Vid det h\u00e4r laget \u00e4r elementen v\u00e4lplacerade och ser sofistikerade ut. Inloggningsformul\u00e4ret \u00e4r klart men du kan fortfarande g\u00f6ra det lite vackrare genom att l\u00e4gga till CSS-stylingkoder. Du kan starta processen genom att g\u00f6ra beh\u00e5llaren rundade h\u00f6rn och sedan ge den en skugga f\u00f6r att f\u00f6rst\u00e4rka utseendet och f\u00e5 fram en k\u00e4nsla av djup. F\u00f6r att g\u00f6ra det, skriv in den h\u00e4r koden nedan i containeromr\u00e5det.\n<\/p>\n
background: #fff;\nborder-radius: 3px;\nborder: 1px solid #ccc;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );<\/code><\/pre>\n\n Om du l\u00e4gger till ovanst\u00e5ende kod i containeromr\u00e5det kommer containerkoden att se ut som den nedan:\n<\/p>\n
#container {\nposition: fixed;\nwidth: 340px;\nheight: 280 px;\ntop: 50 %;\nleft: 50 %;\nmargin-top: -140 px;\nmargin-left: -170 px;\nbackground: #fff;\nborder-radius: 3px;\nborder: 1px solid #ccc;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .1 );<\/code><\/pre>\n\n Efter att du har formaterat beh\u00e5llaren kan du nu formatera de olika inmatningsomr\u00e5dena med en liknande kod. L\u00e4gg till koden nedan s\u00e5 kommer dina inmatningsomr\u00e5den att se mycket snyggare ut \u00e4n de var i b\u00f6rjan.\n<\/p>\n
border: 1 px solid #c7d0d2;\nborder-radius: 2px;\nbox-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;\n}<\/code><\/pre>\n\n Nu kommer hela l\u00f6senordsinmatningskoden att se ut som den nedan. Inloggningsformul\u00e4ret kommer att se fantastiskt ut, men det finns fortfarande mer styling som du kan g\u00f6ra f\u00f6r att f\u00f6rb\u00e4ttra utseendet p\u00e5 ditt formul\u00e4r ytterligare.\n<\/p>\n
input[type=password] {\ncolor: # 777 ;\npadding-left: 10px;\nmargin: 10 px;\nmargin-top: 12 px;\nmargin-left: 18 px;\nwidth: 290px;\nheight: 35px;\nborder: 1px solid #c7d0d2;\nborder-radius: 2px;\nbox-shadow: inset 0 1.5 px 3px rgba( 190, 190, 190, .4 ), 0 0 0 5px #f5f7f8;\n}<\/code><\/pre>\n\n Du m\u00e5ste nu f\u00e5 inloggningsknappen att se b\u00e4ttre och distinkt ut. F\u00f6r att g\u00f6ra detta anger du koden nedan i s\u00e4ndningsdelen av din kod.\n<\/p>\n
font-size: 14 px;\nfont-weight: bold;\ncolor: #fff;\nbackground-color: #acd6ef; \/*IE fallback*\/\nbackground-image: -webkit-gradient(linear,\nleft top, left bottom, from (#acd6ef), to(# 6ec2\ne8));\nbackground-image: -moz-linear-gradient(\ntop left 90deg, #acd6ef 0 %, # 6ec2e8 100%);\nbackground-image: linear-gradient(top left\n90 deg, #acd6ef 0%, # 6 ec2e8 100 %);\nborder-radius: 30px;\nborder: 1px solid # 66add6;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),\ninset 0 1px 0 rgba( 255, 255, 255, .5 );\ncursor: pointer;\n}<\/code><\/pre>\n\n Hela koden f\u00f6r din inl\u00e4mningssektion kommer att se ut som den nedan och du kommer att ha \u00e4ndrat f\u00e4rgen p\u00e5 din inloggningsknapp och andra aspekter, och du kommer att ha ett enkelt inloggningsformul\u00e4r som det nedan.\n<\/p>\n
input[type=submit] {\nfloat: right;\nmargin-right: 20 px;\nmargin-top: 20 px;\nwidth: 80px;\nheight: 30px;\nfont-size: 14px;\nfont-weight: bold;\ncolor: #fff;\nbackground-color: #acd6ef; \/*IE fallback*\/\nbackground-image: -webkit-gradient(linear,\nleft top, left bottom, from (#acd6ef), to(# 6ec2\ne8));\nbackground-image: -moz-linear-gradient(\ntop left 90deg, #acd6ef 0 %, # 6ec2e8 100%);\nbackground-image: linear-gradient(top left\n90 deg, #acd6ef 0%, # 6 ec2e8 100 %);\nborder-radius: 30px;\nborder: 1px solid # 66add6;\nbox-shadow: 0 1 px 2 pxrgba( 0, 0, 0, .3 ),\ninset 0 1px 0 rgba( 255, 255, 255, .5 );\ncursor: pointer;\n}<\/code><\/pre>\n\n Inloggningsformul\u00e4ret ser nu bra ut. Det \u00e4r l\u00e4mpligt att l\u00e4mna formul\u00e4ret s\u00e5 enkelt. Ist\u00e4llet f\u00f6r att l\u00e4gga till andra element och belamra sidan kan du l\u00e4gga till ditt f\u00f6retags logotyp och en enda bild. Bes\u00f6kare tenderar att distraheras av s\u00e5 m\u00e5nga detaljer. Ergo kommer du att vilja ha en inloggningssida f\u00f6r webbplatsen som \u00e4r s\u00e5 enkel som den kan vara men \u00e4nd\u00e5 vacker och lockande som f\u00e5r bes\u00f6karna att komma tillbaka igen. Du kan ta exempel p\u00e5 inloggningsformul\u00e4r fr\u00e5n n\u00e5gra popul\u00e4ra webbplatser som Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> och Theidealist<\/strong> bland andra. Webbplatser som Google och Facebook har ocks\u00e5 anv\u00e4nt den minimalistiska stilen, och deras inloggningssidor ser bra ut med bara ett inloggningsformul\u00e4r, f\u00f6retagslogotyp och n\u00e5gra andra detaljer.\n<\/p>\n\n jQuery inloggningsboxar
\n<\/h3>\n
\n jQuery Login Boxes har anv\u00e4nts p\u00e5 ett stort antal webbplatser, och de ser alltid innovativa ut och har hittat sin v\u00e4g in i den nya tidens design f\u00f6r webbinloggningsformul\u00e4r. De ser enkla men \u00e4nd\u00e5 stilfulla ut. Till skillnad fr\u00e5n tidigare sker inloggning numera p\u00e5 en enkel sida och du beh\u00f6ver inte oroa dig f\u00f6r n\u00e5gra jQuery-bakslag.\n<\/p>\n
\n Med jQuery kan du skapa en inloggningsknapp p\u00e5 din hemsidas hemsida, som leder dina bes\u00f6kare till inloggningssidan som \u00e4r jQuery-driven. Formul\u00e4ret inneh\u00e5ller Ajax-anrop och anv\u00e4nder ett externt PHP-skript f\u00f6r att verifiera inloggningsuppgifterna f\u00f6r att antingen bevilja eller neka \u00e5tkomst. Med jQuery \u00e4r det enkelt att l\u00e4gga till en registreringsl\u00e4nk precis under inloggningsrutan. Detta g\u00f6r processen smidigare och ger anv\u00e4ndaren en smidig upplevelse. Dina bes\u00f6kare kommer att finna det enkelt att hitta registrerings-\/registreringssidan p\u00e5 din webbplats. Du kan ocks\u00e5 anv\u00e4nda samma inloggningsruta f\u00f6r att komma \u00e5t ditt konto.\n<\/p>\n
\n Precis som n\u00e4r du anv\u00e4nder HTML och CSS f\u00f6r att skapa och styla din inloggningssida, m\u00e5ste du f\u00e5 inloggningsrutan h\u00e4r att tala lite om din verksamhet p\u00e5 ett s\u00e4tt som inte r\u00f6r ner sidan. Inloggningsformul\u00e4ret du skapar med jQuery \u00e4r enkelt och ser vackert ut. Du m\u00e5ste dock l\u00e4gga till en bild eller bara din f\u00f6retagslogotyp f\u00f6r att g\u00f6ra det mer tilltalande. Inloggningssidor ska vara anv\u00e4ndarv\u00e4nliga.\n<\/p>\n
\n Mallar f\u00f6r inloggningsformul\u00e4r f\u00f6r webbplatsbyggare
\n<\/h3>\n
\n Det b\u00e4sta nyb\u00f6rjarv\u00e4nliga s\u00e4ttet att skapa ett tilltalande inloggningsformul\u00e4r \u00e4r genom webbplatsbyggarens mallar f\u00f6r inloggningsformul\u00e4r. H\u00e4r beh\u00f6ver du inte kunna kodning, och du beh\u00f6ver inte ens ha skapat n\u00e5gon annan webbplats; inloggningsformul\u00e4r skapas med ett knapptryck. Webbplatsbyggare som Weebly<\/strong> och WordPress<\/strong> erbjuder freemium och premiumformer.\n<\/p>\n\n F\u00f6r att skapa inloggningssidan, installera formul\u00e4rpluginerna och bes\u00f6k sedan inst\u00e4llningssidan f\u00f6r mallen\/pluginen f\u00f6r att anpassa den efter dina \u00f6nskem\u00e5l. I WordPress kommer du att beh\u00f6va installera WPForms<\/strong> och sedan ange din k\u00f6pkod f\u00f6r att verifiera. Bes\u00f6k inst\u00e4llningssidan och klicka p\u00e5 Addons. H\u00e4r kan du l\u00e4gga till vilket element du vill. Klicka p\u00e5 User Registration Addon, s\u00e5 \u00e4r du klar.\n<\/p>\n\n Klicka p\u00e5 ”Skapa ny sida” och v\u00e4lj sedan formul\u00e4ret ”anv\u00e4ndarinloggning”. En mall visas med alla f\u00e4lt f\u00f6rskapade, och allt du beh\u00f6ver g\u00f6ra \u00e4r att klicka p\u00e5 ett f\u00e4lt f\u00f6r att redigera det. Efter att ha redigerat varje f\u00e4lt, klicka p\u00e5 inst\u00e4llningsfliken och best\u00e4m vad som ska h\u00e4nda efter att en bes\u00f6kare har loggat in; du kan dirigera dem till en viss URL.\n<\/p>\n
\n N\u00e4r du har skapat formul\u00e4ret skapar du en ny sida f\u00f6r inloggningsformul\u00e4ret. En redigerare visas och h\u00f6gst upp i den klickar du p\u00e5 ”l\u00e4gg till formul\u00e4r”. En popup kommer att visas och du kan v\u00e4lja formul\u00e4ret du just skapade. Du kan forts\u00e4tta att redigera sidan f\u00f6r att b\u00e4ttre m\u00f6ta dina behov, eller s\u00e5 kan du spara och publicera. Du kan l\u00e4gga till den anpassade inloggningen du just skapade som en widget i sidof\u00e4ltet p\u00e5 din webbplats.\n<\/p>\n
\n N\u00e4r det g\u00e4ller inloggningsmallar som tillhandah\u00e5lls av webbplatsbyggaren \u00e4r processen mer eller mindre densamma; installera mallen, redigera den efter eget tycke, skapa en ny sida och infoga ditt skapade formul\u00e4r. Detta rekommenderas f\u00f6r dig som \u00e4r ny inom webbdesign.\n<\/p>\n
\n Tredje parts teman och plugins
\n<\/h3>\n\n teman
\n<\/h5>\n
\n Din webbplatsbyggare kan ha tillhandah\u00e5llit en inloggningsmall eller -tema, gratis eller premium, men det kanske inte uppfyller dina behov. Lyckligtvis finns det m\u00e5nga tredjepartsteman och plugins<\/a> speciellt f\u00f6r WordPress. Teman \u00e4r som mallar f\u00f6r hela webbplatsen som tar in olika stilar och med de flesta av dem kommer du att kunna f\u00e5 en snygg och attraktiv inloggningssida; tema p\u00e5verkar inte bara inloggningssidan utan \u00e4ven andra aspekter av din webbplats.\n<\/p>\n\n Du m\u00e5ste v\u00e4lja ett tema med en inloggningssida som du \u00e4lskar. Det som \u00e4r bra \u00e4r att med de flesta teman kan du f\u00e5 en rundtur i funktionerna innan du installerar. Teman kostar allt mellan $2 och upp till mer \u00e4n $100. Teman, precis som webbbyggarmallarna, \u00e4r l\u00e4tta att redigera. Du kan \u00e4ndra designf\u00e4rger, typsnitt och storlekar efter eget tycke och smak.\n<\/p>\n
\n Teman kan vara fr\u00e5n din webbplatsbyggare, premiumteman eller kan vara fr\u00e5n tredjepartsutvecklare som Themeforest<\/strong>.\n<\/p>\n\n Plugins
\n<\/h5>\n
\n Plugins \u00e4r enkla; till skillnad fr\u00e5n teman som p\u00e5verkar n\u00e4stan alla aspekter av din webbplats, finns det plugins f\u00f6r olika aspekter av din webbplats. Ergo kan du installera ett plugin bara f\u00f6r att skapa ett inloggningsformul\u00e4r eller ett registreringsformul\u00e4r. Plugins \u00e4r tillg\u00e4ngliga gratis och vissa \u00e4r premium; v\u00e4lj en baserat p\u00e5 din budget och dina behov.\n<\/p>\n
\n Alla webbplatsbyggare kommer att ha plugins som du kan v\u00e4lja mellan; oavsett om du anv\u00e4nder Weebly<\/strong>, Joomla<\/strong> eller WordPress<\/strong> finns det m\u00e5nga teman. F\u00f6r att skapa en inloggningssida med ett plugin, bes\u00f6k din instrumentpanel f\u00f6r att se listan \u00f6ver tillg\u00e4ngliga plugins f\u00f6r din webbplatsbyggare. Installera plugin du vill ha s\u00e5 kommer du till en kassasida d\u00e4r du betalar f\u00f6r plugin.\n<\/p>\n\n Efter att ha installerat insticksprogrammet kommer du att uppmanas att redigera de olika elementen; klicka p\u00e5 varje element f\u00f6r att redigera och klicka sedan p\u00e5 spara \u00e4ndringar. Skapa en ny sida och l\u00e4gg till formul\u00e4ret du har skapat med plugin-programmet.\n<\/p>\n
\n Slutsats
\n<\/h4>\n
\n En inloggningssida m\u00e5ste vara enkel lika mycket som den m\u00e5ste vara tilltalande. Olika inloggningssidor har setts p\u00e5 senare tid. V\u00e4lj bara den metod f\u00f6r att skapa inloggningssidor som du \u00e4r bekv\u00e4m med; v\u00e4lj inte att koda om du inte \u00e4r v\u00e4l insatt i koder. Du kan f\u00e5 designhj\u00e4lp av en professionell, men \u00e4nnu b\u00e4ttre, du kan f\u00e5 hj\u00e4lp med att designa din inloggningssida.\n<\/p>\n
\n M\u00e4nniskor har ocks\u00e5 anv\u00e4nt sociala inloggningar. H\u00e4r l\u00e5ter du bes\u00f6karna logga in med sina kontouppgifter f\u00f6r sociala medier som Facebook eller Twitter. Detta \u00e4r ocks\u00e5 ett bra alternativ eftersom det \u00e4r tillr\u00e4ckligt enkelt och \u00e4ven f\u00f6rb\u00e4ttrar ditt f\u00f6retags n\u00e4rvaro och prestanda p\u00e5 sociala medier. Du kan kolla in inloggningssidorna<\/a> p\u00e5 popul\u00e4ra webbplatser f\u00f6r att f\u00e5 insikter om hur du utformar din webbplatsinloggningssida; utan att belamra det och utan att utel\u00e4mna detaljer.\n<\/p>\n<\/p>\n\n Inspelningsk\u00e4lla:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Inloggningssidan, precis som m\u00e5lsidan p\u00e5 en webbplats, \u00e4r v\u00e4ldigt viktig f\u00f6r f\u00f6retagare som vill konvertera trafik. Precis som m\u00e5lsidan m\u00e5ste inloggningssidan vara sofistikerad f\u00f6r att bes\u00f6karna ska kunna l\u00e4mna sina uppgifter utan mycket kr\u00e5ngel. De flesta av de b\u00e4sta inloggningssidorna \u00e4r enkla, de har anv\u00e4nt en minimalistisk stil utan annonser och marknadsf\u00f6ringstrick; bara inloggningsformul\u00e4ret med en bakgrundsbild eller tv\u00e5. Det finns n\u00e5gra olika s\u00e4tt att skapa inloggningssidor som uppvaktar bes\u00f6kare och uppmuntrar dem att komma tillbaka. Om du \u00e4r bra p\u00e5 att koda…<\/p>\n","protected":false},"author":1,"featured_media":159941,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[61,204],"tags":[],"class_list":["post-265438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-och-wordpress","category-webbdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=265438"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/265438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=265438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=265438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=265438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}