如何在 Divi 中將滾動進度條與固定導航菜單相結合

進度條指示器可以為您的網站添加一個很好的觸感，通過有用（和有趣）的交互來提升用戶體驗。 通常，進度條獨立於頁面頂部，與頁面的實際內容沒有太多聯繫。 用戶只需直觀地指示他們在頁面上的位置。 但是，今天，我們將把這個功能提升到另一個層次。

在本教程中，我們將向您展示如何在 Divi 中將滾動進度條與固定導航菜單相結合。 這種設計的獨特之處在於進度條與菜單按鈕的寬度相關。 由於菜單按鈕的寬度（以百分比表示）等於頁面上可滾動部分的高度，因此當用戶到達按鈕的相應部分時，滾動進度條將精確填充每個按鈕。 如果這還不夠，我們還將使每個按鈕成為指向相應部分的錨鏈接，以獲得額外的 UX 獎勵！

這種設計非常適合引導用戶瀏覽描述流程步驟的登錄頁面。 嗯，你會看到的。

讓我們開始吧！

搶先看

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

免費下載佈局

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

下載文件

免費下載

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

下載

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

https://youtu.be/Kf-ciVKEZFI

訂閱我們的 YouTube 頻道

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

單擊導入按鈕。

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

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

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

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

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

第 1 部分：創建全屏部分頁面佈局

頂部部分

首先，向該部分添加一列行。

在添加模塊之前，按如下方式更新行設置：

• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部

在行內，添加一個文本模塊。

然後打開文本模塊的設置並粘貼以下 HTML 以創建彩色標題：

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

在設計選項卡下，將文本對齊更新為居中。

更新以下 H2 標題樣式：

• 標題 2 字體：Roboto
• 標題 2 文字大小：6vw

打開部分設置並將高度更新為 100vh（或視口/窗口高度的 100%）。 這將確保該部分是全屏的。 然後取出padding如下：

• 高度：100vh
• 填充：0px 頂部，0px 底部

為了確保該部分內的行/內容在該部分內保持垂直居中，請將以下自定義 CSS 添加到該部分的主要元素：

display:flex;
flex-direction:column;
justify-content:center;

第一步部分

佈局的下一部分將是四個步驟中的第一個。 這也是我們的第一個菜單錨鏈接將滾動到的第一部分。

要創建第一步部分，請複制我們剛剛創建的頂部部分。

然後打開復制部分的設置並更新背景顏色：

• 背景顏色：#222222

接下來，打開文本設置並將正文文本替換為以下內容：

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

將文本對齊方式更改為左對齊。

然後更新以下內容：

• 標題 2 文本顏色：#00a4e0
• 最大寬度：40vh（桌面），80vh（平板電腦）
• 模塊對齊：居中

這將處理第一步部分。

第二步部分

要創建第二步部分，請複制我們剛剛創建的第一步部分。

打開部分設置並在背景顏色之上添加背景漸變，如下所示：

• 左漸變背景顏色：rgba(255,255,255,0.85)
• 右漸變背景顏色：rgba(255,255,255,0.85)

然後更新標題顏色：

• 標題 2 文本顏色：#ee4266

此部分的背景和標題顏色將與我們稍後創建的菜單中與此部分相關的按鈕的顏色相匹配。

第三步部分

要創建第三步部分，複製第二步部分並將其拖到頁面底部。

然後更改文本模塊的標題顏色。

• 標題 2 文本顏色：#26c485

第四步

我們的最後一步是第四步。 要創建此部分，請複制第二步部分並將其拖到頁面底部。

然後更新該部分中文本模塊的標題。

• 標題 2 文本顏色：#2a1e5c

結果

這是到目前為止我們佈局的結果。

第 2 部分：創建滾動進度條和菜單

下一部分是我們最終使用菜單按鈕創建滾動進度條的地方。 這個想法是在頁面頂部添加一個固定部分。 然後在該部分內，我們將創建一個包含分隔模塊的行，該模塊將用作我們的進度條指示器。 在帶有進度條的行的頂部，我們將添加另一行將包含我們的按鈕。 每個按鈕都有一個透明（或半透明）背景，以便在用戶向下滾動頁面時顯示其後面的進度條。

首先，讓我們在頁面頂部創建固定部分。 繼續創建一個新的常規部分並將其拖到頁面佈局的頂部。

打開section設置，取出padding如下：

• 填充：0px 頂部，0px 底部

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

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

這將確保該部分固定在瀏覽器窗口的頂部，以實現簡單的錨鏈接功能。 它還將確保該部分脫離文檔/html 的正常流程，並且不會增加整個文檔的高度。 這將使我們在用戶滾動時到達頁面上的每個部分/步驟時準確地使滾動條到達每個按鈕的末尾。

在該部分內，添加一列行。

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

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部
• 位置：絕對

打開列設置並將以下自定義 CSS 添加到主元素：

height: 100%;
display:flex;
align-items:center;

這將確保列與截面具有相同的高度。 它還允許模塊具有 100% 的高度。 這將是確保進度條填滿該部分的關鍵。

要創建進度條，請向列添加分隔模塊。

然後按如下方式更新分隔線設置：

