Webflow dipasarkan secara luas sebagai platform pengembangan tanpa kode, yang dipandang sebagai keuntungan terbesarnya. Namun, ini tidak berarti Anda tidak dapat menambahkan kode ke desain Anda.
Meskipun Webflow menawarkan beragam pilihan desain, Anda mungkin ingin menyesuaikan situs web Anda lebih jauh. Di sinilah kode kustom berperan, karena menambahkannya memungkinkan lebih banyak fungsionalitas.
Teruskan membaca untuk mempelajari cara menambahkan kode kustom di Webflow.
Batasan Untuk Menambahkan Kode Kustom
Sebelum mempelajari cara menambahkan kode kustom di Webflow, penting untuk membahas beberapa aturan dasar.
Perhatikan bahwa kode kustom adalah modifikasi lanjutan. Dengan demikian, mereka dapat menyebabkan konflik dengan fungsionalitas Webflow, yang mengakibatkan perilaku tak terduga di situs Anda. Oleh karena itu, tidak ada jaminan bahwa setiap kode khusus akan sepenuhnya kompatibel atau berfungsi.
Secara umum, Webflow mendukung jenis kode berikut:
HTMLCSSJavaScript
Menambahkan kode JavaScript khusus dapat menambahkan banyak fungsi ke situs web Anda. Untuk itu, Webflow juga dilengkapi dengan versi JavaScript yang lebih sederhana yang disebut jQuery. Anda dapat menggunakannya bersama dengan JavaScript untuk mempermudah proses penulisan.
Saat mengimpor jQuery, penting untuk memperhatikan versinya. Versi tersebut harus cocok dengan versi Webflow yang saat ini diimpor untuk menghindari konflik dan perilaku yang tidak diharapkan. Selain itu, skrip seperti onClick dan onHover yang memengaruhi peristiwa DOM juga dapat menyebabkan perilaku tak terduga di situs Anda.
Saat mengintegrasikan kode khusus, Anda tidak dapat menggunakan bahasa sisi server apa pun, termasuk:
PerlPythonPHPRuby
Aspek penting lain yang perlu dipertimbangkan adalah panjang kode kustom. Webflow memberlakukan batasan karakter berikut:
10.000 karakter untuk elemen yang disematkan10.000 karakter untuk kode tentang satu halaman20.000 karakter untuk kode tentang seluruh situs web
Jika kode yang ingin Anda sematkan melebihi batas karakter ini, Anda tidak dapat menyematkan itu secara langsung. Namun, Anda dapat menyimpan kode di server lain dan kemudian mereferensikan skrip dalam kode Anda. Atau, Anda dapat menggunakan alat pihak ketiga untuk memperkecil kode kustom Anda.
Kebanyakan kode kustom tidak akan memengaruhi elemen dalam mode Desainer untuk menghindari perilaku yang tidak diharapkan. Oleh karena itu, Anda akan melihat hasilnya hanya setelah Anda memublikasikan situs web Anda.
Sayangnya, jika kode kustom Anda tidak berfungsi, tim dukungan Webflow tidak akan banyak membantu karena pengkodean kustom berada di luar cakupan Kebijakan Dukungan Pelanggan mereka. Coba periksa ulang kode Anda dan kunjungi Forum Webflow untuk bantuan tambahan, jika diperlukan.
Webflow Cara Menambahkan Kode Kustom
Kode kustom memungkinkan Anda menyesuaikan situs web dengan kebutuhan spesifik Anda. Webflow memastikan untuk mengakomodasi berbagai skenario, memungkinkan pengguna untuk menambahkan kode khusus ke seluruh situs atau halaman individual saja. Terlebih lagi, Anda juga dapat menyesuaikan posting tertentu. Bagian terbaiknya adalah Anda dapat menambahkan kode kustom Anda dalam beberapa klik, terlepas dari lokasinya.
Cara Menambahkan Kode Kustom ke Seluruh Situs Web
Jika kode kustom Anda perlu diterapkan ke setiap halaman di situs web Anda, “Pengaturan Situs” adalah tempatnya menjadi. Menambahkan kode khusus di sana akan memastikan pengalaman yang mulus di semua elemen situs web Anda.
Kode tentang seluruh situs web dapat dilihat di bagian kode Head atau Footer. Untuk menambahkan kode khusus di bagian Kode kepala, lakukan hal berikut:
Buka “Pengaturan Situs.” Arahkan ke tab “Kode Kustom”. Tambahkan kode khusus ke bidang “Kode Kepala”. Tekan “Simpan Perubahan.”
This memungkinkan Anda menggunakan gaya kustom, menautkan ke sumber daya eksternal, dan menambahkan metadata.
Jika Anda ingin menambahkan kode kustom ke bagian kode Footer, buka tab “Kode Kustom” lagi, lalu ikuti langkah-langkah berikut:
Tambahkan kode kustom ke bidang “Kode Footer”. Ketuk “Simpan Perubahan.”
Cara Menambahkan Kode Kustom ke Satu Halaman
Terkadang Anda mungkin ingin menyesuaikan hanya satu atau beberapa halaman tertentu di situs web Anda. Webflow membuat proses ini cukup sederhana. Setelah menambahkan kode, kode tersebut akan mengikuti kode di seluruh situs di markup situs web Anda.
Saat menambahkan kode khusus ke satu halaman, Anda dapat memilih tempat untuk menempatkannya.
Anda harus selalu menempatkan kode HTML dan CSS di dalam tag. Namun, kode JavaScript harus berada di bagian tag, sebelum tag. Biasanya, ini akan meningkatkan kinerja situs web, karena