如何在 Divi 中為自定義全局標題設計內聯登錄表單

為您的標題創建內聯登錄表單可以極大地提升用戶體驗。 它們非常適合會員網站和在線商店，因為它使用戶可以在任何時間或在網站的任何頁面上輕鬆登錄。 在本教程中，我們將向您展示如何為自定義標題用戶 Divi Theme Builder 設計內聯登錄表單。 為此，我們將構建一個簡單的響應式全局標題，然後使用 Divi 的登錄模塊在標題的右上角設計一個緊湊的內聯登錄表單。 該構建確實需要一些自定義 CSS，但是一旦一切就緒，就可以輕鬆自定義內聯登錄表單以使用 Divi 的內置設計選項輕鬆匹配任何標題設計。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的帶有內聯登錄表單的自定義標頭的快速瀏覽。

這是平板電腦和手機顯示屏上的內聯登錄表單。

這是用戶登錄時將顯示的消息和“註銷”鏈接。

免費下載內聯登錄表單標題佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

如果您還沒有安裝並激活 Divi 主題。 這幾乎就是您開始所需的全部內容。 我們將使用 Divi Theme Builder 從頭開始創建一個新的標題模板佈局。

添加新的全局標題

為了讓事情順利進行，我們必須為我們的網站創建一個新的全局標題。 為此，請轉到 WordPress 儀表板並導航到 Divi > Theme Builder。

在默認網站模板上，單擊“添加全局標題”，然後單擊“構建全局標題”。

然後選擇從頭開始構建的選項。

使用內聯登錄表單設計 Divi 全局標題

自定義部分

形成全局標題佈局編輯器，您將能夠完全從頭開始為您的站點構建自定義標題。 首先，打開常規部分的設置並更新以下內容：

• 背景漸變左顏色：
• 背景漸變右顏色：
• 梯度方向：48度
• 填充：頂部 10 像素，底部 10 像素，左側 20 像素，右側 20 像素

為了使我們的自定義標題更具響應性，我們將以下自定義 CSS 添加到該部分的主元素。

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

將標題徽標添加到第一行

現在該部分已準備就緒，我們可以添加第一行。

添加行

向該部分添加一列行。

添加帶有徽標圖像的圖像模塊

在單列行中，添加一個圖像模塊。 這將是我們為標題添加徽標的地方。

更新圖像模塊圖像和邊距

更新圖像設置如下：

• 圖片：[添加徽標（約 64 像素 x 64 像素）]

• 邊距：右 20px

更新行設置

在我們繼續之前，打開該行的設置並更新以下內容：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：25%
• 行對齊方式：左
• 填充：0px 頂部，0px 底部

將內聯登錄表單添加到第二行

添加行

現在第一行已準備就緒，您會在編輯器中註意到第一行將佔據左側部分的 25%。 這基本上是我們標題徽標的指定行。 我們需要為右側的內聯登錄表單和菜單創建一個部分行。

將具有一列結構的第二行添加到該部分。

添加登錄表單

在單列行內，添加一個登錄模塊。

刪除默認內容

在登錄設置下，刪除模擬標題和正文內容。

添加登錄表單自定義類和 CSS

在我們深入了解內聯登錄表單的設計之前，讓我們首先將自定義 CSS 和 CSS 類添加到登錄模塊。 這將使我們能夠在使用 Divi 的內置選項對錶單進行最終設計之前獲得表單的基本內聯結構。

在高級選項卡下，添加以下 CSS 類：

• CSS 類：header-login-form

將以下自定義 CSS 添加到登錄描述 CSS 框中：

margin-bottom: 0px !important

接下來將以下自定義 CSS 添加到登錄表單 CSS 框中：

width: 100%;

將以下自定義 CSS 添加到登錄字段 CSS 框中：

padding: 5px 4% !important

將自定義 CSS 添加到頁眉佈局設置

由於我們已將自定義 CSS 類添加到登錄表單模塊，因此我們可以添加僅針對該特定登錄表單的自定義 CSS。

打開標題佈局設置並添加以下自定義 CSS：

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

此 CSS 將使登錄字段和按鈕顯示內聯（水平），隱藏“忘記密碼？” 鏈接，並在字段之間添加一點邊距。

行設置

在我們對內聯登錄表單進行最後修改之前，讓我們更新行設置，如下所示：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 行對齊：右
• 填充：0px 頂部，0px 底部

登錄表單設計設置

現在我們準備更新登錄表單設置。 打開登錄表單模塊設置並更新以下內容：

• 使用背景顏色：否

字段和鏈接文本

• 字段背景：顏色：rgba(255,255,255,0.2)
• 字段文本顏色：#ffffff
• 字段字體：Lato
• 字段文本大小：14px
• 文字對齊：右
• 鏈接字體：Lato
• 鏈接字體樣式：下劃線
• 鏈接文字顏色：#ff3190

按鈕設計

• 按鈕文字大小：15px
• 按鈕背景顏色：#ff3190
• 按鈕邊框寬度：0px
• 按鈕字體：Lato
• 按鈕填充：頂部 2px，底部 2px
• 邊距：底部 15px
• 填充：0px 頂部，0px 底部，0px 左，0px 右

將菜單添加到第二行

菜單模塊

使用我們的內聯登錄表單，我們可以直接在它下面添加菜單。

在登錄表單模塊下添加菜單模塊。

菜單模塊設置

更新菜單設置如下：

• 背景顏色：rgba(0,0,0,0)
• 菜單字體：Lato
• 菜單字體粗細：粗體
• 菜單文字顏色：#ffffff
• 菜單文字大小：16px
• 文字對齊：右
• 下拉菜單背景顏色：#ffffff
• 下拉菜單行顏色：rgba(0,0,0,0)
• 下拉菜單文本顏色：#000000
• 移動菜單背景顏色：#ffffff
• 移動菜單文本顏色：#000000
• 購物車圖標顏色：#ffffff
• 搜索圖標顏色：#ffffff
• 漢堡菜單圖標顏色：#ffffff

保存內聯登錄表單標題

在退出標題佈局編輯器之前，請確保保存佈局。

然後也保存主題生成器設置。

最終結果

就是這樣！

現在讓我們看看最終的結果。 要查看最終結果，只需訪問您網站上的一個頁面。

這是桌面顯示器上的標題。

這是平板電腦顯示屏上的內聯登錄表單標題。

這是手機顯示屏上的內聯登錄表單。 還要注意移動菜單。

這是用戶登錄後將看到的內容。

最後的想法

這個帶有內聯登錄表單的自定義全局標題對於任何會員網站或在線商店肯定會派上用場。 只需要一點點自定義 CSS，我們就能夠將 Divi 的登錄模塊轉換成一個優雅的內聯登錄表單，它可以很好地放在任何網站的標題中。 希望這對您的下一個項目有用。

我期待在評論中收到您的來信。

乾杯!