如何將粘性頁面導航鏈接（下一個、上一個、第一個、最後一個）添加到 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 部分

創建頂部

默認情況下，Divi Builder 中將有一個常規部分可供使用。 使用默認的常規部分，打開部分設置，取出底部填充如下：

• 填充：底部 0px

行設置

向該部分添加一列行。

然後更新該行的設計設置，如下所示：

• 寬度：100%
• 最大寬度：80vw（台式機、平板電腦）、95vw（手機）

章節標題

要創建節標題，首先，向行/列添加一個新的文本模塊。

然後使用以下 H2 標題更新正文：

<h2>Top</h2>

在設計選項卡下，更新 H2 標題的文本設置，如下所示：

• 選擇 H2 選項卡
• 標題 2 字體：蒙特塞拉特
• 標題 2 字體粗細：重
• 標題 2 字體樣式：TT
• 標題 2 文本對齊：居中
• 標題 2 文字大小：8vw（桌面、平板電腦）、61.36px（手機）

創建第 1 節

接下來，我們將創建包含粘性導航鏈接的第一部分。 要創建第 1 部分，請複制頂部部分並在圖層視圖中相應地標記複製部分。

第 1 節背景顏色

打開第 1 部分的設置並更新背景顏色：

• 背景顏色：#fec0f4

第 1 節錨鏈接導航的 CSS ID

為了使用我們的錨鏈接鏈接到這個部分，我們需要添加一個 CSS ID。 在高級選項卡下，添加以下 CSS ID：

• CSS ID：1

更新標題文本

然後將文本模塊中的標題文本更新為“第 1 節”。

為第 1 部分創建粘性行

更新部分和標題後，我們將創建一個粘性行，最終將保存我們的導航鏈接。 為此，請在第 1 節中的現有行下添加一個新的單列行。

因為我們的部分沒有底部填充，所以該行應該很好地位於該部分的最底部。

粘性行設置

為了使行具有粘性，我們需要更新行設置。

粘性選項

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

• 粘性位置：粘在底部
• 最高粘性限制：部分
• 與周圍粘性元素的偏移：否

這將確保粘性行將包含在該部分中。

設計設置

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

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：25vw（台式機、平板電腦），50% 手機
• 行對齊方式：右（台式機、平板電腦）、左（手機）
• 填充：0px 頂部，0px 底部

為了隱藏行（連同它將包含的按鈕），我們將使用變換轉換設置將行移動到其下方部分的後面。 然後我們將在處於粘性狀態時將行向上移動到視圖中。 這將確保按鈕僅在處於粘性狀態時可見。

為此，請在將鼠標懸停在轉換選項標題上時單擊粘性圖標（縮略圖）以激活粘性選項卡。 然後更新轉換選項如下：

• 變換平移 Y 軸（桌面）：100%
• 變換平移 Y 軸（粘性）：0%

位置偏移

最終，我們將為第一個和最後一個按鈕添加另一個棒行，這些按鈕將粘在窗口的右下角。 所以我們需要將這個棒行向左移動。

要移動粘性行，請轉到高級選項卡並更新位置偏移選項，如下所示：

• 偏移原點：右上角
• 水平偏移：25vw（桌面、平板）、0px（手機）

注意：手機上的偏移量設置為 0px，因為行對齊將設置為左對齊，寬度為 50%。

粘性行列 CSS

為了確保我們的按鈕完全相鄰並垂直對齊，我們將添加一小段自定義 CSS 以將按鈕置於 CSS 網格佈局中。

在高級選項卡下，將以下 CSS 添加到主元素：

display:grid;
grid-template-columns:50% 50%;

將分隔線和下一個按鈕添加到粘滯行（第 1 部分）

現在是時候開始將我們的按鈕添加到列中了。 對於第一部分，我們只需要一個 Next Button。 因此，我們需要一個分隔線作為左按鈕的佔位符。

分隔線

向列中添加一個新的分隔線。

然後將 Show Divider 選項設置為“NO”。

下一個按鈕

在分隔模塊下，添加一個按鈕模塊。

然後更新按鈕內容設置：

• 按鈕文本：下一個
• 按鈕鏈接網址：#two

“#two” URL 將跳轉到我們將使用 CSS ID“two”創建的下一部分。

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

• 按鈕對齊：居中
• 為按鈕使用自定義樣式：是
• 按鈕文字大小：2.1vw（桌面、平板）、16.1px（手機）
• 按鈕文字顏色：#000000
• 按鈕背景：#eeeeee
• 按鈕邊框寬度：0px
• 按鈕圖標：向下箭頭（見截圖）
• 僅在懸停按鈕上顯示圖標：否

• 保證金：2%

要確保按鈕跨越 CSS 網格列的整個寬度，請將以下自定義 CSS 添加到主元素：

display:block !important; width: 100%;

創建第 2 節

現在我們已經完成了第 1 部分，複製第 1 部分以創建第 2 部分並相應地更新圖層視圖中的標籤。

更新第 2 節背景顏色和標題文本

接下來，更新部分背景顏色：

• 背景顏色：#8dc6c1

然後將標題文本更新為頂行文本模塊中的“Section 2”。

更新第 2 節 CSS ID

在高級選項卡下，使用新的 CSS ID 更新該部分：

• CSS ID：兩個

將下一個和上一個按鈕添加到粘滯行（第 2 部分）

