如何使用 Divi 為您的網站創建滑動菜單欄

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用抵押貸款經紀人佈局包為您的網站創建滑動菜單欄。 這是向您的網站添加交互的好方法。 您將在所有屏幕尺寸上獲得相同的用戶體驗，並且您可以將此技術用於您正在構建的任何類型的網站。

讓我們開始吧！

預覽

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

桌面

移動的

在 Divi 主題選項中禁用固定導航

轉到 Divi 主題選項

讓我們開始吧！ 您需要做的第一件事是轉到 WordPress 網站上的 Divi 主題選項。

禁用固定導航

在這裡，我們將禁用固定導航欄。 我們需要禁用此選項，以便在本教程後面的頁面上完全擺脫主菜單欄。

• 固定導航欄：禁用

隱藏頁面上的主菜單欄

在 Mortgage Broker Layout Pack Landing Page 上啟用 Visual Builder

繼續轉到您使用 Mortgage Broker Layout Pack 的登錄頁面創建的頁面並啟用 Visual Builder。

打開頁面設置

我們將通過添加一些 CSS 代碼來隱藏頁面上的主菜單欄。 要添加此代碼，請打開頁面設置。

添加自定義 CSS 代碼以隱藏主菜單欄

然後，轉到高級選項卡並將以下 CSS 代碼行放入自定義 CSS 框中：

#main-header {
display: none;
}

添加此代碼將有助於防止主菜單欄顯示在頁面上。

使用 Divi 創建自定義菜單設計

確保所有屏幕尺寸的英雄部分都有足夠的頂部填充

現在我們已經去掉了頁面上的主菜單欄，我們可以開始添加滑動菜單欄了！ 您需要做的第一件事是確保頁面頂部有足夠的填充，以便滑動菜單欄不會與任何現有內容重疊。 特別是對於 Mortgage Broker Layout Pack 的登陸頁面，這意味著確保第 1 列的自定義填充在所有屏幕尺寸上保持“180px”。

• 頂部填充：180px

將新的常規部分添加到頁面底部

是時候開始創建自定義滑動菜單欄了！ 在頁面底部添加常規部分。

間距

打開部分設置並刪除所有默認的頂部和底部填充。

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

添加行

列結構

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

背景顏色

打開行設置並將行背景顏色更改為白色。

• 背景顏色：#ffffff

漿紗

然後，打開行設置並更改大小設置以允許行佔據屏幕的整個寬度：

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

間距

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

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

盒子陰影

為了確保滑動菜單欄和頁面本身之間有足夠的深度，我們將添加一個框陰影。

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

添加圖像模塊

上傳公司標誌

是時候開始添加我們想要在滑動菜單欄中顯示的所有模塊了，從一個圖像模塊開始。 使用寬度為 226 像素、高度為 100 像素的圖像文件上傳您的徽標。

結盟

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

• 圖像對齊：居中

漿紗

接下來更改圖像的大小設置。

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

間距

並為圖像添加一些自定義的頂部和底部填充。

• 頂部填充：15px（平板電腦），25px（手機）
• 底部填充：15px（平板電腦），25px（手機）

添加按鈕模塊

添加副本

我們需要的第二個模塊是按鈕模塊。 添加一些您選擇的副本。

結盟

然後，轉到設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

接下來修改按鈕的外觀。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.8vw（桌面）、1.4vw（平板電腦）、2.1vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#40eccc
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：50px
• 按鈕字母間距：2px
• 按鈕字體：Lato
• 字體粗細：重
• 字體樣式：大寫

間距

並使用自定義邊距和填充值創建您想要的形狀。

• 上邊距：15px
• 下邊距：15px
• 頂部填充：15px
• 底部填充：15px
• 左填充：40px
• 右填充：40px

添加文本模塊 #1

將菜單項添加到內容框

我們在滑動菜單欄中需要的下一個模塊是文本模塊。 在這裡，我們要將頁面標題添加到內容框。

添加鏈接

轉到鏈接設置並將正確的鏈接添加到文本模塊。

背景顏色

接下來修改背景顏色。

• 背景顏色：#f2f2f2

文字設置

然後，更改文本設置。

• 文字字體：Lato
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：0.9vw（桌面）、1.9vw（平板電腦）、2.4vw（手機）
• 文字方向：居中

間距

並向模塊添加一些自定義的頂部和底部填充。

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

克隆文本模塊 x5 次

完成對文本模塊的修改後，您可以繼續將其克隆 5 次。

更改副本

確保更改每個副本中的頁面標題。

更改鏈接

隨著鏈接。

更改背景顏色

接下來修改第二、四、六菜單項的背景顏色。

• 背景顏色：#ffffff

將自定義 CSS 添加到行

主要元素

現在，為了確保滑動菜單欄貼在頁面頂部，我們需要向該行的主要元素添加幾行 CSS 代碼。

position:fixed;
top: 0px;
z-index: 99;

列主要元素

我們還將列變成允許我們滾動的網格。 您可以在下面的 CSS 代碼中看到的百分比表示每個模塊在網格中佔用的空間。 如果您希望網格看起來不同，您可以修改這些值。

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

列 CSS 類

為了擺脫滾動條，我們還將向該行添加一個 CSS 類。

刪除滾動條

在頁面上

您可以通過打開頁面設置並將以下 CSS 代碼行添加到自定義 CSS 框來刪除頁面本身上的滾動條：

.swipe-menu::-webkit-scrollbar {
display: none;
}

在整個網站上

如果您不想重複在每個頁面上單獨隱藏滾動條的相同步驟，您還可以轉到 Divi 主題選項並通過向下滾動常規選項卡並添加以下行來使 CSS 代碼應用於整個網站CSS 代碼到自定義 CSS 框：

.swipe-menu::-webkit-scrollbar { display: none; }

另存為部分作為全局項目

一旦您的滑動菜單欄正常運行，您就可以將其作為全局項目保存到您的 Divi 庫中，並在其他頁面上使用它！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何為您使用 Divi 創建的任何網站創建滑動菜單欄。 這是為您的網站添加另一個維度的好方法。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下方評論區留言！