如何为您的网站创建一个美丽的登录页面

来源:设计前沿 作者:Wendy Reid 时间:2017-08-10

登录页面,就像网站的目标网页,对于想要转换流量的企业主来说非常重要。就像登陆页面一样,登录页面需要对访问者来说是复杂的,只需提供他们的详细信息,而不需要麻烦。

大多数最好的登录页面是直截了当的,他们采用了极简风格,没有广告和营销im头; 只需登录表单与背景图像或两个。


创建登录页面的方法有几种,这些页面吸引访问者并鼓励他们回来。

如果你擅长编码,(简单的HTML和CSS),你应该能够创建一个简单但吸引人的登录页面,其中包含几个基本代码。
对于新手,更容易自定义网站构建器模板附带的登录页面。大多数网站建设者和模板(WordPress,Weebly,Shopify,Joomla等)都提供了准备模板,您只需编辑它们即可满足您的需求。
您还可以使用简单的插件和主题来创建登录页面。插件很好,因为它们允许您通过点击按钮自定义您的登录页面。新手可以使用它们以及经验丰富的网页设计师。
您选择自定义您的网站登录页面的方法将由您的技能水平决定。虽然编码可能是一个人的好方法,但另一个人可能不知道在哪里放置哪个代码。插件是好的,但有些是溢价。

继续阅读,了解如何创建和自定义一个漂亮的登录页面。

使用简单的HTML / CSS
在HTML和CSS中创建和自定义登录表单通过三个简单的步骤完成:处理HTML标记,定位登录表单的不同元素,最后,对不同的元素进行风格化,使其看起来更具吸引力。

HTML标记

在这里,您将添加简单的HTML标签来创建实际的表单。HTML部分由容器,表单本身和其他几个输入组成。通过正确输入代码,您将可以创建一个简单的登录表单,其中包含用户名部分,密码部分,复选框和登录按钮。然而,组件安排不佳。

<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>
定位要素

然后,您可以通过添加如下所示的简单代码来对表单的不同部分进行风格化。这将把不同的组件放在不同的位置。

html, body {
width: 100 %;
height: 100 %;
font-family: "Helvetica Neue" , Helvetica, sans
-serif;
color: # 444 ;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
}
之后,您可以根据您的规格定位登录页面的不同元素。首先,您将需要指定基本元素,如字体颜色,然后将表单定位在页面的中心,以获得余额。在这里,您可以添加任何您喜欢的字体颜色,无论您认为美丽。但是,请务必确保表单保持简单,以免混淆访客。

#container {
position: fixed;
width: 340px;
height: 280 px;
top: 50%;
left: 50%;
margin-top: -140 px;
margin-left: -170 px;
}
在这一点上,形式可能还是看起来很笨,你可以通过添加一些结构风格来做得更好。要做到这一点,首先要确保登录表单的元素不会被压在一起,而且易于清晰。您可以添加以下代码,以确保您的表单上的整洁。

form {
margin: 0 auto;
margin-top: 20 px;
}
label {
color: # 555 ;
display: inline-block;
margin-left: 18 px;
padding-top: 10px;
font-size: 14px;
}
您的登录表单现在看起来很简单,几乎完整,不同的元素很好。但是,您需要对登录表单的各种输入区域进行风格化,使其看起来更好。在这里,您将指定颜色,字体大小,添加一些填充,边距,不同元素的宽度和其他基础知识,例如当您悬停鼠标或单击元素时显示的颜色。添加下面的代码。

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;
}
由于您希望您的登录页面更加美观,您可以添加一些更多的自定义功能,使登录按钮和复选框看起来有点时尚。添加以下代码。

#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;
}
样式表单元素

在这一点上,这些元素的位置很好,看起来很复杂。登录表单准备就绪,但您仍然可以通过添加CSS样式代码使其更加美观。您可以通过使容器圆角开始过程,然后给它一个阴影,以增强其外观,带出深度感。为此,请将以下代码输入到容器区域。

background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1 px 2 pxrgba( 0 , 0, 0, .1 );
将以上代码添加到容器区域将使容器代码如下所示:

#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 );
样式化容器后,您现在可以使用类似的代码对不同的输入区域进行样式化。添加下面的代码,您的输入区域将比起初看起来更好。

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;
}
现在,整个密码输入代码将如下图所示。登录表单会看起来很棒,但是还有更多的风格,您可以进一步增强您的形式的外观。

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;
}
您现在需要使登录按钮看起来更好和独特。为此,请在代码的提交部分输入以下代码。

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;
}
您的提交部分的整个代码将如下所示,您将更改您的登录按钮颜色和其他方面,您将有一个简单的登录形式,如下所示。

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;
}
登录表单现在看起来不错。建议把简单的表格离开。您可以添加您的商家徽标和单个图片,而不是添加其他元素并使页面混乱。参观者往往会被这么多细节分散注意力。Ergo,你会想要一个网站登录页面,尽可能简单,但仍然美丽,引人入胜的游客再次回来。您可以从Snoggle News,Dropbox,Freshbooks,MailChimp和Theidealist等热门网站登录表单。谷歌和Facebook等网站也采用极简风格,登录页面只需登录表单,公司徽标等几个细节。

