如何將下拉登錄表單添加到您的 Divi 標題

如果您正在構建會員網站，則非常需要考慮登錄體驗。 當然，您可以允許訪問者使用默認的 WordPress 登錄頁面，但您也可以通過在標題中包含登錄表單來使訪問更容易。 在這種情況下，您需要在點擊時觸發登錄表單，以便節省標題中的空間。 這正是我們將在今天的 Divi 教程中向您展示的內容。 我們將從頭開始構建一個全局標題，我們將包含一個下拉登錄表單。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載全局標題模板

要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1. 創建新的全局標題模板

轉到 Divi 主題生成器

首先轉到 WordPress 網站後端的 Divi Theme Builder。 在那裡，單擊“添加全局標題”。

添加新的全局標題

將出現一個下拉菜單。 要從頭開始構建，請繼續選擇“Build Global Header”。

2. 構建標題設計

添加第 1 節

背景圖片

進入模板編輯器後，您會注意到那裡已經有一個部分。 打開部分設置並上傳背景圖片或使用背景顏色。

間距

轉到該部分的設計選項卡，然後修改頂部和底部填充。

• 頂部填充：10px
• 底部填充：10px

向節添加行

列結構

繼續使用以下列結構添加新行：

漿紗

還沒有添加模塊，打開行設置並修改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是
• 寬度：
  • 台式機：80%
  • 平板電腦和手機：95%
• 最大寬度：2580px

間距

接下來修改填充值。

• 頂部填充：0px
• 底部填充：0px
• 左填充：1%
• 右填充：1%

主要元素 CSS

為了自動垂直對齊列，我們將以下 CSS 代碼行添加到高級選項卡中行的主要元素：

display: flex;
justify-content: center;
align-items: center;

將社交媒體關注模塊添加到第 1 列

添加社交網絡

是時候添加模塊了，從第 1 列中的社交媒體關注模塊開始。添加您選擇的社交網絡。

單獨更改每個社交網絡的背景顏色

然後，將每個社交網絡的背景顏色分別更改為白色。

• 背景顏色：#ffffff

圖標設置

返回常規模塊設置並更改設計選項卡中的圖標顏色。

• 圖標顏色：#141414

邊界

接下來在邊框設置中應用一些圓角設置。

• 所有角落：100px

將按鈕模塊添加到第 2 列

添加副本

在第 2 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕對齊

接下來更改模塊的對齊方式。

• 按鈕對齊：右

按鈕設置

然後，設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：12px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ff4700
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：2px

• 按鈕字體：Prata
• 按鈕字體樣式：大寫

間距

並通過將以下填充值應用於間距設置來完成按鈕設置：

• 頂部填充：16px
• 底部填充：16px
• 左填充：24px
• 右填充：24px

添加第 2 節

背景顏色

在上一個部分的正下方添加另一個部分，並為其使用以下背景顏色：

• 背景顏色：#fff4ef

間距

接下來在設計選項卡中刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加第 1 行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加模塊的情況下，打開行設置並按如下方式更改大小設置：

• 均衡柱高：是
• 寬度：
  • 台式機：80%
  • 平板電腦和手機：95%
• 最大寬度：2580px

間距

也修改間距設置中的填充值。

• 頂部填充：5px
• 底部填充：5px
• 左填充：2%
• 右填充：2%

第 2 列設置

背景顏色

然後，打開第 2 列設置並僅在平板電腦和手機上應用背景顏色。

• 桌面： /
• 平板電腦和手機：#f2e8e3

間距

我們還在較小的屏幕尺寸上添加了一些頂部和底部填充。

• 頂部填充：
  • 平板電腦和手機：25px
• 底部填充：
  • 平板電腦和手機：25px

將菜單模塊添加到第 1 列

選擇菜單

接下來，我們將向該行添加一個菜單模塊。 選擇您選擇的菜單。

上傳標誌

將徽標上傳到您的菜單模塊。

刪除背景顏色

然後，刪除菜單的背景顏色。

菜單文字設置

轉到模塊的設計選項卡並按如下方式設置菜單文本的樣式：

• 菜單字體：Prata
• 菜單文字顏色：#111821
• 菜單文字大小：18px
• 菜單行高：1.4em
• 文本對齊：右

下拉菜單設置

也更改下拉菜單設置。

• 下拉菜單背景顏色：#fff4ef
• 下拉菜單行顏色：#191919
• 下拉菜單文本顏色：#191919
• 移動菜單背景顏色：#fff4ef
• 移動菜單文本顏色：#191919

