Posizionamento degli elementi<\/code>
\n<\/h3>\n\n Puoi quindi modellare le diverse parti del modulo aggiungendo un semplice codice come quello qui sotto. Questo posizioner\u00e0 i diversi componenti in posizioni diverse.<\/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 Successivamente, puoi posizionare i diversi elementi della tua pagina di accesso secondo le tue specifiche. Prima di tutto, dovrai specificare gli elementi di base, come il colore del carattere e quindi posizionare il modulo al centro della pagina per bilanciare. Qui puoi aggiungere qualsiasi colore di carattere che ti piace, qualunque cosa tu consideri bella. Tuttavia, \u00e8 sempre consigliabile assicurarsi che il modulo rimanga semplice per non confondere i visitatori.\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 A questo punto, il modulo potrebbe ancora sembrare traballante e puoi migliorarlo aggiungendo un po' di stile strutturale. Per fare ci\u00f2, inizia assicurandoti che gli elementi del tuo modulo di accesso non siano schiacciati e siano facilmente leggibili. \u00c8 possibile aggiungere il seguente codice per garantire la pulizia del modulo.\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 Il tuo modulo di accesso apparir\u00e0 ora semplice e quasi completo con i diversi elementi ben posizionati. Tuttavia, \u00e8 necessario definire lo stile delle varie aree di input del modulo di accesso per renderle ancora migliori. Qui dovrai specificare il colore, la dimensione del carattere, aggiungere un po' di riempimento, i margini, la larghezza dei diversi elementi e altre nozioni di base come il colore che appare quando passi il mouse o fai clic su un elemento. Aggiungi il codice qui sotto.\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 Dal momento che vuoi che la tua pagina di accesso appaia ancora pi\u00f9 bella, puoi aggiungere un po ‘pi\u00f9 di personalizzazioni per rendere il pulsante di accesso e la casella di controllo un po' eleganti. Aggiungi il seguente codice.\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 Modella gli elementi del modulo
\n<\/h3>\n
\n A questo punto, gli elementi sono ben posizionati e sembrano abbastanza sofisticati. Il modulo di accesso \u00e8 pronto ma puoi ancora renderlo un po' pi\u00f9 bello aggiungendo i codici di stile CSS. Puoi iniziare il processo arrotondando gli angoli del contenitore e quindi dandogli un'ombra per migliorarne l'aspetto e far emergere un senso di profondit\u00e0. Per farlo, inserisci questo codice qui sotto nell'area del contenitore.\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 L'aggiunta del codice precedente all'area del contenitore render\u00e0 il codice del contenitore simile a quello riportato di seguito:\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 Dopo aver definito lo stile del contenitore, ora puoi definire lo stile delle diverse aree di input con un codice simile. Aggiungi il codice qui sotto e le tue aree di input sembreranno molto pi\u00f9 belle di quanto non fossero all'inizio.\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 Ora l'intero codice di inserimento della password sar\u00e0 simile a quello qui sotto. Il modulo di accesso avr\u00e0 un aspetto fantastico, ma c'\u00e8 ancora pi\u00f9 stile che puoi fare per migliorare ulteriormente l'aspetto del tuo modulo.\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 Ora devi rendere il pulsante di accesso migliore e distinto. Per fare ci\u00f2, inserisci il codice qui sotto nella sezione di invio del tuo codice.\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 L'intero codice della tua sezione di invio sar\u00e0 simile a quello qui sotto e avrai cambiato il colore del tuo pulsante di accesso e altri aspetti, e avrai un semplice modulo di accesso come quello qui sotto.\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 Il modulo di accesso ora ha un bell'aspetto. Si consiglia di lasciare il modulo cos\u00ec semplice. Invece di aggiungere altri elementi e ingombrare la pagina, puoi aggiungere il logo della tua attivit\u00e0 e una singola immagine. I visitatori tendono ad essere distratti da cos\u00ec tanti dettagli. Ergo, vorrai avere una pagina di accesso al sito web che sia il pi\u00f9 semplice possibile ma comunque bella e allettante che faccia tornare i visitatori. Puoi prendere esempi di moduli di accesso da alcuni siti Web popolari come Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> e Theidealist<\/strong> tra gli altri. Anche siti web come Google e Facebook hanno utilizzato lo stile minimalista e le loro pagine di accesso hanno un bell'aspetto con solo un modulo di accesso, il logo dell'azienda e pochi altri dettagli.\n<\/p>\n\n Caselle di accesso jQuery
\n<\/h3>\n
\n Le caselle di accesso jQuery sono state utilizzate su un gran numero di siti Web e hanno sempre un aspetto innovativo e hanno trovato la loro strada nei design dei moduli di accesso dei siti Web new-age. Sembrano semplici ma eleganti. A differenza del passato, al giorno d'oggi il login avviene in una semplice pagina e non devi preoccuparti di eventuali battute d'arresto di jQuery.\n<\/p>\n
\n Con jQuery, puoi creare un pulsante di accesso sulla home page del tuo sito Web, che indirizza i tuoi visitatori alla pagina di accesso che \u00e8 alimentata da jQuery. Il modulo contiene una chiamata Ajax e utilizza uno script PHP esterno per verificare le credenziali di accesso per concedere o negare l'accesso. Con jQuery, \u00e8 facile aggiungere un link di registrazione appena sotto la casella di accesso. Ci\u00f2 rende il processo pi\u00f9 fluido e consente all'utente un'esperienza fluida. I tuoi visitatori troveranno facile individuare la pagina di registrazione\/iscrizione sul tuo sito web. Puoi anche utilizzare la stessa casella di accesso per accedere al tuo account.\n<\/p>\n
\n Proprio come quando utilizzi HTML e CSS per creare e modellare la tua pagina di accesso, devi avere la casella di accesso qui che parli un po' della tua attivit\u00e0 in un modo che non ingombra la pagina. Il modulo di accesso che crei con jQuery \u00e8 semplice e ha un bell'aspetto. Tuttavia, dovrai aggiungere un'immagine o solo il logo della tua attivit\u00e0 per renderlo pi\u00f9 accattivante. Le pagine di login dovrebbero essere user-friendly.\n<\/p>\n
\n Modelli di moduli di accesso per Website Builder
\n<\/h3>\n
\n Il miglior modo per i principianti di creare un modulo di accesso accattivante \u00e8 attraverso i modelli di modulo di accesso del costruttore di siti web. Qui non \u00e8 necessario conoscere la codifica e non \u00e8 nemmeno necessario aver mai creato nessun altro sito Web; i moduli di accesso vengono creati con il clic di un pulsante. Costruttori di siti web come Weebly<\/strong> e WordPress<\/strong> offrono moduli freemium e premium.\n<\/p>\n\n Per creare la pagina di accesso, installa i plug-in del modulo e quindi visita la pagina delle impostazioni del modello\/plug-in per personalizzarlo a tuo piacimento. In WordPress, sar\u00e0 necessario installare WPForms<\/strong> e quindi inserire il codice di acquisto per verificare. Visita la pagina delle impostazioni e fai clic su Componenti aggiuntivi. Qui puoi aggiungere qualsiasi elemento tu voglia. Fai clic su Componente aggiuntivo registrazione utente e sei a posto.\n<\/p>\n\n Fai clic su “Crea nuova pagina” e seleziona il modulo “login utente”. Apparir\u00e0 un modello con tutti i campi pre-creati e tutto ci\u00f2 che devi fare \u00e8 fare clic su un campo per modificarlo. Dopo aver modificato ciascun campo, fai clic sul scheda delle impostazioni e decidi cosa deve accadere dopo che un visitatore ha effettuato l'accesso; puoi indirizzarlo a un determinato URL.\n<\/p>\n
\n Dopo aver creato il modulo, crea una nuova pagina per il modulo di accesso. Apparir\u00e0 un editor e nella parte superiore di esso, fai clic su “aggiungi modulo”. Apparir\u00e0 un popup e potrai selezionare il modulo appena creato. Puoi continuare a modificare la pagina per soddisfare meglio le tue esigenze oppure puoi salvare e pubblicare. Puoi aggiungere il login personalizzato che hai appena creato come widget nella barra laterale del tuo sito web.\n<\/p>\n
\n Quando si ha a che fare con i modelli di accesso forniti dal costruttore del sito Web, il processo \u00e8 pi\u00f9 o meno lo stesso; installa il template, modificalo a tuo piacimento, crea una nuova pagina e inserisci il form creato. Questo \u00e8 raccomandato per coloro che sono nuovi nel design del sito web.\n<\/p>\n
\n Temi e plugin di terze parti
\n<\/h3>\n\n Temi
\n<\/h5>\n
\n Il tuo costruttore di siti Web potrebbe aver fornito un modello o un tema di accesso, gratuito o premium, ma potrebbe non soddisfare le tue esigenze. Fortunatamente, ci sono numerosi temi e plugin di terze parti<\/a> specialmente per WordPress. I temi sono come modelli per l'intero sito Web che portano stili diversi e con la maggior parte di essi sarai in grado di ottenere una pagina di accesso elegante e attraente; Il tema non influisce solo sulla pagina di accesso, ma anche su altri aspetti del tuo sito web.\n<\/p>\n\n Dovrai scegliere un tema con una pagina di accesso che ami. La cosa buona \u00e8 che con la maggior parte dei temi, puoi fare un tour delle funzionalit\u00e0 prima dell'installazione. I temi costano da $ 2 a pi\u00f9 di $ 100. I temi, proprio come i modelli di web builder, sono facili da modificare. Puoi modificare i colori, i caratteri e le dimensioni del design a tuo piacimento e gusto.\n<\/p>\n
\n I temi possono provenire dal tuo costruttore di siti Web, temi premium o possono provenire da sviluppatori di terze parti come Themeforest<\/strong>.\n<\/p>\n\n Plugin
\n<\/h5>\n
\n I plugin sono semplici; a differenza dei temi che interessano quasi tutti gli aspetti del tuo sito web, ci sono plugin per diversi aspetti del tuo sito web. Ergo, puoi installare un plugin solo per creare un form di login o un form di registrazione. I plugin sono disponibili gratuitamente e alcuni sono premium; scegline uno in base al tuo budget e alle tue esigenze.\n<\/p>\n
\n Tutti i costruttori di siti Web avranno plug-in tra cui scegliere; che tu stia utilizzando Weebly<\/strong>, Joomla<\/strong> o WordPress<\/strong>, ci sono numerosi temi. Per creare una pagina di accesso utilizzando un plug-in, visita la tua dashboard per visualizzare l'elenco dei plug-in disponibili per il tuo costruttore di siti web. Installa il plug-in che desideri e verrai indirizzato a una pagina di pagamento in cui paghi per il plug-in.\n<\/p>\n\n Dopo aver installato il plugin, ti verr\u00e0 chiesto di modificare i diversi elementi; fare clic su ciascun elemento da modificare e quindi fare clic su salva modifiche. Crea una nuova pagina e aggiungi il modulo che hai creato utilizzando il plug-in.\n<\/p>\n
\n Conclusione
\n<\/h4>\n
\n Una pagina di accesso deve essere semplice tanto quanto accattivante. Nel recente passato sono stati osservati diversi design della pagina di accesso. Scegli solo il metodo di creazione della pagina di accesso con cui ti senti a tuo agio; non scegliere di codificare se non sei esperto di codici. Puoi ottenere assistenza per la progettazione da un professionista, ma ancora meglio, puoi ottenere assistenza per la progettazione della tua pagina di accesso.\n<\/p>\n
\n Le persone hanno anche utilizzato gli accessi social. Qui, consenti ai visitatori di accedere con i dettagli del loro account di social media come Facebook o Twitter. Anche questa \u00e8 una buona opzione visto che \u00e8 abbastanza semplice e migliora anche la presenza e le prestazioni dei social media della tua azienda. Puoi controllare le pagine di accesso<\/a> dei siti Web pi\u00f9 diffusi per ottenere informazioni su come definire lo stile della pagina di accesso del tuo sito Web; senza ingombrarlo e senza tralasciare dettagli.\n<\/p>\n<\/p>\n\n Fonte di registrazione:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"La pagina di accesso, proprio come la pagina di destinazione di un sito Web, \u00e8 molto importante per gli imprenditori che desiderano convertire il traffico. Proprio come la pagina di destinazione, la pagina di accesso deve essere sofisticata affinch\u00e9 i visitatori forniscano semplicemente i propri dettagli senza troppi problemi. La maggior parte delle migliori pagine di accesso sono semplici, hanno utilizzato uno stile minimalista senza pubblicit\u00e0 e trucchi di marketing; solo il login nel modulo con una o due immagini di sfondo. Esistono diversi modi per creare pagine di accesso che attirino i visitatori e li incoraggino a tornare. Se sei bravo a programmare,…<\/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":[199,56],"tags":[],"class_list":["post-255722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-web-e-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/comments?post=255722"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/posts\/255722\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/media?parent=255722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/categories?post=255722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/it\/wp-json\/wp\/v2\/tags?post=255722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}