jQuery登录框

jQuery登录盒已经在大量的网站上使用,他们总是在寻找创新,并且已经进入了新时代的网站登录表单设计。他们看起来简单而时尚。与过去不同,现在登录会在一个简单的页面中发生,您不必担心任何jQuery的挫折。

使用jQuery,您可以在您网站的首页上创建一个登录按钮,它将访问者引导到jQuery的登录页面。该表单包含Ajax调用,并使用外部PHP脚本来验证登录的凭据以授予或拒绝访问。使用jQuery,很容易在登录框下方添加注册链接。这使得该过程更平滑并且允许用户平稳的体验。您的访问者将很容易找到您网站上的注册/注册页面。您也可以使用相同的登录框来访问您的帐户。

就像当您使用HTML和CSS创建和设计您的登录页面一样,您需要在此处登录框对您的业务有一点不那么杂乱的方式。您使用jQuery创建的登录表单很简单,看起来很漂亮。但是,您将需要添加图像或仅添加您的商业标志,使其更具吸引力。登录页面应该是用户友好的。

网站建设者登录表单模板

创建一个有吸引力的登录表单的最好的初学者友好方式是通过网站构建器的登录表单模板。在这里,您不需要知道编码,甚至不需要创建任何其他网站; 通过点击按钮创建登录表单。网站建设者如Weebly和WordPress提供免费和高级表格。

要创建登录页面,请安装表单插件,然后访问模板/插件的设置页面以根据您的喜好进行自定义。在WordPress中,您将需要安装WPForms,然后输入您的购买代码以进行验证。访问设置页面,然后单击Addons。在这里,您可以添加任何您想要的元素。点击用户注册插件,你很好去。

点击“创建新页面”,然后选择“用户登录”窗体。将出现一个模板,其中所有的字段都是预先创建的,所有您需要做的是单击一个字段进行编辑。编辑每个字段后,单击设置选项卡,并确定访问者登录后应该发生的情况; 您可以将它们引导到某个URL。

创建表单后,为登录表单创建一个新页面。将出现一个编辑器,并在其顶部单击“添加表单”。弹出窗口将出现,您可以选择刚创建的表单。您可以继续编辑页面以更好地满足您的需求,也可以保存和发布。您可以在网站的侧边栏添加您刚创建的自定义登录信息。

在处理由网站建设者提供的登录模板时,该过程或多或少相同; 安装模板,根据您的喜好进行编辑,创建新页面并插入创建的表单。这是建议为那些谁是新的网站设计。

第三方主题和插件

主题
您的网站建设者可能已经提供了免费或溢价的登录模板或主题,但可能无法满足您的需求。幸运的是,有许多第三方主题和插件,特别是对于WordPress。主题就像整个网站的模板,带来不同的风格,其中大多数,您将能够获得一个时尚和有吸引力的登录页面; 主题不仅影响登录页面,还影响您网站的其他方面。

您将需要选择一个您喜欢的登录页面的主题。好的是,对于大多数主题,您可以在安装之前先浏览功能。主题费用在2美元到高于100美元之间。主题,就像Web构建器模板一样,很容易编辑。您可以根据您的喜好和口味更改设计颜色,字体和尺寸。

主题可以从您的网站建设者,高级主题,或可以来自第三方开发商如Themeforest。

插件
插件简单; 不同于影响您网站几乎所有方面的主题,都有针对您网站不同方面的插件。你可以安装一个插件来创建登录表单或注册表单。插件可免费提供,部分是免费的; 根据您的预算和需求选择一个。

所有网站建设者都会有插件供您选择; 无论您使用的是Weebly,Joomla还是WordPress,都有很多主题。要使用插件创建登录页面,请访问您的信息中心,查看网站构建器的可用插件列表。安装你想要的插件,你将被带到你支付插件的结帐页面。

安装插件后,系统将提示您编辑不同的元素; 单击要修改的每个元素,然后单击保存更改。创建一个新页面,并使用插件添加您创建的表单。

结论

登录页面需要简单,就像需要吸引人一样。近期见证了不同的登录页面设计。只选择您所熟悉的登录页面创建方法; 如果您不熟悉代码,请勿选择代码。您可以从专业人士获得设计帮助,但更好的是,您可以获得设计您的登录页面的帮助。

人们也使用社会登录。在这里,您可以通过Facebook或Twitter等社交媒体帐户登录。这也是一个很好的选择,也看到它很简单,并且还增强了您的业务的社交媒体存在和性能。您可以查看热门网站的登录页面,了解如何为您的网站登录页面设计风格; 没有混乱,而不排除细节。