如何使用 Divi 構建帶有平滑滾動錨鏈接的響應式固定側邊欄

側邊欄並不像以前那樣受歡迎。 在許多情況下，他們最終會分散注意力而不是提供幫助。 但有時側邊欄很有意義，尤其是在處理冗長的內容時。 這就是為什麼我著手創建一個很有意義的側邊欄。

今天我將向您展示如何使用 Divi Builder 創建具有平滑滾動錨鏈接（或跳轉鏈接）的響應式固定（或粘性）側邊欄。 因為側邊欄保持可見並且錨鏈接平滑地滾動到頁面上的不同部分，所以側邊欄與內容保持結合，使其成為有用的 UX 功能。 就像文檔大綱一樣，這種組合使您的網頁內容更易於訪問和閱讀。 對於那些長滾動頁面來說，這是一個令人耳目一新的解決方案。

一探究竟！

搶先看

這是我們將共同構建的內容的先見之明。

這個概念

對於那些和我一樣經常使用 Google Docs 的人，您都知道這個有用的文檔大綱工具，它允許您輕鬆部署帶有可點擊大綱的固定側邊欄，可跳轉到文檔上的不同標題。 我喜歡它，因為它可以幫助我更快地找到信息。 我認為將相同的功能引入您的網站會很酷。

你需要什麼開始

對於本教程，您真正需要的只是 Divi！ 我們還將使用食品食譜佈局包中的食譜頁面，該頁面可從 Divi Builder 免費訪問。

將佈局添加到您的頁面

訂閱我們的 YouTube 頻道

首先，繼續創建一個新頁面並部署 Divi Builder。 選擇“選擇預製佈局”選項。 從 Load From Library 彈出窗口中，選擇 Food Recipes Layout Pack，然後單擊以使用 Recipes Page。

佈局加載後，單擊以在前端構建。

創建新部分

從前端 Divi Builder，創建一個新部分並將其拖到佈局的最頂部。

複製佈局標題部分中的按鈕並將其粘貼到您創建的新部分的一列行中。

打開按鈕設置並將以下自定義 CSS 添加到高級選項卡下的主元素：

display: block !important;

這只是允許按鈕跨越列的整個寬度。

將按鈕文本更改為“介紹”。 然後為按鈕鏈接 url 添加以下內容：

＃介紹

