如何在 Elementor 中建立垂直的 Sticky Sidebar 來實現無縫的頁面導航 - OpenByt

垂直黏性側邊欄是一種實用的設計元素，它位於頁面的側邊，當使用者向下捲動時，它仍會在視窗內可見。這種固定位置的側邊欄可以快速存取特定的頁面區段，是引導訪客瀏覽內容的有效工具。對於有大量資訊的網站，例如服務頁面、作品集或部落格文章，黏貼式側邊欄可提供方便的導覽工具，改善使用者體驗，讓使用者不需大幅捲動就能輕鬆跳到想要的部分。

本教學將引導您在 Elementor 中使用導覽項目、錨點連結和自訂樣式來建立垂直黏性側邊欄，以符合您網站的美感。

準備工作

開始之前，請確保以下事項：

Elementor Pro 已安裝並啟用:黏貼效果需要使用 Elementor Pro。
頁面設定:您可以選擇要新增垂直黏貼側邊欄的新頁面或現有頁面。
熟悉 Elementor 容器:我們建議與 Flexbox 容器模式，可更靈活地控制本教程。

步驟 1：建立單一頁面範本

我們首先要建立一個單一頁面範本，並將其設定為容納垂直黏貼側邊欄的容器。

導覽至範本

在 WordPress 面板中，移至 Elementor > 模版 > 新增.

選擇範本類型

在彈出視窗中，選擇單頁作為範本類型，並為其命名，如「商業服務頁面範本」。

選擇頁面類型

在範本庫的頂端，選擇頁數標籤。

瀏覽可用的範本，尋找合適的樣式。您可以使用搜尋列尋找特定用途的範本，例如「服務」或「公司」。如果您要為特定類型的頁面建立此側邊欄，您也可以在顯示設定中設定條件，將其顯示限制在特定頁面。

您可以選擇是否插入現有的範本，如果您需要為其中一個頁面加入側黏性導覽，您可以直接編輯該頁面。

步驟 2：在 Elementor 中建立容器

此容器將作為垂直黏貼側邊欄的基礎。

新增容器

在頁面編輯器中，按一下 新增容器 並將其拖曳到您的設計區域。此容器將作為黏貼側邊欄的主要結構。

設定容器方向

選取容器，然後在左側的設定面板中將其方向設定為垂直。垂直方向允許側邊列項目由上到下堆疊，這對於建立垂直側邊列佈局非常重要。

定義容器寬度

在風格選項卡，調整寬度以符合側邊欄的需求，例如 200px 或更小，視您的設計偏好而定。確保它在頁面上佔用最小的空間，有助於維持主要內容的焦點。

步驟 3：建立垂直黏貼側邊欄

插入標題和導覽項目

新增一個標題容器內的 widget，標題如 "Quick Navigation「或」Contents"。

新增清單項目

插入一個 圖示清單 或按鈕 widget 下方的標題來建立導覽項目。在此，我們將使用圖示清單以簡化外觀，讓側邊列中每個項目之間都有空隙。

新增導覽連結

為您的側邊欄導覽，添加項目如：

關於我們:這將連結至公司概覽。
我們的服務:指向服務區。
客戶感言:引導至客戶回饋區域。
聯絡我們:連結至聯絡表單或資訊部分。

根據需要自訂名稱和圖示，以反映您的頁面佈局。刪除圖示或前往圖示庫選取圖示。

設定錨點連結

透過在頁面上設定錨點，為每個導覽項目加入錨點連結。例如，對於「關於我們」部分，我們會使用 1TP5 關於我們，其他部分也有類似的錨點。

為「關於我們」新增錨點

在 Elementor 中，找到 選單錨點 小工具。將它拖曳到「關於我們」部分標題的上方或任何適當的位置。在設定中為錨點命名（例如，about-us），以方便日後連結。

將錨點連結到導覽

回到「關於我們」的圖示清單項目，並透過設定 URL 為 #about-us 來連結。使用者點選此導覽項目將立即跳至該區段。

對其餘的功能表項目重複此過程。

定義側邊欄寬度

若要維持一致的版面設計，請將圖示清單容器和主容器的寬度都設定為固定值，例如 200px。

自訂側邊欄風格

您可以調整字型、顏色和間距。風格標籤，以配合您的網站風格。您也可以新增一個背景色、襯墊和陰影效果，讓側邊欄在視覺上與眾不同。

步驟 4：啟用黏貼效果

若要在使用者捲動時保持側邊欄固定，請遵循下列步驟：

為導覽列和內容區域設定 CSS ID

選取導覽列容器，並在「進階」標籤中加入 CSS ID；例如，將 ID 設為 側邊欄選單.

新增自訂 CSS 程式碼

在 Elementor 中開啟「自訂 CSS」（導航列容器的全域設定或自訂 CSS）。新增以下程式碼：

#sidebar-menu {
    position: fixed; /* 固定側邊欄的位置，使其在捲動時不會移動 */
    left: 0; /* 將側欄對齊至頁面左側 */
    top：0; /* 將側邊欄置於頁面頂部 */
    height: 100vh; /* 將側邊欄高度設定為完整視埠高度 */
    width: 200px; /*根據需要調整側邊欄的寬度 */
    z-index：10; /* 確保側欄保持在其他元素之上 */
    background-color: #e0f7fa; /* 設定側邊欄的背景顏色 */
    color: #FFF; /* 設定側邊欄內文字的顏色 */
    padding-top: 250px; /* 在側邊欄的頂部增加襯墊 */
    overflow-y: auto; /* 如果側邊欄內容太長，允許滾動 */
}

說明

位置：固定；
- 當使用者捲動時，側邊欄會保持在螢幕上的固定位置。無論頁面如何捲動，側邊欄在視窗中始終保持可見。
左：0；
- 將側邊欄對齊視窗的左邊，使其與頁面左側平齊。

top：0;
- 這會設定側邊欄從視埠頂端開始，使其與頁面頂端對齊。

高度：100vh；
- 設定側邊列的高度佔用整個視埠高度 (視埠高度的 100%)。這可確保側邊欄從螢幕頂部一直延伸到底部。

寬度：200px；
- 設定側邊欄的寬度為 200px。此值可根據設計需求調整。

z-index：10;
- 設定側邊列的堆疊順序。較高的 z-index 可確保側列出現在其他可能重疊的元素之上。

background-color: #e0f7fa；
- 這定義了側邊欄的背景顏色。這裡選擇了淡淡的粉藍色 (#e0f7fa)，讓人看起來平靜、乾淨。

顏色：#FFF；
- 將側列內的文字顏色設定為白色 (#FFF)。這樣可與柔和的藍色背景形成對比，提高可讀性。

padding-top: 250px；
- 在側邊列頂端加入襯墊。如果您希望側邊列的主要內容（如導覽連結）從更下方開始，並在頂部留出空間放置品牌或標誌，這將非常有用。

overflow-y: auto；
- 如果內容超出側邊欄的高度，它允許在側邊欄內垂直捲動。這可確保在不影響頁面整體版面的情況下，仍可存取內容。

垂直黏性側邊欄是一種設計元素，當使用者捲動網頁時，它會固定在網頁側邊，提供快速導覽到特定區段的功能。本教學引導您使用導覽項目、錨點連結和自訂樣式，在 Elementor 中建立黏貼式側邊欄，提供無縫的使用者體驗。安裝 Elementor Pro 後，您將建立單一頁面模板、設定側邊欄的容器、新增導覽項目並指定錨點連結。最後，透過新增自訂 CSS，側邊欄就能固定在視窗中，提升內容較多的頁面的可及性，例如服務或作品集部分。