這篇文章將完整轉寫並整理 Elementor 教學影片內容，從頁面設定、版面架構工具（段與容器），一路帶你認識 標題、圖片、按鈕、輪播、數據與見證等常用元件，讓你建立正確又實用的操作觀念。
教學影片｜Elementor 常用元件總覽
什麼是 Elementor？為什麼新手也能快速上手
Elementor 是一套拖拉式的網頁編輯器，讓你用最直觀的方式設計網站版面。
你不需要寫任何程式碼，只要拖曳元件、調整設定，就能完成頁面設計。
進入 Elementor 編輯介面後，在畫面左上方可以看到一個「齒輪」圖示，點擊後就是 頁面設定。
如何安裝與啟用 Elementor
Elementor 是 WordPress 外掛，安裝方式和一般外掛一樣。登入網站後台，左側選單點「外掛 → 安裝外掛」，搜尋「Elementor」，找到由 Elementor.com 官方發行的「Elementor 網站生成器」，按「立即安裝」，再按「啟用」。
啟用後，後台會多出一個「Elementor」選單，同時每一篇文章與頁面的編輯畫面上方，都會出現藍色的「使用 Elementor 編輯」按鈕。點下去就會進入視覺化編輯器。
第一次進入時，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 免費版與 Pro 版：新手該怎麼選
Elementor 分成免費版與付費的 Pro 版，基本的拖拉設計體驗兩者完全一樣，差別在功能數量與範圍。
免費版提供約 30 多個核心元件（標題、圖片、按鈕、圖示、分隔線等），足以完成單一頁面的排版，本篇教到的元件大多是免費版就有的。
Pro 版多出近 90 個進階元件，並解鎖幾項關鍵能力：主題建構器（Theme Builder，用視覺化方式設計整站的頁首、頁尾、文章模板）、表單建構器、彈出視窗、以及 WooCommerce 購物頁建構器。
簡單的判斷方式：
- 只做幾頁形象網站、活動頁，版型套用佈景主題即可 → 免費版夠用。
- 想連頁首、頁尾、文章列表、購物流程都自己控制外觀，或需要客製表單 → 需要 Pro。
另外，常有人問 Elementor 和佈景主題內建編輯器、或 WordPress 原生的區塊編輯器（Gutenberg）差在哪。區塊編輯器適合純文章排版、載入輕量；Elementor 的優勢是版面自由度與樣式細節控制，代價是會多載入它自己的 CSS／JS，頁面若堆太多動態元件，要留意速度。
設計完成後：如何發布頁面並加入選單
頁面設計好，按編輯器右下角的「發布」（或「更新」）就會正式上線。
如果希望訪客能從主選單點到這個頁面，還要到後台「外觀 → 選單」把頁面加進導覽列。詳細操作可參考我們的〈WordPress 選單編輯完整教學〉。想把頁面設成網站首頁，則到「設定 → 閱讀 → 首頁顯示」指定。
透過這篇完整教學，你已經掌握 Elementor 中最常用、也最重要的元件與版面配置方式。
只要熟悉這些基礎操作，後續不論是設計形象網站、服務頁、Landing Page，甚至是電商頁面，都能更順利完成。
下一步，你就可以開始實際動手，把 Elementor 變成你最強大的網站設計工具。
自己用 Elementor 做，還是交給專業團隊？
Elementor 大幅降低了自己做網站的門檻，適合預算有限、頁面需求單純、也願意花時間熟悉工具的人。若你屬於這一類，照著上面的流程一步步做，完全可行。
但要提醒的是，「排得出版面」和「排出一個轉換率好、載入快、在手機上也不跑版、SEO 結構正確的網站」之間還有不小的落差。元件堆太多會拖慢速度、RWD 沒設好在手機上會擠成一團、視覺沒有設計系統會顯得業餘——這些都是實際接案時最常收拾的狀況。
如果你的網站是拿來接生意的門面，時間成本又比外包費用更寶貴，也可以直接交給熟悉 Elementor 的團隊處理。rab 瑞布科技長期用 WordPress ＋ Elementor 建置形象網站與購物網站，從版面設計、RWD 到後續維護一手包辦，你可以看看我們的快速架站服務，或直接跟我們聊聊需求。
常見問題（FAQ）
Elementor 元件會隨 WordPress 更新而消失嗎？
Elementor 是獨立外掛，更新後仍會保留你原本加入的元件內容，但建議先做好備份再更新，以避免外掛相容性問題。
我可以把同一個元件複製到不同頁面嗎？
可以。Elementor 支援「右鍵複製」或保存為區塊（Template），再放在其他頁面。
圖片過大會影響網站速度嗎？
是的。建議在上傳前先壓縮圖片（例如 WebP格式），減少載入時間，有助 SEO 與 RWD 體驗。
按鈕與動畫效果會影響手機瀏覽速度嗎？
適量的動態效果不會，但過多 CSS / JS 動畫會增加頁面負擔，建議先評估使用目的再加入。
不同裝置的版面不一樣，該怎麼調整？
Elementor 支援在不同裝置下「個別設定字體、間距與顯示狀態」，可在預覽模式下微調。
Elementor 是免費的嗎？
Elementor 有永久免費版，在 WordPress 外掛庫就能安裝，包含約 30 多個核心元件，做基本頁面排版足夠。進階元件、主題建構器、表單、彈窗、WooCommerce 建構器則需要付費的 Pro 版。
Elementor 有中文介面嗎？
有，Elementor 編輯器支援完整繁體中文，只要 WordPress 後台語言設為「正體中文」，Elementor 會自動跟著切換。
Elementor 免費版可以做出一個完整的網站嗎？
可以做出多個頁面並發布，但頁首、頁尾、文章模板的外觀在免費版無法用 Elementor 控制（要靠佈景主題）。想連整站框架都自訂，需要 Pro 版的主題建構器。
用 Elementor 做的網站會不會很慢？
Elementor 會額外載入自己的 CSS 與 JavaScript，單頁堆太多動態元件（大量輪播、動畫、計數器）確實會影響速度。控制元件數量、圖片上傳前轉成 WebP、搭配快取外掛，一般網站的速度都能維持在可接受範圍。
Elementor 可以用來做購物網站嗎？
可以，但需要 Elementor Pro 加上 WooCommerce，Pro 提供購物車、結帳、商品列表等專用元件。若只有免費版，仍可用 WooCommerce 的預設頁面，只是外觀客製空間有限。
延伸閱讀
