Cách dùng HTML sang Webflow Rich Text
- Dán mã HTML, hoặc sao chép văn bản đã định dạng từ Google Docs, Word hay một trang web rồi dán trực tiếp vào ô (định dạng sẽ được giữ lại dưới dạng HTML).
- Công cụ sẽ xóa class, ID, inline style, data attribute và các thẻ bọc layout, đồng thời chuyển kiểu in đậm/in nghiêng thành
<strong>/<em>. - Nhấn Sao chép rich text rồi dán vào phần tử Rich Text hoặc trường CMS trong Webflow. Hoặc sao chép HTML sạch để import CSV.
Vì sao nên làm sạch HTML trước khi import vào Webflow?
Phần tử Rich Text của Webflow chỉ hỗ trợ một nhóm thẻ nhất định: tiêu đề, đoạn văn, liên kết, in đậm, in nghiêng, danh sách, trích dẫn, hình ảnh, figure và xuống dòng. Nội dung chuyển từ WordPress hoặc CMS khác, hay được sao chép từ Google Docs và Word, thường bị bọc trong <div> và <span> kèm class, inline style (font-family, color, font-size), thuộc tính data-* và các đoạn văn trống. Nếu import nguyên như vậy, phần rác này sẽ ghi đè kiểu chữ Webflow của bạn, làm khoảng cách giữa các đoạn không đều và khiến CMS nặng thêm.
Công cụ làm sạch những gì?
- Xóa mọi class, id, style và data attribute (giữ lại
href/target/relở liên kết vàsrc/altở hình ảnh). - Gỡ bỏ các lớp bọc
div,span,section,fontvà tương tự; chuyển các div chỉ chứa văn bản thành đoạn văn. - Chuyển kiểu định dạng từ Google Docs/Word (
font-weight:700,font-style:italic) thành<strong>và<em>có ý nghĩa ngữ nghĩa. - Xóa script, iframe, form và SVG; tùy chọn chuyển H1 thành H2 (tiêu đề trang thường là H1) và xóa đoạn văn trống cùng
.
Di chuyển hàng loạt
Với cả một blog, hãy làm sạch phần nội dung của từng bài rồi import qua tính năng CSV hoặc API của CMS Webflow. Cả hai đều chấp nhận HTML cho trường Rich Text. Nếu bạn đang viết nội dung mới bằng Markdown, hãy dùng Markdown sang Webflow Rich Text.
Cũng được tìm dưới tên: webflow rich text, làm sạch html, xóa class html, xóa inline style, import cms webflow, google docs sang webflow, wordpress sang webflow, chuyển html sang webflow.
Các công cụ dùng kèm tốt với HTML sang Webflow Rich Text
- Chuyển HTML sang Markdown — Dán HTML — hoặc sao chép trực tiếp văn bản rich text từ trang web, Google Doc hay email — rồi nhận Markdown gọn gàng để đưa vào README, wiki hoặc static site.
- Định dạng HTML — Dán mã HTML đã nén hoặc lộn xộn và nhận lại HTML được thụt lề rõ ràng, nhất quán — bao gồm cả các khối <style> và <script> nhúng bên trong.
- SVG sang Webflow — Dán SVG từ Figma và sao chép sang Webflow dưới dạng Custom Elements thật.
- Sửa dấu ngoặc kép thông minh — Code copy từ Slack, Notion, Word hay blog mà không chạy được?