如何在 Divi 中為粘性標題創建切換選項卡

粘性標題可以有效地使您的菜單和其他重要的 CTA 可供用戶訪問。 但有時粘性標題會讓人分心，特別是對於較小屏幕尺寸上的大標題。 通常，我們採用縮小標題和/或隱藏處於粘性狀態的元素來為內容創造更多空間。 但是，為那些粘性標題創建一個切換選項卡可能是一個很好的選擇。 在粘性標題下包含一個小的切換選項卡，使用戶可以選擇隨時隱藏/顯示該粘性標題。 在本教程中，我們將向您展示如何在 Divi 中為粘性標題創建切換選項卡。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的粘性標題切換選項卡的快速瀏覽。 請注意一旦用戶滾動超出標題的高度，切換選項卡如何變得可見。 然後用戶可以通過單擊選項卡來切換粘性標題。 用戶滾動回頁面頂部後，標題可見，選項卡隱藏。

這是一個演示相同概念的代碼筆。

免費下載粘性標題模板的切換選項卡

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

下載文件

免費下載

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

下載

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

要將模板導入您的 Divi 庫，請執行以下操作：

1. 導航到 Divi 主題生成器。
2. 單擊頁面右上角的便攜性圖標。
3. 在可移植性彈出窗口中，選擇導入選項卡。
4. 從您的計算機中選擇下載文件。
5. 然後點擊導入按鈕。

完成後，模板將在 Divi Theme Builder 中可用。

從那裡，您可以打開模板設置並將模板分配給您網站的任何或所有頁面以測試結果。 或者您可以單擊打開標題模板編輯器來編輯模板佈局。

讓我們進入教程，好嗎？

第 1 部分：將預製標題模板上傳到 Divi 主題生成器

為了加快本教程的構建過程，我們將使用可從我們的博客免費下載的預製標頭。

下載模板

要獲取預製的頁眉模板，請轉到包含我們用於 Divi 解釋器佈局包的免費頁眉和頁腳模板的帖子。

然後在電子郵件選項中輸入您的電子郵件地址。 完成後，您將看到“下載文件”按鈕。 單擊按鈕下載文件。

下載文件後，解壓縮 JSON 文件。

導入模板

接下來，導航到 Divi > Theme Builder。 然後單擊頁面右上角的便攜性圖標。

選擇導入選項卡，選擇您剛剛解壓縮的 JSON 文件，取消選中選項並單擊導入按鈕。

接下來，選擇“將它們作為靜態佈局導入...”選項，然後再次單擊“導入”按鈕。

打開標題模板編輯器

將模板加載到主題構建器後，刪除模板的頁腳並單擊保存更改。 然後單擊編輯圖標以編輯模板的自定義標題。

打開圖層模式並刪除現有代碼模塊

在頁眉佈局編輯器中，打開頁面底部的設置菜單，然後單擊圖層視圖圖標以打開圖層模式。 這將幫助我們更輕鬆地訪問我們的 Divi 元素。

在圖層模式中，單擊“全部打開/關閉”切換按鈕，以便您可以看到所有的 Divi 元素。 在該部分的第二行，刪除代碼模塊。 本教程不需要此自定義代碼。

第 2 部分：在 Divi 中使用切換選項卡創建粘性標題

部分設置

對於這個標題，我們將使整個部分具有粘性，以便在滾動時標題會粘在頁面頂部。 我們還將為該部分提供一個自定義 CSS 類，以便稍後使用我們的自定義代碼進行定位。

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

• CSS 類：et-divi-sticky-header
• 粘滯位置：粘在頂部

使用 Blurb 模塊創建切換選項卡

接下來，我們將使用一個模糊模塊創建我們的切換選項卡。

為此，請在菜單模塊下第二行的最底部添加一個新的模糊模塊。

然後打開blurb設置，更新內容如下：

• 刪除標題內容
• 刪除正文內容
• 使用圖標：是
• 圖標：向上箭頭（見截圖）
• 背景顏色：#ffffff

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

• 圖標顏色：#1a3066
• 使用圖標字體大小：是
• 圖標字體大小：40px
• 寬度：45px
• 高度：45px

• 邊距：0px
• 圓角：左下角 12px，右下角 12px
• 變換平移 X 軸：100%
• 圖像/圖標動畫：無動畫

注意：變換平移 Y 設置為 100% 時，圖標將準確向下移動圖標高度 (45px) 的 100%。

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

• CSS 類：et-divi-sticky-toggle
• 位置：絕對
• 位置：右下角
• 水平偏移：20px
• Z 指數：-1

現在宣傳語具有絕對位置（變換 Y 為 100%），宣傳語（切換選項卡）將位於整個標題部分的正下方。 這很重要，這樣當我們在單擊切換選項卡時顯示/隱藏標題時，切換選項卡將保持可見/可點擊。

添加自定義代碼

為了添加這個粘性標題切換所需的功能，我們需要添加一些自定義 CSS 和 JQuery。

為此，我們將在 blurb 模塊下方添加一個新的代碼模塊。

在代碼內容框中，粘貼以下 CSS，確保將代碼包裝在必要的樣式標籤中。

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}

.et-divi-sticky-toggle:hover {
  cursor: pointer;
}

.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}

.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}

.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}

.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

在圍繞自定義 CSS 的結束腳本標籤下，粘貼以下 JQuery，確保將代碼包裝在必要的腳本標籤中。

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");

  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });

  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

最後結果

要查看最終結果，您需要將帶有新標題的模板分配給您網站的一個頁面或所有頁面。

為此，請保存佈局並退出標題模板編輯器。

然後使用新的粘性切換選項卡標題打開模板的模板設置（齒輪圖標）。 在 Use On 選項卡下，選擇 All Pages 並單擊 Save 按鈕。

重要提示：這將在您網站的所有頁面上顯示標題。 因此，請確保您使用的是臨時網站，而不是您的實時網站。

現在，打開您網站上的任何頁面以查看結果。

以下是它在台式機、平板電腦和手機上的外觀預覽。

最後的想法

在本教程中，我們向您展示瞭如何為粘性標題創建切換選項卡。 對於希望讓用戶可以訪問重要的粘性標題內容的開發人員以及想要隨時隱藏或顯示該標題的用戶來說，這都是一個有用的解決方案。 希望這對未來的項目會派上用場！

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

乾杯!