Cách dùng HTML & CSS sang Webflow
- Dán HTML ở bên trái và CSS tương ứng ở bên phải. Bạn có thể lấy từ file export code, template, đầu ra Tailwind đã biên dịch thành CSS, hoặc code do ChatGPT hay Claude viết. Các thẻ
<style>nằm trong HTML sẽ được nhận diện tự động. - Xem bản xem trước và báo cáo chuyển đổi. Báo cáo cho biết đã tạo bao nhiêu element, class, combo class và style breakpoint, cũng như những CSS nào không thể ánh xạ.
- Chọn Native elements (Div Block, Heading, Paragraph, Link, Image, List…) hoặc Custom Elements (giữ nguyên từng thẻ như đã viết), rồi nhấn Copy to Webflow.
- Trong Webflow Designer, chọn một element cha và nhấn Ctrl/⌘+V. Class sẽ xuất hiện trong Style Manager, còn style tablet và mobile nằm đúng ở breakpoint của chúng.
Vì sao nên chuyển HTML sang element Webflow gốc?
Cách nhanh nhất để đưa code vào Webflow là dùng Code Embed. Nhưng embed giống như một hộp đen: khách hàng không thể chỉnh sửa nội dung, bạn không thể đổi style trong panel Style, và nó không hiện trong Navigator. Công cụ này biến markup của bạn thành đúng các element mà bạn sẽ tự dựng bằng tay: Div Block, Section, Heading, Paragraph, Text Link, Link Block, Image và List, mỗi element đều có class riêng. Văn bản vẫn có thể chỉnh sửa trong Designer và Editor, còn mọi style đều nằm trong Style Manager của Webflow.
CSS được ánh xạ sang class Webflow như thế nào
| CSS của bạn | Trong Webflow |
|---|---|
.card { … } | Class card với các style đó |
class="button is-secondary" + .button.is-secondary | Combo class button is-secondary |
@media (max-width: 991px) | Breakpoint tablet |
@media (max-width: 767px) / 479px | Mobile landscape / Mobile portrait |
.button:hover, :focus, :active | Trạng thái Hover, Focused và Pressed |
var(--brand) từ :root | Được thay bằng giá trị thực |
margin: 0 auto, gap, border, flex: 1 | Được tách thành các thuộc tính riêng của Webflow |
h1 { }, .card p { }, @keyframes | Giữ trong một Code Embed <style> nhỏ, vì class Webflow không thể biểu diễn bộ chọn theo thẻ hoặc theo quan hệ con cháu |
CSS theo hướng mobile-first cũng hoạt động tốt. Công cụ sẽ tính style thực tế cho từng breakpoint của Webflow (desktop, tablet, mobile landscape, mobile portrait) và chỉ ghi phần khác biệt, đúng theo cách Webflow kế thừa style từ desktop xuống.
Native elements và Custom Elements
Native elements mang lại trải nghiệm chỉnh sửa nội dung tốt nhất. Heading, paragraph và link hoạt động y hệt các element kéo từ panel Add. Những thẻ không có tương đương gốc trong Webflow, như button, form, input, video, svg nội tuyến và các thẻ tương tự, sẽ trở thành Custom Elements và giữ đầy đủ thuộc tính. Hãy chọn Custom Elements (exact tags) nếu bạn muốn giữ nguyên 1:1 mọi thẻ, ví dụ với markup ngữ nghĩa hoặc các component bạn sẽ không bao giờ chỉnh trong Editor. Icon SVG nội tuyến sẽ được xử lý tốt nhất bằng công cụ chuyên dụng SVG sang Webflow.
HTML thường đến từ đâu
- Section do AI tạo: nhờ ChatGPT hoặc Claude viết một section bằng HTML và CSS có tên class, rồi dán vào đây thay vì dựng lại thủ công.
- Template và UI kit: template HTML/CSS hoặc prototype đã export.
- Tailwind: các class tiện ích của Tailwind không chuyển sang class Webflow một cách trơn tru. Hãy biên dịch ra CSS thuần với tên class có ngữ nghĩa trước, hoặc dùng Công cụ tạo tên class để có cấu trúc gọn gàng.
- Website cũ: sao chép markup của một section cùng CSS để chuyển sang Webflow.
Mẹo để dán sạch sẽ
- Dùng một quy tắc đặt tên trước khi dán, ví dụ Client-First. Công cụ kiểm tra lỗi chính tả tên class sẽ tìm lỗi chính tả và class trùng lặp.
- Hình ảnh giữ nguyên URL. Sau đó hãy tải lên panel Assets của Webflow và thay nguồn, để ảnh được phục vụ từ CDN của Webflow với kích thước responsive.
- Nếu trong dự án đã có class trùng tên, Webflow sẽ giữ cả hai và thêm số vào class vừa dán. Hãy đổi tên hoặc gộp chúng trong Style Manager.
- Chuyển khoảng cách cố định thành giá trị linh hoạt bằng Clamp Calculator, và đưa giá trị thiết kế từ Figma qua Figma CSS sang Webflow.
“Copy to Webflow” hoạt động như thế nào
Khi bạn sao chép element bên trong Designer, Webflow sẽ đặt lên clipboard một mô tả dạng JSON về các element và class của chúng. Công cụ tạo ra dữ liệu tương tự, gồm node, văn bản, class, combo class và các biến thể breakpoint, rồi đưa vào clipboard để Designer đọc được. Webflow không công bố chính thức định dạng này. Nếu một lần dán bị lỗi sau khi Webflow cập nhật, hãy dùng ô hiệu chỉnh trên trang SVG sang Webflow một lần. Các Custom Elements tạo ở đây dùng cùng định dạng đã được học đó.
Cũng được tìm dưới tên: html sang webflow, css sang webflow, chuyển code sang webflow, dán html vào webflow, webflow clipboard, xscpdata, công cụ chuyển html webflow, tailwind sang webflow.
Các công cụ dùng kèm tốt với HTML & CSS sang Webflow
- HTML sang Webflow Rich Text — Dán HTML lộn xộn từ website cũ, file xuất WordPress, Google Docs hoặc Word, rồi nhận lại mã ngữ nghĩa sạch mà phần tử Rich Text và import CMS của Webflow chấp nhận, không còn rác.
- Chuyển hướng WordPress sang Webflow — Chuyển website từ WordPress sang Webflow sẽ thay đổi hầu hết các URL: đường dẫn bài viết có ngày tháng, trang lưu trữ /category/, dấu gạch chéo cuối và slug của trang.
- Cầu nối Clipboard Webflow — Webflow đưa element lên clipboard theo một định dạng đặc biệt không đi qua được giữa các trình duyệt (Firefox → Chrome, Safari → Edge…).
- Trình chỉnh sửa Component Webflow — Di chuyển section và component giữa các dự án Webflow và chỉnh sửa ngay trên đường đi.
Câu hỏi thường gặp
Tôi có thể dán HTML trực tiếp vào Webflow không?
Công cụ có giữ được style responsive và hiệu ứng hover không?
max-width được ánh xạ sang breakpoint tablet (991px), mobile landscape (767px) và mobile portrait (479px) của Webflow. Còn :hover, :focus và :active sẽ trở thành trạng thái Hover, Focused và Pressed. CSS dạng min-width (mobile-first) được tính lại cho từng breakpoint.CSS không phải là bộ chọn class đơn giản thì xử lý thế nào?
h1), bộ chọn con cháu (.card p), @keyframes, @font-face và các quy tắc tương tự không thể lưu thành class Webflow. Mặc định, chúng sẽ được đặt trong một Code Embed nhỏ có thẻ <style> nằm trong section vừa dán, để thiết kế vẫn hiển thị đúng. Bỏ chọn tùy chọn nếu bạn muốn loại bỏ chúng.Công cụ có hoạt động với HTML của Tailwind hoặc Bootstrap không?
px-4 hoặc col-md-6) sẽ trở thành một class Webflow không có style, trừ khi bạn dán kèm CSS tương ứng. Với Webflow, nên dùng một số ít class có ngữ nghĩa. Hãy biên dịch thiết kế thành CSS thuần hoặc bắt đầu từ Công cụ tạo tên class.