如何為您的網站創建漂亮的自定義登錄頁面

已發表: 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）登錄。這也是一個不錯的選擇，因為它足夠簡單，並且還可以增強您企業的社交媒體存在和績效。您可以查看熱門網站的登錄頁面，以深入了解如何設置網站登錄頁面的樣式；不會弄亂它，也不會遺漏細節。