Positionnement des \u00e9l\u00e9ments<\/code>
\n<\/h3>\n\n Vous pouvez ensuite styliser les diff\u00e9rentes parties du formulaire en ajoutant un code simple comme celui ci-dessous. Cela placera les diff\u00e9rents composants dans diff\u00e9rentes positions.<\/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 Apr\u00e8s cela, vous pouvez positionner les diff\u00e9rents \u00e9l\u00e9ments de votre page de connexion selon vos sp\u00e9cifications. Tout d’abord, vous devrez sp\u00e9cifier les \u00e9l\u00e9ments de base, tels que la couleur de la police, puis positionner le formulaire au centre de votre page pour l’\u00e9quilibre. Ici, vous pouvez ajouter n’importe quelle couleur de police que vous aimez, ce que vous consid\u00e9rez comme beau. Cependant, il est toujours conseill\u00e9 de veiller \u00e0 ce que le formulaire reste simple afin de ne pas d\u00e9router les visiteurs.\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 \u00c0 ce stade, la forme peut encore sembler bancale et vous pouvez l’am\u00e9liorer en ajoutant un peu de style structurel. Pour cela, commencez par vous assurer que les \u00e9l\u00e9ments de votre formulaire de connexion ne sont pas \u00e9cras\u00e9s et sont facilement lisibles. Vous pouvez ajouter le code suivant pour vous assurer que la propret\u00e9 de votre formulaire.\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 Votre formulaire de connexion sera d\u00e9sormais simple et presque complet avec les diff\u00e9rents \u00e9l\u00e9ments bien positionn\u00e9s. Cependant, vous devez styliser les diff\u00e9rentes zones de saisie de votre formulaire de connexion pour les rendre encore plus belles. Ici, vous sp\u00e9cifierez la couleur, la taille de la police, ajouterez du rembourrage, des marges, la largeur des diff\u00e9rents \u00e9l\u00e9ments et d’autres \u00e9l\u00e9ments de base tels que la couleur qui appara\u00eet lorsque vous passez la souris ou cliquez sur un \u00e9l\u00e9ment. Ajoutez le code ci-dessous.\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 Puisque vous voulez que votre page de connexion soit encore plus belle, vous pouvez ajouter un peu plus de personnalisations pour rendre le bouton de connexion et la case \u00e0 cocher un peu \u00e9l\u00e9gants. Ajoutez le code suivant.\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 Styliser les \u00e9l\u00e9ments de formulaire
\n<\/h3>\n
\n \u00c0 ce stade, les \u00e9l\u00e9ments sont bien positionn\u00e9s et semblent suffisamment sophistiqu\u00e9s. Le formulaire de connexion est pr\u00eat mais vous pouvez toujours le rendre un peu plus beau en ajoutant des codes de style CSS. Vous pouvez commencer le processus en arrondissant les coins du conteneur, puis en lui donnant une ombre pour am\u00e9liorer son apparence et faire ressortir une sensation de profondeur. Pour ce faire, entrez ce code ci-dessous dans la zone conteneur.\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’ajout du code ci-dessus \u00e0 la zone du conteneur fera ressembler le code du conteneur \u00e0 celui ci-dessous :\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 Apr\u00e8s avoir stylis\u00e9 le conteneur, vous pouvez d\u00e9sormais styliser les diff\u00e9rentes zones de saisie avec un code similaire. Ajoutez le code ci-dessous et vos zones de saisie seront beaucoup plus belles qu’elles ne l’\u00e9taient au d\u00e9but.\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 Maintenant, l’ensemble du code de saisie du mot de passe ressemblera \u00e0 celui ci-dessous. Le formulaire de connexion aura l’air g\u00e9nial, mais il y a encore plus de style que vous pouvez faire pour am\u00e9liorer encore plus l’apparence de votre formulaire.\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 Vous devez maintenant rendre le bouton de connexion plus beau et plus distinct. Pour ce faire, entrez le code ci-dessous dans la section de soumission de votre code.\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’ensemble du code de votre section de soumission ressemblera \u00e0 celui ci-dessous et vous aurez chang\u00e9 la couleur de votre bouton de connexion et d’autres aspects, et vous aurez un formulaire de connexion simple comme celui ci-dessous.\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 Le formulaire de connexion semble maintenant bon. Il est conseill\u00e9 de laisser le formulaire aussi simple. Au lieu d’ajouter d’autres \u00e9l\u00e9ments et d’encombrer la page, vous pouvez ajouter le logo de votre entreprise et une seule image. Les visiteurs ont tendance \u00e0 \u00eatre distraits par tant de d\u00e9tails. Par cons\u00e9quent, vous voudrez avoir une page de connexion au site Web aussi simple que possible, mais toujours belle et attrayante pour que les visiteurs reviennent. Vous pouvez prendre des exemples de formulaires de connexion sur certains sites Web populaires tels que Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> et Theidealist<\/strong>, entre autres. Des sites Web tels que Google et Facebook ont \u200b\u200b\u00e9galement utilis\u00e9 le style minimaliste et leurs pages de connexion sont superbes avec juste un formulaire de connexion, le logo de l’entreprise et quelques autres d\u00e9tails.\n<\/p>\n\n Bo\u00eetes de connexion jQuery
\n<\/h3>\n
\n Les bo\u00eetes de connexion jQuery ont \u00e9t\u00e9 utilis\u00e9es sur un grand nombre de sites Web, et elles ont toujours l’air innovantes et ont trouv\u00e9 leur place dans les conceptions de formulaires de connexion aux sites Web de la nouvelle \u00e8re. Ils ont l’air simple mais \u00e9l\u00e9gant. Contrairement au pass\u00e9, la connexion se fait aujourd’hui sur une simple page et vous n’avez pas \u00e0 vous soucier des revers de jQuery.\n<\/p>\n
\n Avec jQuery, vous pouvez cr\u00e9er un bouton de connexion sur la page d’accueil de votre site Web, qui dirige vos visiteurs vers la page de connexion aliment\u00e9e par jQuery. Le formulaire contient un appel Ajax et utilise un script PHP externe pour v\u00e9rifier les informations d’identification de la connexion pour accorder ou refuser l’acc\u00e8s. Avec jQuery, il est facile d’ajouter un lien d’inscription juste en dessous de la bo\u00eete de connexion. Cela rend le processus plus fluide et permet \u00e0 l’utilisateur une exp\u00e9rience fluide. Vos visiteurs trouveront facilement la page d’inscription\/d’inscription sur votre site Web. Vous pouvez \u00e9galement utiliser la m\u00eame bo\u00eete de connexion pour acc\u00e9der \u00e0 votre compte.\n<\/p>\n
\n Tout comme lorsque vous utilisez HTML et CSS pour cr\u00e9er et styliser votre page de connexion, vous devez faire en sorte que la bo\u00eete de connexion ici parle un peu de votre entreprise d’une mani\u00e8re qui n’encombre pas la page. Le formulaire de connexion que vous cr\u00e9ez avec jQuery est simple et beau. Cependant, vous devrez ajouter une image ou simplement le logo de votre entreprise pour le rendre plus attrayant. Les pages de connexion doivent \u00eatre conviviales.\n<\/p>\n
\n Mod\u00e8les de formulaire de connexion au cr\u00e9ateur de site Web
\n<\/h3>\n
\n La meilleure fa\u00e7on conviviale pour les d\u00e9butants de cr\u00e9er un formulaire de connexion attrayant consiste \u00e0 utiliser les mod\u00e8les de formulaire de connexion du cr\u00e9ateur de site Web. Ici, vous n’avez pas besoin de conna\u00eetre le codage, et vous n’avez m\u00eame pas besoin d’avoir d\u00e9j\u00e0 cr\u00e9\u00e9 un autre site Web ; les formulaires de connexion sont cr\u00e9\u00e9s en un clic. Les cr\u00e9ateurs de sites Web tels que Weebly<\/strong> et WordPress<\/strong> proposent des formulaires freemium et premium.\n<\/p>\n\n Pour cr\u00e9er la page de connexion, installez les plugins de formulaire, puis visitez la page des param\u00e8tres du mod\u00e8le\/plugin pour le personnaliser \u00e0 votre guise. Dans WordPress, vous devrez installer WPForms<\/strong> puis entrer votre code d’achat pour v\u00e9rifier. Visitez la page des param\u00e8tres et cliquez sur Addons. Ici, vous pouvez ajouter n’importe quel \u00e9l\u00e9ment que vous voulez. Cliquez sur Addon d’enregistrement d’utilisateur, et vous \u00eates pr\u00eat \u00e0 partir.\n<\/p>\n\n Cliquez sur \u00ab\u00a0Cr\u00e9er une nouvelle page\u00a0\u00bb puis s\u00e9lectionnez le formulaire \u00ab\u00a0Connexion de l’utilisateur\u00a0\u00bb. Un mod\u00e8le appara\u00eetra avec tous les champs pr\u00e9-cr\u00e9\u00e9s, et tout ce que vous avez \u00e0 faire est de cliquer sur un champ pour le modifier. Apr\u00e8s avoir modifi\u00e9 chaque champ, cliquez sur le l’onglet Param\u00e8tres et d\u00e9cidez ce qui doit se passer une fois qu’un visiteur s’est connect\u00e9 ; vous pouvez le diriger vers une certaine URL.\n<\/p>\n
\n Apr\u00e8s avoir cr\u00e9\u00e9 le formulaire, cr\u00e9ez une nouvelle page pour le formulaire de connexion. Un \u00e9diteur appara\u00eetra et en haut de celui-ci, cliquez sur \u00ab\u00a0ajouter un formulaire\u00a0\u00bb. Une fen\u00eatre contextuelle appara\u00eetra et vous pourrez s\u00e9lectionner le formulaire que vous venez de cr\u00e9er. Vous pouvez continuer \u00e0 modifier la page pour mieux r\u00e9pondre \u00e0 vos besoins, ou vous pouvez enregistrer et publier. Vous pouvez ajouter la connexion personnalis\u00e9e que vous venez de cr\u00e9er en tant que widget dans la barre lat\u00e9rale de votre site Web.\n<\/p>\n
\n Lorsqu’il s’agit de mod\u00e8les de connexion fournis par le cr\u00e9ateur de site Web, le processus est plus ou moins le m\u00eame ; installez le mod\u00e8le, modifiez-le \u00e0 votre guise, cr\u00e9ez une nouvelle page et ins\u00e9rez votre formulaire cr\u00e9\u00e9. Ceci est recommand\u00e9 pour ceux qui d\u00e9butent dans la conception de sites Web.\n<\/p>\n
\n Th\u00e8mes et plugins tiers
\n<\/h3>\n\n Th\u00e8mes
\n<\/h5>\n
\n Le constructeur de votre site Web a peut-\u00eatre fourni un mod\u00e8le ou un th\u00e8me de connexion, gratuit ou premium, mais il se peut qu’il ne r\u00e9ponde pas \u00e0 vos besoins. Heureusement, il existe de nombreux th\u00e8mes et plugins tiers<\/a> sp\u00e9cialement pour WordPress. Les th\u00e8mes sont comme des mod\u00e8les pour l’ensemble du site Web qui apportent diff\u00e9rents styles et avec la plupart d’entre eux, vous pourrez obtenir une page de connexion \u00e9l\u00e9gante et attrayante ; Le th\u00e8me affecte non seulement la page de connexion, mais \u00e9galement d’autres aspects de votre site Web.\n<\/p>\n\n Vous devrez choisir un th\u00e8me avec une page de connexion que vous aimez. La bonne chose est qu’avec la plupart des th\u00e8mes, vous pouvez faire un tour des fonctionnalit\u00e9s avant de les installer. Les th\u00e8mes co\u00fbtent entre 2 $ et jusqu’\u00e0 plus de 100 $. Les th\u00e8mes, tout comme les mod\u00e8les de cr\u00e9ation de sites Web, sont faciles \u00e0 modifier. Vous pouvez modifier les couleurs, les polices et les tailles de conception selon vos go\u00fbts et vos go\u00fbts.\n<\/p>\n
\n Les th\u00e8mes peuvent provenir de votre cr\u00e9ateur de site Web, de th\u00e8mes premium ou de d\u00e9veloppeurs tiers tels que Themeforest<\/strong>.\n<\/p>\n\n Plugins
\n<\/h5>\n
\n Les plugins sont simples ; contrairement aux th\u00e8mes qui affectent presque tous les aspects de votre site Web, il existe des plugins pour diff\u00e9rents aspects de votre site Web. Ergo, vous pouvez installer un plugin juste pour cr\u00e9er un formulaire de connexion ou un formulaire d’inscription. Les plugins sont disponibles gratuitement et certains sont premium ; choisissez-en un en fonction de votre budget et de vos besoins.\n<\/p>\n
\n Tous les constructeurs de sites Web auront des plugins parmi lesquels vous pourrez choisir; que vous utilisiez Weebly<\/strong>, Joomla<\/strong> ou WordPress<\/strong>, les th\u00e8mes sont nombreux. Pour cr\u00e9er une page de connexion \u00e0 l’aide d’un plugin, visitez votre tableau de bord pour afficher la liste des plugins disponibles pour votre cr\u00e9ateur de site Web. Installez le plugin que vous voulez et vous serez redirig\u00e9 vers une page de paiement o\u00f9 vous payez pour le plugin.\n<\/p>\n\n Apr\u00e8s avoir install\u00e9 le plugin, vous serez invit\u00e9 \u00e0 \u00e9diter les diff\u00e9rents \u00e9l\u00e9ments ; cliquez sur chaque \u00e9l\u00e9ment \u00e0 modifier, puis cliquez sur enregistrer les modifications. Cr\u00e9ez une nouvelle page et ajoutez le formulaire que vous avez cr\u00e9\u00e9 \u00e0 l’aide du plugin.\n<\/p>\n
\n Conclusion
\n<\/h4>\n
\n Une page de connexion doit \u00eatre simple autant qu’elle doit \u00eatre attrayante. Diff\u00e9rentes conceptions de page de connexion ont \u00e9t\u00e9 observ\u00e9es dans un pass\u00e9 r\u00e9cent. Choisissez uniquement la m\u00e9thode de cr\u00e9ation de page de connexion avec laquelle vous \u00eates \u00e0 l’aise ; ne choisissez pas de coder si vous ne ma\u00eetrisez pas bien les codes. Vous pouvez obtenir l’aide d’un professionnel pour la conception, mais mieux encore, vous pouvez obtenir de l’aide pour concevoir votre page de connexion.\n<\/p>\n
\n Les gens ont \u00e9galement utilis\u00e9 des connexions sociales. Ici, vous permettez aux visiteurs de se connecter avec les d\u00e9tails de leur compte de m\u00e9dias sociaux tels que Facebook ou Twitter. C’est aussi une bonne option car elle est assez simple et am\u00e9liore \u00e9galement la pr\u00e9sence et les performances de votre entreprise sur les r\u00e9seaux sociaux. Vous pouvez consulter les pages de connexion<\/a> des sites Web populaires pour savoir comment styliser la page de connexion de votre site Web. sans l’encombrer et sans oublier les d\u00e9tails.\n<\/p>\n<\/p>\n\n Source d’enregistrement:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"La page de connexion, tout comme la page de destination d’un site Web, est tr\u00e8s importante pour les propri\u00e9taires d’entreprise qui souhaitent convertir le trafic. Tout comme la page de destination, la page de connexion doit \u00eatre sophistiqu\u00e9e pour que les visiteurs puissent simplement fournir leurs coordonn\u00e9es sans trop de tracas. La plupart des meilleures pages de connexion sont simples, elles ont utilis\u00e9 un style minimaliste sans publicit\u00e9 ni gadgets marketing ; juste la forme de connexion avec une image d’arri\u00e8re-plan ou deux. Il existe plusieurs fa\u00e7ons de cr\u00e9er des pages de connexion qui attirent les visiteurs et les encouragent \u00e0 revenir. Si vous savez bien coder, \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":[197,54],"tags":[],"class_list":["post-251770","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creation-de-sites-web","category-web-et-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/comments?post=251770"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/posts\/251770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/media?parent=251770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/categories?post=251770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fr\/wp-json\/wp\/v2\/tags?post=251770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}