• 顯示分隔線：否
• 背景顏色：#222222

• 寬度：100%
• 高度：100%

注意：我們在此處為進度條提供 100% 的寬度，以便您可以在設計中看到它。 我們將使用 JQuery 增加和減少分隔線/進度條的寬度。

在高級選項卡下，添加一個 CSS ID 並為其指定絕對位置。

• CSS ID：滾動條
• 位置：絕對

添加百分比文本指示器

接下來，我們將添加一個位置來顯示用戶向下滾動頁面時滾動位置的百分比。 這將與進度條的寬度相關。

在分隔線下，添加一個文本模塊。

然後將以下 HTML 粘貼到正文中：

<p><span></span></p>

我們的 JQuery 會將百分比文本寫入此 HTML（在 span 標記之間）。 你現在什麼都看不到了。

儘管百分比文本尚不可見，但我們仍然需要添加以下樣式以期待它的顯示。

• 文字字體：Roboto
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字文字大小：16px
• 填充：頂部 0.8em，底部 0.8，左側 15px

在高級選項卡下，給它一個自定義 CSS 類並在手機和平板電腦上禁用它。

• CSS 類：et-progress-label
• 禁用：手機、平板電腦

雖然我們還沒有完成，但這是添加顯示滾動進度條和百分比所需的自定義代碼的好地方。

要添加代碼，請在文本模塊下方添加代碼模塊。

然後將以下代碼粘貼到代碼框中，確保使用所需的腳本標籤包裝它：

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

這會處理進度條和百分比文本。 讓我們繼續導航菜單。

使用錨鏈接構建菜單按鈕

現在我們已準備好構建導航菜單，其中將包含四個跨越瀏覽器整個寬度的按鈕。 我認為當用戶到達它鏈接到的相應部分時，讓滾動條填充每個按鈕會很酷。 這是想法。 每個按鈕的寬度為瀏覽器總寬度的 25%。 由於我們的四個部分都具有相同的高度 (100vh)，因此四個部分中的每一個都代表頁面佈局總可滾動區域的 25%。 這將確保進度條準確地到達每個按鈕的末尾，因為相應的部分填充了視口。 你抓到了嗎？ 如果沒有，希望以後能更有意義。

行和列

要創建菜單按鈕，首先，我們需要在包含進度條/分隔線的行下方創建一個四列行。

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

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

為了確保列在移動設備上堆疊，我們需要將以下自定義 CSS 添加到主元素：

display:flex;
flex-wrap:nowrap;

第一步按鈕

要創建第一個按鈕，請在最左側的列中添加一個按鈕模塊。

更新按鈕文本和鏈接 URL，如下所示：

• 按鈕文本：第 1 步
• 按鈕鏈接網址：#one
  （這個錨鏈接會跳轉到我們稍後添加的對應 CSS ID 的部分）

接下來，更新按鈕樣式如下：

• 按鈕對齊：居中
• 按鈕文字大小：20px（桌面），14px（平板）
• 按鈕背景顏色：透明
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：0.2em
• 按鈕字體：Roboto
• 按鈕字體樣式：TT
• 填充：0.8em 頂部，0.8em 底部，0 左，0 右

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

display:block !important;
width: 100%;

步驟 2 按鈕

要為第二步創建按鈕，請複制第一列中的按鈕並將其拖到第二列中。

然後更新以下內容：

• 按鈕文字顏色：#ee4266
• 按鈕背景顏色：rgba(255,255,255,0.85)

半透明的背景色會與黑色的進度條顏色（在它後面）相結合，以匹配相應的步驟二部分背景。

然後使用以下內容更新按鈕鏈接 URL：

• 按鈕鏈接網址：#two

步驟 3 按鈕

要創建第 3 步按鈕，請複制第 1 步按鈕（它具有相同的 bg 顏色），並將其拖到第 3 列中。

然後更新按鈕文本顏色：

• 按鈕文字顏色：#26c485

然後使用以下內容更新按鈕鏈接 URL：

• 按鈕鏈接網址：#three

步驟 4 按鈕

要創建第 3 步按鈕，請複制第 2 步按鈕（它具有相同的 bg 顏色），並將其拖到第 4 列中。

然後更新按鈕文本顏色：

• 按鈕文字顏色：#2a1e5c

然後使用以下內容更新按鈕鏈接 URL：

• 按鈕鏈接網址：#four

為錨鏈接添加相應的部分 CSS ID

一旦按鈕完成並且它們都有自己的錨鏈接 URL，我們可以將相應的部分 CSS ID 添加到我們希望每個按鈕跳轉到頁面上的每個部分。

第一步 部分 CSS ID

打開第一步部分的設置並添加以下 CSS ID：

• CSS ID：1

第二步 部分 CSS ID

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

• CSS ID：兩個

第三步 部分 CSS ID

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

• CSS ID：三個

第四步 部分 CSS ID

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

• CSS ID：四

最後結果

最後的想法

這個進度條菜單絕對是一種獨特的設計，具有適用於各種應用程序的潛力。 希望它可以幫助您完成下一個項目。 而且，您可以隨意探索 Divi builder 中可用的無數設計變體，以創建您自己的進度條菜單。

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

乾杯!