如何使用 Divi 的 Theme Builder 創建響應式滑入式菜單

已發表: 2020-04-15

在為自己的客戶建立網站時，您會發現自己正在考慮要構建哪種類型的標題。 網絡上最常用的菜單欄是頂部的水平菜單欄，但也有其他選項，例如滑入式菜單。 滑入式菜單可幫助您限制全局標題佔用的空間。 當您的訪問者單擊右上角的漢堡圖標時，您可以讓滑入式菜單出現，而不是立即顯示所有菜單項。 使用滑入式菜單可幫助您向網站添加額外的交互。

在今天的用例 Divi 教程中，我們將向您展示如何使用 Divi 的主題生成器、內置的 Divi 元素和一些附加代碼創建一個。 這個滑入式菜單的設計與 Yoga Instructor Layout Pack 完美匹配，但您可以自由修改它以匹配您構建的任何網站。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

滑入式菜單

移動的

滑入式菜單

免費下載響應式滑入式菜單全局標題模板

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

下載文件
免費下載

免費下載

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

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

1.轉到Divi Theme Builder並開始構建全局標題

轉到 Divi 主題生成器

首先轉到 WordPress 網站後端的 Divi Theme Builder，然後單擊“添加全局標題”。

滑入式菜單

開始構建全局標題

繼續選擇“構建全局標題”。

滑入式菜單

2. 創建頁眉設計

部分設置

背景顏色

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

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

滑入式菜單

間距

轉到設計選項卡並刪除所有默認的頂部和底部填充。

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

滑入式菜單

位置

然後，我們將通過轉到高級選項卡並修改位置設置來修復該部分。

  • 位置：固定
  • 位置：頂部中心

滑入式菜單

添加第 1 行

列結構

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

滑入式菜單

漿紗

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

  • 寬度：97%
  • 最大寬度：100%

滑入式菜單

間距

接下來修改間距設置。

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

滑入式菜單

主要元素

然後，轉到高級選項卡並在行的主要元素中添加兩行 CSS 代碼。 這將幫助我們垂直對齊行中的列內容。 

display: flex;
align-items: center;

滑入式菜單

將圖像模塊添加到第 1 列

上傳標誌

是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳您的徽標。

滑入式菜單

將文本模塊添加到第 3 列

向內容框添加 3 個跨度

然後，移至第三列並添加一個文本模塊。 我們將使用文本模塊的文本選項卡添加三個 HTML 跨度，並為其分配自定義類。 在本教程的後面，我們將使用這些跨度來創建我們的交互式漢堡包圖標。 

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

滑入式菜單

背景顏色

接下來更改模塊的背景顏色。

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

滑入式菜單

文字設置

然後，轉到設計選項卡並刪除文本行高。 這將幫助我們完全控制我們添加的跨度。

  • 文本行高：0em

滑入式菜單

漿紗

接下來，我們將修改模塊的大小設置。

  • 寬度：120px
  • 模塊對齊：右

滑入式菜單

間距

我們將通過使用間距設置中的自定義填充值將模塊變成正方形來完成模塊設置。

  • 頂部填充：40px
  • 底部填充：60px
  • 左填充：40px
  • 右內邊距：40px

滑入式菜單

添加第 2 行

列結構

進入下一行！ 我們將使用這一行來設計我們的整個滑入式菜單。 使用以下列結構：

滑入式菜單

背景顏色

在不添加任何模塊的情況下，打開行設置並更改背景顏色如下：

  • 背景顏色：#e7e0e2

滑入式菜單

背景圖片

我們也在使用圖案背景圖像。 您可以在本教程開始時下載的下載文件夾中找到我們使用的圖像，但您可以隨意使用您選擇的任何其他背景圖案。

  • 背景圖片尺寸：實際尺寸
  • 背景圖片位置：中心
  • 背景圖像重複：重複

滑入式菜單

漿紗

然後，轉到設計選項卡並相應地更改尺寸設置：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 寬度：20%（桌面）、40%（平板）、60%（手機）
  • 高度：100vh

滑入式菜單

間距

也可以修改不同屏幕尺寸的間距設置。

  • 頂部填充：10vw（桌面）、30vw（平板電腦）、40vw（手機）

滑入式菜單

邊界

並通過添加左邊框完成行設置。

  • 左邊框寬度：10px
  • 左邊框顏色：#24394a
  • 左邊框樣式：雙

滑入式菜單

將文本模塊添加到列

添加內容

是時候添加第一個菜單項文本模塊了！ 將副本添加到內容框中。

滑入式菜單

添加鏈接

