AK Elementor Studio 是做什麼的？
作者：Abanoub Khalil — 資深 WordPress 與 Webflow 開發者
規則 #1 — 本技能最重要的規則
HTML WIDGET 僅限用於 JAVASCRIPT <script> 標籤。
html widget 只有一個有效用途：
→ 嵌入 <script> 標籤以加入 JavaScript 行為
僅此而已。html widget 中絕不能放入其他任何東西。
不能放標題、文字、徽章、導覽連結。
不能放卡片、佈局、定價、時間軸。
不能放圖示、統計數據、任何視覺內容。
每個視覺元素都有對應的原生 Elementor widget。請使用它們。
規則 #2 — 絕對 JSON 規則
1. 無註解 — /* */ 和 // 都會破壞 JSON 解析
❌ { /* hero */ "id": "a1b2c3d4" } ✅ { "id": "a1b2c3d4" }
2. 無結尾逗號
❌ { "a": 1, "b": 2, } ✅ { "a": 1, "b": 2 }
3. ID 必須使用唯一的 8 字元十六進位值
❌ "id": "hero_section" ✅ "id": "a1b2c3d4"
4. 每個元素都必須有 "elements": []
❌ { "widgetType": "heading", "settings": {} }
✅ { "widgetType": "heading", "settings": {}, "elements": [] }
5. isInner 規則
"content": [] 的直接子元素 → "isInner": false
容器內巢狀的容器 → "isInner": true
Widget（在任何容器內） → "isInner": false
6. 僅使用十六進位顏色 — 絕不能使用顏色名稱
❌ "background_color": "white" ✅ "background_color": "#FFFFFF"
步驟 0 — 預飛訪談
請在單一訊息中詢問所有問題，絕不遺漏。
👋 開始前請提供一些細節：
1. 網站地圖 — 有哪些頁面？（我會為每個頁面產生一個 .json）
2. ELEMENTOR 版本 — 免費版還是專業版？
專業版：Theme Builder 的 header/footer、自訂 CSS、固定、滾動效果
免費版：header/footer = 每個頁面內的普通區段
3. 自訂文章類型 — 是否有任何 CPT？
（服務、作品集、外掛、團隊、見證 → 我會產生 ACF JSON）
4. 輸出格式
a) 個別 .json 檔案 — 透過「模板 → 已儲存模板」逐一匯入（免費版 + 專業版皆適用）
b) Elementor 原生匯出 ZIP — 透過「Elementor → 工具 → 匯入套件」匯入（無需額外外掛）
c) Envato Template Kit ZIP — 需要在 WordPress 上安裝「Template Kit Import」外掛
d) 個別 .json + ACF 欄位群組檔案
5. 品牌 — 十六進位顏色代碼 + Google 字型？
（或者我會從設計中提取）
步驟 1 — 輸入偵測
| 輸入類型 | 管線 |
|---|---|
| HTML/CSS/JS | 程式碼管線 |
| PNG/JPG/WebP/螢幕截圖/模型/Figma | 視覺管線 |
| PDF 管線 | |
| 僅文字 | 描述管線 |
| 現有 Elementor JSON | 編輯管線 |
| 混合 | 兩個管線合併 |
完整 WIDGET 對照表 — 每個元素的原生 Widget
文字與數字
| 元素 | Widget |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | heading |
| 段落 / 內文 | text-editor |
| 動畫計數器（500+、10K） | counter |
| 進度 / 技能條 | progress |
動作
| 元素 | Widget |
|---|---|
| 按鈕 / 行動呼籲 / 連結式按鈕 | button |
| 常見問題 / 可摺疊行 | accordion |
| 分頁導覽 | tabs |
| 提示 / 資訊橫幅 | alert |
媒體
| 元素 | Widget |
|---|---|
| 相片 / 圖片 | image |
| YouTube / Vimeo / 影片 | video |
| 圖片網格 | image-gallery |
| 圖片滑塊 / 輪播 | image-carousel |
卡片與清單
| 元素 | Widget |
|---|---|
| 圖示 + 標題 + 描述 | icon-box |
| 附圖示的項目清單 | icon-list |
| 相片 + 標題 + 文字 | image-box |
| 客戶見證 | testimonial |
佈局輔助
| 元素 | Widget |
|---|---|
| 水平線 / 分隔線 | divider |
| 垂直空白 | spacer |
實用工具
| 元素 | Widget |
|---|---|
| 社交媒體圖示 | social-icons |
| 地圖嵌入 | google-maps |
| 外掛 / 表單短代碼 | shortcode |
不使用 html widget 解決複雜元素
導覽列
結構：flex 容器（row, space-between）
└── image widget ← Logo
└── icon-list widget ← 導覽連結（設定 icon 為 "none"，每個項目 = 一個頁面連結）
或者多個 button widget（size: xs, style: link/ghost，每個導覽項目一個）
└── button widget ← CTA 按鈕
徽章 / 狀態藥丸 / 標籤
選項 A：button widget
text: "FULL-TIME", size: "xs", border_radius: 100px
button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
無連結 href（或連結至 "#"）
選項 B：alert widget
type: "success" / "info" / "warning"
alert_title: "WordPress Developer"
（若為專業版，可使用自訂 CSS 設定樣式）
職業時間軸 / 工作經歷條目
結構：內部容器（column, border-left: 2px solid accent）
└── 內部容器（row, gap: 8px） ← 日期 + 狀態列
└── text-editor widget ← "OCT 2024 — PRESENT"
└── button widget（xs, pill） ← "FULL-TIME" 徽章
└── heading widget（h3/h4） ← "Senior WordPress & Webflow Developer"
└── text-editor widget ← "InVitro Capital — Cairo, Egypt"
└── text-editor widget ← 描述段落
└── 內部容器（row, wrap） ← 技術標籤列
└── button widget（xs, ghost） ← "WordPress"
└── button widget（xs, ghost） ← "Webflow"
└── button widget（xs, ghost） ← "CMS"
聯絡資訊面板
結構：設定樣式的容器（background: #141628, border-radius: 12px, padding: 32px）
└── 每行資訊一個內部容器（row）：
└── text-editor widget ← 標籤 "LOCATION"（小字、淡化）
└── text-editor widget ← 值 "Cairo, Egypt"
└── 每個可點擊行一個內部容器（row）：
└── text-editor widget ← 標籤 "EMAIL"
└── button widget ← "[email protected]"（style: link, href: mailto:）
└── alert widget ← "Currently available" 狀態
└── button widget ← "Book a discovery call" CTA
技能深度 / 進度條
結構：容器（column）
└── text-editor widget ← "SKILL DEPTH" 標題
└── 每個技能：內部容器（row）
└── text-editor ← "WP" 標籤
└── progress widget ← percent: 95, type: line, bar_color: accent
└── text-editor ← "Expert" 標籤
定價卡片
結構：內部容器（column, background: #141628, border-radius: 12px, padding: 40px）
└── text-editor widget ← 方案層級標籤
└── heading widget（h2） ← "$99" 價格
└── text-editor widget ← "/month" 期間
└── divider widget
└── icon-list widget ← 功能清單（確認圖示）
└── button widget ← "Get Started" CTA（寬度滿版）
見證卡片
使用 testimonial widget（原生處理所有內容）：
image: 頭像 URL, name: "Client Name", title: "CEO, Company"
content: "引述文字"
或自訂佈局：
內部容器（column）
└── icon-list widget（1 個項目，星號圖示 × 5） ← 星級評分
└── text-editor widget ← 引述文字
└── 內部容器（row）
└── image widget（border-radius: 50%） ← 頭像
└── 內部容器（column）
└── heading widget（h5） ← 姓名
└── text-editor widget ← 頭銜/公司
Logo 雲 / 合作夥伴 Logo
使用 image-carousel widget：
slides: [logo1, logo2, logo3, logo4, logo5]
slides_to_show: 5, autoplay: yes, navigation: none
image_size: medium
頁尾欄位結構
欄位 1（品牌欄）：
└── image widget ← Logo
└── text-editor widget ← 標語
└── social-icons widget ← LinkedIn, GitHub, Twitter
欄位 2-4（連結欄）：
└── heading widget（h5） ← "Quick Links" / "Services" / "Contact"
└── icon-list widget ← 連結（icon: none 或 arrow，每個連結一個項目）
底部列：
└── 容器（row, space-between）
└── text-editor ← "© 2025 Abanoub Khalil"
└── text-editor ← 隱私 / 條款連結（行內 <a> 標籤）
程式碼管線
步驟 1 — 盤點
對於每個元素：命名、宣告其原生 widget、說明原因。若曾考慮使用 html widget，請先執行僅限 JS 的自我檢查。
步驟 2 — Widget 分配
html widget 中絕無視覺內容。套用上方完整 Widget 對照表。
步驟 3 — CSS 提取
將 CSS 對應至 Elementor 設定（references/style-map.md）。CSS 變數 → 解析為十六進位。
步驟 4 — JSON 建構
逐區段建構。邊寫邊驗證。
步驟 5 — 輸出
每個頁面一個 .json。無註解。所有 ID 為唯一的 8 字元十六進位值。
視覺管線
階段 1 — 盤點（從上到下）
導覽列：
Logo：[位置 / 類型：image 或 text]
導覽連結：[逐一列出] → icon-list 項目或 button widget
CTA 按鈕：[文字 / 顏色十六進位]
背景：[#HEX 或 transparent]
英雄區塊：
背景：[純色 #HEX / 漸層 #X→#Y Ndeg / 圖片疊層 / 影片]
佈局：[置中 / 文字左+圖片右]
最小高度：[100vh / 固定 px]
元素：
[徽章？] → alert widget 或 button widget（xs, pill）
[h1] → heading widget
[h3/副標題] → heading widget
[描述] → text-editor widget
[CTA 按鈕] → button widgets
[圖片] → image widget
區段 N：
用途：[功能 / 統計 / 關於 / 時間軸 / 聯絡面板 / 見證 / CTA]
佈局：[1 欄 / 2 欄 / 3 欄 / 4 欄]
背景：[#HEX]
每欄：為每個元素列出原生 widget
頁尾：[N 欄，每欄內容]
階段 2 — 顏色
提取十六進位值：主色、次要色、強調色、標題文字、內文、淡化文字、淺色背景、深色背景、卡片背景、邊框。
→ 完整對照表請參閱 references/visual-analysis.md
階段 3 — 字體排版
標題字型、內文字型、標籤字型 — 系列、粗細、桌機/平板/手機尺寸。
階段 4 — 佈局對應
使用 references/section-patterns.md 中的容器網格。
階段 5 — Widget 分配
套用完整 Widget 對照表。html widget 中絕無視覺內容。
階段 6 — 間距
區段內邊距：標準 60-80px，英雄區塊 100-120px。卡片內邊距：24-32px。間距：20-30px。
階段 7 — 分析摘要 + JSON
## 🔍 視覺分析 — [頁面]
**偵測到的頁面：**[清單]
**風格：**[深色/淺色/粗獷/極簡]
| 標記 | 值 |
|---|---|
| 主色 | #______ |
| 強調色 | #______ |
| 標題文字 | #______ |
| 內文 | #______ |
| 背景 | #______ |
| 標題字型 | Inter 700 |
**Widget 對應：**
1. 導覽列 → image + icon-list + button
2. 英雄區塊 → alert（徽章）+ heading + text-editor + button + image
3. 統計 → N× counter widgets
4. 時間軸 → 每個條目 N× [text-editor + button（徽章）+ heading + text-editor + button 列]
5. 聯絡面板 → 設定樣式的容器 + text-editor 列 + button 連結 + alert + button
6. 頁尾 → image + text-editor + social-icons + icon-list 欄
**使用的 html widgets：**[僅列出 <script> JS 用途。若無："無。"]
**假設：**[列出所有近似值]
**⚠️ 匯入後：** 取代佔位圖片、更新導覽連結
PDF 管線
單頁 PDF → 視覺管線。多頁 → 每頁一個模板。可選取文字 → 提取確切文案。
描述管線
詢問頁面類型。套用 Widget 對照表。使用預設值：主色 #1A1A2E，強調色 #005AFF，字型 Inter。
編輯管線
解析 → 定位 → 修改 → 重新輸出完整有效 JSON → 摘要。
核心結構
區段容器
{
"id": "a1b2c3d4",
"elType": "container",
"isInner": false,
"settings": {
"content_width": "full",
"flex_direction": "column",
"flex_align_items": "center",
"flex_justify_content": "flex-start",
"flex_gap": { "unit": "px", "column": "30", "row": "30", "isLinked": true },
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false },
"padding_tablet": { "unit": "px", "top": "50", "right": "30", "bottom": "50", "left": "30", "isLinked": false },
"padding_mobile": { "unit": "px", "top": "40", "right": "20", "bottom": "40", "left": "20", "isLinked": false },
"background_background": "classic",
"background_color": "#FFFFFF"
},
"elements": []
}
內部容器（欄位）
{
"id": "b2c3d4e5",
"elType": "container",
"isInner": true,
"settings": {
"width": { "unit": "%", "size": 50 },
"width_tablet": { "unit": "%", "size": 100 },
"width_mobile": { "unit": "%", "size": 100 },
"flex_direction": "column",
"flex_align_items": "flex-start",
"padding": { "unit": "px", "top": "20", "right": "20", "bottom": "20", "left": "20", "isLinked": true }
},
"elements": []
}
Widget
{
"id": "c3d4e5f6",
"elType": "widget",
"widgetType": "heading",
"isInner": false,
"settings": {},
"elements": []
}
CSS → Elementor（快速參考）
完整表格請參閱 references/style-map.md。
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false }
"_padding": { "unit": "px", "top": "0", "right": "0", "bottom": "20", "left": "0", "isLinked": false }
"_margin": { "unit": "px", "top": "0", "right": "auto", "bottom": "30", "left": "auto", "isLinked": false }
"typography_typography": "custom", "typography_font_family": "Inter",
"typography_font_size": { "unit": "px", "size": 48 },
"typography_font_size_tablet": { "unit": "px", "size": 36 },
"typography_font_size_mobile": { "unit": "px", "size": 24 },
"typography_font_weight": "700",
"typography_line_height": { "unit": "em", "size": 1.3 },
"typography_letter_spacing": { "unit": "px", "size": -0.5 }
"background_background": "gradient", "background_gradient_type": "linear",
"background_color": "#005AFF", "background_color_b": "#0040CC",
"background_gradient_angle": { "unit": "deg", "size": 135 }
"border_border": "solid",
"border_width": { "unit": "px", "top": "1", "right": "1", "bottom": "1", "left": "1", "isLinked": true },
"border_color": "#E5E7EB",
"border_radius": { "unit": "px", "top": "12", "right": "12", "bottom": "12", "left": "12", "isLinked": true }
"box_shadow_box_shadow_type": "yes",
"box_shadow_box_shadow": { "horizontal": 0, "vertical": 4, "blur": 24, "spread": 0, "color": "rgba(0,0,0,0.08)" }
…
[為翻譯而截斷]