如何在 Divi 中創建滑動推邊欄

側邊欄可能很棒，但它們也可能浪費空間。 這就是為什麼創建滑動推送側邊欄對於那些希望側邊欄不會分散用戶對頁面主要內容的注意力的人來說是一個完美的選擇。 此外，這種側邊欄使用戶可以選擇隨時查看或隱藏側邊欄。

滑動推送效果的獨特之處在於，側邊欄從頁面左側滑入，同時推送（或擠壓）頁面的主要內容以使側邊欄適合視口。 簡而言之，它滑動側邊欄並推動頁面。

側邊欄一旦建成，它就成為適用於所有類型應用程序的多功能工具，包括菜單和表單。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

要將其添加到頁面或模板，您需要添加一個新部分並從庫中選擇部分佈局。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“選擇預製佈局”選項。
   
4. 選擇 Event Layout Pack 並單擊以使用 Event Home Page 佈局。
   

如何在 Divi 中創建滑動推邊欄

要創建滑動推邊欄，我們將需要使用一個新的常規部分。 我們將調整該部分的大小和位置，使其成為單擊按鈕時打開的固定側邊欄，推動（並擠壓）右側的主要內容區域，為側邊欄騰出空間。

構建部分

首先，讓我們向頁面添加一個新的常規部分。

然後移動頁面頂部的部分。

部分設置

打開截面設置，更新要固定的位置如下：

• 位置：固定
• Z指數：9999

在設計選項卡下，更新大小和間距如下：

• 寬度：350px（桌面和平板電腦），100%（手機）
• 高度：100%
• 填充：頂部 100 像素，底部 0 像素

填充是為頁面頂部的標題騰出空間。

接下來，在高級選項卡下，為該部分提供一個 CSS 類：

• CSS 類：et-push-sidebar

一旦 css 類就位，給該部分一個背景顏色：

• 背景顏色：#1a1e36

要創建更明顯的分隔，請返回設計選項卡，然後添加右邊框。

• 右邊框寬度：2px
• 右邊框顏色：#eeeeee

這會處理作為側邊欄主要容器的部分。 現在是時候開始構建我們將用來切換側邊欄打開和關閉的兩個按鈕了。

創建側邊欄切換按鈕

將有兩個按鈕用於切換側邊欄。 第一個按鈕將是一個“X”圖標，它會在打開側邊欄的移動版本後關閉它。 “X”將使用模糊模塊構建。 第二個是主切換按鈕，我們將使用一個模糊模塊構建它，該模塊與垂直文本一起旋轉並與側邊欄/部分絕對相鄰。

讓我們開始吧。

為按鈕創建行

在部分/側邊欄中創建一個新的單列行。

打開行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 填充：0px 頂部，0px 底部

在高級選項卡下，更新位置選項如下：

• 位置：絕對
• Z指數：1

創建“X”關閉圖標

要創建“X”關閉圖標，請向該行添加一個模糊模塊。 使用圖層模式添加新模塊可能更容易，因為點擊內容會有些困難。

內容

然後打開模糊設置。 在內容選項卡下，取出標題和正文內容，並將 X 圖標添加到簡介中。

• 使用圖標：是
• 圖標：x（見截圖）

設計

在設計選項卡下，更新以下內容：

• 圖標顏色：#eeeeee
• 圖像圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：40px
• 寬度：50px

接下來，通過添加以下轉換轉換屬性將圖標降低一點：

• 變換 平移 X : 100px
• 變換 平移 Y : -10px

先進的

在“高級”選項卡下，禁用平板電腦和台式機上的簡介，以便我們只能在手機顯示屏上看到它。

• 禁用：平板電腦和台式機

然後將一個 CSS 類添加到簡介中並給它一個固定的位置，以便在手機顯示屏上滾動側邊欄內容時它保持在視圖中。

• CSS 類：et-slide-push-close
• 位置：固定
• 位置：右上角

