如何在 Divi 中使用粘性頁面標題創建可點擊的手風琴

Divi 的新粘性位置選項為許多新的和令人興奮的設計可能性打開了大門。 在本教程中，我們將向您展示如何將 Divi 的粘性位置選項與平滑滾動的錨鏈接相結合，以創建一種類似於手風琴的方式來索引和導航您的頁面。 使用 Divi 的內置選項構建它真的很容易，因此不需要額外的 CSS 或其他代碼。 完成後，您將擁有一種獨特的方式來組織您的頁面並提升桌面和移動設備上的用戶體驗。

讓我們開始吧！

搶先看

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

在這裡，您可以看到粘性頁面標題貼在瀏覽器窗口的頂部和底部，並像手風琴一樣堆疊在一起。

在這裡您可以看到，單擊其中一個粘性標題將像手風琴一樣跳轉（使用平滑滾動錨鏈接）到頁面的該部分。

這也是移動設備上的功能。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

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

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

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

創建粘性行

首先，讓我們創建我們的粘性行。 為此，請將一列行添加到默認部分。

打開行設置。 在 Advanced 選項卡下，更新粘性位置如下：

• 粘性位置：粘在頂部和底部

這將導致該行在用戶向下滾動時停留在瀏覽器窗口的頂部，然後在用戶向上滾動時停留在瀏覽器窗口的底部。

設置粘性行的樣式

現在粘性位置就位，我們可以使用內置的粘性樣式選項開始對行進行樣式設置，該選項允許您在粘性位置生效（或卡住）時為元素提供特定樣式。 對於行，我們希望背景在處於卡住位置時更改為深色。 為此，請打開行設置並更新以下內容：

• 背景顏色（桌面）：#ffffff
• 背景顏色（粘性）：#051923

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

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度（平板電腦和手機）：100%
• 填充：0px 頂部，0px 底部

接下來，我們要為行提供一個底部邊框，作為標題和下面內容之間的分隔線。 並且，一旦該行處於粘性位置，我們希望改為顯示左邊框。

在邊框選項切換下，更新以下內容：

• 邊框顏色：#6eeb83
• 底部邊框寬度（桌面）：8px
• 底部邊框寬度（粘性）：0px
• 左邊框寬度（桌面）：0px
• 左邊框寬度（粘性）：8px

創建粘性標題文本

要創建頁面標題文本，請向該行添加一個新文本模塊。

然後將以下 HTML 粘貼到正文內容中。

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

並更新懸停時的背景顏色......

• 背景顏色（懸停）：rgba(255,255,255,0.2)

這將使用戶可以點擊標題更加明顯。

設置粘性標題文本的樣式

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

• 標題 2 字體：蒙特塞拉特
• 標題 2 文本對齊方式：左
• 標題 2 文本顏色（桌面）：默認（或黑色）
• 標題 2 文本顏色（粘性）：#ffffff
• 標題 2 文字大小：80 像素（桌面）、22 像素（粘性）、28 像素（手機）
• 標題 2 行高：1.3em（桌面），1em（粘性）

然後更新填充如下：

• 填充（桌面）：頂部 15 像素，底部 15 像素
• 填充（粘性）：頂部 10 像素，底部 0 像素，左側 20 像素
• 填充（平板電腦和手機）：頂部 15 像素，底部 15 像素，左側 15 像素，右側 15 像素

創建模擬頁面內容

一旦粘性行就位，我們可以在標題下添加另一行，其中將包含一些模擬頁面內容。 為此，請在粘性行下創建一個新的單列行。

然後向該行添加一個新的文本模塊並粘貼一些模擬內容。

根據需要復制該部分以獲得更多粘性頁面標題和內容

此時，您已經有了基本的設計，只需複制該部分即可創建帶有粘性標題的其他頁面部分。

重複部分

要創建另一個部分，請複制包含粘性行/標題和模擬內容行的現有部分。 這將加快創建頁面下一部分的開發過程。

更新文本內容和行邊框顏色

在復制部分，更新文本模塊內的文本，然後更新行設置下的邊框顏色。

根據需要重複

繼續複製該部分並根據需要更新文本內容和行邊框顏色。 對於此示例，我們將再复制該部分兩次，以提供總共四個粘性頁面標題，這些標題將構成手風琴。

將錨鏈接添加到粘性頁面標題

現在，該功能將允許用戶向下滾動頁面並將標題貼在頂部和底部，就像手風琴一樣。 現在我們想讓標題可點擊，這樣當用戶點擊其中一個粘性標題時，用戶將被帶到頁面的該部分。 這是使用錨鏈接完成的。

要添加錨鏈接，我們首先需要向我們希望鏈接跳轉到的部分添加一個 CSS ID。

添加第 1 部分 CSS ID

打開該部分的設置並添加以下 CSS ID：

• CSS ID：1

然後打開粘性行的設置並添加以下行鏈接 URL：

• 行鏈接 URL：#one

現在，當用戶點擊行/標題時，頁面將跳轉到第一部分。

添加第 2 部分 CSS ID

接下來，我們需要為第二個標題添加錨鏈接。

打開第二部分設置並添加以下 CSS ID：

• CSS ID：兩個

添加第 1 部分粘性行鏈接 URL

然後打開第二部分中粘性行的設置並添加行鏈接 URL：

• 行鏈接 URL：#two

添加第 3 部分 CSS ID

接下來，我們需要為第三個標題添加錨鏈接。

打開第三部分設置並添加以下 CSS ID：

• CSS ID：三個

添加第 1 部分粘性行鏈接 URL

然後打開第三部分中粘性行的設置並添加行鏈接 URL：

• 行鏈接 URL：#three

添加第 4 節 CSS ID

最後，我們需要為第四個標題添加錨鏈接。

打開第四部分設置並添加以下CSS ID：

• CSS ID：四

添加第 1 部分粘性行鏈接 URL

然後打開第四部分中粘性行的設置並添加行鏈接 URL：

• 行鏈接 URL：#four

最後結果

在這裡，您可以看到粘性頁面標題貼在瀏覽器窗口的頂部和底部，並像手風琴一樣堆疊在一起。

在這裡您可以看到，單擊其中一個粘性標題將像手風琴一樣跳轉（使用平滑滾動錨鏈接）到頁面的該部分。

這也是移動設備上的功能。

最後的想法

此設計以獨特的方式使用粘性位置選項。 不僅頁面標題在用戶滾動時保持可見，而且每個標題也是可點擊的，使用錨鏈接將用戶帶到該特定部分。 結果很像整個頁面的手風琴。 這種設計對於索引長格式內容或創建用戶友好的單頁頁面肯定會派上用場。

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

乾杯!