繼續向菜單項添加相關鏈接。

  • 模塊鏈接網址：#

滑入式菜單

背景顏色

接下來修改背景顏色。

  • 背景顏色：rgba(216,210,212,0.35)

滑入式菜單

文字設置

然後，轉到設計選項卡並按如下方式更改文本設置：

  • 文字字體：Domine
  • 文字字體粗細：粗體
  • 文字顏色：#000000
  • 文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 文本對齊：居中

滑入式菜單

間距

通過在不同屏幕尺寸之間添加一些自定義間距值來完成模塊設置。

  • 下邊距：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 頂部填充：1vw
  • 底部填充：1vw

滑入式菜單

克隆文本模塊（每個菜單項 1 個模塊）

完成第一個菜單項文本模塊後，您可以根據需要多次復制它。 只要確保您的模塊不超過視口高度即可。

滑入式菜單

更改重複文本模塊的內容和鏈接

更改每個重複文本模塊的內容和鏈接。

滑入式菜單

滑入式菜單

將按鈕模塊添加到列

添加副本

我們在這一行中需要的最後一個模塊是按鈕模塊。 添加一些您選擇的副本。

滑入式菜單

添加鏈接

也加個鏈接。

  • 按鈕鏈接網址：#

滑入式菜單

結盟

移至設計選項卡並更改按鈕對齊方式。

  • 按鈕對齊：居中

滑入式菜單

按鈕設置

繼續按如下方式設置按鈕模塊的樣式：

  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：0.7vw（桌面）、1.5vw（平板電腦）、2.5vw（手機）
  • 按鈕文字顏色：#000000
  • 按鈕背景顏色：rgba(0,0,0,0)
  • 按鈕邊框顏色：#24394a
  • 按鈕邊框半徑：0px
  • 按鈕字母間距：4px

滑入式菜單

  • 按鈕字體：Open Sans
  • 按鈕字體粗細：粗體
  • 按鈕字體樣式：大寫

滑入式菜單

間距

並通過在不同屏幕尺寸之間添加自定義間距值來完成模塊設置。

  • 最高利潤率：5vw
  • 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 左填充：1.8vw（桌面）、3vw（平板電腦）、4vw（手機）
  • 右填充：1.8vw（桌面）、3vw（平板電腦）、4vw（手機）

滑入式菜單

3. 添加滑入功能

將 CSS ID 添加到菜單圖標文本模塊

現在我們已準備好所有元素，是時候創建響應式滑入式菜單效果了！ 首先，打開第一行第三列中的文本模塊（包含跨度）並在高級選項卡中使用自定義 CSS ID。 我們將使用這個 CSS ID 在我們的代碼中創建一個點擊函數。

  • CSS ID：滑動打開

滑入式菜單

將 CSS 類添加到第 2 行

然後，打開第二行，轉到高級選項卡並添加自定義 CSS 類。 單擊時，我們將允許該行滑入。

  • CSS 類：滑入式菜單容器

滑入式菜單

更改第 2 行定位

我們也會重新定位這一行。 請注意水平偏移如何在大小設置中跨不同屏幕尺寸匹配行的寬度。

  • 位置：絕對
  • 位置：右上角
  • 水平偏移：-20%（桌面）、-40%（平板）、-60%（手機）

滑入式菜單

更改第 2 行不透明度

並在默認狀態下將不透明度設為 0。 

opacity: 0;

滑入式菜單

將代碼模塊添加到第一行的第二列

插入 CSS 代碼

要創建點擊功能效果並為漢堡圖標的跨度設置樣式，我們需要一些 CSS 代碼。 將代碼模塊添加到第一行的第二列，並將以下 CSS 代碼行放在樣式標記之間，如下面的打印屏幕所示： 

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.line-2 {
top: 10px;
}

.line-3 {
top: 20px;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

滑入式菜單

插入 JQuery 代碼

我們還需要為點擊功能添加一些 JQuery。 確保將代碼放在腳本標籤之間，如下面的打印屏幕所示： 

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

滑入式菜單

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

完成全局標題中的所有元素後，唯一要做的就是保存所有更改並在您的網站上查看結果！

滑入式菜單

滑入式菜單

預覽

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

桌面

滑入式菜單

移動的

滑入式菜單

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的 Theme Builder 為您的下一個 Divi 項目創建響應式滑入式菜單。 我們將最好的 Divi 內置元素和選項與一些自定義點擊功能代碼相結合。 這讓你可以專注於設計滑入式菜單，讓代碼接管全局標題的功能部分！ 您也可以免費下載 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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