如何为您的网站创建漂亮的自定义登录页面

已发表: 2017-08-10

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

大多数最好的登录页面都很简单，它们采用极简风格，没有广告和营销噱头；只是带有一两个背景图像的登录表单。

有几种不同的方法可以创建吸引访问者并鼓励他们回来的登录页面。

如果您擅长编码（简单的 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;
}

登录表单现在看起来不错。建议让表单保持简单。您可以添加您的企业徽标和单个图像，而不是添加其他元素并使页面混乱。游客往往会被如此多的细节分散注意力。因此，您将希望拥有一个尽可能简单但仍然美观且诱人的网站登录页面，让访问者再次回来。您可以从一些流行的网站获取登录表单示例，例如Snoggle News 、 Dropbox 、 Freshbooks 、 MailChimp和Theidealist等。谷歌和 Facebook 等网站也采用了极简风格，他们的登录页面看起来很棒，只有登录表单、公司徽标和其他一些细节。

jQuery 登录框

jQuery 登录框已在大量网站上使用，它们一直在寻找创新，并在新时代的网站登录表单设计中找到了自己的方式。它们看起来简单而时尚。与过去不同，现在登录发生在一个简单的页面中，您不必担心任何 jQuery 挫折。

使用 jQuery，您可以在您网站的主页上创建一个登录按钮，该按钮将您的访问者引导至由 jQuery 驱动的登录页面。该表单包含 Ajax 调用并使用外部 PHP 脚本来验证登录凭据以授予或拒绝访问。使用 jQuery，很容易在登录框下方添加注册链接。这使过程更顺畅，并为用户提供流畅的体验。您的访问者会发现很容易在您的网站上找到注册/注册页面。您也可以使用相同的登录框来访问您的帐户。

就像您使用 HTML 和 CSS 来创建和设置登录页面的样式一样，您需要让此处的登录框以一种不会使页面混乱的方式来说明您的业务。您使用 jQuery 创建的登录表单很简单而且看起来很漂亮。但是，您需要添加图像或仅添加您的企业徽标以使其更具吸引力。登录页面应该是用户友好的。

网站建设者登录表单模板

创建吸引人的登录表单的最佳初学者友好方式是通过网站构建器的登录表单模板。在这里，您不需要了解编码，甚至不需要创建任何其他网站；登录表单是通过单击按钮创建的。 Weebly和WordPress等网站建设者提供免费增值和高级形式。

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

单击“创建新页面”，然后选择“用户登录”表单。将出现一个模板，其中包含预先创建的所有字段，您只需单击一个字段即可对其进行编辑。编辑每个字段后，单击设置选项卡并决定访问者登录后应该发生什么；您可以将它们定向到某个 URL。

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

在处理网站建设者提供的登录模板时，过程或多或少是相同的；安装模板，根据自己的喜好对其进行编辑，创建一个新页面并插入您创建的表单。推荐给那些刚接触网站设计的人。

第三方主题和插件

主题

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

您需要选择一个带有您喜欢的登录页面的主题。好消息是，对于大多数主题，您可以在安装之前浏览一下这些功能。主题的价格在 2 美元到 100 美元之间。主题，就像 Web 构建器模板一样，易于编辑。您可以根据自己的喜好和品味更改设计颜色、字体和大小。

主题可以来自您的网站建设者、高级主题，也可以来自第三方开发商，例如Themeforest 。

插件

插件很简单；与影响您网站几乎所有方面的主题不同，有针对您网站不同方面的插件。因此，您可以安装一个插件来创建登录表单或注册表单。插件是免费提供的，有些是高级的；根据您的预算和需求选择一种。

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

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

结论

登录页面既要简单，又要吸引人。最近见证了不同的登录页面设计。只选择自己熟悉的登录页面创建方式；如果您不精通代码，请不要选择编码。您可以从专业人士那里获得设计帮助，但更好的是，您可以获得设计登录页面的帮助。

人们还使用社交登录。在这里，您可以让访问者使用他们的社交媒体帐户详细信息（例如 Facebook 或 Twitter）登录。这也是一个不错的选择，因为它足够简单，并且还可以增强您企业的社交媒体存在和绩效。您可以查看热门网站的登录页面，以深入了解如何设置网站登录页面的样式；不会弄乱它，也不会遗漏细节。