這就是您創建錨鏈接的方式。 主題標籤 (#) 告訴瀏覽器您將鏈接到 CSS ID。 以下文本“介紹”將對應於我們將添加到佈局中的一個部分的 CSS ID 的名稱。 CSS ID 的名稱可以是您想要的任何名稱。 只需確保它與您稍後為該部分提供的 CSS ID 匹配即可。

複製按鈕，然後重複給按鈕一個新的按鈕文本和一個新的按鈕鏈接 URL 的過程。 由於這將是跳轉到頁面不同部分的錨鏈接，因此請確保 CSS ID（“#”之後的文本）是唯一的，並且與您稍後將為您的部分提供的名稱相對應。

對於此按鈕，將按鈕文本更改為“Ingredients”，將按鈕鏈接 URL 更改為“#ingredients”。

再次復制按鈕，然後為新按鈕指定按鈕文本“Nutrition”，並將按鈕鏈接 URL 更改為“#nutrition”。

再复制一次按鈕，然後為新按鈕指定按鈕文本“Instructions”，並將按鈕鏈接 URL 更改為“#instructions”。

這就是我們現在需要做的所有事情。 我們將回到本節將其轉換為固定的側邊欄。

將 CSS ID 添加到部分和行

現在我們已經創建了所有帶有錨鏈接的按鈕，我們準備將相應的 CSS ID 名稱添加到我們的部分和行中。

錨鏈接將自動跳轉到頁面上具有相應 CSS ID 的任何元素。 CSS ID 可應用於內嵌文本、模塊、行或部分。 如果你想使用 HTML 向標題添加 CSS ID，它看起來像這樣：

<h2 id="introduction">Introduction</h2>

但是，由於我們要跳轉到頁面的某個部分，我們可以將 CSS ID 添加到頁面的特定部分。 這將為用戶提供足夠舒適的查看空間，以便訪問者可以輕鬆識別他們在頁面上的位置。 跳轉到內嵌文本或模塊可能會使訪問者感到困惑。

正如我們之前介紹的，我們創建的每個按鈕 url 都對應於它們需要跳轉到的部分的 CSS ID。

對於“介紹”按鈕，我們需要將 CSS ID 添加到包含介紹內容的頁面部分。 為此，請打開頁面第三部分（標題正下方的部分）的部分設置，並在高級選項卡下添加以下 CSS ID：

CSS ID：介紹

這將對應於我們之前創建的介紹錨鏈接按鈕。

現在在同一部分中，找到包含標題“成分”的行。 然後打開行設置並添加以下 CSS ID：

CSS ID：成分

這將對應於我們之前創建的成分錨鏈接按鈕。

向下滾動到標題為“營養”的下一部分，然後打開部分設置。 然後添加以下 CSS ID：

CSS ID：營養

這將對應於我們之前創建的營養錨鏈接按鈕。

最後，向下滾動到標題為“逐步說明”的佈局的下一部分。 然後打開部分設置並在高級選項卡下添加以下 CSS ID：

CSS ID：說明

這將對應於我們之前創建的說明錨鏈接按鈕。

保存更改。

現在是查看您的錨鏈接是否有效的好時機。 在新選項卡中打開頁面，然後單擊頂部的按鈕以確保它們跳轉/滾動到頁面上的相應位置。

如果它們不起作用，請確保返回並檢查 CSS ID 是否正確以及它們是否匹配。

創建固定側邊欄佈局

將左邊距添加到部分以為側邊欄創建空間

在頁面頂部有錨鏈接對於目錄之類的東西是很好的。 但是對於這個用例，我們希望用戶始終可以看到這些錨鏈接，這樣用戶在單擊其中一個鏈接後就不必滾動回頁面頂部。 固定側邊欄將解決這個問題，因為當用戶單擊錨鏈接時，它會固定在頁面的一側。

但是在定位側邊欄之前，我們需要在頁面左側為其創建一些空間。 為此，我們將為佈局的每個部分添加一個左邊距。

我們添加到每個部分的左邊距量將等於側邊欄的寬度，所以現在是時候決定側邊欄的寬度了。 對於此示例，寬度為 20% 即可。

打開第二部分的設置（我們的錨鏈接按鈕正下方的部分）並添加以下自定義邊距：

自定義保證金：剩餘 20%

現在在保存設置之前，右鍵單擊自定義邊距選項，然後單擊“複製自定義邊距”並保存設置。

在整個頁面佈局的每個剩餘部分上，通過右鍵單擊該部分並單擊“粘貼自定義邊距”將自定義邊距粘貼到該部分。

這將為您的所有部分提供 20% 的左邊距，除了包含錨鏈接按鈕的最頂部部分。

創建固定側邊欄

要創建側邊欄，我們需要在頁面左側為其提供一個固定位置。 所以基本上，我們將把頂部變成一個固定的側邊欄。 為此，請打開頂部部分的設置並更新以下內容：

在設計選項卡下，更新高度和寬度...

寬度：20%
高度：100%

在高級選項卡下，更新位置...

位置：固定
垂直偏移：80px

這為該部分提供了一個固定位置，寬度為頁面的 20%。 它還將該部分定位在頁面左側和頁面頂部 80 像素處，以適應標題導航的高度。 100% 高度確保該部分跨越頁面的整個高度。

現在在另一個瀏覽器選項卡中查看頁面以查看功能。 當您向下滾動頁面時，側邊欄保持固定，您可以單擊錨鏈接按鈕輕鬆導航到不同的部分。

修復頁腳重疊

您可能已經註意到該部分與頁面底部的底部頁腳欄重疊。

有幾種方法可以解決這個問題。 例如，我可以從該部分中取出“height: 100%”，或者您可以在頁面設置中添加一些 CSS 以調整頁腳欄的寬度。 但是如果您想將部分高度保持在 100%，一個簡單的解決方法是去掉部分背景顏色。 打開我們用於側邊欄的部分的部分設置並添加以下背景顏色：

背景顏色：rgba(255,255,255,0)

如果要更改側邊欄的顏色，可以打開頁面設置並更改內容區域背景顏色。

由於部分背景顏色是透明的，因此頁面的內容區域背景顏色會發光。 由於我們所有的其他部分都有背景顏色，它只會通過側邊欄部分顯示，而不會與底部頁腳欄重疊。

針對移動設備進行調整

這種設計對於智能手機來說真的沒有意義，因為側邊欄沒有空間，而且頁面頂部的鏈接需要用戶每次想要點擊錨鏈接時向上滾動。 但是該設計仍然適用於平板電腦，但您可能需要為這些錨鏈接創造更多空間。 為此，請打開部分側邊欄行的行設置並更新以下內容：

自定義寬度：100
自定義填充（桌面）：左 10%，右 10%
自定義填充（平板電腦）：左 0%，右 0%

現在我們要做的就是隱藏（或禁用）智能手機上的部分。 為此，請打開部分設置並轉到高級選項卡，然後單擊複選框以在智能手機上禁用。

就是這樣。 您現在有一個響應式固定側邊欄菜單，帶有平滑滾動的錨鏈接！

最終結果

現在讓我們檢查最終結果。

這是佈局在平板電腦上的樣子。

了解有關固定元素和錨鏈接的更多信息

如果您發現本教程有幫助，請查看下面的一些相關教程：

• 使用錨鏈接可以在 Divi 中做的 5 件很酷的事情
• 如何使任何 Divi 頁面元素具有粘性
• 如何在 WordPress 的側邊欄中添加固定小部件
• 如何讓你的 Divi 導航從底部開始，然後在滾動時固定在頂部
• 如何修復你的 Divi 頁腳
• 如何在 Divi 中創建浮動彈出菜單

最後的想法

此設置的美妙之處在於您可以輕鬆地將固定側邊欄添加到具有不同錨鏈接（或任何您想要的任何內容）的任何頁面。 由於您的側邊欄基本上是一個 Divi 部分，您可以使用內置設置對其進行自定義，添加更多行並使用您想要的任何模塊組合。

這種設置非常適合會員課程、教程、常見問題解答、作品集或長篇博客文章。 您甚至可以將它用於一頁網站。 你還有其他用途要分享嗎？ 我很想听聽他們在評論中的內容。

乾杯!