Cách dùng Cầu nối Clipboard Webflow
- Copy element: trong Webflow Designer (chọn element rồi nhấn Ctrl/⌘+C) hoặc dùng nút “Copy to Webflow” của devpack.
- Mở trang này trong trình duyệt đang mở Webflow Designer, nhấp vào ô dán rồi nhấn Ctrl/⌘+V.
- Kiểm tra phần tóm tắt — số element, class và asset tìm thấy — và nếu cần, chỉnh sửa JSON.
- Nhấn Copy to Webflow, sau đó dán vào Designer.
Vì sao copy giữa các trình duyệt bị lỗi
Khi bạn copy element, Webflow (và các công cụ như devpack) đưa chúng lên clipboard dưới dạng application/json theo định dạng @webflow/XscpData của Webflow. Chỉ văn bản thuần và HTML được chia sẻ giữa các trình duyệt theo chuẩn chung — các kiểu dữ liệu tùy chỉnh như thế này được lưu theo định dạng riêng của từng trình duyệt. Vì vậy, dữ liệu copy từ Firefox khi sang Chrome sẽ chỉ còn là văn bản thuần, và Designer sẽ bỏ qua. Điều tương tự cũng xảy ra giữa Safari, Edge, Arc, Brave và các profile Chrome trong một số cấu hình.
Tuy vậy, bản sao dạng văn bản thuần vẫn chứa đầy đủ mọi thông tin. Trang này sẽ đọc, kiểm tra và ghi lại dữ liệu lên clipboard dưới dạng application/json trong trình duyệt hiện tại — đúng định dạng mà Designer cần.
Một số điều cần biết
- Cùng trình duyệt, cùng clipboard: nếu devpack và Webflow đang mở trong cùng một trình duyệt, bạn không cần cầu nối này — cứ dán trực tiếp vào Designer.
- Giữa các project Webflow: copy element giữa các site cũng hoạt động trong một trình duyệt; class sẽ được tạo lại, còn hình ảnh được liên kết lại từ asset của site gốc.
- Lưu component để dùng sau: tải JSON về và mở lại bất cứ lúc nào — một thư viện snippet nhẹ cho các section bạn hay tái sử dụng.
- Không tải lên gì cả: dữ liệu clipboard chỉ nằm trong trình duyệt của bạn.
Tạo element Webflow với HTML & CSS to Webflow, SVG to Webflow hoặc HubSpot Form Styler.
Cũng được tìm dưới tên: webflow paste không hoạt động, copy webflow giữa các trình duyệt, webflow clipboard, xscpdata, webflow copy paste chrome firefox, webflow clipboard json, dán vào webflow, copy element webflow giữa các project.
Các công cụ dùng kèm tốt với Cầu nối Clipboard Webflow
- Tạo tên class Webflow — Mô tả section bằng lời thường, ví dụ “hero có tagline, tiêu đề, hai nút và ảnh bên phải”, rồi nhận cấu trúc class nhất quán theo Client-First, BEM hoặc kebab-case đơn giản, sẵn sàng dán vào Webflow dưới dạng element.
- Kiểm tra lỗi tên class — Dán HTML hoặc nhập URL để kiểm tra mọi tên class: bắt lỗi chính tả như hero_heding, class viết khác nhau nhưng cùng ý (hero-title và hero_title), class Webflow tự đặt tên như div-block-12, và các lỗi vi phạm quy tắc Client-First hoặc BEM.
- Markdown sang Webflow Rich Text — Dán Markdown, xem trước và sao chép dưới dạng rich text có định dạng.
- 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.