So erstellen Sie eine schöne benutzerdefinierte Anmeldeseite für Ihre Website

Veröffentlicht: 2017-08-10

Die Anmeldeseite ist, genau wie die Zielseite einer Website, sehr wichtig für Geschäftsinhaber, die Traffic konvertieren möchten. Genau wie die Zielseite muss die Anmeldeseite so ausgefeilt sein, dass Besucher ohne großen Aufwand einfach ihre Daten eingeben können.

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öglichkeiten, Anmeldeseiten zu erstellen, die Besucher umwerben und zum Wiederkommen animieren.

Wenn Sie gut im Programmieren sind (einfaches HTML und CSS), sollten Sie in der Lage sein, mit ein paar einfachen Codes eine einfache, aber ansprechende Anmeldeseite zu erstellen.
Für Neulinge ist es einfacher, die Anmeldeseite anzupassen, die mit der Vorlage des Website-Builders geliefert wird. Die meisten Website-Ersteller und -Vorlagen ( WordPress , Weebly , Shopify , Joomla und andere) werden mit fertigen Vorlagen geliefert, und alles, was Sie tun müssen, ist, sie an Ihre Bedürfnisse anzupassen.
Sie können auch einfache Plugins und Designs verwenden, um eine Anmeldeseite zu erstellen. Plugins sind gut, weil sie es Ihnen ermöglichen, Ihre Anmeldeseite mit einem Klick auf eine Schaltfläche anzupassen. Sie können sowohl von Neulingen als auch von erfahrenen Webdesignern verwendet werden.

Die Methode, die Sie zum Anpassen Ihrer Website-Anmeldeseite wählen, hängt von Ihrem Kenntnisstand ab. Während das Codieren für eine Person eine gute Methode sein kann, weiß eine andere möglicherweise nicht, wo sie welchen Code platzieren soll. Plugins sind gut, aber einige sind erstklassig.

Lesen Sie weiter, um zu erfahren, wie Sie eine ansprechende Anmeldeseite erstellen und anpassen können.

Verwenden Sie einfaches HTML/CSS

Das Erstellen und Anpassen eines Anmeldeformulars in HTML und CSS erfolgt in drei einfachen Schritten: HTML-Markup bearbeiten, die verschiedenen Elemente des Anmeldeformulars positionieren und schließlich die verschiedenen Elemente so gestalten, dass sie ansprechend aussehen.

HTML-Markup

Hier fügen Sie einfache HTML-Tags hinzu, um das eigentliche Formular zu erstellen. Der HTML-Teil besteht aus einem Container, dem Formular selbst und einigen anderen Eingaben. Durch die korrekte Eingabe des Codes können Sie ein einfaches Anmeldeformular mit einem Benutzernamensteil, einem Passwortteil, einem Kontrollkästchen und einer Anmeldeschaltfläche erstellen. Die Komponenten sind jedoch nicht gut angeordnet.

<div id="container">
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="
username">
<label for="password">Password:</label>
<input type="password" id="password" name
="password">
<div id="lower">
<input type="checkbox"><label for="checkbox
">Keep me logged in</label>
<input type="submit" value="Login">
</div>
</form>
</div>

Positionierung der Elemente

Sie können dann die verschiedenen Teile des Formulars gestalten, indem Sie einen einfachen Code wie den folgenden hinzufügen. Dadurch werden die verschiedenen Komponenten in verschiedenen Positionen platziert.

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}

Anschließend können Sie die verschiedenen Elemente Ihrer Anmeldeseite nach Ihren Vorgaben positionieren. Zunächst müssen Sie die grundlegenden Elemente wie die Schriftfarbe festlegen und dann das Formular aus Gründen der Balance in der Mitte Ihrer Seite positionieren. Hier können Sie jede beliebige Schriftfarbe hinzufügen, die Sie für schön halten. Es ist jedoch immer ratsam, darauf zu achten, dass die Form einfach bleibt, um die Besucher nicht zu verwirren.

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}

