開始學習
三個 Tab 各管什麼？
在 Elementor 裡，不管你點的是 Container 還是 Widget，左側面板永遠有三個 Tab：版面配置、樣式、進階。搞懂這三個的分工，就掌握了 Elementor 的核心邏輯。
01
版面配置
決定元素放在哪、怎麼排列。像是用鉛筆打草稿。
02
樣式
決定元素看起來怎麼樣。顏色、字體、邊框都在這。
03
進階
外部間距、手機版覆蓋設定、自訂 CSS。精調用的。
🧭 最重要的觀念
Elementor 頁面是由 Container 包 Container，Container 裡放 Widget 組成的。
Container 是骨架，負責排列；Widget 是內容，負責顯示。
三個 Tab 在 Container 和 Widget 上的選項略有不同，但邏輯完全一樣。
Container 是骨架，負責排列；Widget 是內容，負責顯示。
三個 Tab 在 Container 和 Widget 上的選項略有不同，但邏輯完全一樣。
🍱 生活比喻
三個 Tab 就像「裝便當的流程」
🍱
想像你要裝一個便當：
版面配置 = 決定便當盒裡有幾格、飯放左邊還是右邊、菜擺哪裡。純粹是「位置規劃」。
樣式 = 決定便當盒是紅色還是藍色、蓋子要不要花紋。純粹是「外觀裝扮」。
進階 = 決定便當盒放在袋子的哪個位置、要不要加保冷劑這種「額外細節」。
三件事各自獨立，互不干擾！
版面配置 = 決定便當盒裡有幾格、飯放左邊還是右邊、菜擺哪裡。純粹是「位置規劃」。
樣式 = 決定便當盒是紅色還是藍色、蓋子要不要花紋。純粹是「外觀裝扮」。
進階 = 決定便當盒放在袋子的哪個位置、要不要加保冷劑這種「額外細節」。
三件事各自獨立，互不干擾！
三個 Tab 的職責對照
版面配置（Layout）
管「在哪裡」：方向（橫排/直排）、對齊方式、間距、寬高、換行邏輯。這些設定只影響位置，不影響顏色外觀。
樣式（Style）
管「長什麼樣」：背景色、漸層、邊框、圓角、陰影、字體顏色大小。改這裡不會動到排列位置。
進階（Advanced）
管「精細調整」：Margin 外距、動畫效果、手機板覆蓋設定、CSS ID/Class、自訂 CSS。先把前兩個調好，最後才來這裡微調。
🍱 小學生也懂的比喻
做便當的三個步驟
🍱
想像你在做一個便當：
版面配置 = 決定便當盒怎麼分格：左邊放飯、右邊放菜、中間夾層放水果。這一步只在擺格子，還沒放食物。
樣式 = 決定每格的顏色和外觀：飯格用白色、菜格用深色、蓋子要透明。
進階 = 微調細節：便當盒外面包幾層布巾（Margin）、蓋子蓋多緊（Padding）、要不要在手機上換成不同排法。
先分好格子 → 再決定外觀 → 最後微調細節，這就是 Elementor 的操作順序！
版面配置 = 決定便當盒怎麼分格：左邊放飯、右邊放菜、中間夾層放水果。這一步只在擺格子，還沒放食物。
樣式 = 決定每格的顏色和外觀：飯格用白色、菜格用深色、蓋子要透明。
進階 = 微調細節：便當盒外面包幾層布巾（Margin）、蓋子蓋多緊（Padding）、要不要在手機上換成不同排法。
先分好格子 → 再決定外觀 → 最後微調細節，這就是 Elementor 的操作順序！
認識元件
Container 容器
Elementor 頁面的骨架。本身不顯示內容，只負責「框住子元素並排列它們」。
把 Container 想像成一個無形的「箱子」。箱子可以橫的、直的、大的、小的，但箱子本身不是內容，裡面裝的東西才是。
🏠 生活比喻
Container 就像「房間」
🏠
一棟房子裡有很多房間，房間裡才放家具。
Container = 房間（決定空間大小、格局）
Widget = 家具（床、桌子、椅子，才是真正的內容）
你不會把床直接蓋在房子外面，同樣地，Widget 一定要放在 Container 裡才能正常運作。
而且房間裡還可以再隔一個小房間（Container 裡面再放 Container），就像房間裡有更衣室一樣。
Container = 房間（決定空間大小、格局）
Widget = 家具（床、桌子、椅子，才是真正的內容）
你不會把床直接蓋在房子外面，同樣地，Widget 一定要放在 Container 裡才能正常運作。
而且房間裡還可以再隔一個小房間（Container 裡面再放 Container），就像房間裡有更衣室一樣。
Container 的巢狀結構
每個頁面都是 Container 包 Container 再放 Widget 的結構。
例如「三欄卡片區」的完整結構：
📦 外層 Container（控制整區上下 Padding、背景色）
📦 內層 Container（橫排三欄，控制 Gap）
📦 卡片 Container（直排，控制卡片樣式）
🧩 Heading Widget
🧩 Text Editor Widget
🧩 Button Widget
例如「三欄卡片區」的完整結構：
📦 外層 Container（控制整區上下 Padding、背景色）
📦 內層 Container（橫排三欄，控制 Gap）
📦 卡片 Container（直排，控制卡片樣式）
🧩 Heading Widget
🧩 Text Editor Widget
🧩 Button Widget
Flexbox（最常用）
子元素可以橫排或直排，可以控制對齊和間距。幾乎所有版面都用 Flexbox。
Grid（進階用）
需要精確欄列控制時使用，例如「4×3 圖片牆」、複雜卡片網格。
內容寬度：全寬 vs 固定寬度
全寬（Full Width）
Container 撐滿整個螢幕。適合需要滿版背景的區塊，例如 Hero 區、Footer。
固定寬度（Boxed）
內容限制在設定的最大寬度內，不會在超寬螢幕上太散。Features、文字區塊常用。
常見做法：外層全寬做背景，內層 Boxed 控制內容。
常見做法：外層全寬做背景，內層 Boxed 控制內容。
🏠 小學生也懂的比喻
Container 就像「房間」
🏠
你家有客廳、房間、廚房，這些都是 Container。
客廳裡有沙發、電視、茶几，這些「傢俱」就是 Widget。
你不可能把沙發直接放在「房子外面」，沙發一定要放在某個房間裡，對吧？
同樣道理，Widget 一定要放在 Container 裡才能存在！
全寬 Container = 整棟樓的外牆（背景撐滿整個視野）
固定寬度 Container = 房間裡的生活區（不讓東西擺到牆角去）
客廳裡有沙發、電視、茶几，這些「傢俱」就是 Widget。
你不可能把沙發直接放在「房子外面」，沙發一定要放在某個房間裡，對吧？
同樣道理，Widget 一定要放在 Container 裡才能存在！
全寬 Container = 整棟樓的外牆（背景撐滿整個視野）
固定寬度 Container = 房間裡的生活區（不讓東西擺到牆角去）
認識元件
Widget 小工具
Elementor 裡真正「顯示內容」的元件。放在 Container 裡面使用，不能單獨存在。
Widget 是內容，Container 是框架。兩者職責清楚分開，這是 Elementor 設計的核心概念。
🧸 生活比喻
Widget 就像「玩具」
🧸
你有一個玩具箱（Container），裡面放著各種玩具（Widget）。
標題 Widget = 寫有名字的大積木（最重要、最顯眼）
文字 Widget = 說明書（解釋內容用的）
按鈕 Widget = 開關（按下去會發生事情）
圖片 Widget = 貼紙或照片
每種玩具的功能不一樣，但都只能放在玩具箱（Container）裡面才算是整理好的狀態！
標題 Widget = 寫有名字的大積木（最重要、最顯眼）
文字 Widget = 說明書（解釋內容用的）
按鈕 Widget = 開關（按下去會發生事情）
圖片 Widget = 貼紙或照片
每種玩具的功能不一樣，但都只能放在玩具箱（Container）裡面才算是整理好的狀態！
標題（Heading）
H1～H6 標題。有專屬字體大小、行高設定。HTML 標籤的選擇對 SEO 有影響，首頁主標用 H1，區塊標用 H2，卡片標用 H3。
內容編輯器（Text Editor）
段落文字、說明文字。支援 HTML 模式，可輸入帶有
style 屬性的原始 HTML，做到更細緻的樣式控制。按鈕（Button）
CTA 按鈕。可設背景色、邊框、圓角、文字顏色。記得設 Hover 狀態，讓滑鼠移過去有反應。
圖片（Image）
插入圖片。基本設定可控圓角和對齊。進階效果（如固定高度裁切、半透明）需用自訂 CSS：
object-fit: cover; opacity: 0.6;分隔線（Divider）
視覺分隔用的橫線。可設粗細、顏色、線型（實線/虛線/點線）。
空白間隔（Spacer）
純粹製造空間。現代做法多用 Container 的 Padding 或 Gap 取代，但在 Widget 之間臨時補高度時很方便。
🧸 小學生也懂的比喻
Widget 就像不同種類的玩具
🎒
你有一個書包（Container），裡面有各種文具（Widget）：
標題 Widget = 最大那本筆記本封面的大字，一眼就看到
文字 Widget = 筆記本裡面密密麻麻的說明文字
按鈕 Widget = 一顆彩色橡皮擦，用手按下去會發生事情
圖片 Widget = 貼在書包上的貼紙，純粹裝飾或說明用
分隔線 Widget = 筆記本裡畫的那條橫線，把不同段落隔開
每種文具有自己的用途，不能亂放，但放進書包後就歸書包管理了！
標題 Widget = 最大那本筆記本封面的大字，一眼就看到
文字 Widget = 筆記本裡面密密麻麻的說明文字
按鈕 Widget = 一顆彩色橡皮擦，用手按下去會發生事情
圖片 Widget = 貼在書包上的貼紙，純粹裝飾或說明用
分隔線 Widget = 筆記本裡畫的那條橫線，把不同段落隔開
每種文具有自己的用途，不能亂放，但放進書包後就歸書包管理了！
版面配置
方向（Direction）
決定 Container 裡的子元素要「橫著排」還是「直著排」。這是版面配置裡第一個要設的東西。
Row（橫排）→
A
B
C
子元素從左到右排列。
適合：導覽列、按鈕群組、並排卡片。
適合：導覽列、按鈕群組、並排卡片。
Column（直排）↓
A
B
C
子元素從上到下排列。
適合：卡片內容、Hero 標題+副標+按鈕。
適合：卡片內容、Hero 標題+副標+按鈕。
手機版通常需要把 Row 改成 Column，避免元素太窄。在「進階 → 響應式」裡覆蓋手機版的 Direction 設定。
🚌 生活比喻
Direction 就像「排隊方式」
🚌
想像一群小朋友要排隊上公車：
Row（橫排） = 大家站成一橫排，從左到右依序站好。適合操場集合時的橫排。
Column（直排） = 大家站成一直排，前後排好。適合走廊排隊進教室。
手機螢幕很窄，就像走廊一樣，橫排的話大家會擠成一團，所以手機版通常改成直排（Column）讓每個人都有足夠的空間。
Row（橫排） = 大家站成一橫排，從左到右依序站好。適合操場集合時的橫排。
Column（直排） = 大家站成一直排，前後排好。適合走廊排隊進教室。
手機螢幕很窄，就像走廊一樣，橫排的話大家會擠成一團，所以手機版通常改成直排（Column）讓每個人都有足夠的空間。
Row Reverse / Column Reverse
反向排列。Row Reverse 從右到左，Column Reverse 從下到上。在某些特殊版面（圖右文左交錯）很好用，不需要手動調整元素順序。
版面配置
Justify Content（主軸分配）
控制子元素在「排列方向」上如何分配空間。Row 時是水平分配，Column 時是垂直分配。
把空白空間想像成「多出來的糖果」，Justify Content 決定這些糖果分給誰。
🍬 生活比喻
Justify Content 就像「分糖果」
🍬
有一條 100 公分長的桌子，三個小朋友站在桌旁，加起來只佔 60 公分，多出 40 公分的空白。這 40 公分要怎麼分？
Flex Start = 三個人全部擠在左邊，空白都留在右邊
Center = 三個人站中間，左右各留 20 公分
Space Between = 第一個貼左邊、最後一個貼右邊，中間的空白均分（導覽列最常用！）
Space Evenly = 連兩端也算進去，所有間隔完全一樣寬
Flex Start = 三個人全部擠在左邊，空白都留在右邊
Center = 三個人站中間，左右各留 20 公分
Space Between = 第一個貼左邊、最後一個貼右邊，中間的空白均分（導覽列最常用！）
Space Evenly = 連兩端也算進去，所有間隔完全一樣寬
Flex Start（靠起點）
所有子元素擠在起點（Row → 靠左，Column → 靠上）。剩餘空間集中在末端。
Flex End（靠終點）
所有子元素擠在終點（靠右或靠下）。
Center（置中）
子元素集中在中間，兩端空間相等。Hero 區、CTA 區最常用。
Space Between（兩端對齊）
第一個貼左端，最後一個貼右端，中間空間均分。導覽列、Footer 最常用。
Space Around（環繞間距）
每個子元素兩側都有相等間距，所以最外側也有半格空間。
Space Evenly（完全均分）
所有間距（包含兩端）完全相等。
🍰 小學生也懂的比喻
Justify Content 就像「切蛋糕」
🎂
生日蛋糕上有三個草莓，你要決定怎麼放：
Flex Start = 三個草莓全擠在左邊，右邊都是空的
Flex End = 三個草莓全擠在右邊，左邊都是空的
Center = 三個草莓都放中間，兩邊留一樣多的空間
Space Between = 第一個貼左邊、最後一個貼右邊、中間那個放正中央，三個草莓把蛋糕分成均等的區間
Space Evenly = 每個草莓之間的距離，和草莓到邊緣的距離完全一樣
網站的導覽列通常用 Space Between，讓 Logo 靠左、選單靠右！
Flex Start = 三個草莓全擠在左邊，右邊都是空的
Flex End = 三個草莓全擠在右邊，左邊都是空的
Center = 三個草莓都放中間，兩邊留一樣多的空間
Space Between = 第一個貼左邊、最後一個貼右邊、中間那個放正中央，三個草莓把蛋糕分成均等的區間
Space Evenly = 每個草莓之間的距離，和草莓到邊緣的距離完全一樣
網站的導覽列通常用 Space Between，讓 Logo 靠左、選單靠右！
版面配置
Align Items（交叉軸對齊）
控制子元素在「垂直於排列方向的那條軸」如何對齊。Row 時控制垂直對齊，Column 時控制水平對齊。
Justify Content 管「同方向的軸」，Align Items 管「垂直方向的軸」。兩個合用就能精確控制對齊。
📏 生活比喻
Align Items 就像「書架上書的對齊方式」
📚
書架上放了三本書，一本很厚、一本中等、一本很薄。書的底部要怎麼對齊？
Stretch（拉伸） = 神奇地讓三本書變成一樣高！（讓卡片等高的秘密武器）
Flex Start（靠上） = 三本書的頂部對齊，底部高低不一
Center（置中） = 三本書垂直居中對齊，就像都放在書架的正中間那條線上
Flex End（靠下） = 三本書的底部對齊，頂部高低不一
Stretch（拉伸） = 神奇地讓三本書變成一樣高！（讓卡片等高的秘密武器）
Flex Start（靠上） = 三本書的頂部對齊，底部高低不一
Center（置中） = 三本書垂直居中對齊，就像都放在書架的正中間那條線上
Flex End（靠下） = 三本書的底部對齊，頂部高低不一
Stretch（拉伸）最常用
A
多行內容
多行內容
B
C
子元素自動撐滿高度，讓卡片等高。Features 卡片、定價卡片都用這個。
Center（置中）
A
B
C
各自高度，垂直居中對齊。按鈕群組、圖標+文字組合常用。
Stretch（拉伸）
子元素在交叉軸方向拉伸至撐滿 Container。讓同排卡片等高的關鍵設定。
Center（置中）
交叉軸方向置中。Row 排列時，讓高度不同的元素垂直居中對齊。
Flex Start（靠起點）
交叉軸靠起點。Row 時靠頂端對齊。Footer 三欄常用，讓各欄從頂部往下排。
Flex End（靠終點）
交叉軸靠終點。Row 時靠底端對齊。較少用，特殊排版才需要。
📚 小學生也懂的比喻
Align Items 就像「書架上的書」
📚
你把三本厚薄不同的書放在書架上（Row 橫排）：
Stretch（拉伸） = 神奇的是三本書高度全部變成一樣，全部撐到書架頂端。這樣三張卡片才會等高！
Center（置中） = 書各自保持原本的高度，但上下都對齊「書架的中心線」，高的書撐到頂底，矮的書懸在中間
Flex Start（靠頂） = 書全部從書架上緣往下放，矮書的下方留空
做「並排的等高卡片」時，一定要記得設 Stretch！
Stretch（拉伸） = 神奇的是三本書高度全部變成一樣，全部撐到書架頂端。這樣三張卡片才會等高！
Center（置中） = 書各自保持原本的高度，但上下都對齊「書架的中心線」，高的書撐到頂底，矮的書懸在中間
Flex Start（靠頂） = 書全部從書架上緣往下放，矮書的下方留空
做「並排的等高卡片」時，一定要記得設 Stretch！
版面配置
Gap（元素間距）
Container 裡子元素之間的間距。是最乾淨、最推薦使用的間距設定方式。
優先用 Gap 控制間距。它只管「元素之間」，不影響 Container 邊緣（那是 Padding 的工作）。
🌳 生活比喻
Gap 就像「樹與樹之間的距離」
🌳
公園裡種了一排樹，Gap 就是「樹和樹之間隔多遠」的設定。
Gap = 0：樹全部擠在一起，沒有縫隙
Gap = 20px：每棵樹之間間隔 20 像素，稍微有點空間
Gap = 48px：每棵樹之間間隔寬寬的，像豪華公園那樣
重點是：Gap 只管「樹和樹之間」，第一棵樹到公園邊牆的距離、最後一棵樹到邊牆的距離，那是 Padding 的工作，不是 Gap 管的！
Gap = 0：樹全部擠在一起，沒有縫隙
Gap = 20px：每棵樹之間間隔 20 像素，稍微有點空間
Gap = 48px：每棵樹之間間隔寬寬的，像豪華公園那樣
重點是：Gap 只管「樹和樹之間」，第一棵樹到公園邊牆的距離、最後一棵樹到邊牆的距離，那是 Padding 的工作，不是 Gap 管的！
Gap（推薦）
設在父層 Container上。控制所有子元素之間的距離。改一個值，全部都改。
Margin（補充用）
設在子元素本身的進階 Tab。需要一個一個設定。只在需要對某元素特殊微調時才用。
欄間距（Column Gap）
Row 方向排列時，左右元素之間的距離。
列間距（Row Gap）
Column 方向排列時，或換行後上下元素之間的距離。
鎖定按鈕
Gap 旁邊有一個「鎖定」圖示。鎖定時欄間距和列間距同步改變。解鎖後可以分別設定不同值。大部分情況下鎖定就好。
🪴 小學生也懂的比喻
Gap 就像「花盆之間的距離」
🪴
你在窗台上排了幾盆植物，Gap 就是決定「每盆植物之間要留多少空隙」。
Gap 小（8px） = 盆子緊緊靠在一起，很密集
Gap 大（48px） = 每盆之間都留充裕的空間，很舒服好看
重點是：Gap 只管「植物和植物之間」的空隙，不管「植物和窗框之間」的距離。
「植物離窗框多遠」是 Padding 在管的事情！
Gap 的好處：你在爸媽的 Container 上設一個值，裡面所有植物之間都自動一樣寬，不用一盆一盆去調！
Gap 小（8px） = 盆子緊緊靠在一起，很密集
Gap 大（48px） = 每盆之間都留充裕的空間，很舒服好看
重點是：Gap 只管「植物和植物之間」的空隙，不管「植物和窗框之間」的距離。
「植物離窗框多遠」是 Padding 在管的事情！
Gap 的好處：你在爸媽的 Container 上設一個值，裡面所有植物之間都自動一樣寬，不用一盆一盆去調！
版面配置
寬度設定
Container 和 Widget 都有寬度設定，但邏輯稍有不同。
Full Width（全寬）
撐滿父層容器的全部寬度。Container 預設是全寬。
固定寬度（px）
指定精確的像素寬度，例如
1200px。適合需要精確控制的元件。百分比寬度
相對於父層容器的百分比，例如
50% 就是佔一半寬。響應式設計常用。在 Row 排列的 Container 裡，子元素的寬度會自動平均分配。若要讓某個子元素佔更多空間，用自訂 CSS 的
flex: 2（佔兩倍）來控制。
🍕 生活比喻
寬度設定就像「切披薩」
🍕
一個圓形披薩要分給幾個人，寬度設定就是「每個人拿多大塊」的問題：
Full Width（全寬） = 一個人拿整塊披薩，佔滿整個盤子
50% 寬度 = 披薩切一半，你拿一半，另一人拿一半
固定 300px = 不管披薩多大，你只拿固定大小的一塊
flex: 2 的大卡片 = 同桌有人拿兩塊、其他人各拿一塊，大家的「份數」比例是 2:1:1
Full Width（全寬） = 一個人拿整塊披薩，佔滿整個盤子
50% 寬度 = 披薩切一半，你拿一半，另一人拿一半
固定 300px = 不管披薩多大，你只拿固定大小的一塊
flex: 2 的大卡片 = 同桌有人拿兩塊、其他人各拿一塊，大家的「份數」比例是 2:1:1
手機版按鈕改全寬
按鈕預設寬度是自動。若要讓手機版按鈕撐滿螢幕，在進階 → 響應式 → Width 設定手機版為
Full Width。這樣桌機版不受影響，只有手機版會變全寬。樣式
背景（Background）
設定 Container 或 Widget 的底色，是樣式 Tab 裡最常用的設定，有四種類型。
Classic（純色 / 圖片）
最基本的類型。選純色就設一個顏色；選圖片可上傳背景圖，並設定圖片大小（Cover/Contain/Auto）和位置（置中/頂部等）。
Gradient（漸層）
設定兩個顏色和漸層方式：
Linear：直線方向漸層，可設角度（0°=上到下，90°=左到右）
Radial：從中心往外放射，可設起始位置（Center Top 等）
Linear：直線方向漸層，可設角度（0°=上到下，90°=左到右）
Radial：從中心往外放射，可設起始位置（Center Top 等）
Video（影片背景）
背景播放影片（YouTube 或 mp4）。注意：手機瀏覽器通常不支援自動播放，建議設定備用靜態背景圖。
Slideshow（輪播）
多張圖片輪流顯示作為背景。
背景有 Normal（一般）和 Hover（滑鼠移入）兩個狀態。要做滑鼠移入換背景色的效果，在 Hover 狀態設定第二種背景即可。
🖼 生活比喻
背景就像「房間的牆壁」
🏠
Container 就是房間，背景設定就是決定「牆壁要漆什麼顏色或貼什麼壁紙」：
Classic 純色 = 把牆壁漆成單一顏色，例如深灰色或白色
Classic 圖片 = 在牆壁上貼一張大壁紙（風景照、花紋圖案）
Gradient 漸層 = 牆壁從上到下漸漸從深色變淺色，像傍晚天空一樣
Radial（放射）漸層 = 從牆壁中心往外擴散的漸層，像舞台燈光照下來的感覺
Hover 狀態 = 就像有人靠近房間時，牆壁自動換色——做互動效果用的！
Classic 純色 = 把牆壁漆成單一顏色，例如深灰色或白色
Classic 圖片 = 在牆壁上貼一張大壁紙（風景照、花紋圖案）
Gradient 漸層 = 牆壁從上到下漸漸從深色變淺色，像傍晚天空一樣
Radial（放射）漸層 = 從牆壁中心往外擴散的漸層，像舞台燈光照下來的感覺
Hover 狀態 = 就像有人靠近房間時，牆壁自動換色——做互動效果用的！
樣式
邊框與圓角
設定元素的邊框樣式和四個角的圓弧程度。在樣式 Tab 裡。
邊框類型（Border Type）
None（無邊框）、Solid（實線）、Dashed（虛線）、Dotted（點線）。設為 None 就沒有邊框。
邊框寬度
可以四邊統一，也可以只設某幾邊（點解鎖按鈕）。例如只設 Border Top 做分隔線效果。
邊框顏色
建議在整個網站統一使用同一個邊框顏色（例如這份模板全用
#2A2B35），視覺上更整齊。圓角（Border Radius）
四個角的圓弧程度。數字越大越圓，
注意：圓角不需要邊框就能生效，就算 Border Type 是 None，圓角一樣套用在背景色上。
50% 或超大數字會變成圓形/橢圓形。注意：圓角不需要邊框就能生效，就算 Border Type 是 None，圓角一樣套用在背景色上。
邊框也有 Normal / Hover 兩種狀態，可以做滑鼠移入時邊框變色的效果。
🖼 生活比喻
邊框和圓角就像「相框」
🖼
想像你要幫一張照片選相框：
邊框類型 Solid = 實線相框，最常見的那種
邊框類型 Dashed = 虛線邊框，像剪報用的虛線框
邊框寬度 = 相框有多厚，1px 是超薄、10px 是粗框
邊框顏色 = 相框是金色、黑色還是白色
圓角（Border Radius） = 相框的四個角要不要切成圓弧形。
0px = 直角相框（方方正正）
12px = 稍微圓一點的現代感相框
9999px = 完全圓形（像頭像框那樣）
邊框類型 Solid = 實線相框，最常見的那種
邊框類型 Dashed = 虛線邊框，像剪報用的虛線框
邊框寬度 = 相框有多厚，1px 是超薄、10px 是粗框
邊框顏色 = 相框是金色、黑色還是白色
圓角（Border Radius） = 相框的四個角要不要切成圓弧形。
0px = 直角相框（方方正正）
12px = 稍微圓一點的現代感相框
9999px = 完全圓形（像頭像框那樣）
樣式
字體排版（Typography）
在標題和文字 Widget 的樣式 Tab 裡，可以完整控制字體外觀。
字體（Font Family）
可以從 Google Fonts 選擇，或使用自訂字體。建議全站只用 2 種字體（標題字 + 內文字），保持一致性。
大小（Font Size）
可以分別為桌機、平板、手機設定不同大小（右上角切換裝置圖示）。例如桌機 64px，手機 36px。
字重（Font Weight）
字體的粗細。400 = 一般，700 = 粗體。並非所有字體都有所有字重，需看字體支援情況。
行高（Line Height）
行與行之間的距離。標題通常設
1.1em（緊湊有力），內文通常設 1.6～1.8em（舒適閱讀）。字距（Letter Spacing）
字元之間的間距。標題可以設負值（
-0.5px）讓字體更緊湊有設計感，小字則用正值提升可讀性。如果你在字體設定前看到 「Typography」開關，需要先把它打開才能展開詳細設定。
✏️ 生活比喻
字體排版就像「寫字的方式」
✏️
想像你要在黑板上寫字，字體排版就是各種「寫法細節」：
字體（Font Family） = 你要用毛筆字、楷書、還是印刷體？每種字體個性不同。
大小（Font Size） = 字要寫多大？標題 64px 像黑板標題那麼大，內文 16px 像作業本正常大小。
字重（Font Weight） = 寫普通字（400）還是用力寫粗體（700）？
行高（Line Height） = 每行字之間的間距。太小字會疊在一起很難讀，太大又浪費空間。內文設 1.7 最舒適。
字距（Letter Spacing） = 每個字之間要不要拉開一點距離？大標題常用負字距讓字更有力量感。
字體（Font Family） = 你要用毛筆字、楷書、還是印刷體？每種字體個性不同。
大小（Font Size） = 字要寫多大？標題 64px 像黑板標題那麼大，內文 16px 像作業本正常大小。
字重（Font Weight） = 寫普通字（400）還是用力寫粗體（700）？
行高（Line Height） = 每行字之間的間距。太小字會疊在一起很難讀，太大又浪費空間。內文設 1.7 最舒適。
字距（Letter Spacing） = 每個字之間要不要拉開一點距離？大標題常用負字距讓字更有力量感。
進階
Margin 和 Padding
最容易搞混的兩個設定，分別在進階 Tab 和版面配置 Tab 裡。
最簡單的記法：Padding = 內部空間（擠開內容），Margin = 外部空間（推開鄰居）。
Padding（內距）
元素內部的空間，讓內容和邊框之間有距離。
Container 的 Padding 在版面配置 Tab 就能設定。
Widget 的 Padding 在進階 → 版面裡設定。
Container 的 Padding 在版面配置 Tab 就能設定。
Widget 的 Padding 在進階 → 版面裡設定。
Margin（外距）
元素外部的空間，影響它和周圍元素的距離。
設定在進階 → 版面 → Margin。
現代做法多用父層 Gap 取代，Margin 只做特殊微調用。
設定在進階 → 版面 → Margin。
現代做法多用父層 Gap 取代，Margin 只做特殊微調用。
實際例子
卡片 Container Padding =
區塊 Container Padding Top =
想讓某個 Widget 多一點上方空間 → 設它的
40px → 卡片內容四邊都有 40px 呼吸空間區塊 Container Padding Top =
96px → 區塊頂部有 96px 的留白想讓某個 Widget 多一點上方空間 → 設它的
Margin Top
Margin 和 Padding 旁邊都有「鎖定」按鈕。鎖定時四邊同步，解鎖後可以分別設定每一邊。
🎁 生活比喻
Padding 和 Margin 就像「包禮物」
🎁
想像你要把一個玩具（內容）裝進禮物盒再放到架子上：
Padding = 禮物盒裡的泡棉墊
泡棉墊在盒子裡面，讓玩具和盒子邊緣保持距離，玩具不會緊貼著盒壁。
Padding 越大，內容和邊框的距離越大，感覺越「寬敞」。
Margin = 禮物盒放在架子上的間距
盒子和旁邊其他盒子之間留的空隙。Margin 越大，和鄰居元素距離越遠。
💡 記法：Padding = 盒子裡面（Pinside）、Margin = 外面距離（Moutside）
Padding = 禮物盒裡的泡棉墊
泡棉墊在盒子裡面，讓玩具和盒子邊緣保持距離，玩具不會緊貼著盒壁。
Padding 越大，內容和邊框的距離越大，感覺越「寬敞」。
Margin = 禮物盒放在架子上的間距
盒子和旁邊其他盒子之間留的空隙。Margin 越大，和鄰居元素距離越遠。
💡 記法：Padding = 盒子裡面（Pinside）、Margin = 外面距離（Moutside）
進階
響應式覆蓋
讓同一個元素在不同裝置上有不同設定。Elementor 的響應式邏輯是「從桌機繼承，再針對小螢幕覆蓋」。
你只需要設定「和桌機不同的地方」就好。沒有覆蓋的設定，手機版會自動沿用桌機版的值。
常見需要響應式覆蓋的設定
方向（Direction）：桌機 Row → 手機 Column
Padding：桌機上下 96px → 手機上下 48px
Gap：桌機 96px → 手機 48px
字體大小：桌機 64px → 平板 48px → 手機 36px
按鈕寬度：手機版改 Full Width
最小高度：桌機 860px → 手機可以不設（讓內容自然撐開）
Padding：桌機上下 96px → 手機上下 48px
Gap：桌機 96px → 手機 48px
字體大小：桌機 64px → 平板 48px → 手機 36px
按鈕寬度：手機版改 Full Width
最小高度：桌機 860px → 手機可以不設（讓內容自然撐開）
方法一：切換裝置預覽
點 Elementor 頂部的桌機 / 平板 / 手機圖示切換預覽模式。此時調整的設定只影響目前裝置。這是最直覺的方式。
方法二：進階 → 響應式
在進階 Tab 裡直接填入各裝置的覆蓋值，不需要切換預覽模式。適合要快速設定多個元素的情況。
Elementor 的斷點（Breakpoint）預設是：手機 ≤ 767px，平板 768～1024px，桌機 1025px 以上。可以在 Elementor → 設定 → 樣式 裡修改這些斷點值。
👗 生活比喻
響應式就像「同一件衣服有不同尺寸」
👗
同一件衣服，有 S / M / L / XL 號，每個尺寸的剪裁細節不同，但穿起來的「款式」是一樣的。
響應式設計也是這樣：同一個頁面，在不同裝置上的「尺寸設定」不一樣，但呈現的是同樣的內容。
桌機版 = XL 號，三欄橫排、超大字、寬敞間距
平板版 = M 號，可能縮成兩欄、字縮小一點
手機版 = S 號，單欄直排、字再縮小、按鈕變全寬
你設計好 XL 號（桌機）之後，只需要告訴 Elementor「S 號哪裡不一樣」就好，不用從頭再設計一次！
響應式設計也是這樣：同一個頁面，在不同裝置上的「尺寸設定」不一樣，但呈現的是同樣的內容。
桌機版 = XL 號，三欄橫排、超大字、寬敞間距
平板版 = M 號，可能縮成兩欄、字縮小一點
手機版 = S 號，單欄直排、字再縮小、按鈕變全寬
你設計好 XL 號（桌機）之後，只需要告訴 Elementor「S 號哪裡不一樣」就好，不用從頭再設計一次！
進階
自訂 CSS
直接為元素寫 CSS 程式碼。在「進階 → 自訂 CSS」裡。需要 Elementor Pro 才有此功能。
自訂 CSS 是 Elementor Pro 功能。免費版可用「外觀 → 自訂 CSS」或在佈景主題設定中全域 CSS 樣式表來達成同樣效果。
這份模板裡用了哪些自訂 CSS
大卡片佔兩倍寬度
flex: 2;
圖片固定高度 + 不變形裁切
height: 256px;
object-fit: cover;
圖片半透明融入深色背景
object-fit: cover;
opacity: 0.6;
漸層文字效果（全域 CSS）
/* 在 Elementor → 設定 → 自訂 CSS 加入 */
.tf-gradient-primary {
background: linear-gradient(135deg, #00FF88, #00E5FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tf-gradient-primary {
background: linear-gradient(135deg, #00FF88, #00E5FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
自訂 CSS 裡的
selector 代表「這個元素本身」。直接寫屬性即可，不需要再加選擇器。例如直接寫 flex: 2; 而不是 .elementor-xxx { flex: 2; }。
🔧 生活比喻
自訂 CSS 就像「特別訂製」
🔧
Elementor 的設定面板就像「IKEA 的標準零件」——大部分需求都能滿足，但有些特殊需求是標準規格做不到的。
自訂 CSS 就像「請師傅特別訂製」，可以做到任何 Elementor 介面沒有提供的效果：
標準規格做不到：「我要這張圖片固定高度 256px 然後自動裁切不變形」
特別訂製：在自訂 CSS 寫
標準規格做不到：「我要文字顏色是漸層的！」
特別訂製：寫漸層文字的 CSS 程式碼
不會寫 CSS 也沒關係，先掌握前面的版面配置和樣式設定，自訂 CSS 等需要時再學！
自訂 CSS 就像「請師傅特別訂製」，可以做到任何 Elementor 介面沒有提供的效果：
標準規格做不到：「我要這張圖片固定高度 256px 然後自動裁切不變形」
特別訂製：在自訂 CSS 寫
height: 256px; object-fit: cover;標準規格做不到：「我要文字顏色是漸層的！」
特別訂製：寫漸層文字的 CSS 程式碼
不會寫 CSS 也沒關係，先掌握前面的版面配置和樣式設定，自訂 CSS 等需要時再學！