這負責“X”關閉圖標按鈕。

創建主側邊欄切換按鈕

要創建主側邊欄切換按鈕，請在現有的“X”圖標模糊下添加一個模糊模塊。

內容

更新標題並單擊以使用向下箭頭圖標。

• 標題：活動信息
• 使用圖標：是
• 圖標：向下箭頭（見截圖）

接下來，為簡介添加背景顏色。

• 背景顏色：#eeeeee

設計

在設計選項卡下，更新以下內容：

• 圖標顏色：#1a1e36
• 圖像/圖標放置：左
• 使用圖標字體大小：是
• 圖標字體大小：25px
• 標題字體：天橋
• 標題字體粗細：粗體
• 標題字體樣式：TT
• 標題文字顏色：#1a1e36
• 標題字母間距：2px
• 標題行高度：1.2em
• 填充：頂部 0.6em，左側 1em，右側 1em
• 圓角：底部兩個角為 5px

要在截面外定位和旋轉模糊，請使用如下變換選項：

• 變換 平移 Y : 100px
• 變換旋轉 Z : -90deg
• 變換原點：右上角

先進的

在高級選項卡下，更新以下內容：

• CSS 類：et-slide-push-toggle
• 位置：絕對
• 位置：右中心

使用代碼模塊添加自定義代碼

完成兩個按鈕後，我們就可以添加自定義代碼，為側邊欄提供所需的滑動推送功能。

要添加代碼，首先，將代碼模塊添加到同一列。

然後將以下代碼粘貼到代碼模塊中。

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

創建側邊欄內容行

我們創建的第一行是用於製作側邊欄功能的按鈕和代碼。 下一行將用於側邊欄內容。

要創建側邊欄內容行，請在側邊欄/部分的第一行下方添加一個新的單列行。

行設置

打開新行的設置並更新以下內容：

• 寬度：100%
• 高度：100%
• 填充：頂部 5%，底部 5%，左側 5%，右側 5%

在高級選項卡下，更新溢出選項如下：

• 水平溢出：滾動（桌面和平板電腦），自動（手機）
• 垂直溢出：滾動（桌面和平板電腦），自動（手機）

用內容/模塊填充側邊欄

現在您的側邊欄已準備就緒，您需要做的就是根據需要將任何模塊添加到側邊欄中的第二行。 對於此示例，我只是從活動主頁佈局中復制模塊並將它們粘貼到行的列中。

最後結果

在實時頁面上查看最終結果。

將滑動推邊欄添加到頁面模板

如果您想默認在所有頁面上使用此側邊欄，則需要使用 Divi Theme Builder 將側邊欄/部分添加到頁面模板中。

將部分佈局保存到 Divi 庫

為此，首先，將用於創建側邊欄的部分保存到 Divi 庫。 您可以通過單擊圖層模式中側邊欄上的三個點，添加佈局名稱並將其保存到庫中來完成此操作。

創建新頁面模板

接下來，轉到主題構建器並創建一個新模板並將該模板分配給所有頁面。

將側邊欄添加到頁面模板

接下來，單擊以編輯頁面模板。

在模板佈局編輯器中，添加一個新的全角部分。

然後將全角帖子內容模塊插入該部分。

下一步點擊即可。 在全角部分上方創建一個新部分。 然後單擊“從庫中添加”選項卡並從庫中選擇“滑動推邊欄”部分佈局。

完成後，您可以使用正文佈局編輯器根據需要編輯側邊欄。

保存主題生成器設置

確保將更改保存到主題構建器。

現在您的所有頁面都將具有側邊欄。

最後的想法

對於那些尋求兩全其美的人來說，滑動推送側邊欄是一個完美的選擇 - 側邊欄保持在最前沿，不會帶走（或分散）頁面的主要內容。 隨意將它用於各種事情，例如註冊表單、電子郵件選擇加入、菜單等等。

我期待在評論中收到您的來信。

乾杯!