側邊欄（Sidebar）在不同類型的網站中扮演不同的角色。透過合理設計側邊欄，不僅能提升使用者體驗，還能有效支持網站的業務目標。說的很抽象，那我們就說具體落地。比如在部落格網站中，我們可以展示：
- 熱門文章、最新動態、分類目錄、社媒連結、標籤雲等
- 日曆、訂閱表單等，豐富網站的功能性，滿足不同使用者的需求
例如在B2C站點中，我們可以在側邊欄放置：
- 明確的產品分類，來幫助使用者快速瀏覽和尋找所需商品
- 展示當前的促銷訊息，刺激用戶購買慾望
- 支援關鍵字、過濾條件的搜尋框，幫助使用者快速定位產品
在B2B站點中，我們最注重的就是專業和客戶信任，那麼在側邊欄上，我們可以：
- 展示公司提供的服務或解決方案，突顯專業與產業經驗
- 展示與知名客戶合作的案例，證明公司的實力和可靠性
- 提供與業界相關的新聞、白皮書、研究報告等資源，展現專業知識
這篇指南將會介紹如何使用Elementor來打造你網站的側邊欄，如果你不打算使用Elementor，可以看這篇文章用WordPress自帶的功能實現側邊欄。
在開始之前，你需要
- 登入WP後台安裝Elementor外掛程式。
- 如果我們想要設定全域側邊欄，那麼還需要額外安裝Elementor Pro專業版（除非你只需要在單一頁面設定自訂側邊欄）
- 基本了解Elementor容器的概念、會設定容器的寬度佔比。
1. 打開Elementor主題建構器
點擊Templates –> Theme Builder。
進入主題建構器頁面，點選Add New
根據實際情況來選擇需要在哪些頁面添加側邊欄，如果你安裝了WooCommerce的話，那麼這裡會多出兩個選項：
- Single Product，單一產品，如果你需要為特定一類產品添加側邊欄，那麼可以選擇這個。
- Product Archive，產品分類頁，如果你需要為特定分類的產品添加側邊欄，那麼就選擇這個。
如果是為文章頁面新增側邊欄（全局，即為符合條件的每一篇文章），那麼我們這邊就選擇Single Post。
我們以Single Post作為演示，在其他頁面添加側邊欄操作是一樣的，差異只是往側邊欄添加的內容不一樣。
2. 使用Elementor製作側邊欄
2.1 使用預設範本製作側邊欄
如果你之前有將自己的網站與Elementor帳號綁定，那麼選取某個類別之後,我們就會被帶到下方這個選擇模板的頁面（如果你的網站沒有綁定Elementor帳號，那麼此時會跳出讓你將網站與Elementor帳號綁定的精靈）。
我們從模板庫中找到自己符合自己美感的模板，點選「Insert」插入。
如果不需要Elementor Pro自帶的模板，那麼我們點擊右上角即可關閉，我們直接透過拖曳組件的方式來創建Sidebar。
我們這邊選擇直接套用模板，然後在模板的基礎上進行修改，能夠大幅縮減搭建網站所需的時間。
插入Single Post的模板後，我們可以看到，右側的這一部分就是我們的側邊欄。
你可以這麼理解，在一個大的容器裡，左側小容器是文章的主體內容，右邊的小容器就是側邊欄。
我們可以透過容器的佔比來設定側邊欄所佔據的寬度。選取側邊欄容器，調整側邊欄的寬度，我在這裡設定為35%。
如果你還不熟悉Elementor的容器，這裡和下面2.2的內容你理解起來可能會有點難度。這篇文章有詳細介紹了容器的設定和使用，推薦先看。
2.2 從頭開始使用Elementor建立側邊欄
如果我們不喜歡Elementor給我們的模板的樣式，那麼可以自行DIY。
1、我們點擊“+”號，新增容器。
2、選擇容器的佈局方式。我們選擇Flexbox。
3、選擇佈局結構。是兩列佈局還是三列佈局或任意佈局。自己選擇即可，因為是側邊欄，我們這邊用兩列佈局作示範。
4.調整小容器。選擇完佈局結構以後，Elementor生成了三個容器，一個大容器，大容器裡面有左右兩個小容器。滑鼠移動至右側小容器，點選左上方的設置，調出容器的設定選項，調整寬度。
我們在這裡調整小容器（小容器其實就是側邊欄）的寬度為35%。
5.設定大容器的排列方式。點選大容器設置，選擇居中排列。
6、填充左側容器元素。設定大容器的排列方式後，點選左上角「+」號， 可以讓我們選擇需要填入頁面的元素。因為我們現在編輯的是Posts的模板，所以要將標題（Post Title）和內容（Post Content）放置到左側容器中（你也可以放置在右側容器，那麼左側容器就放側邊欄）。不然的話，你將模板發布並應用至全部文章後，你會發現你的所有Post都沒有標題和內容。
7.填充側邊欄位置元素。填入Post的內容後，右側容器現在其實就是我們的側邊欄，我們可以根據自己的需求將左側元素拖曳到右側容器中。
我在這裡選擇放置Call to Action元件至側邊欄，這裡已經初步完成了側邊欄的元素填充。
8.繼續調整右側側邊欄容器。打開右側側邊欄容器的選項，再次對容器進行你想要的細微調整。調整寬度、排列方式或磁吸效果（Advanced –> Motion Effects處設定）等。
9. 設定右側容器的條件邏輯顯示。設定側邊欄在什麼情況下顯示，什麼時候隱藏。
可以根據文章的分類，作者，標題等條件來進行單獨或組合條件設定。
3. 設定黏性側邊欄（可選）
黏性側邊欄就是當我們往下捲動頁面的時候，側邊欄會一直吸附在某個固定的位置。
這種設計特性可以提高使用者體驗，確保重要的導航元素、功能或資訊始終在使用者可見範圍內。
黏性側邊欄不宜放過多的內容，否則會導致頁面顯得擁擠。
設定黏性側邊欄很簡單，只需要我們在側邊欄容器中設定Sticky屬性即可。
點擊側邊欄容器，切換到Advanced選項卡，打開Motion Effects，設定Sticky為Top/Bottom，簡單幾步即可設定黏性側邊欄。
Offset就是設定黏性側邊欄距離頂部/底部的距離，酌情設定。
這裡面還有幾個比較常用的選項：
- Sticky On：設置在什麼設備中讓該側邊欄（容器）保持粘性設置，我一般只會在桌面或其他大屏幕設備中設置粘性側邊欄。
- Stay in Column：這個屬性是為了讓側邊欄的黏性效果可以被限制在所在列內展示。當頁面捲動超出這一列的範圍（高度）時，黏性效果會自動消失。這個建議勾選上。
Stay in Column如果沒勾選會出現什麼效果呢？
就是我們往下拖曳到Footer的時候，會發現黏性側邊欄從上方的容器中直接戳下來。
設定黏性側邊欄為Stay in Column即可避免這種情況。
4. 設定展示條件，發布
當我們將側邊欄的模板樣式設定好後，我們點擊Elementor頂部欄的右上角的下箭頭
點選Display Conditions來設定我們的展示條件，就是設定在什麼頁面中展示我們的側邊欄。這個是根據我們的實際需求來。我在這裡選擇All Post，即在所有的文章頁面展示該側邊欄。
設定好展示條件以後，點選Publish即可在所有文章頁面中使用該側邊欄。
（注意，這個是Single Post模板的展示條件，2.2裡面的第9步是右側容器的展示條件，可以組合使用。）