Cara menggunakan HTML & CSS ke Webflow
- Tempel HTML-mu di kiri dan CSS yang sesuai di kanan — dari hasil ekspor kode, template, output Tailwind yang dikompilasi ke CSS, atau kode yang ditulis ChatGPT atau Claude. Tag
<style>di dalam HTML akan dibaca otomatis. - Cek pratinjau dan laporan konversi: di sana terlihat berapa elemen, class, combo class, dan gaya breakpoint yang dibuat, serta CSS mana yang tidak bisa dipetakan.
- Pilih Elemen native (Div Block, Heading, Paragraph, Link, Image, List…) atau Custom Elements (setiap tag persis seperti yang ditulis), lalu klik Copy to Webflow.
- Di Webflow Designer, pilih elemen induk dan tekan Ctrl/⌘+V. Class akan muncul di Style Manager, dan gaya tablet serta mobile berada di breakpoint masing-masing.
Mengapa mengonversi HTML ke elemen native Webflow?
Cara cepat memasukkan kode ke Webflow adalah Code Embed — tapi embed itu seperti kotak hitam: klien tidak bisa mengedit teksnya, kamu tidak bisa mengubah gayanya di panel Style, dan ia tidak muncul di Navigator. Konverter ini mengubah markup-mu menjadi elemen yang sama seperti yang akan kamu bangun manual: Div Blocks, Sections, Headings, Paragraphs, Text Links, Link Blocks, Images, dan Lists, masing-masing dengan class-nya. Teks tetap bisa diedit di Designer maupun Editor, dan setiap gaya tersimpan di Style Manager Webflow.
Cara CSS dipetakan ke class Webflow
| CSS kamu | Di Webflow |
|---|---|
.card { … } | Class card dengan gaya tersebut |
class="button is-secondary" + .button.is-secondary | Combo class button is-secondary |
@media (max-width: 991px) | Breakpoint tablet |
@media (max-width: 767px) / 479px | Mobile landscape / Mobile portrait |
.button:hover, :focus, :active | State Hover, Focused, dan Pressed |
var(--brand) dari :root | Diubah ke nilai aslinya |
margin: 0 auto, gap, border, flex: 1 | Diperluas ke properti individual Webflow |
h1 { }, .card p { }, @keyframes | Disimpan di Code Embed kecil (<style>) — class Webflow tidak bisa mengekspresikan selector tag atau descendant |
CSS mobile-first juga bisa dipakai: konverter menghitung gaya efektif untuk setiap breakpoint Webflow (desktop, tablet, mobile landscape, mobile portrait) dan hanya menulis selisihnya, sesuai cara Webflow mewariskan gaya dari desktop ke bawah.
Elemen native vs Custom Elements
Elemen native memberikan pengalaman edit konten terbaik: heading, paragraf, dan link berperilaku persis seperti elemen yang kamu seret dari panel Add. Tag tanpa padanan native di Webflow — button, form, input, video, svg inline, dan sejenisnya — menjadi Custom Elements dengan semua atributnya. Pilih Custom Elements (tag persis) jika ingin setiap tag dipertahankan 1:1, misalnya untuk markup semantik atau komponen yang tidak akan kamu edit di Editor. Ikon SVG inline paling cocok dengan alat khusus SVG ke Webflow.
Dari mana HTML-nya berasal
- Bagian hasil AI — minta ChatGPT atau Claude membuat bagian dalam HTML dan CSS beserta nama class-nya, lalu tempel di sini daripada membangunnya ulang secara manual.
- Template dan UI kit — template HTML/CSS atau prototipe hasil ekspor.
- Tailwind — class utilitas Tailwind tidak cocok diterjemahkan langsung ke class Webflow; kompilasi dulu ke CSS biasa dengan nama class semantik, atau gunakan Class Name Generator untuk mendapatkan struktur yang rapi.
- Website lama — salin markup sebuah bagian beserta CSS-nya untuk memigrasikannya ke Webflow.
Tips agar hasil tempel rapi
- Gunakan sistem penamaan — misalnya Client-First — sebelum menempel. Class Name Typo Checker menemukan typo dan duplikat di class-mu.
- Gambar tetap menggunakan URL aslinya. Unggah ke panel Assets Webflow setelahnya dan ganti sumbernya, agar disajikan dari CDN Webflow dengan ukuran responsif.
- Jika class dengan nama yang sama sudah ada di proyekmu, Webflow menyimpan keduanya dan menambahkan angka pada yang baru ditempel — ganti nama atau gabungkan di Style Manager.
- Ubah spasi tetap menjadi nilai fluid dengan Clamp Calculator, dan pindahkan nilai desain dari Figma dengan Figma CSS ke Webflow.
Cara kerja “Copy to Webflow”
Saat kamu menyalin elemen di dalam Designer, Webflow menaruh deskripsi JSON tentang elemen dan class-nya di clipboard. Konverter membuat data yang sama — node, teks, class, combo class, dan varian breakpoint — lalu menaruhnya di clipboard agar Designer bisa membacanya. Webflow tidak mendokumentasikan format ini secara resmi. Jika suatu saat tempel gagal setelah pembaruan Webflow, gunakan kotak kalibrasi di halaman SVG ke Webflow sekali saja; Custom Elements yang dibuat di sini memakai format yang sama.
Juga dicari sebagai: html ke webflow, css ke webflow, kode ke webflow, tempel html di webflow, webflow clipboard, xscpdata, konverter html ke webflow, tailwind ke webflow.
Tool yang cocok dipakai bersama HTML & CSS ke Webflow
- HTML ke Webflow Rich Text — Tempel HTML yang berantakan dari situs lama, ekspor WordPress, Google Docs, atau Word.
- 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.
- Webflow Clipboard Bridge — Webflow menyimpan elemen di clipboard dengan format khusus yang tidak bisa berpindah antar browser (Firefox → Chrome, Safari → Edge…).
- Editor Komponen Webflow — Pindahkan section dan komponen antar project Webflow dan ubah sebelum dipakai.
Pertanyaan yang sering diajukan
Bisakah saya menempel HTML langsung ke Webflow?
Apakah responsive style dan efek hover tetap dipertahankan?
max-width dipetakan ke breakpoint Webflow tablet (991px), mobile landscape (767px), dan mobile portrait (479px), sedangkan :hover, :focus, dan :active menjadi state Hover, Focused, dan Pressed. CSS min-width (mobile-first) dihitung ulang untuk setiap breakpoint.Apa yang terjadi pada CSS yang bukan selector class sederhana?
h1), selector descendant (.card p), @keyframes, @font-face, dan sejenisnya tidak bisa disimpan sebagai class Webflow. Secara default, semuanya ditaruh di Code Embed kecil dengan tag <style> di dalam bagian yang ditempel, sehingga desainmu tetap tampil benar. Hilangkan centang opsi tersebut jika ingin membuangnya.Apakah bisa dipakai dengan HTML Tailwind atau Bootstrap?
px-4 atau col-md-6) akan menjadi class Webflow tanpa gaya, kecuali kamu juga menempel CSS-nya. Untuk Webflow, lebih baik gunakan beberapa class semantik; kompilasi desainmu ke CSS biasa atau mulai dari Class Name Generator.