Dán SVG & HTML vào Webflow — Tiện ích miễn phí

Sao chép SVG, HTML hoặc một phần của bất kỳ trang web nào, nhấn Ctrl+V (⌘+V trên Mac) trong Webflow Designer, và nội dung sẽ được chuyển thành phần tử Webflow gốc. Miễn phí, không cần tài khoản, mọi thứ chạy trên thiết bị của bạn.

Thêm vào ChromeThêm vào Firefox

Edge, Brave, Opera, Vivaldi và Arc cài đặt từ Chrome Web Store.

SVG thành phần tử thậtIcon từ Figma (“Copy as SVG”), trang icon, mã nguồn hoặc tệp .svg sẽ thành phần tử svg và path Custom Element mà bạn có thể tùy chỉnh kiểu, hoặc Code Embed.
HTML thành phần tử gốcGiữ nguyên class, và CSS trong <style> sẽ thành class Webflow với breakpoint, trạng thái hover và combo class.
Bất kỳ trang web nàoNội dung trang đã sao chép sẽ thành Heading, Paragraph, List, Link và Image, không kèm kiểu dáng của trang gốc.
Thư viện componentLưu các phần tử bạn sao chép trong Designer, rồi dán lại với văn bản, liên kết và hình ảnh mới.
Riêng tưKhông gửi yêu cầu mạng và không có phân tích dữ liệu. Quyền duy nhất là lưu trữ.
Miễn phíKhông cần tài khoản, không giới hạn, không quảng cáo.

Cách sử dụng

  1. Thêm tiện ích vào trình duyệt.
  2. Sao chép một SVG, đoạn mã HTML hoặc một phần của trang web.
  3. Trong Webflow Designer, chọn vị trí cần đặt và nhấn Ctrl+V (⌘+V trên Mac).

Nội dung dán vào ô văn bản và trình soạn mã, cũng như phần tử Webflow thật và văn bản thuần túy, sẽ được giữ nguyên, nên thao tác sao chép dán thông thường vẫn hoạt động bình thường.

Thư viện component

Sao chép phần tử trong Designer rồi nhấn Save to devpack, hoặc nhấn Alt+Shift+L để mở thư viện. Chọn một component, điền văn bản, liên kết, hình ảnh và icon, rồi nhấn Paste into Designer. Bạn chọn phần nào có thể chỉnh sửa trong Webflow Component Editor, và cả hai đều hiển thị cùng một thư viện.

Cài đặt

  • Bật hoặc tắt tiện ích.
  • Chọn nội dung cần chuyển đổi: SVG, mã HTML, nội dung trang web.
  • Với SVG: phần tử gốc hoặc Code Embed, tên class, kích thước và currentColor.
  • Hiệu chỉnh: dán một Custom Element đã sao chép vào phần cài đặt để tiện ích học định dạng hiện tại của Webflow.

Trình duyệt

Trình duyệtCài đặt từ
Chrome, Microsoft Edge, Brave, Opera, Vivaldi, ArcChrome Web Store
FirefoxFirefox Add-ons (nhấn Ctrl/⌘+V hai lần: lần dán đầu tiên sẽ đưa các phần tử đã chuyển đổi vào clipboard)

Không cần cài đặt

Cùng bộ chuyển đổi này cũng chạy trên devpack.app: SVG to Webflow, HTML & CSS to Webflow và Webflow Clipboard Bridge. Chuyển đổi, nhấn Copy và dán trong Designer. Xem tất cả công cụ Webflow.

Quyền riêng tư

Tiện ích chỉ chạy trên các trang Webflow Designer và devpack.app. Khi dán trong Designer, tiện ích đọc clipboard để kiểm tra SVG hoặc HTML, chuyển đổi trên thiết bị của bạn, và không bao giờ gửi clipboard, thiết kế hay hoạt động duyệt web của bạn đi nơi nào khác. Chi tiết xem trong chính sách quyền riêng tư.

Câu hỏi thường gặp

Tiện ích có miễn phí không? Có. Tiện ích miễn phí, không cần tài khoản và không có giới hạn.

Tại sao trên Firefox phải dán hai lần? Firefox không cho phép tiện ích đưa trực tiếp nội dung đã chuyển đổi vào trang. Lần Ctrl+V đầu tiên sẽ đưa các phần tử Webflow đã chuyển đổi vào clipboard; lần thứ hai mới dán chúng vào.

Tôi có thể dùng mà không cài đặt gì không? Có: dùng công cụ SVG to Webflow hoặc HTML & CSS to Webflow, nhấn Copy, rồi dán trong Designer.