Positionierung der Elemente<\/code>
\n<\/h3>\n\n Sie k\u00f6nnen dann die verschiedenen Teile des Formulars gestalten, indem Sie einen einfachen Code wie den folgenden hinzuf\u00fcgen. Dadurch werden die verschiedenen Komponenten in verschiedenen Positionen platziert.<\/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 Anschlie\u00dfend k\u00f6nnen Sie die verschiedenen Elemente Ihrer Anmeldeseite nach Ihren Vorgaben positionieren. Zun\u00e4chst m\u00fcssen Sie die grundlegenden Elemente wie die Schriftfarbe festlegen und dann das Formular aus Gr\u00fcnden der Balance in der Mitte Ihrer Seite positionieren. Hier k\u00f6nnen Sie jede beliebige Schriftfarbe hinzuf\u00fcgen, die Sie f\u00fcr sch\u00f6n halten. Es ist jedoch immer ratsam, darauf zu achten, dass die Form einfach bleibt, um die Besucher nicht zu verwirren.\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 Zu diesem Zeitpunkt sieht die Form m\u00f6glicherweise noch wackelig aus, und Sie k\u00f6nnen sie verbessern, indem Sie ein wenig strukturellen Stil hinzuf\u00fcgen. Achten Sie dazu zun\u00e4chst darauf, dass die Elemente Ihres Login-Formulars nicht zusammengequetscht und gut lesbar sind. Sie k\u00f6nnen den folgenden Code hinzuf\u00fcgen, um sicherzustellen, dass Ihr Formular sauber ist.\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 Ihr Anmeldeformular sieht jetzt einfach und fast vollst\u00e4ndig aus, mit den verschiedenen Elementen, die gut positioniert sind. Sie m\u00fcssen jedoch die verschiedenen Eingabebereiche Ihres Anmeldeformulars gestalten, damit sie noch besser aussehen. Hier geben Sie Farbe, Schriftgr\u00f6\u00dfe, Auff\u00fcllung, R\u00e4nder, die Breite der verschiedenen Elemente und andere Grundlagen an, z. B. die Farbe, die angezeigt wird, wenn Sie mit der Maus dar\u00fcber fahren oder auf ein Element klicken. F\u00fcgen Sie den folgenden Code hinzu.\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 Da Sie m\u00f6chten, dass Ihre Anmeldeseite noch sch\u00f6ner aussieht, k\u00f6nnen Sie ein wenig mehr Anpassungen hinzuf\u00fcgen, um die Anmeldeschaltfl\u00e4che und das Kontrollk\u00e4stchen ein wenig stilvoller aussehen zu lassen. F\u00fcgen Sie den folgenden Code hinzu.\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 Gestalten Sie die Formularelemente
\n<\/h3>\n
\n An dieser Stelle sind die Elemente gut positioniert und sehen raffiniert genug aus. Das Anmeldeformular ist fertig, aber Sie k\u00f6nnen es noch etwas sch\u00f6ner gestalten, indem Sie CSS-Styling-Codes hinzuf\u00fcgen. Sie k\u00f6nnen den Prozess beginnen, indem Sie den Beh\u00e4lter mit abgerundeten Ecken versehen und ihm dann einen Schatten geben, um sein Aussehen zu verbessern und ein Gef\u00fchl von Tiefe hervorzuheben. Geben Sie dazu diesen Code unten in den Containerbereich ein.\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 Wenn Sie den obigen Code zum Containerbereich hinzuf\u00fcgen, sieht der Containercode wie folgt aus:\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 Nachdem Sie den Container gestylt haben, k\u00f6nnen Sie nun die verschiedenen Eingabebereiche mit einem \u00e4hnlichen Code stylen. F\u00fcgen Sie den folgenden Code hinzu, und Ihre Eingabebereiche werden viel sch\u00f6ner aussehen als am Anfang.\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 Jetzt sieht der gesamte Passwort-Eingabecode wie folgt aus. Das Anmeldeformular wird gro\u00dfartig aussehen, aber Sie k\u00f6nnen noch mehr Styling vornehmen, um das Aussehen Ihres Formulars noch weiter zu verbessern.\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 Sie m\u00fcssen jetzt den Login-Button besser und deutlicher aussehen lassen. Geben Sie dazu den unten stehenden Code in den Sendebereich Ihres Codes ein.\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 Der gesamte Code Ihres Submit-Abschnitts sieht wie unten aus und Sie haben die Farbe Ihrer Login-Schaltfl\u00e4che und andere Aspekte ge\u00e4ndert, und Sie haben ein einfaches Login-Formular wie das untenstehende.\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 Das Anmeldeformular sieht jetzt gut aus. Es ist ratsam, das Formular so einfach zu belassen. Anstatt weitere Elemente hinzuzuf\u00fcgen und die Seite un\u00fcbersichtlich zu machen, k\u00f6nnen Sie das Logo Ihres Unternehmens und ein einzelnes Bild hinzuf\u00fcgen. Besucher werden von so vielen Details abgelenkt. Ergo m\u00f6chten Sie eine Website-Anmeldeseite haben, die so einfach wie m\u00f6glich ist, aber dennoch sch\u00f6n und verlockend ist und die Besucher dazu bringt, wiederzukommen. Sie k\u00f6nnen Beispiele f\u00fcr Anmeldeformulare von einigen beliebten Websites wie Snoggle News<\/strong>, Dropbox<\/strong>, Freshbooks<\/strong>, MailChimp<\/strong> und Theidealist<\/strong> nehmen. Websites wie Google und Facebook haben ebenfalls den minimalistischen Stil verwendet, und ihre Anmeldeseiten sehen mit nur einem Anmeldeformular, einem Firmenlogo und ein paar anderen Details gro\u00dfartig aus.\n<\/p>\n\n jQuery-Login-Boxen
\n<\/h3>\n
\n jQuery-Login-Boxen wurden auf einer gro\u00dfen Anzahl von Websites verwendet, und sie sehen immer innovativ aus und haben ihren Weg in die Designs der New-Age-Website-Login-Formulare gefunden. Sie sehen schlicht und doch stylisch aus. Im Gegensatz zu fr\u00fcher erfolgt die Anmeldung heute auf einer einfachen Seite und Sie m\u00fcssen keine jQuery-R\u00fcckschl\u00e4ge bef\u00fcrchten.\n<\/p>\n
\n Mit jQuery k\u00f6nnen Sie auf der Startseite Ihrer Website eine Anmeldeschaltfl\u00e4che erstellen, die Ihre Besucher auf die von jQuery unterst\u00fctzte Anmeldeseite weiterleitet. Das Formular enth\u00e4lt einen Ajax-Aufruf und verwendet ein externes PHP-Skript, um die Anmeldeinformationen des Logins zu \u00fcberpr\u00fcfen, um den Zugriff entweder zu gew\u00e4hren oder zu verweigern. Mit jQuery ist es einfach, einen Registrierungslink direkt unter dem Anmeldefeld hinzuzuf\u00fcgen. Dies macht den Prozess reibungsloser und erm\u00f6glicht dem Benutzer ein reibungsloses Erlebnis. Ihre Besucher werden es leicht finden, die Registrierungs-\/Anmeldeseite auf Ihrer Website zu finden. Sie k\u00f6nnen dasselbe Anmeldefeld auch verwenden, um auf Ihr Konto zuzugreifen.\n<\/p>\n
\n Genauso wie Sie HTML und CSS verwenden, um Ihre Anmeldeseite zu erstellen und zu gestalten, muss das Anmeldefeld hier ein wenig \u00fcber Ihr Unternehmen sprechen, ohne dass die Seite \u00fcberladen wird. Das Anmeldeformular, das Sie mit jQuery erstellen, ist einfach und sieht sch\u00f6n aus. Sie m\u00fcssen jedoch ein Bild oder nur Ihr Firmenlogo hinzuf\u00fcgen, um es ansprechender zu gestalten. Anmeldeseiten sollten benutzerfreundlich sein.\n<\/p>\n
\n Anmeldeformularvorlagen f\u00fcr den Website-Baukasten
\n<\/h3>\n
\n Die beste anf\u00e4ngerfreundliche M\u00f6glichkeit, ein ansprechendes Anmeldeformular zu erstellen, sind die Anmeldeformularvorlagen des Website-Baukastens. Hier m\u00fcssen Sie nicht programmieren k\u00f6nnen, und Sie m\u00fcssen noch nicht einmal eine andere Website erstellt haben; Anmeldeformulare werden auf Knopfdruck erstellt. Website-Bauk\u00e4sten wie Weebly<\/strong> und WordPress<\/strong> bieten Freemium- und Premium-Formulare an.\n<\/p>\n\n Um die Anmeldeseite zu erstellen, installieren Sie die Formular-Plugins und besuchen Sie dann die Einstellungsseite der Vorlage\/des Plugins, um sie nach Ihren W\u00fcnschen anzupassen. In WordPress m\u00fcssen Sie WPForms<\/strong> installieren und dann Ihren Kaufcode zur \u00dcberpr\u00fcfung eingeben. Besuchen Sie die Einstellungsseite und klicken Sie auf Addons. Hier k\u00f6nnen Sie jedes gew\u00fcnschte Element hinzuf\u00fcgen. Klicken Sie auf Benutzerregistrierungs-Addon, und Sie k\u00f6nnen loslegen.\n<\/p>\n\n Klicken Sie auf \u201eNeue Seite erstellen“ und w\u00e4hlen Sie dann das Formular \u201eBenutzeranmeldung“. Eine Vorlage mit allen vorgefertigten Feldern wird angezeigt, und Sie m\u00fcssen nur auf ein Feld klicken, um es zu bearbeiten. Nachdem Sie jedes Feld bearbeitet haben, klicken Sie auf das Registerkarte \u201eEinstellungen“ und entscheiden Sie, was passieren soll, nachdem sich ein Besucher angemeldet hat; Sie k\u00f6nnen ihn zu einer bestimmten URL leiten.\n<\/p>\n
\n Nachdem Sie das Formular erstellt haben, erstellen Sie eine neue Seite f\u00fcr das Anmeldeformular. Ein Editor wird angezeigt und oben klicken Sie auf \u201eFormular hinzuf\u00fcgen“. Ein Popup-Fenster wird angezeigt, und Sie k\u00f6nnen das soeben erstellte Formular ausw\u00e4hlen. Sie k\u00f6nnen die Seite weiter bearbeiten, um sie Ihren Anforderungen besser anzupassen, oder sie speichern und ver\u00f6ffentlichen. Sie k\u00f6nnen das soeben erstellte benutzerdefinierte Login als Widget in der Seitenleiste Ihrer Website hinzuf\u00fcgen.\n<\/p>\n
\n Beim Umgang mit Anmeldevorlagen, die vom Website-Ersteller bereitgestellt werden, ist der Prozess mehr oder weniger derselbe; Installieren Sie die Vorlage, bearbeiten Sie sie nach Ihren W\u00fcnschen, erstellen Sie eine neue Seite und f\u00fcgen Sie Ihr erstelltes Formular ein. Dies wird f\u00fcr diejenigen empfohlen, die neu im Website-Design sind.\n<\/p>\n
\n Themes und Plugins von Drittanbietern
\n<\/h3>\n\n Themen
\n<\/h5>\n
\n Ihr Website-Builder hat m\u00f6glicherweise eine kostenlose oder Premium-Anmeldevorlage oder ein Design bereitgestellt, die jedoch m\u00f6glicherweise nicht Ihren Anforderungen entsprechen. Gl\u00fccklicherweise gibt es speziell f\u00fcr WordPress zahlreiche Themes und Plugins von Drittanbietern .<\/a> Themen sind wie Vorlagen f\u00fcr die gesamte Website, die verschiedene Stile einbringen, und mit den meisten von ihnen erhalten Sie eine stilvolle und attraktive Anmeldeseite. Das Design wirkt sich nicht nur auf die Anmeldeseite aus, sondern auch auf andere Aspekte Ihrer Website.\n<\/p>\n\n Sie m\u00fcssen ein Thema mit einer Anmeldeseite ausw\u00e4hlen, die Ihnen gef\u00e4llt. Das Gute ist, dass Sie bei den meisten Themen vor der Installation eine Tour durch die Funktionen machen k\u00f6nnen. Themen kosten alles zwischen 2 $ und bis zu mehr als 100 $. Designs sind genau wie die Web Builder-Vorlagen einfach zu bearbeiten. Sie k\u00f6nnen die Designfarben, Schriftarten und Gr\u00f6\u00dfen nach Ihren W\u00fcnschen und Ihrem Geschmack \u00e4ndern.\n<\/p>\n
\n Designs k\u00f6nnen von Ihrem Website-Builder, Premium-Designs oder von Drittentwicklern wie Themeforest<\/strong> stammen .\n<\/p>\n\n Plugins
\n<\/h5>\n
\n Plugins sind einfach; Im Gegensatz zu Themen, die fast alle Aspekte Ihrer Website betreffen, gibt es Plugins f\u00fcr verschiedene Aspekte Ihrer Website. Ergo k\u00f6nnen Sie ein Plugin installieren, um nur ein Anmeldeformular oder ein Registrierungsformular zu erstellen. Plugins sind kostenlos verf\u00fcgbar und einige sind Premium; W\u00e4hlen Sie eine basierend auf Ihrem Budget und Ihren Bed\u00fcrfnissen.\n<\/p>\n
\n Alle Website-Ersteller haben Plugins, aus denen Sie ausw\u00e4hlen k\u00f6nnen; Ob Sie Weebly<\/strong>, Joomla<\/strong> oder WordPress<\/strong> verwenden, es gibt zahlreiche Themen. Um eine Anmeldeseite mit einem Plugin zu erstellen, besuchen Sie Ihr Dashboard, um die Liste der verf\u00fcgbaren Plugins f\u00fcr Ihren Website-Builder anzuzeigen. Installieren Sie das gew\u00fcnschte Plugin und Sie werden zu einer Checkout-Seite weitergeleitet, auf der Sie f\u00fcr das Plugin bezahlen.\n<\/p>\n\n Nach der Installation des Plugins werden Sie aufgefordert, die verschiedenen Elemente zu bearbeiten; Klicken Sie auf jedes Element, um es zu bearbeiten, und klicken Sie dann auf \u00c4nderungen speichern. Erstellen Sie eine neue Seite und f\u00fcgen Sie das Formular hinzu, das Sie mit dem Plugin erstellt haben.\n<\/p>\n
\n Fazit
\n<\/h4>\n
\n Eine Anmeldeseite muss ebenso einfach wie ansprechend sein. In der j\u00fcngeren Vergangenheit wurden verschiedene Anmeldeseitendesigns beobachtet. W\u00e4hlen Sie nur die Methode zum Erstellen der Anmeldeseite, mit der Sie vertraut sind; Entscheiden Sie sich nicht f\u00fcr das Codieren, wenn Sie sich mit Codes nicht gut auskennen. Sie k\u00f6nnen Designunterst\u00fctzung von einem Fachmann erhalten, aber noch besser, Sie k\u00f6nnen Hilfe beim Entwerfen Ihrer Anmeldeseite erhalten.\n<\/p>\n
\n Die Leute haben auch soziale Logins verwendet. Hier k\u00f6nnen sich Besucher mit ihren Social-Media-Kontodaten wie Facebook oder Twitter anmelden. Dies ist auch eine gute Option, da sie einfach genug ist und auch die Pr\u00e4senz und Leistung Ihres Unternehmens in den sozialen Medien verbessert. Sie k\u00f6nnen sich die Anmeldeseiten<\/a> beliebter Websites ansehen, um Einblicke in die Gestaltung Ihrer Website-Anmeldeseite zu erhalten. ohne es zu \u00fcberladen und ohne Details auszulassen.\n<\/p>\n<\/p>\n\n Aufnahmequelle:
instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Die Anmeldeseite ist, genau wie die Zielseite einer Website, sehr wichtig f\u00fcr Gesch\u00e4ftsinhaber, die Traffic konvertieren m\u00f6chten. Genau wie die Zielseite muss die Anmeldeseite so ausgefeilt sein, dass Besucher ohne gro\u00dfen Aufwand einfach ihre Daten eingeben k\u00f6nnen. Die meisten der besten Anmeldeseiten sind unkompliziert, sie haben einen minimalistischen Stil ohne Werbung und Marketing-Gimmicks verwendet; nur das Login-Formular mit einem oder zwei Hintergrundbildern. Es gibt verschiedene M\u00f6glichkeiten, Anmeldeseiten zu erstellen, die Besucher umwerben und zum Wiederkommen animieren. Wenn Sie gut programmieren k\u00f6nnen, \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":[55,198],"tags":[],"class_list":["post-253666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-und-wordpress","category-webdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/comments?post=253666"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/posts\/253666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media\/159941"}],"wp:attachment":[{"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/media?parent=253666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/categories?post=253666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/de\/wp-json\/wp\/v2\/tags?post=253666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}