Cara menggunakan Editor Komponen Webflow
- Di Webflow Designer, pilih section atau komponen lalu tekan Ctrl/⌘+C. Klik area tempel di sini lalu tekan Ctrl/⌘+V.
- Klik elemen di Navigator untuk mengedit teks, link, gambar, tag, ID, atribut kustom, dan class-nya. Pratinjau otomatis berubah saat kamu mengetik.
- Di Classes, ganti nama class, edit gayanya, tambahkan prefix ke semuanya, atau hapus class yang tidak dipakai elemen mana pun. Undo untuk kembali selangkah.
- Untuk memakainya lagi, klik Sarankan props (atau Buat prop di samping sebuah field), beri nama props-nya, lalu Simpan ke library. Lain kali, buka dari Library kamu, isi props-nya, lalu salin.
- Klik Salin ke Webflow, buka project lain, pilih tempat elemen akan ditaruh, lalu tekan Ctrl/⌘+V. Unduh .json menyimpan salinan untuk dipakai nanti.
Salin komponen antar project Webflow — dan ubah di tengah jalan
Webflow sudah memungkinkan kamu menyalin elemen dari satu project dan menempelkannya ke project lain di browser yang sama. Yang belum bisa adalah mengubahnya di antara dua langkah itu: mengganti nama class yang bentrok dengan style guide project tujuan, mengganti teks, memperbaiki link yang mengarah ke situs lama, atau menghapus bagian yang tidak dibutuhkan. Editor ini berada di tengah. Ia membaca data clipboard Webflow, menampilkannya seperti di Designer, memungkinkan kamu mengeditnya, lalu mengembalikannya ke clipboard dengan format yang sama.
- Navigator dan properti — setiap elemen dengan tipe, class, dan teksnya. Edit teks, URL link dan opsi “buka di tab baru”, sumber gambar dan teks alt, level heading dan tag section, ID dan atribut kustom, atau hapus elemen beserta isinya.
- Class beserta gayanya — ganti nama class, edit gaya dasarnya, lihat elemen mana yang memakainya, dan hapus class yang tidak dipakai. Gaya breakpoint dan hover ikut terbawa bersama class.
- Prefix class — tambahkan
acme-(atau prefix lain) ke semua class sekaligus, supaya class yang ditempel tidak tergabung atau tertukar dengan class yang sudah ada di project tujuan. - Props dan library — tandai teks, link, gambar, ikon, dan toggle tampil/sembunyi yang berubah di setiap pemakaian sebagai props, simpan komponen ke library di browser ini, lalu cukup isi formulir singkat saat dipakai lagi. Props ikut dibawa di file .json yang diunduh; props tidak disertakan saat disalin ke Webflow, karena Webflow hanya menempelkan elemen biasa.
- Pratinjau langsung pada lebar desktop, tablet, dan ponsel, dibangun dari gaya class.
- Peringatan untuk bagian yang tidak pindah dengan rapi: interaksi, komponen yang sudah terlepas saat disalin, binding CMS yang dihapus, dan gambar yang berada di asset library project lama.
- Tidak ada yang diunggah — data tetap di browser kamu. Komponen terakhir disimpan di perangkat ini sehingga refresh halaman tidak menghapusnya.
Webflow dibuka di browser lain? Webflow Clipboard Bridge memindahkan elemen antar browser. Membuat sesuatu yang baru dari kode? Gunakan HTML & CSS ke Webflow atau SVG ke Webflow. Cek nama class dengan Class Name Typo Checker.
Juga dicari sebagai: salin komponen webflow ke project lain, webflow copy paste antar project, pindah section webflow ke site lain, edit clipboard webflow, prefix class webflow, ganti nama class webflow, webflow component library.
Tool yang cocok dipakai bersama Editor Komponen Webflow
- Generator Nama Class — Jelaskan sebuah section dengan kata-kata sederhana, misalnya “hero dengan tagline, heading, dua tombol, dan gambar di sebelah kanan”.
- Figma CSS ke Webflow — Ubah output “Copy as CSS” dari Figma menjadi nilai rapi yang bisa langsung kamu ketik di Style panel Webflow.
- 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.
- Markdown ke Webflow Rich Text — Tempel Markdown, cek pratinjaunya, lalu salin sebagai rich text berformat.
Pertanyaan yang sering diajukan
Bagaimana cara menyalin section dari satu project Webflow ke project lain?
Pilih section di Designer dan tekan Ctrl/⌘+C, buka project lain di browser yang sama, pilih tempat section akan ditaruh lalu tekan Ctrl/⌘+V. Jika ingin mengubahnya dulu, tempel di editor ini, edit, lalu klik Salin ke Webflow sebelum menempel.
Apa yang terjadi pada nama class yang sudah ada di project lain?
Webflow mencocokkan class yang ditempel dengan class yang sudah ada berdasarkan nama, jadi “button” yang ditempel bisa memakai atau bentrok dengan gaya button milik project lain. Tambahkan prefix di sini, atau ganti nama class-nya, agar keduanya tetap terpisah.
Apakah interaksi dan komponen ikut terbawa?
Interaksi disertakan dalam data clipboard dan biasanya ikut saat menempel, tetapi periksa trigger-nya setelah itu. Komponen akan terlepas saat disalin, sehingga ditempel sebagai elemen biasa; editor memberi tahu jumlahnya.
Apakah gambar ikut terbawa?
Gambar yang berada di asset library project sumber dirujuk berdasarkan URL dan biasanya diunggah ulang oleh Webflow saat ditempel. Jika gambar gagal dimuat, ganti sumbernya di sini dengan URL yang kamu kontrol.
Bisakah saya menyalin komponen beserta properti-nya ke project lain?
Tidak lewat clipboard: Webflow melepas komponen saat disalin dan properti-nya tidak ikut. Di sini kamu bisa membuatnya ulang sebagai props devpack — isi, salin, lalu pilih Create component di project lain jika ingin kembali menjadi komponen Webflow. Fitur Libraries Webflow membagikan komponen asli antar site dalam satu workspace pada paket yang mendukungnya.
Di mana library komponen saya disimpan?
Di local storage browser ini, hanya di perangkat ini. Gunakan Unduh .json untuk membuat cadangan atau memindahkan komponen ke komputer lain, lalu buka filenya di sini untuk melanjutkan.
Apakah ini alat resmi dari Webflow?
Bukan. devpack adalah layanan independen. Alat ini bekerja dengan data clipboard yang dibuat Designer saat kamu menyalin elemen, dan Webflow bisa mengubah format itu kapan saja.
Bisakah saya memasang Editor Komponen Webflow sebagai aplikasi web dan memakainya offline?
Bisa. Editor Komponen Webflow 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.