Zu diesem Zeitpunkt sieht die Form möglicherweise noch wackelig aus, und Sie können sie verbessern, indem Sie ein wenig strukturellen Stil hinzufügen. Achten Sie dazu zunächst darauf, dass die Elemente Ihres Login-Formulars nicht zusammengequetscht und gut lesbar sind. Sie können den folgenden Code hinzufügen, um sicherzustellen, dass Ihr Formular sauber ist.

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}

Ihr Anmeldeformular sieht jetzt einfach und fast vollständig aus, mit den verschiedenen Elementen, die gut positioniert sind. Sie müssen jedoch die verschiedenen Eingabebereiche Ihres Anmeldeformulars gestalten, damit sie noch besser aussehen. Hier geben Sie Farbe, Schriftgröße, Auffüllung, Ränder, die Breite der verschiedenen Elemente und andere Grundlagen an, z. B. die Farbe, die angezeigt wird, wenn Sie mit der Maus darüber fahren oder auf ein Element klicken. Fügen Sie den folgenden Code hinzu.

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13 px;
margin-right: 20 px;
}
p a:hover {
color: # 555 ;
}
input {
font-family: "Helvetica Neue" , Helvetica,
sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
}

Da Sie möchten, dass Ihre Anmeldeseite noch schöner aussieht, können Sie ein wenig mehr Anpassungen hinzufügen, um die Anmeldeschaltfläche und das Kontrollkästchen ein wenig stilvoller aussehen zu lassen. Fügen Sie den folgenden Code hinzu.

#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20 px;
}
input[type=checkbox] {
margin-left: 20 px;
margin-top: 30 px;
}
.check {
margin-left: 3px;
}
input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
}

Gestalten Sie die Formularelemente

An dieser Stelle sind die Elemente gut positioniert und sehen raffiniert genug aus. Das Anmeldeformular ist fertig, aber Sie können es noch etwas schöner gestalten, indem Sie CSS-Styling-Codes hinzufügen. Sie können den Prozess beginnen, indem Sie den Behälter mit abgerundeten Ecken versehen und ihm dann einen Schatten geben, um sein Aussehen zu verbessern und ein Gefühl von Tiefe hervorzuheben. Geben Sie dazu diesen Code unten in den Containerbereich ein.

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

Wenn Sie den obigen Code zum Containerbereich hinzufügen, sieht der Containercode wie folgt aus:

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50 %;
left: 50 %;
margin-top: -140 px;
margin-left: -170 px;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );

Nachdem Sie den Container gestylt haben, können Sie nun die verschiedenen Eingabebereiche mit einem ähnlichen Code stylen. Fügen Sie den folgenden Code hinzu, und Ihre Eingabebereiche werden viel schöner aussehen als am Anfang.

border: 1 px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

Jetzt sieht der gesamte Passwort-Eingabecode wie folgt aus. Das Anmeldeformular wird großartig aussehen, aber Sie können noch mehr Styling vornehmen, um das Aussehen Ihres Formulars noch weiter zu verbessern.

input[type=password] {
color: # 777 ;
padding-left: 10px;
margin: 10 px;
margin-top: 12 px;
margin-left: 18 px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5 px 3px rgba( 190 ,
190 , 190 , .4 ), 0 0 0 5px #f5f7f8;
}

Sie müssen jetzt den Login-Button besser und deutlicher aussehen lassen. Geben Sie dazu den unten stehenden Code in den Sendeabschnitt Ihres Codes ein.

font-size: 14 px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

Der gesamte Code Ihres Submit-Bereichs sieht wie unten aus und Sie haben die Farbe Ihrer Login-Schaltfläche und andere Aspekte geändert, und Sie haben ein einfaches Login-Formular wie das untenstehende.

