Plassering av elementene<\/code>
\n<\/h3>\n\n Du kan deretter style de forskjellige delene av skjemaet ved \u00e5 legge til en enkel kode som den nedenfor. Dette vil plassere de forskjellige komponentene i forskjellige posisjoner.<\/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 Etter dette kan du plassere de forskjellige elementene p\u00e5 p\u00e5loggingssiden din i henhold til spesifikasjonene dine. F\u00f8rst m\u00e5 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 \u00e5 s\u00f8rge for at skjemaet forblir enkelt for ikke \u00e5 forvirre de bes\u00f8kende.\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 P\u00e5 dette tidspunktet kan det hende at formen fortsatt ser skjev ut, og du kan gj\u00f8re den bedre ved \u00e5 legge til litt strukturell stil. For \u00e5 gj\u00f8re dette, start med \u00e5 s\u00f8rge for at elementene i p\u00e5loggingsskjemaet ditt ikke er klemt sammen og er lett lesbare. Du kan legge til f\u00f8lgende kode for \u00e5 sikre at skjemaet er ryddig.\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 P\u00e5loggingsskjemaet ditt vil n\u00e5 se enkelt og nesten komplett ut med de forskjellige elementene godt plassert. Du m\u00e5 imidlertid style de forskjellige inndataomr\u00e5dene i p\u00e5loggingsskjemaet ditt for \u00e5 f\u00e5 dem til \u00e5 se enda bedre ut. Her vil du spesifisere farge, skriftst\u00f8rrelse, legge til litt polstring, marger, bredden p\u00e5 de forskjellige elementene og andre grunnleggende ting som fargen som vises n\u00e5r du holder musen eller klikker p\u00e5 et element. Legg til koden nedenfor.\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 Siden du vil at p\u00e5loggingssiden din skal se enda vakrere ut, kan du legge til litt flere tilpasninger for \u00e5 f\u00e5 p\u00e5loggingsknappen og avkrysningsboksen til \u00e5 se litt stilig ut. Legg til f\u00f8lgende kode.\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 skjemaelementene
\n<\/h3>\n
\n P\u00e5 dette tidspunktet er elementene godt plassert og ser sofistikerte nok ut. P\u00e5loggingsskjemaet er klart, men du kan fortsatt gj\u00f8re det litt vakrere ved \u00e5 legge til CSS-stylingkoder. Du kan starte prosessen ved \u00e5 gj\u00f8re beholderen avrundede hj\u00f8rner, og deretter gi den en skygge for \u00e5 forbedre utseendet og f\u00e5 frem en f\u00f8lelse av dybde. For \u00e5 gj\u00f8re det, skriv inn denne koden nedenfor til 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 Hvis du legger til koden ovenfor i beholderomr\u00e5det, vil beholderkoden se ut som den nedenfor:\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 Etter at du har stylet beholderen, kan du n\u00e5 style de forskjellige inndataomr\u00e5dene med en lignende kode. Legg til koden nedenfor, og inndataomr\u00e5dene dine vil se mye finere ut enn de var i begynnelsen.\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 N\u00e5 vil hele passordinntastingskoden se ut som den nedenfor. P\u00e5loggingsskjemaet vil se fantastisk ut, men det er fortsatt mer styling du kan gj\u00f8re for \u00e5 forbedre utseendet til skjemaet enda mer.\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\u00e5 n\u00e5 f\u00e5 p\u00e5loggingsknappen til \u00e5 se bedre og tydelig ut. For \u00e5 gj\u00f8re dette, skriv inn koden nedenfor i innsendingsdelen av koden.\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 Hele koden for innsendingsdelen vil se ut som den nedenfor, og du vil ha endret fargen p\u00e5 p\u00e5loggingsknappen og andre aspekter, og du vil ha et enkelt p\u00e5loggingsskjema som det nedenfor.\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 P\u00e5loggingsskjemaet ser n\u00e5 bra ut. Det anbefales \u00e5 la skjemaet v\u00e6re s\u00e5 enkelt. I stedet for \u00e5 legge til andre elementer og rote siden, kan du legge til bedriftens logo og ett enkelt bilde. Bes\u00f8kende har en tendens til \u00e5 bli distrahert av s\u00e5 mange detaljer. Ergo vil du \u00f8nske \u00e5 ha en nettside p\u00e5loggingsside som er s\u00e5 enkel som den kan v\u00e6re, men likevel vakker og fristende som f\u00e5r de bes\u00f8kende til \u00e5 komme tilbake igjen. Du kan ta eksempler p\u00e5 p\u00e5loggingsskjemaer fra noen popul\u00e6re nettsteder som Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> og Theidealist<\/strong> blant andre. Nettsteder som Google og Facebook har ogs\u00e5 brukt den minimalistiske stilen, og p\u00e5loggingssidene deres ser bra ut med bare et p\u00e5loggingsskjema, firmalogo og noen f\u00e5 andre detaljer.\n<\/p>\n\n jQuery p\u00e5loggingsbokser
\n<\/h3>\n
\n jQuery-p\u00e5loggingsbokser har blitt brukt p\u00e5 et stort antall nettsteder, og de ser alltid innovative ut og har funnet veien inn i den nye tidens design for p\u00e5loggingsskjemaer for nettsider. De ser enkle, men stilige ut. I motsetning til tidligere, skjer p\u00e5logging i dag p\u00e5 en enkel side, og du trenger ikke \u00e5 bekymre deg for eventuelle jQuery-tilbakeslag.\n<\/p>\n
\n Med jQuery kan du opprette en p\u00e5loggingsknapp p\u00e5 hjemmesiden til nettstedet ditt, som leder de bes\u00f8kende til p\u00e5loggingssiden som er drevet av jQuery. Skjemaet inneholder Ajax-anrop og bruker et eksternt PHP-skript for \u00e5 verifisere p\u00e5loggingsinformasjonen for \u00e5 enten gi eller nekte tilgang. Med jQuery er det enkelt \u00e5 legge til en registreringslenke rett under p\u00e5loggingsboksen. Dette gj\u00f8r prosessen jevnere og gir brukeren en jevn opplevelse. Dine bes\u00f8kende vil finne det enkelt \u00e5 finne registrerings-\/registreringssiden p\u00e5 nettstedet ditt. Du kan ogs\u00e5 bruke den samme p\u00e5loggingsboksen for \u00e5 f\u00e5 tilgang til kontoen din.\n<\/p>\n
\n Akkurat som n\u00e5r du bruker HTML og CSS for \u00e5 lage og style p\u00e5loggingssiden din, m\u00e5 du ha p\u00e5loggingsboksen her til \u00e5 snakke litt om virksomheten din p\u00e5 en m\u00e5te som ikke roter til siden. P\u00e5loggingsskjemaet du lager med jQuery er enkelt og ser vakkert ut. Du m\u00e5 imidlertid legge til et bilde eller bare bedriftslogoen din for \u00e5 gj\u00f8re det mer attraktivt. P\u00e5loggingssidene skal v\u00e6re brukervennlige.\n<\/p>\n
\n P\u00e5loggingsskjemamaler for nettstedbygger
\n<\/h3>\n
\n Den beste nybegynnervennlige m\u00e5ten \u00e5 lage et tiltalende p\u00e5loggingsskjema p\u00e5 er gjennom nettstedbyggerens p\u00e5loggingsskjemamaler. Her trenger du ikke \u00e5 kunne koding, og du trenger ikke engang \u00e5 ha laget noen annen nettside; p\u00e5loggingsskjemaer opprettes med et klikk p\u00e5 en knapp. Nettstedbyggere som Weebly<\/strong> og WordPress<\/strong> tilbyr freemium og premium-former.\n<\/p>\n\n For \u00e5 opprette p\u00e5loggingssiden, installer skjemapluginene og bes\u00f8k deretter innstillingssiden til malen\/pluginen for \u00e5 tilpasse den etter eget \u00f8nske. I WordPress m\u00e5 du installere WPForms<\/strong> og deretter skrive inn kj\u00f8pskoden for \u00e5 bekrefte. G\u00e5 til innstillingssiden og klikk p\u00e5 Addons. Her kan du legge til hvilket som helst element du \u00f8nsker. Klikk User Registration Addon, og du er i gang.\n<\/p>\n\n Klikk «Opprett ny side» og velg deretter «brukerp\u00e5logging»-skjemaet. En mal vil vises med alle feltene som er forh\u00e5ndsopprettet, og alt du trenger \u00e5 gj\u00f8re er \u00e5 klikke p\u00e5 et felt for \u00e5 redigere det. Etter \u00e5 ha redigert hvert felt, klikker du p\u00e5 Innstillinger-fanen og bestemme hva som skal skje etter at en bes\u00f8kende har logget p\u00e5; du kan henvise dem til en bestemt URL.\n<\/p>\n
\n Etter at du har opprettet skjemaet, oppretter du en ny side for p\u00e5loggingsskjemaet. En editor vises og \u00f8verst i den klikker du p\u00e5 «legg til skjema». En popup vises, og du kan velge skjemaet du nettopp opprettet. Du kan fortsette \u00e5 redigere siden for \u00e5 m\u00f8te dine behov bedre, eller du kan lagre og publisere. Du kan legge til den tilpassede p\u00e5loggingen du nettopp opprettet som en widget p\u00e5 sidefeltet p\u00e5 nettstedet ditt.\n<\/p>\n
\n N\u00e5r du har \u00e5 gj\u00f8re med p\u00e5loggingsmaler levert av nettstedsbyggeren, er prosessen mer eller mindre den samme; installer malen, rediger den etter eget \u00f8nske, lag en ny side og sett inn det opprettede skjemaet. Dette anbefales for de som er nye innen webdesign.\n<\/p>\n
\n Tredjepartstemaer og plugins
\n<\/h3>\n\n Temaer
\n<\/h5>\n
\n Nettstedbyggeren din kan ha gitt en p\u00e5loggingsmal eller -tema, gratis eller premium, men det kan hende den ikke oppfyller dine behov. Heldigvis er det mange tredjepartstemaer og plugins<\/a> 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\u00e5 en stilig og attraktiv p\u00e5loggingsside; tema p\u00e5virker ikke bare p\u00e5loggingssiden, men ogs\u00e5 andre aspekter ved nettstedet ditt.\n<\/p>\n\n Du m\u00e5 velge et tema med en p\u00e5loggingsside du liker. Det gode er at med de fleste temaer kan du f\u00e5 en omvisning i funksjonene f\u00f8r du installerer. Temaer koster alt mellom $2 og opp til mer enn $100. Temaer, akkurat som nettbyggermalene, er enkle \u00e5 redigere. Du kan endre designfarger, fonter og st\u00f8rrelser etter din smak og smak.\n<\/p>\n
\n Temaer kan v\u00e6re fra nettstedbyggeren din, premium-temaer, eller kan v\u00e6re fra tredjepartsutviklere som Themeforest<\/strong>.\n<\/p>\n\n Plugins
\n<\/h5>\n
\n Plugins er enkle; i motsetning til temaer som p\u00e5virker nesten alle aspekter av nettstedet ditt, finnes det plugins for forskjellige aspekter av nettstedet ditt. Ergo kan du installere en plugin bare for \u00e5 lage et p\u00e5loggingsskjema eller et registreringsskjema. Plugins er tilgjengelige gratis, og noen er premium; velg en basert p\u00e5 ditt budsjett og dine behov.\n<\/p>\n
\n Alle nettstedbyggere vil ha plugins du kan velge mellom; enten du bruker Weebly<\/strong>, Joomla<\/strong> eller WordPress<\/strong>, er det mange temaer. For \u00e5 opprette en p\u00e5loggingsside ved hjelp av en plugin, bes\u00f8k dashbordet for \u00e5 se listen over tilgjengelige plugins for nettstedbyggeren din. Installer plugin-en du \u00f8nsker, og du vil bli tatt til en betalingsside hvor du betaler for plugin-en.\n<\/p>\n\n Etter at du har installert plugin, vil du bli bedt om \u00e5 redigere de forskjellige elementene; klikk p\u00e5 hvert element for \u00e5 redigere og klikk deretter lagre endringer. Opprett en ny side og legg til skjemaet du har opprettet ved hjelp av plugin.\n<\/p>\n
\n Konklusjon
\n<\/h4>\n
\n En p\u00e5loggingsside m\u00e5 v\u00e6re enkel like mye som den m\u00e5 v\u00e6re tiltalende. Ulike design av p\u00e5loggingssider har v\u00e6rt vitne til i den siste tiden. Velg bare metoden for opprettelse av p\u00e5loggingssiden som du er komfortabel med; ikke velg \u00e5 kode hvis du ikke er godt kjent med koder. Du kan f\u00e5 designhjelp fra en profesjonell, men enda bedre, du kan f\u00e5 hjelp til \u00e5 designe p\u00e5loggingssiden din.\n<\/p>\n
\n Folk har ogs\u00e5 brukt sosiale p\u00e5logginger. Her lar du bes\u00f8kende logge p\u00e5 med sine sosiale medier kontodetaljer som Facebook eller Twitter. Dette er ogs\u00e5 et godt alternativ, siden det er enkelt nok og ogs\u00e5 forbedrer bedriftens tilstedev\u00e6relse og ytelse p\u00e5 sosiale medier. Du kan sjekke innloggingssidene<\/a> til popul\u00e6re nettsteder for \u00e5 f\u00e5 innsikt i hvordan du kan style innloggingssiden for nettstedet ditt; uten \u00e5 rote til det og uten \u00e5 utelate detaljer.\n<\/p>\n<\/p>\n\n Opptakskilde:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"P\u00e5loggingssiden, akkurat som landingssiden til et nettsted, er sv\u00e6rt viktig for bedriftseiere som \u00f8nsker \u00e5 konvertere trafikk. Akkurat som landingssiden, m\u00e5 p\u00e5loggingssiden v\u00e6re sofistikert for at bes\u00f8kende bare skal kunne oppgi detaljene sine uten mye problemer. De fleste av de beste p\u00e5loggingssidene er enkle, de har brukt en minimalistisk stil uten annonser og markedsf\u00f8ringsgimmicker; bare p\u00e5loggingsskjemaet med et bakgrunnsbilde eller to. Det er noen forskjellige m\u00e5ter \u00e5 lage p\u00e5loggingssider p\u00e5 som frister bes\u00f8kende og oppmuntrer dem til \u00e5 komme tilbake. Hvis du er god til \u00e5 kode…<\/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":[57,200],"tags":[],"class_list":["post-257613","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-og-wordpress","category-webdesign-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/comments?post=257613"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257613\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}