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