Elementor編輯器 入門篇

Elementor 是這個網站用來排版面的工具。看起來選項很多，但其實整套只有三個觀念：容器決定結構、元件放內容、每個東西都有「內容／樣式／進階」三個分頁。懂了這三件事就能動手。

開始編輯

在頁面或文章的編輯畫面按使用 Elementor 編輯。左邊是面板，右邊是即時畫面，左右都能直接點。

全頁設定

左下角的齒輪是這一頁的整體設定，幾個常用的：

頁面佈局	選「Elementor 全寬」，版面才能做滿版（預設的佈局會留下佈景主題的邊框與標題）
導覽器	把整頁的結構列成樹狀，元件疊在一起找不到時用它（快捷鍵 ⌘/Ctrl + I）
修訂紀錄	改壞了可以回到之前的任一個版本
切換裝置	桌機／平板／手機三種寬度的預覽，發佈前每一個都要看

結構：容器（新版）

Elementor 目前的版面單位是容器 Container，容器裡可以再放容器，也可以直接放元件。兩個關鍵設定：

• 方向 Direction——裡面的東西要橫排還是直排。一排三張卡片＝橫排；標題在上內文在下＝直排。
• 對齊 Alignment——橫向與縱向的對齊方式。兩欄高度不一樣想讓它們頂端對齊，就是調這裡。

舊的頁面可能還是用段 Section / 欄 Column / 元素的舊結構，那是上一代的做法。舊頁面可以照舊編輯，新做的頁面建議一律用容器——它的響應式表現好很多。

每個元件的三個分頁

內容

改文字、換圖片、填連結。另外「內容寬度」決定這個區塊是全寬（底色拉滿整個螢幕）還是方框（內容置中、兩側留白）——滿版背景色通常就是靠這個做的。

樣式

顏色、字級、框線、圓角、陰影、背景。

進階

內距 Padding	框線往內到內容的距離。做區塊的上下留白用這個。
外距 Margin	這個元件往外推開別人的距離。
尺寸 / 順序 / 對齊	在容器裡佔多寬、排第幾個。
進場動畫	捲到時淡入等效果。整頁都加會很吵，重點區塊用就好。
回應式	這個元件在手機上要不要隱藏。手機與桌機想呈現不同版本時用它。

每個數值都可以分裝置設定

字級、內距這類欄位旁邊有一個裝置小圖示，點它可以只改手機的值。桌機 64px 的標題在手機上要降到 32px 左右，就是在這裡調。