Sponsored by Designkit Free Background Remover - Designkit 每天提供最多 100 張圖片的免費 AI 去背服務，並支援批次處理、自訂背景和調整圖片尺寸。

AI 廣告資料庫

Openclaw Skills

網站區塊轉 Elementor 範本

適用於 Openclaw 的網站區塊轉 Elementor 範本

將線上網站的一個區塊轉換為樣式完整、可匯入 WordPress 的 Elementor 範本。

soraiabarroso

v1.0.0

Oct 15, 2026

安裝

基本資訊

Skill.md

安裝與下載

1. ClawHub CLI

從來源直接安裝技能的最快方式。


                  npx clawhub@latest install elementor-section

2. 手動安裝

將技能資料夾複製到以下位置之一

全域模式

~/.openclaw/skills/

工作區

<project>/skills/

優先級：工作區 > 本地 > 內建

3. 提示詞安裝

將此提示詞複製到 OpenClaw 即可自動安裝。


                  請幫我使用 Clawhub 安裝 elementor-section。如果尚未安裝 Clawhub，請先安裝（npm i -g clawhub）。

想要直接下載？

取得包含原生技能檔案的ZIP壓縮檔。

什麼是網站區塊轉 Elementor 範本？

網站區塊轉 Elementor 範本會使用 MiroMiro 檢查線上頁面、解析其實際樣式（包括色彩、字型、間距、回應式行為和懸停效果），並回傳完整的 Elementor 範本 JSON 檔案。透過 Openclaw Skills，使用者可以在自己的 WordPress 網站上重建主視覺區、定價表、頁首、頁尾、功能清單、客戶推薦、常見問題或 CTA。

產生的區塊會以一個附有樣式的 HTML 區塊交付，並附上範圍限定的 CSS，而非由一組原生 Elementor 小工具組成。將未修改的 JSON 匯入 WordPress，接著從 Elementor 的範本庫插入。除非內容屬於你，否則請在發布前替換原網站的文字、標誌和圖片。

網站區塊轉 Elementor 範本應用場景

在使用 Elementor 的 WordPress 頁面中重建線上網站的主視覺區。
根據參考 URL 建立定價表、功能區塊、客戶推薦、常見問題或 CTA。
將網站頁首或頁尾以可匯入範本的形式加入 WordPress 設計。
根據指定名稱的區塊產生 Elementor JSON 範本，無須手動複製樣式。
若來源網站提供深色主題，可要求產生深色主題版本。
在非 WordPress 專案中使用 MiroMiro 的其他輸出框架——Tailwind、HTML、JSX 或 Vue。

網站區塊轉 Elementor 範本運作原理

提供線上頁面 URL；如適用，也請提供區塊名稱：hero、header、footer、pricing、features、testimonials、faq 或 cta。省略 section 時會要求擷取主視覺區。
使用 framework: "elementor" 呼叫已連線的 MiroMiro extract_code 工具，或使用使用者的 MIROMIRO_API_KEY 呼叫 REST API。
檢查回應。完整範本位於 code；css 刻意設為 null，因為樣式已嵌入範本。sections 欄位可提供其他頁面區塊可直接使用的選取器——請勿猜測 CSS 選取器。
如果結果內容較少或包含 hint，請使用相同 URL 重試一次並設定 render=true，讓 JavaScript 得以執行。這會額外消耗 5 點額度；初次要求時不要啟用渲染。
將完整且未修改的 code 值儲存為 <site>-<section>.json 並提供給使用者。經過編輯或縮短的 JSON 可能無法匯入。
在 WordPress 中，透過 範本 → 已儲存範本 → 匯入範本 匯入檔案；接著在 Elementor 中開啟頁面，選擇 新增範本 → 我的範本，並插入該區塊。
發布前，請將來源網站的文案、標誌和圖片替換為已獲授權的內容。

網站區塊轉 Elementor 範本設定指南

此技能需要存取 MiroMiro，可透過已連線的工具或其 REST API 使用。如果使用者沒有 API 金鑰，請引導他們前往 https://miromiro.app/api/onboarding；該服務每月提供 300 點額度，無須信用卡。向使用者索取其金鑰；切勿自行編造。每次擷取會消耗 25 點額度，而 JavaScript 渲染重試會額外消耗 5 點額度。

REST API 範例：

curl -s "https:\/\/miromiro.app\/api\/v1\/code?url=stripe.com&section=pricing&framework=elementor" \
  -H "Authorization: Bearer $MIROMIRO_API_KEY"

若要擷取主視覺區，請省略 section 參數。若來源網站提供深色版本且要提出要求，請在工具要求中使用 theme: "dark"。回應中的 theme 欄位會指出回傳的版本。擷取完成後，將完整的 code 值儲存為 .json 檔案，並透過 範本 → 已儲存範本 → 匯入範本 匯入 WordPress。在 Elementor 中，透過 新增範本 → 我的範本 插入。

網站區塊轉 Elementor 範本資料結構與分類體系

擷取回應會提供範本及相關中繼資料：

欄位或值	用途
`code`	完整的 Elementor 範本 JSON。交付和儲存時不得編輯或省略內容。
`css`	依設計為 `null`；樣式已包含在範本中。
`sections`	可用的頁面區塊，包括後續呼叫可直接使用的選取器。
`theme`	指出回傳的主題版本，例如在提出要求且可用時回傳的深色版本。
`section`	選填區塊名稱：`hero`、`header`、`footer`、`pricing`、`features`、`testimonials`、`faq` 或 `cta`。
輸出檔名	儲存為 `<site>-<section>.json`。