Elementide positsioneerimine<\/code>
\n<\/h3>\n\n Seej\u00e4rel saate vormi erinevaid osi stiilida, lisades lihtsa koodi, nagu allpool toodud. See asetab erinevad komponendid erinevatesse kohtadesse.<\/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 P\u00e4rast seda saate paigutada oma sisselogimislehe erinevad elemendid vastavalt oma spetsifikatsioonidele. K\u00f5igepealt peate m\u00e4\u00e4rama p\u00f5hielemendid, nagu fondi v\u00e4rv, ja seej\u00e4rel asetama vormi tasakaalu tagamiseks lehe keskele. Siin saate lisada mis tahes meelep\u00e4rase fondiv\u00e4rvi, mida iganes ilusaks peate. Siiski on alati soovitatav j\u00e4lgida, et vorm oleks lihtne, et k\u00fclastajaid mitte segadusse ajada.\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 Siinkohal v\u00f5ib vorm endiselt veider v\u00e4lja n\u00e4ha ja saate seda paremaks muuta, lisades veidi struktuurset stiili. Selleks veenduge k\u00f5igepealt, et teie sisselogimisvormi elemendid ei oleks kokku surutud ja oleksid kergesti loetavad. Vormi puhtuse tagamiseks saate lisada j\u00e4rgmise koodi.\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 Teie sisselogimisvorm n\u00e4eb n\u00fc\u00fcd v\u00e4lja lihtne ja peaaegu t\u00e4ielik, kuna erinevad elemendid on h\u00e4sti paigutatud. Siiski peate oma sisselogimisvormi erinevaid sisestusalasid kujundama, et need veelgi paremad v\u00e4lja n\u00e4eksid. Siin m\u00e4\u00e4rate v\u00e4rvi, fondi suuruse, lisate polstri, veerised, erinevate elementide laiuse ja muud p\u00f5hit\u00f5ed, n\u00e4iteks v\u00e4rvi, mis kuvatakse hiirekursori h\u00f5ljutamisel v\u00f5i elemendil kl\u00f5psamisel. Lisage allolev kood.\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 Kuna soovite, et teie sisselogimisleht n\u00e4eks veelgi ilusam v\u00e4lja, saate lisada veidi rohkem kohandusi, et sisselogimisnupp ja m\u00e4rkeruut veidi stiilsed v\u00e4lja n\u00e4eksid. Lisage j\u00e4rgmine kood.\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 Stiilige vormielemendid
\n<\/h3>\n
\n Sel hetkel on elemendid h\u00e4sti paigutatud ja n\u00e4evad piisavalt keerukad v\u00e4lja. Sisselogimisvorm on valmis, kuid saate selle siiski veidi ilusamaks muuta, lisades CSS-i stiilikoode. Protsessi saate alustada, muutes konteineri nurgad \u00fcmaraks ja seej\u00e4rel andes sellele varju, et parandada selle v\u00e4limust ja tuua esile s\u00fcgavuse tunne. Selleks sisestage see kood allpool konteineri alale.\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 \u00dclaltoodud koodi lisamine konteineri alale muudab konteineri koodi j\u00e4rgmiseks:\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 Kui olete konteineri stiili kujundanud, saate n\u00fc\u00fcd stiilida erinevaid sisestusalasid sarnase koodiga. Lisage allolev kood ja teie sisestusalad n\u00e4evad palju ilusamad kui alguses.\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\u00fc\u00fcd n\u00e4eb kogu parooli sisestuskood v\u00e4lja selline, nagu allpool. Sisselogimisvorm n\u00e4eb vinge v\u00e4lja, kuid on veel rohkem stiili, mida saate teha, et oma vormi v\u00e4limust veelgi t\u00e4iustada.\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 N\u00fc\u00fcd peate muutma sisselogimisnupu paremaks ja selgemaks. Selleks sisestage oma koodi esitamise jaotisesse allolev kood.\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 Kogu teie esitamise jaotise kood n\u00e4eb v\u00e4lja nagu allolev ja olete muutnud oma sisselogimisnupu v\u00e4rvi ja muid aspekte ning teil on lihtne sisselogimisvorm, nagu allolev.\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 Sisselogimisvorm n\u00e4eb n\u00fc\u00fcd hea v\u00e4lja. Soovitav on j\u00e4tta vorm nii lihtsaks. Muude elementide lisamise ja lehe risustamise asemel saate lisada oma ettev\u00f5tte logo ja \u00fche pildi. K\u00fclastajaid kipuvad segama nii paljud \u00fcksikasjad. Seet\u00f5ttu soovite oma veebisaidi sisselogimislehte, mis on v\u00f5imalikult lihtne, kuid siiski ilus ja ahvatlev, pannes k\u00fclastajad uuesti tagasi tulema. V\u00f5ite v\u00f5tta sisselogimisvormide n\u00e4iteid m\u00f5nelt populaarselt veebisaidilt, nagu Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> ja Theidealist<\/strong>. Veebisaidid, nagu Google ja Facebook, on samuti kasutanud minimalistlikku stiili ning nende sisselogimislehed n\u00e4evad suurep\u00e4rased v\u00e4lja ainult sisselogimisvormi, ettev\u00f5tte logo ja m\u00f5ne muu detailiga.\n<\/p>\n\n jQuery sisselogimiskastid
\n<\/h3>\n
\n jQuery sisselogimiskaste on kasutatud paljudel veebisaitidel ja need n\u00e4evad alati uuenduslikud v\u00e4lja ning on leidnud tee uue ajastu veebisaitide sisselogimisvormide kujundustesse. Nad n\u00e4evad v\u00e4lja lihtsad, kuid stiilsed. Erinevalt varasemast toimub sisselogimine t\u00e4nap\u00e4eval lihtsal lehel ja te ei pea kartma jQuery tagasil\u00f6\u00f6kide p\u00e4rast.\n<\/p>\n
\n jQuery abil saate luua oma veebisaidi avalehele sisselogimisnupu, mis suunab teie k\u00fclastajad jQuery toega sisselogimislehele. Vorm sisaldab Ajaxi k\u00f5net ja kasutab v\u00e4list PHP-skripti, et kontrollida juurdep\u00e4\u00e4su andmiseks v\u00f5i keelamiseks sisselogimise mandaate. jQuery abil on lihtne lisada registreerimislink vahetult sisselogimiskasti alla. See muudab protsessi sujuvamaks ja annab kasutajale sujuva kogemuse. Teie k\u00fclastajatel on teie veebisaidil registreerimis-\/registreerimislehe leidmine lihtne. Sama sisselogimiskasti saate kasutada ka oma kontole juurdep\u00e4\u00e4suks.\n<\/p>\n
\n T\u00e4pselt nagu siis, kui kasutate oma sisselogimislehe loomiseks ja stiiliks HTML-i ja CSS-i, peab ka siin olev sisselogimiskast r\u00e4\u00e4kima teie ettev\u00f5ttest veidi nii, et see lehte ei segaks. JQueryga loodud sisselogimisvorm on lihtne ja n\u00e4eb ilus v\u00e4lja. Siiski peate lisama pildi v\u00f5i lihtsalt oma ettev\u00f5tte logo, et muuta see atraktiivsemaks. Sisselogimislehed peaksid olema kasutajas\u00f5bralikud.\n<\/p>\n
\n Veebisaidi koostaja sisselogimisvormi mallid
\n<\/h3>\n
\n Parim algajas\u00f5bralik viis ahvatleva sisselogimisvormi loomiseks on veebisaidi koostaja sisselogimisvormi mallide kaudu. Siin ei pea te teadma kodeerimist ja te ei pea isegi olema kunagi loonud \u00fchtegi teist veebisaiti; sisselogimisvormid luuakse \u00fche nupuvajutusega. Veebisaitide koostajad, nagu Weebly<\/strong> ja WordPress<\/strong>, pakuvad freemium- ja premium-vorme.\n<\/p>\n\n Sisselogimislehe loomiseks installige vormipluginad ja seej\u00e4rel k\u00fclastage malli\/plugina seadete lehte, et seda oma maitse j\u00e4rgi kohandada. WordPressis peate installima WPForms<\/strong> ja seej\u00e4rel sisestama kinnitamiseks oma ostukoodi. K\u00fclastage seadete lehte ja kl\u00f5psake nuppu Lisad. Siin saate lisada mis tahes soovitud elemendi. Kl\u00f5psake nuppu User Registration Addon ja oletegi valmis.\n<\/p>\n\n Kl\u00f5psake “Loo uus leht” ja seej\u00e4rel valige vorm “kasutaja sisselogimine”. Ilmub mall koos k\u00f5igi eelnevalt loodud v\u00e4ljadega ja selle muutmiseks peate vaid kl\u00f5psama v\u00e4ljal. P\u00e4rast iga v\u00e4lja muutmist kl\u00f5psake seadete vahekaardil ja otsustada, mis peaks juhtuma p\u00e4rast seda, kui k\u00fclastaja on sisse loginud; saate suunata nad teatud URL-ile.\n<\/p>\n
\n P\u00e4rast vormi loomist looge sisselogimisvormi jaoks uus leht. Ilmub redaktor ja selle \u00fclaosas kl\u00f5psake “Lisa vorm”. Ilmub h\u00fcpikaken ja saate valida just loodud vormi. Saate j\u00e4tkata lehe muutmist, et see vastaks teie vajadustele paremini, v\u00f5i salvestada ja avaldada. Saate lisada just loodud kohandatud sisselogimisandmed vidinana oma veebisaidi k\u00fclgribale.\n<\/p>\n
\n Veebisaidi koostaja pakutavate sisselogimismallidega tegelemisel on protsess enam-v\u00e4hem sama; installige mall, muutke seda oma maitse j\u00e4rgi, looge uus leht ja sisestage loodud vorm. See on soovitatav neile, kes on veebisaidi kujundamises uued.\n<\/p>\n
\n Kolmanda osapoole teemad ja pistikprogrammid
\n<\/h3>\n\n Teemad
\n<\/h5>\n
\n Teie veebisaidi koostaja v\u00f5ib olla andnud sisselogimismalli v\u00f5i teema tasuta v\u00f5i tasulisena, kuid see ei pruugi teie vajadustele vastata. \u00d5nneks on spetsiaalselt WordPressi jaoks palju kolmanda osapoole teemasid ja pistikprogramme .<\/a> Teemad on nagu kogu veebisaidi mallid, mis toovad sisse erinevaid stiile ja enamiku neist saate stiilse ja atraktiivse sisselogimislehe; teema ei m\u00f5juta mitte ainult sisselogimislehte, vaid ka muid teie veebisaidi aspekte.\n<\/p>\n\n Peate valima meeldiva sisselogimislehega teema. Hea on see, et enamiku teemade puhul saate enne installimist tutvuda funktsioonidega. Teemad maksavad midagi vahemikus $ 2 kuni rohkem kui 100 $. Teemasid, nagu ka veebiehitaja malle, on lihtne redigeerida. Saate muuta kujunduse v\u00e4rve, fonte ja suurusi vastavalt oma maitsele ja maitsele.\n<\/p>\n
\n Teemad v\u00f5ivad p\u00e4rineda teie veebisaidi koostajalt, esmaklassilistelt teemadelt v\u00f5i kolmandate osapoolte arendajatelt, n\u00e4iteks Themeforest<\/strong>.\n<\/p>\n\n Pluginad
\n<\/h5>\n
\n Pluginad on lihtsad; Erinevalt teemadest, mis m\u00f5jutavad peaaegu k\u00f5iki teie veebisaidi aspekte, on teie veebisaidi erinevate aspektide jaoks olemas pistikprogrammid. Seega saate installida plugina lihtsalt sisselogimisvormi v\u00f5i registreerimisvormi loomiseks. Pluginad on saadaval tasuta ja m\u00f5ned on esmaklassilised; valige \u00fcks oma eelarvest ja vajadustest l\u00e4htuvalt.\n<\/p>\n
\n K\u00f5igil veebisaitide koostajatel on pistikprogrammid, mille vahel saate valida; Olenemata sellest, kas kasutate Weeblyt<\/strong>, Joomlat<\/strong> v\u00f5i WordPressi<\/strong>, on palju teemasid. Pistikprogrammi abil sisselogimislehe loomiseks k\u00fclastage oma armatuurlauda, \u200b\u200bet vaadata veebisaidi koostaja jaoks saadaolevate pistikprogrammide loendit. Installige soovitud pistikprogramm ja teid suunatakse kassalehele, kus maksate pistikprogrammi eest.\n<\/p>\n\n P\u00e4rast pistikprogrammi installimist palutakse teil redigeerida erinevaid elemente; kl\u00f5psake igal redigeerimiseks elemendil ja seej\u00e4rel kl\u00f5psake nuppu Salvesta muudatused. Looge uus leht ja lisage pistikprogrammi abil loodud vorm.\n<\/p>\n
\n J\u00e4reldus
\n<\/h4>\n
\n Sisselogimisleht peab olema nii lihtne kui ka ahvatlev. Viimasel ajal on olnud erinevaid sisselogimislehtede kujundusi. Valige ainult teile sobiv sisselogimislehe loomise meetod; \u00e4ra vali kodeerimist, kui sa pole koodidega h\u00e4sti kursis. Kujundusabi saate professionaalilt, kuid mis veelgi parem, saate abi oma sisselogimislehe kujundamisel.\n<\/p>\n
\n Inimesed on kasutanud ka sotsiaalseid sisselogimisi. Siin saate k\u00fclastajatel sisse logida oma sotsiaalmeedia konto andmetega, nagu Facebook v\u00f5i Twitter. See on ka hea valik, kuna see on piisavalt lihtne ja suurendab ka teie ettev\u00f5tte kohalolekut sotsiaalmeedias ja toimivust. Saate vaadata populaarsete veebisaitide sisselogimislehti<\/a>, et saada teavet veebisaidi sisselogimislehe stiili kujundamise kohta; ilma seda segamata ja detaile v\u00e4lja j\u00e4tmata.\n<\/p>\n<\/p>\n\n :
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Sisselogimisleht, nagu ka veebisaidi maandumisleht, on v\u00e4ga oluline ettev\u00f5tete omanikele, kes soovivad liiklust teisendada. Nii nagu sihtleht, peab ka sisselogimisleht olema keerukas, et k\u00fclastajad saaksid lihtsalt oma andmed ilma suurema vaevata esitada. Enamik parimaid sisselogimislehti on lihtsad, neil on kasutatud minimalistlikku stiili ilma reklaamide ja turundustrikkideta; lihtsalt sisselogimisvorm koos taustapildiga v\u00f5i kahega. Sisselogimislehtede loomiseks on mitu erinevat viisi, mis meelitavad k\u00fclastajaid ja julgustavad neid tagasi tulema. Kui oskad h\u00e4sti kodeerida,\u2026<\/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":[195,52],"tags":[],"class_list":["post-248016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veebikujundus","category-web-ja-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/248016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/comments?post=248016"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/248016\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media?parent=248016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/categories?post=248016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/tags?post=248016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}