Webflow 的乾淨 HTML
Webflow 是一個深受設計師歡迎的視覺化網站建構器。其富文本元素支援 HTML 內容，但來自 Google Docs 的 inline styles 可能會與 Webflow 基於 class 的樣式系統產生衝突。使用 Publish Helper 清理您的 HTML，以實現與 Webflow 的無縫整合。
Webflow 的 HTML 問題
Webflow 的富文本元素會將您網站的字型排版 class 套用到內容上。當貼上的 HTML 帶有 inline styles 時，這些樣式會覆蓋 Webflow 的 class，導致字型、大小和顏色偏離您的設計系統。Google Docs 的 CSS class 在 Webflow 中毫無意義，會產生無效的 class 引用。
如何將乾淨的 HTML 貼到 Webflow
- 1.
從 Google Docs、Word 或任何編輯器複製您的內容
- 2.
貼到 Publish Helper 中並點擊「清理 HTML」
- 3.
在 Webflow 中，選擇您的富文本元素並點擊「編輯」
- 4.
開啟富文本的嵌入程式碼檢視
- 5.
從 Publish Helper 貼上乾淨的 HTML
Webflow 使用技巧
- 務必移除 inline styles — 它們會覆蓋 Webflow 精心設計的 class 樣式
- Webflow 富文本原生支援 H1-H6、段落、列表、引用和連結
- 對於自訂版面，使用 Webflow 的嵌入元素搭配 Publish Helper 的乾淨 HTML
- 在 Publish Helper 中啟用標題轉換以匹配 Webflow 的標題層級
常見問題
為什麼 Google Docs 的樣式會破壞我的 Webflow 設計？
+
Webflow 使用 CSS class 來設定字型排版。Google Docs 的 inline styles（font-size、font-family、color）具有比 class 更高的 CSS 優先級，因此會覆蓋您的 Webflow 設計。Publish Helper 可移除這些 inline styles。
可以使用 Webflow 的富文本元素嗎？
+
是的，富文本元素是 Webflow 部落格內容的推薦方式。先用 Publish Helper 清理 HTML，以確保內容繼承您的 Webflow 字型排版樣式。
Webflow CMS 集合呢？
+
在 CMS 集合的富文本欄位中添加內容時，使用相同的工作流程：在 Publish Helper 中清理，貼到 CMS 編輯器的富文本欄位中。
Last updated: March 2026