Ingin tahu cara menghilangkan Framer button (Made in Framer) di website Framer-mu? Ikuti tutorialnya hanya di blog @ezfileid!
Daftar isi
Sekilas tentang Framer
Framer adalah sebuah platform desain berbasis web yang digunakan untuk membuat prototipe antarmuka pengguna (UI) secara interaktif. Awalnya Framer dikembangkan sebagai alat untuk prototipe berbasis kode, dan kini telah berkembang menjadi alat desain yang lebih ramah bagi desainer non-programmer.
Fitur Utama Framer:
- Desain Interaktif: Framer memungkinkan pembuatan prototipe interaktif yang realistis dengan transisi, animasi, dan interaksi yang menyerupai aplikasi sebenarnya.
- Komponen Siap Pakai: Menyediakan berbagai komponen seperti tombol, menu, dan lainnya yang bisa langsung digunakan atau dimodifikasi.
- Integrasi Kode: Untuk desainer yang ingin kustomisasi lebih dalam, Framer mendukung integrasi dengan kode menggunakan JavaScript dan React.
- Kolaborasi Real-Time: Tim dapat bekerja bersama pada proyek yang sama, mirip dengan fitur kolaborasi dalam Figma.
- Hosting & Preview: Prototipe yang dibuat dapat dihosting dan diuji langsung pada berbagai perangkat.
Keunggulan Framer:
- Kemudahan Penggunaan: Antarmuka yang intuitif membuat framer cocok untuk desainer pemula hingga profesional.
- Interaktivitas Tinggi: Framer unggul dalam membuat animasi dan interaksi kompleks.
- Responsif: Dukungan untuk desain yang responsif pada berbagai ukuran layar.
Framer memungkinkan kita untuk menampilkan desain kita dalam bentuk website tanpa membeli hosting tambahan. Meski begitu, ada sebuah Framer button yang mana akan tampil ketika website yang kita buat sudah live. Framer button atau tombol Framer tersebut bertuliskan Made in Framer dan akan muncul jika kita menggunakan Framer versi gratis (tidak men-subscribe).
Meski begitu, ada sebuah trik untuk menghilangkan tombol Framer button tersebut. Bagaimana caranya? Berikut langkah-langkahnya!
Keterangan: Tutorial ini murni memanfaatkan celah bahasa pemrograman yang ada pada platform Framer. Untuk mendukung developer, silakan subscribe layanan Framer jika memungkinkan.
Cara Menghilangkan Framer Button (Made in Framer)
Untuk menghilangkan Framer button, ikuti langkah-langkah berikut:
Langkah pertama, buka proyek Framer-mu.
Langkah kedua, buat kode kustom.
- Klik Assets, lalu bagian Code klik tanda +.
- Tambahkan title (judul/nama) sesuka hatimu, misal: HideFramerButton.
Langkah ketiga, tambahkan sebuah kode pada kode tersebut.
- Cari kode berikut:
return (
<div style={containerStyle}>
<Example />
</div>
)
}
- lalu ganti dengan kode berikut:
const style = `
#__framer-badge-container {
display: none;
}
`
return (
<div>
<style dangerouslySetInnerHTML={{ __html: style }} />
</div>
)
}
- Setelah itu, save dengan cara menekan tombol Ctrl+S.
Langkah keempat, tambahkan kode tersebut ke layers dengan cara drag & drop.
Langkah kelima, publish atau update proyekmu lalu lihatlah hasilnya.
Nah, itulah cara menghilangkan Framer button (Made in Framer) dengan mudah. Cara ini menggunakan metode menghilangkan atau menyembunyikan button Made in Framer tersebut dengan sebuah kode yang disisipkan ke layers. Dengan begitu, Framer button menjadi tidak terlihat setelah website Framer live.
