devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Webflow Clipboard Bridge — Salin Elemen Antar Browser

Webflow menyimpan elemen di clipboard dengan format khusus yang tidak bisa berpindah antar browser (Firefox → Chrome, Safari → Edge…). Buka halaman ini di browser tempat Designer berjalan, tempel di sini, lalu salin lagi — paste-nya pun berhasil.

Diperbarui
Klik di sini lalu tekan Ctrl/⌘+V
Tempel elemen yang disalin dari Webflow Designer atau dari tombol “Copy to Webflow” devpack — dari browser mana pun.
Lalu pilih elemen di Designer (atau Navigator) dan tekan Ctrl/⌘+V.
Clipboard JSON (lanjutan — ubah nama class atau teks, lalu salin)

Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.

Apakah alat ini membantu?0.0 0 penilaian

devpack.app adalah utilitas independen dan tidak berafiliasi dengan, disponsori oleh, atau didukung oleh Webflow, Inc. maupun Figma, Inc. Webflow dan Figma adalah merek dagang dari pemiliknya masing-masing.

Ubah HTML dan CSS jadi elemen Webflow asli dengan classCombo class, breakpoint, dan hover state, lalu tempel langsung ke Designer.HTML & CSS ke Webflow →

Cara menggunakan Webflow Clipboard Bridge

  1. Salin elemennya: di Webflow Designer (pilih elemen lalu tekan Ctrl/⌘+C) atau lewat tombol “Copy to Webflow” dari devpack.
  2. Buka halaman ini di browser tempat Webflow Designer terbuka, klik area tempel, lalu tekan Ctrl/⌘+V.
  3. Periksa ringkasannya — elemen, class, dan aset yang ditemukan — lalu edit JSON jika perlu.
  4. Klik Copy to Webflow, lalu tempel di Designer.

Kenapa salin antar browser gagal

Saat kamu menyalin elemen, Webflow (dan alat seperti devpack) menaruhnya di clipboard sebagai application/json dengan format @webflow/XscpData. Antar browser, hanya teks biasa dan HTML yang dibagikan secara standar. Tipe khusus seperti ini disimpan dalam format pribadi milik masing-masing browser. Akibatnya, salinan dari Firefox masuk ke Chrome sebagai teks biasa, dan Designer mengabaikannya. Hal yang sama bisa terjadi antara Safari, Edge, Arc, Brave, atau profil Chrome yang berbeda pada beberapa pengaturan.

Meski begitu, salinan teks biasa tersebut tetap menyimpan semua datanya. Halaman ini membacanya, memeriksanya, lalu menuliskannya kembali ke clipboard sebagai application/json di browser yang sedang kamu pakai, dan inilah format yang diharapkan Designer.

Yang perlu kamu tahu

  • Browser sama, clipboard sama: jika devpack dan Webflow terbuka di browser yang sama, kamu tidak perlu bridge ini. Langsung tempel saja di Designer.
  • Antar project Webflow: menyalin elemen antar situs juga bisa dilakukan dalam satu browser. Class akan dibuat ulang, dan gambar akan dihubungkan kembali ke aset dari situs asal.
  • Simpan komponen untuk nanti: unduh JSON-nya dan buka kembali kapan saja. Ini seperti pustaka cuplikan ringan untuk bagian-bagian yang sering kamu pakai ulang.
  • Tidak ada yang diunggah: data clipboard tetap tersimpan di browser kamu.

Buat elemen Webflow dengan HTML & CSS to Webflow, SVG to Webflow, atau HubSpot Form Styler.

Juga dicari sebagai: webflow paste tidak berfungsi, webflow copy antar browser, webflow clipboard, xscpdata, webflow copy paste chrome firefox, webflow clipboard json, paste ke webflow, webflow copy elemen antar project.

Tool yang cocok dipakai bersama Webflow Clipboard Bridge

  • Generator Nama Class — Jelaskan sebuah section dengan kata-kata sederhana, misalnya “hero dengan tagline, heading, dua tombol, dan gambar di sebelah kanan”.
  • Pengecek Typo Nama Class — Tempel HTML atau masukkan URL untuk memeriksa setiap nama class: tangkap typo seperti hero_heding, duplikat dengan ejaan berbeda (hero-title vs hero_title), class Webflow dengan nama otomatis seperti div-block-12, dan pelanggaran aturan Client-First atau BEM.
  • Markdown ke Webflow Rich Text — Tempel Markdown, cek pratinjaunya, lalu salin sebagai rich text berformat.
  • Redirect WordPress ke Webflow — Memindahkan situs dari WordPress ke Webflow hampir pasti mengubah setiap URL: path blog berbasis tanggal, arsip /category/, trailing slash, dan slug halaman.

Pertanyaan yang sering diajukan

Kenapa paste ke Webflow tidak melakukan apa-apa?
Biasanya salinannya berasal dari browser yang berbeda. Data elemen Webflow hanya bertahan saat copy-paste di dalam satu browser yang sama. Tempel ke halaman ini di browser tempat Designer dibuka, lalu salin lagi.
Apakah ini bisa dipakai untuk elemen yang disalin langsung dari Webflow Designer?
Bisa. Salin elemen di Designer pada satu browser, tempel di halaman ini pada browser lain, lalu salin dan tempel ke Designer di browser tersebut.
Bisakah saya mengedit elemen yang sudah disalin?
Bisa. Buka “Clipboard JSON”, ubah teks atau nama class, lalu klik Copy to Webflow. Untuk editor visual dengan Navigator, pratinjau langsung, dan prefix class, gunakan Webflow Component Editor.
Apakah data saya dikirim ke suatu tempat?
Tidak. Membaca, memeriksa, dan menyalin semuanya terjadi sepenuhnya di browser kamu.
Bisakah saya memasang Webflow Clipboard Bridge sebagai aplikasi web dan memakainya offline?
Bisa. Webflow Clipboard Bridge adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait

localHTML & CSS ke WebflowTempel HTML dan CSS-nya, klik Copy to Webflow, lalu tempel di Designer. Kamu langsung mendapatkan Div…localSVG ke WebflowPaste SVG dari Figma dan salin ke Webflow sebagai Custom Elements asli. Setiap <svg>, <path> dan <g> jadi…localStyler Form HubSpotRancang form HubSpot Anda dengan pratinjau langsung — input, label, baris dua kolom, checkbox, pesan…localGenerator Nama ClassJelaskan sebuah section dengan kata-kata sederhana, misalnya “hero dengan tagline, heading, dua tombol,…localPengecek Typo Nama ClassTempel HTML atau masukkan URL untuk memeriksa setiap nama class: tangkap typo seperti hero_heding,…localMarkdown ke Webflow Rich TextTempel Markdown, cek pratinjaunya, lalu salin sebagai rich text berformat. Judul, daftar, tautan, dan teks…