如何使用 Divi 的 Theme Builder 創建全局透明浮動菜單欄

正在尋找一種方法將全局標題放在頁面的英雄部分之上？ 在今天的 Divi 教程中，我們將向您展示如何做到這一點。 我們將從頭開始（使用 Divi 的 Theme Builder）重新創建一個令人驚嘆的全局標題，並將浮動效果應用於菜單欄。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載浮動菜單欄全局標題模板

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

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

轉到 Divi 主題生成器

首先轉到Divi Theme Builder。

開始構建全局標題

然後，單擊“添加全局標題”並選擇“構建全局標題”繼續。

2. 開始構建全局標題

部分設置

背景顏色

進入模板編輯器後，您會注意到頁面上的一個部分。 打開該部分並將背景顏色更改為完全透明的顏色。 這將允許顯示該部分下方的所有內容。

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

漿紗

接下來轉到該部分的設計選項卡並更改寬度。

• 寬度：100%

間距

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

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

Z索引

並且為了確保該部分保持在所有英雄部分內容的頂部，我們需要在可見性設置中增加該部分的 z 索引。

• Z指數：99999

添加新行

列結構

完成部分設置後，您可以使用以下列結構添加新行：

漿紗

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

• 均衡柱高：是
• 寬度：100%
• 最大寬度：100%

間距

接下來添加一些自定義的頂部和底部填充。

• 頂部填充：2vw
• 底部填充：0vw

主要元素

然後，轉到高級選項卡，通過向行的主要元素添加一行 CSS 代碼，確保列在較小的屏幕尺寸上保持彼此相鄰。

display: flex;

第 2 欄

背景顏色

繼續打開第 2 列設置並將背景顏色更改為半透明顏色。

• 背景顏色：rgba(255,255,255,0.71)

邊界

也向列添加底部邊框。

• 底部邊框寬度：2px
• 底部邊框顏色：#f4583f

盒子陰影

並通過添加微妙的框陰影來創建浮動效果。

• 框陰影垂直位置：20px
• 框陰影模糊強度：50px
• 框陰影傳播強度：-20px
• 陰影顏色：rgba(0,0,0,0.23)

將圖像模塊添加到第 1 列

上傳標誌

完成行和列設置後，就可以添加模塊了，從第 1 列中的圖像模塊開始。上傳具有透明背景的徽標。

結盟

移至模塊的設計選項卡並更改對齊方式。

• 圖像對齊：居中

漿紗

也在大小設置中更改模塊的寬度。

• 寬度：8vw（桌面）、14vw（平板電腦）、21vw（手機）

將菜單模塊添加到第 2 列

選擇菜單

進入下一欄。 在那裡，我們唯一需要的模塊是菜單模塊。 選擇您選擇的菜單。

刪除背景顏色

然後，轉到背景設置並刪除背景顏色。

佈局

轉到模塊的設計選項卡並更改佈局。

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

菜單文字

也可以設置菜單文本設置的樣式。

• 菜單字體：Muli
• 菜單文字顏色：#6f6666
• 菜單文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）

下拉式菜單

接下來更改下拉菜單設置。

• 下拉菜單行顏色：#f4583f

圖標

在圖標設置中為漢堡菜單圖標顏色使用相同的顏色。

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

間距

通過在間距設置中添加一些頂部和底部填充來完成模塊的設置。

• 頂部填充：1.5vw
• 底部填充：1.5vw

將按鈕模塊添加到第 3 列

添加副本

轉到下一列和最後一列。 添加帶有您選擇的一些副本的按鈕模塊。

結盟

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

• 按鈕對齊：居中

按鈕設置

繼續相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、1.5vw（平板電腦）、2.5vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#f4583f
• 按鈕邊框寬度：0px
• 按鈕邊框顏色：#f4583f
• 按鈕邊框半徑：0px

• 按鈕字體：Muli
• 按鈕字體粗細：粗體

間距

並通過在不同的屏幕尺寸上添加一些自定義填充來完成模塊的設置。

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：2vw（桌面）、3vw（平板電腦）、4vw（手機）
• 右填充：2vw（桌面）、3vw（平板電腦）、4vw（手機）

附加部分設置

默認主元素

完成整體設計後，還有一件事要做； 將該部分放在頁面內容的頂部。 為此，我們需要向該部分的主要元素添加兩行 CSS 代碼。

position: absolute;
top: 0;

懸停主元素

確保將這些相同的 CSS 代碼行添加到主元素的懸停選項中。 一旦您將其懸停，這將防止該部分閃爍。

position: absolute;
top: 0;

3. 保存構建器更改並查看結果

完成該部分後，您可以保存全局標題並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的 Theme Builder 創建浮動菜單欄。 這是混合標題和英雄部分的好方法。 標題位於頁面或帖子第一部分的頂部。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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