如何自動將標題放在每個頁面的第一個 Divi 部分下方

自從 Divi 主題生成器問世以來，我們一直在分享有關如何創建和自定義標題以滿足您可能擁有的不同需求的教程。 在今天的教程中，我們將通過向您展示如何在每個頁面的第一個 Divi 部分下自動放置自定義標題來繼續這一旅程。 這種方法允許訪問者首先看到您頁面的英雄部分，然後訪問菜單及其所有項目。 我們用於自定義頁眉的樣式與 Bistro Layout Pack 相匹配，您也可以免費下載自定義頁面模板！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載自定義標題模板

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

下載文件

免費下載

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

下載

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

1.轉到Divi Theme Builder並添加新頁面模板

轉到 Divi 主題生成器並添加新模板

首先轉到 Divi Theme Builder 並添加一個新模板。

使用時間

在所有頁面上使用這個新模板。

• 用於：所有頁面

2. 開始構建自定義頁眉設計

繼續在頁面模板中構建自定義標題。

部分設置

背景顏色

進入模板編輯器後，您會注意到一個部分。 打開該部分並更改背景顏色。

• 背景顏色：#FFFFFF

間距

接下來刪除該部分的默認頂部和底部填充。

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

邊界

也添加一個頂部和底部邊框。

• 上下邊框寬度：1px
• 頂部和底部邊框顏色：#002d4c

CSS ID

並包含一個 CSS ID。 在本教程的後面，我們將使用此 CSS ID 將該部分放置在每個頁面的第一部分下方。

• CSS ID：自定義標題

Z索引

最後但並非最不重要的一點是，我們將增加該部分的 z 索引以確保它出現在所有頁面內容的頂部。

• Z指數：99999

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據整個部分的寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

刪除所有默認的頂部和底部填充。

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

主要元素

為了確保所有列在較小的屏幕尺寸上保持彼此相鄰，並使列內容居中，我們還將向行的主要元素添加兩行 CSS 代碼。

display: flex;
align-items: center;

第 1 欄

間距

繼續打開第 1 列設置並在間距設置中添加一些頂部和底部填充。

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

邊界

向列添加右邊框。

• 右邊框寬度：1px
• 右邊框顏色：#002d4c

將圖像模塊添加到第 1 列

上傳標誌

是時候開始添加模塊了！ 在第 1 列中，我們需要一個圖像模塊。 上傳您的徽標。

結盟

轉到模塊的設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

也可以跨不同屏幕尺寸修改模塊的寬度。

• 寬度：4vw（桌面）、7vw（平板電腦）、12vw（手機）

將菜單模塊添加到第 2 列

選擇菜單

在第二列，我們需要一個菜單模塊。 選擇您選擇的菜單。

佈局

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

• 風格：居中
• 下拉菜單方向：向下

菜單文字

也修改菜單文本設置。

• 菜單字體：小屋
• 菜單文字顏色：#77848d
• 菜單文字大小：16px（桌面）、15px（平板電腦）、14px（手機）
• 菜單行高：1.8em

下拉文本

然後，在下拉文本設置中更改一些顏色。

• 下拉菜單背景顏色：#ffffff
• 下拉菜單行顏色：#002d4c

圖標

並通過更改圖標設置中的漢堡菜單圖標顏色來完成模塊的設置。

• 漢堡菜單圖標顏色：#002d4c

將按鈕模塊添加到第 3 列

添加副本

轉到下一列和最後一列。 在那裡，我們需要一個按鈕模塊。 添加一些您選擇的副本。

結盟

轉到模塊的設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

繼續在按鈕設置中設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：13px
• 按鈕文字顏色：#002d4c
• 按鈕背景顏色：#ffffff
• 按鈕邊框寬度：2px
• 按鈕邊框顏色：#ffffff（默認）、#d1d1d1（懸停）
• 按鈕邊框半徑：0px

• 按鈕字母間距：2px
• 按鈕字體: Cabin
• 按鈕字體粗細：半粗體
• 按鈕字體樣式：大寫

間距

然後，在不同的屏幕尺寸上添加一些自定義填充。

• 頂部填充：16px
• 底部填充：16px
• 左填充：24px（桌面和平板電腦），13px（手機）
• 右內邊距：24px（桌面和平板電腦），13px（手機）

盒子陰影

通過添加框陰影完成模塊的設置。

• 框陰影水平位置：0px
• 框陰影垂直位置：0px
• 框陰影模糊強度：0px
• 框陰影傳播強度：2px（默認），6px（懸停）
• 陰影顏色：#002d4c
• 框陰影位置：內陰影

3. 使用 JQuery 在每個頁面的第一節之後自動放置頁眉

將代碼模塊添加到第 2 列

現在，要自動將菜單放置在每個頁面的第一部分下方，我們需要一些 JQuery 代碼。 要將此代碼包含在我們的自定義標題中，請將代碼模塊添加到第 2 列。

插入 JQuery 代碼

將以下 JQuery 代碼行添加到代碼模塊以應用效果，在腳本標記之間，您可以在下面的打印屏幕中看到：

jQuery(函數($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

4. 保存主題生成器更改並查看結果

並通過保存所有主題構建器更改並在頁面上查看結果來完成自定義標題！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在每個頁面的第一個 Divi 部分之後自動放置您使用 Divi 的主題構建器構建的自定義標題。 您只需要構建一次自定義標頭，添加 JQuery 代碼，自定義標頭將自動重新定位。 這是改變菜單的正常首頁位置並讓您的英雄部分首先發光的好方法。 您也可以免費下載模板！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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