圖標設置

然後，在圖標設置中更改圖標顏色。

• 購物車圖標顏色：#191919
• 搜索圖標顏色：#191919
• 漢堡菜單圖標顏色：#191919

漿紗

並通過應用以下大小設置來完成模塊設置：

• 標誌最大寬度：50px
• 寬度：100%

3. 添加下拉登錄表單和點擊功能

將 Blurb 模塊添加到第 2 列

添加標題

現在我們的標題的基礎已經建立，我們可以專注於創建登錄下拉觸發器和表單。 我們需要的第一件事是我們行的第 2 列中的 Blurb 模塊。 在這裡，我們將添加一個標題。

選擇圖標

接下來，我們將選擇一個圖標。

圖標設置

轉到模塊的設計選項卡並按如下方式更改圖標設置：

• 圖標顏色：#ffffff
• 圓形圖標：是
• 圓圈顏色：#ff4700
• 圖像/圖標放置：左

標題文字設置

然後，設置標題文本的樣式。

• 標題字體：Lato
• 標題字體粗細：重
• 標題字體樣式：大寫
• 標題文字大小：12px
• 標題字母間距：3px

動畫片

我們還在動畫設置中刪除了此模塊的默認動畫。

• 圖像/圖標動畫：無動畫

模糊標題 CSS

我們將為高級選項卡中的簡介標題添加一些上邊距。

margin-top: 10px;

位置

最後但並非最不重要的一點是，我們將在位置設置中重新定位模塊。

• 位置：絕對
• 地點：中心

將第 2 行添加到第 2 節

列結構

要添加登錄表單，我們將在前一行下方使用一個新行，其列結構如下：

漿紗

在不添加模塊的情況下，打開行設置並按如下方式更改大小設置：

• 均衡柱高：是
• 最大寬度：2580px

間距

也修改填充值。

• 頂部填充：0px
• 底部填充：0px
• 左填充：2%
• 右填充：2%

將登錄模塊添加到第 2 列

刪除內容

將登錄模塊添加到第 2 列。確保內容框為空。

背景顏色

接下來更改背景顏色。

• 背景顏色：#ff4700

字段設置

轉到設計選項卡並設置字段樣式。

• 字段背景顏色：rgba(0,0,0,0)
• 字段文本顏色：rgba(255,255,255,0.73)
• 字段左填充：0px
• 字段右填充：0px
• 字段字體：Lato
• 字段文本大小：16px

• 字段線高：1.8em
• 所有角：0px
• 字段底部邊框寬度：1px
• 字段底部邊框顏色：#ffffff

按鈕設置

然後，修改按鈕設置如下：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：12px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#141414
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：2px
• 按鈕字體：Prata

• 按鈕字體樣式：大寫
• 按鈕頂部填充：16px
• 按鈕底部填充：16px

漿紗

確保寬度也是“100%”。

• 寬度：100%

登錄按鈕 CSS

將一些上邊距應用於高級選項卡中的登錄按鈕 CSS 框。

margin-top: 30px;

位置

並相應地重新定位模塊：

• 位置：絕對
• 位置：右上角
• 垂直偏移：1px

將 CSS ID 添加到第 1 行的 Blurb 模塊

現在我們擁有了所有需要的元素，我們可以專注於點擊功能。 首先，打開 Blurb 模塊並添加以下 CSS ID：

• CSS ID：divi-login-toggle

將 CSS ID 添加到第 2 行的登錄模塊

接下來打開登錄模塊並應用以下 CSS ID：

• CSS ID：divi-login-form

在登錄模塊下方添加代碼模塊

然後，在登錄模塊正下方添加一個代碼模塊。

添加樣式和腳本標籤

為了創建點擊功能，我們將使用一些 CSS 和 JQuery 代碼。 為了準備該代碼，我們將添加樣式標籤（用於 CSS 代碼）和腳本標籤（用於 JQuery 代碼）。

在樣式標籤之間插入 CSS 代碼

將以下 CSS 代碼行放在樣式標記之間：

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

在腳本標籤之間插入 JQuery

以及腳本標籤之間的以下代碼：

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. 保存 Divi 主題生成器更改

現在一切就緒，唯一要做的就是保存所有 Divi Theme Builder 更改並查看結果！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在構建會員網站時利用標題發揮創意。 更具體地說，我們向您展示瞭如何包含一個下拉登錄表單，讓您的訪問者無需轉到 WordPress 登錄頁面即可登錄他們的帳戶。 您還可以免費下載標頭模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。