如何在一頁 Divi 網站的滾動上創建活動鏈接

在今天的教程中，我們將向您展示如何設置垂直導航鏈接的樣式，以便當訪問者向下滾動頁面時，與他們所在部分對應的菜單鏈接將突出顯示。 這是一個不錯的小效果，可以在您的網頁設計和用戶行為之間增加一點交互性。 如果您要創建單頁網站，則此方法特別有效。

對於那些很難在腦海中想像這種效果的人，我們在下面提供了一個預覽。

結果

讓我們來看看在遵循這篇文章後您將能夠實現的最終結果：

如您所見，突出顯示的活動鏈接會隨著用戶滾動頁面部分（以及單擊）而自動更改。

靈感

我們在柏林電影學院網站上找到了這篇文章的靈感，我們在我們關於垂直導航的文章中提到了這個網站。 該帖子評論中的一位讀者要求我們向他們展示如何創建滾動活動鏈接效果，所以我們來了！

如何在一頁 Divi 網站的滾動上創建活動鏈接

訂閱我們的 YouTube 頻道

入門：下載頁面滾動到 ID 插件

為了實現這一設計，我們將首先使用免費且評價良好的 Page Scroll to ID 插件，您可以在此處找到該插件。 單擊“下載”按鈕並將插件 ZIP 文件保存在您可以立即找到的位置。

上傳並激活頁面滾動到 ID 插件

您需要做的下一件事是轉到您的WordPress 儀表板 > 插件 > 添加新 > 選擇您剛剛下載並上傳的 ZIP 文件。

之後，也不要忘記激活插件。

啟用垂直導航

在我們進入 Page Scroll to ID 插件的設置之前，我們將首先啟用垂直導航（以及下一步中的固定導航）。 如果您在 WordPress 儀表板上，請轉到外觀 > 自定義 > 標題和導航 > 標題格式 > 並啟用垂直導航。

啟用固定導航

繼續，讓我們啟用您網站的固定導航。 這是必要的，因為在滾動上使用活動鏈接的全部目的是讓訪問者看到他們在哪個部分，什麼時候在裡面。 如果您在 WordPress 儀表板上，請轉到Divi > 主題選項 > 並在常規選項卡中啟用固定導航欄。

頁面滾動到 ID 插件設置

對於這一部分，我們將回到最近上傳的插件。 激活插件後，您需要使用正確的設置。 要轉到設置，請單擊插件名稱正下方的“設置”。

完成此操作後，您會注意到不同的選項，這些選項可幫助您確定活動鏈接在您網站上的表現。 對於我們製作的示例，我們使用以下設置：

• 在 WordPress 菜單鏈接上啟用：是
• 滾動持續時間：200 毫秒
• 自動調整滾動持續時間：是
• 滾動動畫緩動：線性
• 到達頁面/文檔末尾時始終平滑滾動：是
• 在鼠標滾輪或觸摸滑動上停止頁面滾動：是
• 頁面佈局：自動
• 一次只允許一個突出顯示的元素：是
• 保持當前元素突出顯示，直到下一個進入視野：是
• 按下一個目標突出顯示：是
• 將點擊鏈接的哈希值附加到瀏覽器的 URL/地址欄：是
• 從/到不同頁面滾動：是
• 頁面加載時滾動到目標的延遲為 0 毫秒
• 防止其他腳本處理插件的鏈接（如果可能）：是
• 標準化錨點目標：是

將 CSS ID 和類添加到部分

您需要做的下一件事是將不同的 CSS ID 和 ID CSS 類上的頁面滾動分配給您的單頁機上的不同部分。 為此，請打開每個部分的設置並轉到“高級”選項卡。 在“高級”選項卡中，決定要用於您的部分的不同 CSS ID。 要知道，為了讓它工作，您必須為一頁紙上的每個部分分配一個不同的 CSS ID。

在這個例子中，我們使用“home”作為我們的第一個 CSS ID。 但是，每個部分的 CSS 類都是相同的，它可以幫助您將該部分鏈接到 Page Scroll to ID 插件。 CSS 類名稱是“ps2id”。

將 ID 添加到菜單項

接下來，是時候創建菜單項並確保它們與各部分和 Page Scroll to ID 插件一致。 如果您在 WordPress 儀表板上，請轉到外觀 > 菜單。 如果您已經有一個主菜單，則可以處理該菜單。 如果沒有，您可以輸入標題並創建一個新菜單。 不要忘記將其設為主菜單。

使用自定義鏈接

接下來，您將需要自定義鏈接來實現您想要的結果。 首先添加第一個自定義鏈接。 將您的網站後跟第一個部分 ID 添加到鏈接字段，如下面的屏幕截圖所示。

啟用 CSS 類

您需要做的下一件事是激活菜單項的 CSS 類（如果您過去還沒有這樣做過）。 為此，請單擊右上角的“屏幕選項”選項。 一旦可能性出現，啟用 CSS 類。

使用頁面滾動到 ID CSS 類

為菜單項啟用 CSS 類後，您可以繼續手動將 Page Scroll to ID 類鏈接到每個菜單項。 CSS 類與我們用來為我們的部分分配 ID 的類相同，即“ps2id”。

進行外觀修改

即使使用此方法，您也可以對主菜單進行各種修改。 為了向您展示如何進行更改，我們將重新創建示例垂直導航。

注意：正如這篇文章的介紹中提到的， 在預覽頁面時，您將無法看到所做的更改。 您必須先發布頁面並以實時方式查看它才能注意到結果。

主題定制器

首先轉到主題定制器 > 標題和導航 > 主菜單，並對主菜單的外觀進行以下更改：

• 隱藏徽標圖像：是
• 標誌最大高度：83
• 菜單頂部邊距：0
• 文字大小：14
• 字母間距：-1
• 字體: Lato Light
• 字體樣式：大寫
• 文字顏色：#FFFFFF
• 活動鏈接顏色：#FFFFFF
• 背景顏色：rgba(255,255,255,0)
• 下拉菜單背景顏色：rgba(255,255,255,0)

自定義 CSS 主題選項

要更改活動鏈接樣式，我們必須添加一些自定義 CSS 代碼。 如果您在 WordPress 儀表板上，請轉到Divi > 主題選項 > 向下滾動“常規”選項卡，然後將以下 CSS 代碼行粘貼到“自定義 CSS”框中：

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

除此之外，我們還使用了重疊的透明菜單，我們在這篇文章中對其進行了更詳細的處理。 要將這些 CSS 更改也應用於您的網站，請將以下 CSS 代碼行複制並粘貼到自定義 CSS 框中：

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

結果

按照本文中的所有步驟進行操作後，您應該能夠獲得以下最終結果：

當然，您可以根據自己的喜好修改樣式（或者也可以將其用於頂部導航）。

最後的想法

在本教程中，我們向您展示瞭如何為單頁瀏覽器創建交互式垂直導航菜單。 我們已經向您展示瞭如何將 Page Scroll to ID 插件與 Divi 主題結合使用來輕鬆實現您想要的結果。 在以後的文章中，我們將回到這一點，並向您展示如何通過此方法創造性地設置您正在使用的活動鏈接的樣式。 如果您有任何問題或建議，請務必在下方評論區留言！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

精選圖片來自 Yurlick / shutterstock.com