這篇文章將完整轉寫並整理 Elementor 教學影片內容，從頁面設定、版面架構工具（段與容器），一路帶你認識 標題、圖片、按鈕、輪播、數據與見證等常用元件，讓你建立正確又實用的操作觀念。
教學影片｜Elementor 常用元件總覽
什麼是 Elementor？為什麼新手也能快速上手
Elementor 是一套拖拉式的網頁編輯器，讓你用最直觀的方式設計網站版面。
你不需要寫任何程式碼，只要拖曳元件、調整設定，就能完成頁面設計。
進入 Elementor 編輯介面後，在畫面左上方可以看到一個「齒輪」圖示，點擊後就是 頁面設定。
頁面設定：開始設計前一定要先確認的地方
在頁面設定中，你可以調整整個頁面的基本屬性，這些設定會影響「整頁」的呈現方式。
頁面標題設定
你可以在這裡設定頁面標題，例如將標題改為「關於我們」，這個標題會影響：
- 瀏覽器標籤顯示
- SEO 標題結構
- 部分主題的頁首顯示內容
頁面版型選擇
依照主題不同，你可以選擇：
- 全寬頁面
- 無頁首／頁尾頁面
- 預設版型
是否保留頁首與頁尾，取決於你的設計需求。
全頁背景設定
在頁面設定中，也可以直接設定整頁背景，例如純色或背景圖片，讓頁面整體風格更一致。
建議在開始製作內容之前，就先把這些整體設定完成。
Elementor 的兩種版面配置方式：段與容器
在 Elementor 中，有兩種主要的版面架構工具：
- 段（Section）
- 容器（Container）
這兩種工具都是用來建立頁面架構，但特性與使用方式完全不同。
段（Section）：傳統且固定的版面配置方式
在早期版本的 Elementor 中，「段」是最基本的版面配置單元。
你可以把段理解為一個「大框架」，裡面包含多個「欄位」，而每個欄位中再放入具體內容，例如標題、圖片或按鈕。
段的實際操作方式
當你在頁面中新增一個段時，可以選擇：
- 一欄
- 兩欄
- 三欄
- 更多固定欄位結構
點擊段的編輯圖示後，可以設定：
- 內容寬度
- 對齊方式
- 間距
接著在每個欄位中加入元件，例如標題、圖片與按鈕。
這種配置方式的特點是：
- 欄位結構明確
- 排版較固定
- 適合基礎、單層的頁面設計
容器（Container）：更彈性、效能更好的新世代架構
在 Elementor 3.6 版本之後，官方推出了全新的版面配置方式：容器（Container）。
容器是基於 CSS Flexbox 技術設計，提供更高的彈性與效能。
容器的特色與優點
與段不同，容器具有以下特性：
- 不再固定為幾欄結構
- 可無限巢狀（容器中再放容器）
- 可自由控制排列方向（水平或垂直）
- 可精細控制間距與對齊方式
例如，在一個容器中加入三個按鈕後，你可以透過調整容器的排版方向，讓按鈕水平排列或垂直排列。
段與容器的差異重點整理
- 段：適合簡單排版，結構較單一
- 容器：適合複雜設計，支援多層嵌套與彈性排列
非常重要的注意事項
根據 Elementor 官方文件，一旦在網站中啟用容器功能後，就無法再新增傳統的段與欄位。
因此在開始設計前，就必須先確認整個網站要使用哪一種架構方式，避免混用造成後續維護困難。
文字元件：標題與段落的設定方式
在網頁中，最常使用的文字元件就是「標題」與「內容編輯器」。
標題元件
從左側元件庫拖曳「標題」元件到畫布後，可以直接輸入標題內容，例如「我們的服務」。
在樣式設定中，可以調整：
- 字體（例如選擇思源黑體 Noto Sans TC）
- 字體大小（例如 32px）
- 字體顏色（例如深藍色）
- 字體陰影（適度增加層次感）
內容編輯器元件
內容編輯器適合用來撰寫較長的段落文字。
在樣式中，你同樣可以設定字體、大小與行距，例如將字體大小設定為 18px，提升閱讀性。
圖片元件：提升視覺吸引力的重要元素
圖片是網站設計中非常重要的一環。
拖曳「圖片」元件後，你可以選擇上傳圖片或從媒體庫挑選。
如果擔心圖片尺寸過小導致模糊，可以選擇顯示完整尺寸，並依需求調整對齊方式。
在樣式設定中，你可以：
- 設定圓角（例如 20px）
- 加入陰影效果
- 讓圖片看起來更有層次感
按鈕元件：引導使用者行動的關鍵
當你需要連結到其他頁面時，可以使用「按鈕」元件。
設定方式包含：
- 按鈕文字（例如「聯絡我們」）
- 背景色（使用品牌主色）
- 文字顏色（例如白色）
- 圓角（例如 20px）
在 Hover（滑鼠暫留）設定中，也可以加入變色效果，提升互動感。
最後，再設定按鈕連結，指向聯絡頁或其他目標頁面。
圖片轉盤（Banner）：動態展示內容的好工具
許多網站首頁都會使用 Banner 輪播區塊。
透過「圖片轉盤」元件，你可以：
- 新增多張圖片
- 設定一次顯示一張
- 啟用自動播放
- 設定動畫效果與播放方向
讓首頁視覺更活潑、更吸引目光。
特色內容元件：計數器、進度條與見證
這類元件常用於數據展示與客戶回饋，能快速建立信任感。
計數器元件
計數器可以呈現數值變化動畫，例如：
- 從 0 到 1000
- 加入千分位
- 設定數字前綴或後綴
在樣式中，可以分別調整標題與數字的樣式與位置。
進度條元件
進度條適合呈現完成度或技能比例。
你可以設定：
- 標題（例如「我的技能」）
- 百分比（例如 75%）
- 補充文字（例如「網站設計師」）
並調整進度條顏色、高度與圓角。
見證（評論）元件
見證元件可用來呈現客戶回饋。
你可以輸入：
- 評論內容
- 客戶姓名
- 職稱
- 客戶頭像
這類內容對提升品牌信任度非常有幫助。
透過這篇完整教學，你已經掌握 Elementor 中最常用、也最重要的元件與版面配置方式。
只要熟悉這些基礎操作，後續不論是設計形象網站、服務頁、Landing Page，甚至是電商頁面，都能更順利完成。
下一步，你就可以開始實際動手，把 Elementor 變成你最強大的網站設計工具。
常見問題（FAQ）
Elementor 元件會隨 WordPress 更新而消失嗎？
Elementor 是獨立外掛，更新後仍會保留你原本加入的元件內容，但建議先做好備份再更新，以避免外掛相容性問題。
我可以把同一個元件複製到不同頁面嗎？
可以。Elementor 支援「右鍵複製」或保存為區塊（Template），再放在其他頁面。
圖片過大會影響網站速度嗎？
是的。建議在上傳前先壓縮圖片（例如 WebP格式），減少載入時間，有助 SEO 與 RWD 體驗。
按鈕與動畫效果會影響手機瀏覽速度嗎？
適量的動態效果不會，但過多 CSS / JS 動畫會增加頁面負擔，建議先評估使用目的再加入。
不同裝置版面不一樣，該怎麼調整？
Elementor 支援在不同裝置下「個別設定字體、間距與顯示狀態」，可在預覽模式下微調。
