在 Divi 中創建自定義顯示更多切換的 2 種方法

顯示更多切換可以為網站上的許多不同應用程序派上用場。 傳統上，顯示更多切換用於在單擊顯示更多鏈接時顯示更多文本（如閱讀更多切換）。 這有助於保持初始設計更加緊湊和簡潔，讓訪問者在需要時單擊以獲取更多信息。

在本教程中，我們將向您展示兩種為您的 Divi 站點創建自定義 Show More Toggles 的方法。 第一種方法包括將 Divi 切換模塊轉換為位於模塊下的顯示更多切換，準備顯示/隱藏添加文本。 第二種方法將涉及創建一個顯示更多切換，可以顯示/隱藏整個 Divi 行或模塊。 可以想像，這為顯示或隱藏您想要的任何內容打開了大門！

讓我們開始吧。

搶先看

這是我們將在本教程中構建的顯示更多切換的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

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

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第一種方式：使用 Divi Toggle 模塊構建 Show More Toggle

首先，向您的部分添加一個兩列的行。

在左欄中，添加一個模糊模塊。

在模糊模塊下，添加一個切換模塊。 我們將把切換模塊變成一個顯示更多的切換，這樣當點擊切換時它會在模糊模塊下顯示/隱藏更多的文本。

為此，請打開切換模塊設置並更新標題文本：

• 標題：顯示更多

在設計選項卡下，更新以下內容以去除默認樣式：

• 打開切換背景顏色：rgba(0,0,0,0);
• 關閉切換背景顏色：rgba(0,0,0,0)；

• 填充：頂部 0px，底部 0px，左側 0px
• 邊框寬度：0px

在“高級”選項卡下，更新以下自定義 CSS：

對於主要元素……

display:flex;
flex-direction: column;
align-items: flex-end;

對於切換標題...

order:2;
padding-right:25px !important;

對於切換內容...

order:1;
padding: 0px;

此切換標題和切換內容使用帶有 display:flex 的 order 屬性進行不同排序。 現在可點擊的標題位於內容下方，這樣它的功能就像顯示更多切換。

現在，將以下 CSS 類添加到切換模塊：

• CSS 類：et-readmore-toggle

這是使用我們的 JQuery 代碼定位模塊所必需的，我們將添加該代碼以在單擊切換時更改標題文本。

我們已經清理了切換模塊並移除了所有填充，以便切換應該直接位於上面的模糊模塊下方。 但是，頂部簡介中的底部邊距仍然太多，因此切換中的文本與上一段相距太遠。

打開切換上方的模糊模塊的設置並更新邊距：

• 邊距底部：10px；

現在我們準備添加 JQuery 所需的更改切換標題文本以在單擊時讀取“顯示更多”或“顯示更少”。

要添加代碼，請在切換模塊下添加代碼模塊。

然後粘貼以下 JQuery，確保將代碼包裝在必要的腳本標籤中。

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

這是結果。

這種設計顯然是基本的。 隨意使用內置的 Divi 選項為切換添加更多設計以滿足您的需求。

第二種方式：構建 Show More Toggle 以顯示/隱藏任何 Divi 模塊或行

如果第一個使用切換模塊顯示更多切換似乎有點過於局限，那麼下一個方法會讓您感興趣。 我們將構建一個自定義顯示更多切換，您可以使用它來顯示/隱藏和 Divi 模塊甚至整行！

為 Divi 模塊構建 Show More Toggle

這是如何做到的。

首先，就像在第一個示例中所做的那樣，創建另一個兩列行。

然後將一個模糊模塊添加到第 1 列。

在 blurb 模塊下，我們將添加一個聯繫表單模塊。

此聯繫表將是我們在單擊“顯示更多”按鈕時將顯示/隱藏的模塊。

要在代碼中定位此模塊，請打開聯繫表單的設置並添加以下 CSS 類：

• CSS 類：et-show-more-content

我們還需要定位我們想要顯示/隱藏的模塊的父容器。 如果需要，這將允許我們在頁面上添加多個顯示更多切換實例。 在這種情況下，此聯繫表單模塊的父容器是第 1 列。打開第 1 列的設置並添加以下 CSS 類：

• CSS 類：et-show-more-container

要創建顯示更多切換按鈕，請在聯繫表單模塊下添加一個按鈕模塊。

您可以隨意設計按鈕。 完成後，將按鈕模塊設置設為 0pen 並添加以下 CSS 類：

• CSS 類：et-show-more-toggle

然後將按鈕文本更改為“顯示更多”。

現在我們已準備好添加所需的代碼，以使我們的 show more 切換正常工作。

在按鈕下，添加一個代碼模塊，以便我們可以放入 CSS 和 JQuery。

首先將以下 CSS 粘貼到代碼框中，確保將代碼包裝在必要的樣式標籤中：

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

然後在 CSS 下，粘貼以下 JQuery，確保將代碼包裝在腳本標籤中：

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

為了平衡我們的設計，複製第 1 列以創建另一個相同的列。 確保刪除空的第三列和重複的額外代碼模塊。

這是結果。

為 Divi 行創建顯示更多切換

現在我們為 Divi 模塊設置了更多顯示切換，讓我們在此基礎上添加一個新的顯示更多切換來切換整行。

首先，創建一個新的一列行來保存我們的新按鈕。

然後復制現有的顯示更多按鈕模塊之一併將其粘貼到新行中。 然後打開按鈕設置並更改按鈕對齊方式：

• 按鈕對齊：居中

由於我們希望將該行作為我們想要顯示/隱藏的內容，打開包含顯示更多聯繫表單模塊切換的行的設置。 然後將以下 CSS 類添加到該行：

• et-show-more-content

並且我們還需要向行（即節）的父容器添加一個自定義 CSS 類。 打開部分設置並添加以下 CSS 類：

• et-show-more-container

這是結果。

最終結果

以下是我們構建的三個顯示更多切換的最終結果。

最後的想法

本教程的目的是向您展示一些在 Divi 中創建自己的顯示更多切換的方法。 希望其中一個會在以後派上用場，這樣您就不必使用插件了。 儘管我們沒有為這些示例添加任何壯觀的設計，但這並不意味著它無法完成。 有了這個功能，你可以使用 Divi builder 設計這些顯示更多的切換。 或者您甚至可以使用我們的一些預製佈局進行試驗。

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

乾杯!