如何使用 Divi 的主題生成器創建自定義全局標題

既然主題生成器就在這裡，我們迫不及待地想深入了解新教程，這些教程將幫助您從頭到尾設置您的網站。這包括使用 Divi 的內置選項創建自定義標題。 在本教程中，我們將專注於使用 Divi 的 Theme Builder 創建全局標題。 除非您為該頁面或帖子分配了不同的標題，否則全局標題將顯示在您網站上的任何地方。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載自定義頁眉設計

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1. 設置您的主菜單

首先在 WordPress 網站的外觀設置中創建菜單。

2. 轉到主題生成器選項

然後，導航到 Divi 的主題選項中的主題生成器。 在那裡，您會注意到一個空的默認網站模板。

3. 添加和構建全局標題

默認網站模板是您可以開始創建自定義全局頁眉、全局正文和全局頁腳的地方。 單擊“添加全局標題”並繼續單擊“構建全局標題”以開始該過程。

部分設置

漿紗

打開您可以在頁面上註意到的部分，轉到設計選項卡並更改不同屏幕尺寸的寬度。

• 寬度：100%
• 最大寬度：1280 像素（桌面），100%（平板電腦和手機）

間距

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

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

邊界

在接下來的部分的左下角和右下角添加一些邊框半徑。

• 左下角：50px
• 右下角：50px

盒子陰影

我們還添加了一個微妙的框陰影。

• 框陰影模糊強度：60px
• 陰影顏色：rgba(0,0,0,0.13)

能見度

然後，轉到高級選項卡並隱藏溢出。 也增加 z 索引，這將有助於確保該部分保留在所有頁面內容的頂部。

• 水平溢出：可見
• 垂直溢出：可見
• Z指數：99999

4. 將新行專用於標題

現在我們已經完成了常規部分的設置，我們可以開始添加行了。 我們總共需要兩行； 一個專用於標題，另一個允許顯示菜單項。 我們將從標題開始，使用以下列結構添加一個新行：

行設置

背景顏色

不向行添加任何模塊，打開行設置並更改背景顏色。

• 背景顏色：#38383f

漿紗

接下來修改行的大小設置。

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

展示

並通過向行的主要元素添加一行 CSS 代碼來確保列在較小的屏幕尺寸上彼此相鄰。

display: flex;

將圖像模塊添加到第 1 列

上傳標誌

完成行設置後，就可以開始添加模塊了。 將圖像模塊添加到第 1 列並上傳您的徽標。

結盟

轉到設計選項卡並確保您使用左圖像對齊。

• 圖像對齊：左

漿紗

也修改模塊的寬度。

• 寬度：100px

間距

並在不同的屏幕尺寸中添加一些自定義邊距值。

• 上邊距：5px
• 左邊距：50px（桌面），20px（平板和手機）

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

添加社交網絡

進入第二列。 在那裡，我們需要一個社交媒體關注模塊。 添加您選擇的社交網絡。

社交網絡背景顏色

然後，單獨打開每個社交網絡並將背景顏色更改為完全透明的。

• 背景顏色：rgba(0,0,0,0)

結盟

返回模塊的正常設置，然後更改整個模塊對齊方式。

• 模塊對齊：居中

圖標

也修改圖標設置。

• 圖標顏色：#ffffff
• 使用自定義圖標大小：是
• 圖標字體大小：16px（桌面和平板電腦），12px（手機）

間距

並添加一些上邊距。

• 上邊距：10px

將按鈕模塊添加到第 3 列

添加副本

移至第三列並添加帶有您選擇的一些副本的按鈕模塊。

結盟

在設計選項卡中更改按鈕對齊方式。

• 按鈕對齊：右

按鈕設置

相應地設置按鈕設置的樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：12px（桌面）、10px（平板電腦）、8px（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ffae25
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：0px
• 按鈕字母間距：5px（桌面），3px（平板電腦和手機）
• 按鈕字體：Open Sans
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

間距

並在不同的屏幕尺寸中添加一些自定義填充值。

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

5. 將新行專用於菜單欄

完成專用於全局標題的行後，您可以使用以下列結構在其正下方添加另一行：

行設置

漿紗

在不添加任何模塊的情況下，打開行設置並在設計選項卡中更改大小設置。

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

間距

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

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

將菜單模塊添加到列

選擇菜單

然後，將菜單模塊添加到該列並選擇您在本教程的第一部分中創建的菜單。

佈局

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

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

鏈接

也修改設計選項卡中的活動鏈接顏色。

• 活動鏈接顏色：#ffae25

下拉式菜單

對下拉菜單設置中的下拉菜單行顏色執行相同操作。

• 下拉菜單行顏色：#ffae25

圖標

接下來修改漢堡菜單圖標顏色。

• 漢堡菜單圖標顏色：#ffae25

菜單文字

隨著菜單文本設置。

• 菜單字體：Prata
• 菜單文字顏色：#000000

6. 使標題和菜單欄保持在頂部

打開部分設置

完成第二行後，唯一要做的就是將該部分粘貼到我們頁面和帖子的頂部。 為此，我們將再次打開部分設置。

將自定義 CSS 添加到主元素

然後，我們將轉到高級選項卡，我們將向該部分的主要元素添加幾行 CSS 代碼。

position: fixed;
top: 0;
left: 0;
right: 0;

7. 保存全局標題和主題生成器選項

完成整個全局標題設計後，請確保在退出模板佈局之前保存設計。 一旦您在模板佈局之外，保存整個主題構建器的更改，您就完成了！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新主題生成器創建自定義全局標題。 本教程將展示創建漂亮的標題並將它們應用於整個網站或特定的自定義帖子類型是多麼容易。 我們希望本教程能激勵您立即開始使用 Theme Builder！ 如果您有任何問題或建議，請確保在下面的評論部分發表評論。

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