input[type=submit] {
float: right;
margin-right: 20 px;
margin-top: 20 px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear,
left top, left bottom, from (#acd6ef), to(# 6ec2
e8));
background-image: -moz-linear-gradient(
top left 90deg, #acd6ef 0 %, # 6ec2e8 100%);
background-image: linear-gradient(top left
90 deg, #acd6ef 0%, # 6 ec2e8 100 %);
border-radius: 30px;
border: 1px solid # 66add6;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .3 ),
inset 0 1px 0 rgba( 255 , 255 , 255 , .5 );
cursor: pointer;
}

Das Anmeldeformular sieht jetzt gut aus. Es ist ratsam, das Formular so einfach zu belassen. Anstatt weitere Elemente hinzuzufügen und die Seite unübersichtlich zu machen, können Sie das Logo Ihres Unternehmens und ein einzelnes Bild hinzufügen. Besucher werden von so vielen Details abgelenkt. Ergo möchten Sie eine Website-Anmeldeseite haben, die so einfach wie möglich ist, aber dennoch schön und verlockend ist und die Besucher dazu bringt, wiederzukommen. Sie können Beispiele für Anmeldeformulare von einigen beliebten Websites wie Snoggle News , Dropbox , Freshbooks , MailChimp und Theidealist 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ßartig aus.

jQuery-Login-Boxen

jQuery-Login-Boxen wurden auf einer großen 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üher erfolgt die Anmeldung heute auf einer einfachen Seite und Sie müssen keine jQuery-Rückschläge befürchten.

Mit jQuery können Sie auf der Startseite Ihrer Website eine Anmeldeschaltfläche erstellen, die Ihre Besucher auf die von jQuery unterstützte Anmeldeseite weiterleitet. Das Formular enthält einen Ajax-Aufruf und verwendet ein externes PHP-Skript, um die Anmeldeinformationen des Logins zu überprüfen, um den Zugriff entweder zu gewähren oder zu verweigern. Mit jQuery ist es einfach, einen Registrierungslink direkt unter dem Anmeldefeld hinzuzufügen. Dies macht den Prozess reibungsloser und ermöglicht dem Benutzer ein reibungsloses Erlebnis. Ihre Besucher werden es leicht finden, die Registrierungs-/Anmeldeseite auf Ihrer Website zu finden. Sie können dasselbe Anmeldefeld auch verwenden, um auf Ihr Konto zuzugreifen.

Genau wie bei der Verwendung von HTML und CSS zum Erstellen und Gestalten Ihrer Anmeldeseite muss das Anmeldefeld hier ein wenig über Ihr Unternehmen sprechen, ohne dass die Seite überladen wird. Das Anmeldeformular, das Sie mit jQuery erstellen, ist einfach und sieht schön aus. Sie müssen jedoch ein Bild oder nur Ihr Firmenlogo hinzufügen, um es ansprechender zu gestalten. Anmeldeseiten sollten benutzerfreundlich sein.

Anmeldeformularvorlagen für den Website-Baukasten

Die beste anfängerfreundliche Möglichkeit, ein ansprechendes Anmeldeformular zu erstellen, sind die Anmeldeformularvorlagen des Website-Baukastens. Hier müssen Sie nicht programmieren können, und Sie müssen noch nicht einmal eine andere Website erstellt haben; Anmeldeformulare werden auf Knopfdruck erstellt. Website-Baukästen wie Weebly und WordPress bieten Freemium- und Premium-Formulare an.

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ünschen anzupassen. In WordPress müssen Sie WPForms installieren und dann Ihren Kaufcode zur Überprüfung eingeben. Besuchen Sie die Einstellungsseite und klicken Sie auf Addons. Hier können Sie jedes gewünschte Element hinzufügen. Klicken Sie auf Benutzerregistrierungs-Addon, und Sie können loslegen.

Klicken Sie auf „Neue Seite erstellen“ und wählen Sie dann das Formular „Benutzeranmeldung“ aus. Eine Vorlage mit allen vorgefertigten Feldern wird angezeigt, und Sie müssen nur auf ein Feld klicken, um es zu bearbeiten. Nachdem Sie jedes Feld bearbeitet haben, klicken Sie auf die Registerkarte Einstellungen und entscheiden Sie, was passieren soll, nachdem sich ein Besucher angemeldet hat; Sie können sie zu einer bestimmten URL leiten.

Nachdem Sie das Formular erstellt haben, erstellen Sie eine neue Seite für das Anmeldeformular. Ein Editor wird angezeigt und oben klicken Sie auf „Formular hinzufügen“. Ein Popup-Fenster wird angezeigt, und Sie können das soeben erstellte Formular auswählen. Sie können die Seite weiter bearbeiten, um sie Ihren Anforderungen besser anzupassen, oder sie speichern und veröffentlichen. Sie können das soeben erstellte benutzerdefinierte Login als Widget in der Seitenleiste Ihrer Website hinzufügen.

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ünschen, erstellen Sie eine neue Seite und fügen Sie Ihr erstelltes Formular ein. Dies wird für diejenigen empfohlen, die neu im Website-Design sind.

Themes und Plugins von Drittanbietern

Themen

Ihr Website-Builder hat möglicherweise eine kostenlose oder Premium-Anmeldevorlage oder ein Design bereitgestellt, die jedoch möglicherweise nicht Ihren Anforderungen entsprechen. Glücklicherweise gibt es speziell für WordPress zahlreiche Themes und Plugins von Drittanbietern. Themen sind wie Vorlagen für 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.

Sie müssen ein Thema mit einer Anmeldeseite auswählen, die Ihnen gefällt. Das Gute ist, dass Sie bei den meisten Themen vor der Installation eine Tour durch die Funktionen machen können. Themen kosten alles zwischen 2 $ und bis zu mehr als 100 $. Designs sind genau wie die Web Builder-Vorlagen einfach zu bearbeiten. Sie können die Designfarben, Schriftarten und Größen nach Ihren Wünschen und Ihrem Geschmack ändern.

Designs können von Ihrem Website-Builder, Premium-Designs oder von Drittentwicklern wie Themeforest stammen .

Plugins

Plugins sind einfach; Im Gegensatz zu Themen, die fast alle Aspekte Ihrer Website betreffen, gibt es Plugins für verschiedene Aspekte Ihrer Website. Ergo können Sie ein Plugin installieren, um nur ein Anmeldeformular oder ein Registrierungsformular zu erstellen. Plugins sind kostenlos verfügbar und einige sind Premium; Wählen Sie eine basierend auf Ihrem Budget und Ihren Bedürfnissen.

Alle Website-Ersteller haben Plugins, aus denen Sie auswählen können; Ob Sie Weebly , Joomla oder WordPress verwenden, es gibt zahlreiche Themen. Um eine Anmeldeseite mit einem Plugin zu erstellen, besuchen Sie Ihr Dashboard, um die Liste der verfügbaren Plugins für Ihren Website-Builder anzuzeigen. Installieren Sie das gewünschte Plugin und Sie werden zu einer Checkout-Seite weitergeleitet, auf der Sie für das Plugin bezahlen.

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 Änderungen speichern. Erstellen Sie eine neue Seite und fügen Sie das Formular hinzu, das Sie mit dem Plugin erstellt haben.

Fazit

Eine Anmeldeseite muss ebenso einfach wie ansprechend sein. In der jüngeren Vergangenheit wurden verschiedene Anmeldeseitendesigns beobachtet. Wählen Sie nur die Methode zum Erstellen der Anmeldeseite, mit der Sie vertraut sind; Entscheiden Sie sich nicht für das Codieren, wenn Sie sich mit Codes nicht gut auskennen. Sie können Designunterstützung von einem Fachmann erhalten, aber noch besser, Sie können Hilfe beim Entwerfen Ihrer Anmeldeseite erhalten.

Die Leute haben auch soziale Logins verwendet. Hier können 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äsenz und Leistung Ihres Unternehmens in den sozialen Medien verbessert. Sie können sich die Anmeldeseiten beliebter Websites ansehen, um Einblicke in die Gestaltung Ihrer Website-Anmeldeseite zu erhalten. ohne es zu überladen und ohne Details auszulassen.