在第 2 部分的粘性行內，刪除分隔器模塊並複制下一步按鈕，以便您擁有兩個按鈕。

更新下一個按鈕鏈接 URL

打開第一個/左下一個按鈕的設置並更新按鈕鏈接，如下所示：

• 按鈕鏈接網址：#three

“#three” URL 將跳轉到我們將使用 CSS ID“three”創建的下一部分。

添加上一個按鈕文本和鏈接 URL

要製作上一個按鈕，請打開第二個/右按鈕的設置並更新以下內容：

• 按鈕文字：上一頁
• 按鈕鏈接網址：#one

“#one” URL 將跳回到 CSS ID 為“one”的部分。

添加上一個按鈕圖標

然後更新圖標：

• 按鈕圖標：向上箭頭（見截圖）

創建第 3 節

現在我們已經完成了第 2 部分，複製第 2 部分以創建第 3 部分並相應地更新圖層視圖中的標籤。

更新第 3 節背景顏色和標題文本

為該部分添加新的背景顏色：

• 背景顏色：#9fa5f4

然後將標題文本更新為頂行文本模塊中的“第 3 節”。

更新第 3 節 CSS ID

在高級選項卡下，使用新的 CSS ID 更新該部分：

• CSS ID：三個

將分隔線和上一個按鈕添加到粘滯行（第 3 部分）

添加分隔線和刪除下一個按鈕

我們可以繼續根據需要創建盡可能多的部分，以包含“下一個”和“上一個”按鈕。 但是對於這個例子，我們將把第 3 節作為導航鏈接的最後一節。

因此，由於我們不需要 Next Button，刪除 Next Button 並將其替換為分隔符，就像我們在第 1 節中所做的那樣。

更新上一個按鈕鏈接 URL

然後，打開上一個按鈕的設置並更新鏈接 URL：

• 按鈕鏈接網址：#two

“#two” URL 將跳回到 CSS ID 為“two”的部分。

創建底部

現在 3 個部分已經完成了它們的粘性行導航和錨鏈接功能，我們將創建一個底部部分，作為頁面的一部分，不包括下一個/上一個粘性導航。 這是為了演示頁面上是否有可能不需要粘性導航的其他部分。

要創建底部部分，只需複制頂部部分並將其拖到部分 3 下方。

然後將標題文本更新為“底部”。

創建粘性底部

對於我們的最後一步，我們需要創建一個粘性部分，該部分將粘貼到頁面底部並包含我們的第一個和最後一個導航（錨）鏈接。 如果您希望導航鏈接在滾動時出現在頁面的所有部分上，則此部分必須位於頁面底部。

在底部部分下，創建一個新的常規部分。

然後相應地更新圖層視圖中的部分標籤（即“粘性底部部分”）。

為第一個和最後一個導航鏈接創建行

為了向我們的部分頁面添加更多導航功能，我們將創建兩個額外的按鈕（或錨鏈接），它們將跳轉到頁面上的第一個（第 1 部分）和最後（第 3 部分）部分。

複製第 2 部分中的粘性行並將其拖動到粘性底部

要為我們的第一個和最後一個導航鏈接創建行，我們可以從第 2 部分複制粘性行（第 2 行）並將其拖到新的粘性底部部分。

更新行設置

對於最後一部分，我們將使整個部分具有粘性，以便我們可以取出從重複行設置繼承的粘性設置，並為其提供絕對位置。

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

接下來，更新位置選項如下：

• 位置：絕對
• 位置：右下角
• 水平偏移：0px
• 粘貼位置：不粘貼

在設計選項卡下，重置行的變換選項。

為粘性底部添加第一個和最後一個按鈕

要創建第一個按鈕，請打開左側按鈕的設置並更新以下內容：

• 按鈕文字：第一
• 按鈕鏈接網址：#one

然後將按鈕圖標更新為不同的向上箭頭。

要創建 Last 按鈕，請打開右側按鈕的設置並更新以下內容：

• 按鈕文字：最後
• 按鈕鏈接網址：#three

然後將按鈕圖標更新為不同的向下箭頭。

更新粘性底部的部分設置

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

• 寬度：100%；
• 高度：0px；
• 填充：頂部 0px，右側 0px

這基本上可以確保該部分不佔用頁面上的任何實際空間。 但是因為該行有一個絕對位置，它仍然會顯示在該部分的上方。

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

• 垂直溢出：可見
• 水平溢出：可見
• 粘性位置：粘在底部
• 最高粘性限制：身體區域
• 從周圍的粘性元素偏移：否

最後結果

請注意向下滾動頁面時粘性導航鏈接是如何變化的。

請注意通過單擊導航鏈接導航到每個部分是多麼容易。

這是設計在移動設備上的外觀。

最後的想法

我們在本教程中構建的粘性頁面導航鏈接對於那些尋找傳統滾動的有效替代方法或在全局標題中包含錨鏈接的人來說應該會派上用場。 而且，您可以輕鬆複製部分並更新錨鏈接（以及每個部分的相應 CSS ID）以創建更多內容。

為獲得最佳效果，每個部分都應有足夠的內容以超出瀏覽器高度。 如果沒有，這些錨鏈接可能不會變得粘滯（或可見）。 確保這種情況發生的一種簡單方法是為每個部分提供 100vh 的最小高度。 如果您不喜歡那樣，您始終可以選擇取消每個粘性行的轉換轉換粘性選項，以便按鈕保持可見。

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

乾杯!