Cách dùng Trình chỉnh sửa Component Webflow
- Trong Webflow Designer, chọn một section hoặc component rồi nhấn Ctrl/⌘+C. Nhấp vào vùng dán ở đây và nhấn Ctrl/⌘+V.
- Nhấp vào một phần tử trong Navigator để sửa văn bản, liên kết, ảnh, thẻ, ID, thuộc tính tùy chỉnh và class. Bản xem trước sẽ cập nhật ngay khi bạn gõ.
- Trong Classes, bạn có thể đổi tên class, sửa style, thêm tiền tố cho tất cả class, hoặc xóa các class không phần tử nào dùng. Undo sẽ hoàn tác từng bước.
- Để tái sử dụng, nhấp Suggest props (hoặc Make prop bên cạnh một trường), đặt tên cho các props rồi chọn Save to library. Lần sau, mở component từ Your library, điền props và sao chép.
- Nhấp Copy to Webflow, mở dự án kia, chọn vị trí cần dán và nhấn Ctrl/⌘+V. Download .json sẽ giữ một bản sao để dùng lại sau.
Sao chép component giữa các dự án Webflow — và chỉnh sửa ngay trên đường đi
Webflow vốn cho phép bạn sao chép phần tử từ một dự án rồi dán sang dự án khác trong cùng trình duyệt. Điều Webflow chưa làm được là cho phép bạn chỉnh sửa chúng ở giữa chừng: đổi tên các class bị trùng với style guide của dự án kia, thay nội dung, sửa liên kết trỏ về site cũ, hoặc bỏ những phần không cần. Trình chỉnh sửa này nằm ở giữa. Nó đọc dữ liệu clipboard của Webflow, hiển thị giống cách Designer làm, cho phép bạn sửa, rồi đưa lại lên clipboard đúng định dạng cũ.
- Navigator và thuộc tính — mọi phần tử cùng loại, class và văn bản. Sửa văn bản, URL liên kết và “mở ở tab mới”, nguồn ảnh và alt text, cấp heading và thẻ section, ID và thuộc tính tùy chỉnh, hoặc xóa một phần tử cùng toàn bộ nội dung bên trong.
- Class cùng style — đổi tên bất kỳ class nào, sửa style cơ bản, xem phần tử nào đang dùng và xóa những class không dùng đến. Style theo breakpoint và hover đi kèm với class.
- Tiền tố class — thêm
acme-(hoặc tiền tố bất kỳ) vào mọi class cùng lúc, để các class được dán không bị gộp hoặc nhầm lẫn với class đã có trong dự án kia. - Props và thư viện — đánh dấu văn bản, liên kết, ảnh, icon và công tắc ẩn/hiện thay đổi giữa các lần dùng thành props, lưu component vào thư viện trong trình duyệt này, và lần sau chỉ cần điền một biểu mẫu ngắn. Props được giữ lại trong file .json tải về; khi sao chép vào Webflow, chúng sẽ bị bỏ qua vì Webflow chỉ dán phần tử thường.
- Xem trước trực tiếp ở chiều rộng desktop, tablet và điện thoại, dựng từ style của class.
- Cảnh báo cho những phần không chuyển sang sạch sẽ: interactions, component đã bị unlink khi sao chép, CMS binding đã bị gỡ và ảnh nằm trong thư viện asset của dự án cũ.
- Không tải lên gì cả — dữ liệu ở lại trong trình duyệt của bạn. Component gần nhất được giữ trên thiết bị này để tải lại trang không làm mất.
Webflow đang mở ở trình duyệt khác? Webflow Clipboard Bridge giúp chuyển phần tử giữa các trình duyệt. Muốn tạo mới từ code? Dùng HTML & CSS sang Webflow hoặc SVG sang Webflow. Kiểm tra tên class với Class Name Typo Checker.
Cũng được tìm dưới tên: chỉnh sửa component webflow, sao chép component webflow sang dự án khác, webflow copy paste giữa các dự án, copy section webflow sang site khác, sửa clipboard webflow, tiền tố class webflow, đổi tên class webflow, thư viện component webflow.
Các công cụ dùng kèm tốt với Trình chỉnh sửa Component 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.
- Figma CSS sang Webflow — Biến đầu ra “Copy as CSS” của Figma thành các giá trị gọn gàng, bạn có thể nhập trực tiếp vào Style panel của Webflow.
- 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.
- 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.
Câu hỏi thường gặp
Làm sao để sao chép một section từ dự án Webflow này sang dự án khác?
Chọn section trong Designer và nhấn Ctrl/⌘+C, mở dự án kia trong cùng trình duyệt, chọn vị trí cần dán và nhấn Ctrl/⌘+V. Nếu muốn chỉnh sửa trước, hãy dán vào trình chỉnh sửa này, sửa xong rồi nhấn Copy to Webflow trước khi dán.
Điều gì xảy ra với các tên class đã tồn tại trong dự án kia?
Webflow khớp class được dán với class đang có theo tên, nên một class “button” được dán vào có thể lấy hoặc xung đột với style button của dự án kia. Hãy thêm tiền tố ở đây, hoặc đổi tên class, để tách chúng ra.
Interactions và component có được mang theo không?
Interactions có trong dữ liệu clipboard và thường được dán cùng phần tử, nhưng bạn nên kiểm tra lại trigger sau khi dán. Component sẽ bị unlink khi bạn sao chép nên được dán như phần tử thường; trình chỉnh sửa sẽ cho bạn biết có bao nhiêu component như vậy.
Ảnh có được mang theo không?
Ảnh nằm trong thư viện asset của dự án gốc được tham chiếu qua URL và thường được Webflow tải lại khi bạn dán. Nếu ảnh bị lỗi, hãy đổi nguồn ảnh ở đây thành một URL mà bạn kiểm soát.
Tôi có thể sao chép component cùng với thuộc tính sang dự án khác không?
Không thể qua clipboard: Webflow unlink component khi bạn sao chép và bỏ qua thuộc tính của nó. Ở đây bạn có thể dựng lại bằng devpack props: điền giá trị, sao chép, rồi chọn Create component trong dự án kia nếu muốn có lại component Webflow. Tính năng Libraries của Webflow chia sẻ component thật giữa các site trong cùng workspace, với các gói có hỗ trợ tính năng này.
Thư viện component của tôi được lưu ở đâu?
Trong local storage của trình duyệt này, chỉ trên thiết bị này. Dùng Download .json để giữ bản sao lưu hoặc chuyển component sang máy tính khác, rồi mở file ở đây để tiếp tục.
Đây có phải là công cụ chính thức của Webflow không?
Không. devpack là công cụ độc lập. Nó hoạt động dựa trên dữ liệu clipboard mà Designer tạo ra khi bạn sao chép phần tử, và Webflow có thể thay đổi định dạng này bất cứ lúc nào.
Tôi có thể cài Trình chỉnh sửa Component Webflow như một ứng dụng web và dùng khi không có mạng không?
Có. Trình chỉnh sửa Component Webflow là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.