Cara menambahkan tombol kustom di Squarespace

Tombol call-to-action (CTA) adalah elemen paling bernilai di halaman landing, karena setiap pengunjung yang Anda arahkan ke halaman checkout, formulir kontak, atau sumber daya yang bisa diunduh harus mengklik tombol tersebut untuk sampai ke sana. Dan tombol CTA yang menonjol dari bagian di sekitarnya — dengan warna tersendiri, ikon, atau efek hover — mendapatkan rasio klik-tayang yang jauh lebih baik dibandingkan tombol yang menyatu dengan latar belakang.

Squarespace memiliki Button Block bawaan, tetapi Anda mengatur gayanya dari panel Site Styles global, bukan dengan memilih tombol itu sendiri. Tombol hadir dalam tiga jenis: primary, secondary, dan tertiary. Setiap jenis diterapkan secara seragam di seluruh situs Anda, sehingga Anda hanya mendapatkan tiga desain tombol secara keseluruhan. Mengubah gaya tombol primary akan memengaruhi semua tombol primary yang Anda miliki, dan hal yang sama berlaku untuk jenis secondary dan tertiary. Pengaturannya juga terbatas, tanpa opsi untuk ikon, efek hover, atau gradien.

Ada dua cara untuk memberikan desain unik pada satu tombol tanpa mengubah semua tombol lain di situs Anda. Anda bisa menulis atau membeli CSS kustom dan menempelkannya ke panel Custom CSS untuk menargetkan blok tertentu, atau Anda bisa menggunakan widget hosted gratis, mendesain tombol di visual builder, lalu menempelkan kode embed ke dalam blok kode.

Jika Anda adalah pemilik situs Squarespace, marketer, atau desainer yang menginginkan tombol CTA kustom di Squarespace tanpa menulis CSS atau membayar developer untuk sebuah snippet, panduan ini akan memandu Anda cara menambahkan tombol di Squarespace menggunakan kedua metode — dimulai dari metode CSS lalu dilanjutkan dengan widget.

Opsi 1: Gunakan blok bawaan dengan snippet CSS kustom

Cara standar untuk mendapatkan desain tombol yang unik di halaman Squarespace adalah dengan menambahkan blok tombol bawaan, lalu menimpa gayanya dengan CSS Anda sendiri. Squarespace memiliki panel Custom CSS untuk keperluan tersebut, dan menargetkan satu blok berdasarkan ID-nya memastikan perubahan hanya berlaku pada satu tombol, bukan semua tombol dengan jenis yang sama.

Berikut cara menambahkan tombol di Squarespace dengan CSS kustom:

1. Buka halaman di editor Anda, arahkan kursor ke bagian tempat Anda ingin menambahkan tombol, klik Add Block, lalu pilih Button.

2. Klik ikon pensil atau klik dua kali tombol untuk mengatur teks dan tautan Anda. Pilih primary, secondary, atau tertiary, lalu klik Save di pojok kiri atas.

3. Selanjutnya, temukan ID blok. Setiap blok di halaman Squarespace memiliki ID unik, dan menempatkannya di depan CSS Anda akan membatasi perubahan hanya pada satu tombol tersebut, bukan menerapkannya ke semua tombol dengan jenis yang sama. Anda bisa menemukannya dengan menginspeksi halaman di browser, klik kanan pada blok lalu pilih Inspect, atau menggunakan salah satu ekstensi browser pencari ID Squarespace yang gratis. 

4. Di luar editor Anda, buka Website di sidebar, klik Pages, lalu Custom Code, dan pilih Custom CSS.

5. Tulis dan simpan aturan Anda — targetkan ID blok tersebut, lalu klik Save. Gaya bawaan Squarespace cukup spesifik sehingga Anda sering kali perlu menambahkan !important agar aturan Anda bisa diterapkan. Setelah disimpan, satu tombol tersebut akan tampil sesuai keinginan Anda sementara semua tombol lain di situs Anda tetap seperti semula.

Kesalahan penargetan adalah masalah paling umum, karena snippet yang ditulis untuk “.sqs-block-button-element” tanpa ID blok di depannya akan mengubah gaya semua tombol bawaan di situs Anda, termasuk tombol CTA di header dan tombol checkout. Masalah umum lainnya adalah tampilannya di perangkat mobile — lebar tetap dan ukuran font besar yang terlihat pas di desktop bisa mendorong tombol keluar dari layar ponsel atau memecah teks menjadi baris satu huruf.

Snippet cukup mudah ditemukan, dan para desainer Squarespace banyak mempublikasikannya secara gratis di blog mereka, meskipun efek hover dan animasi yang lebih rumit biasanya dijual sebagai add-on berbayar. Bagaimanapun juga, Anda menempelkan kode yang bukan Anda tulis ke panel yang memengaruhi seluruh situs, dan Anda harus menangani sendiri proses debugging jika ada yang terlihat tidak beres.

Opsi 2: Tambahkan widget tombol gratis yang bisa dikustomisasi (direkomendasikan)

Membuat tombol di alat terpisah adalah alternatif CSS kustom di Squarespace, karena Anda menempatkan tombol baru di halaman alih-alih menimpa gaya tombol bawaan. Di sini, Anda menyiapkan tombol di visual builder, menyalin kode embed, lalu menempelkannya ke blok kode di halaman Anda.

Sebelum memulai, periksa paket Squarespace Anda. Menambahkan kode embed ke blok kode adalah fitur premium yang memerlukan paket Core atau yang lebih tinggi. Pada paket level dasar, kode tetap ada di blok tetapi tidak berfungsi.

Untuk pilihan widget yang akan digunakan, Button Widget dari Jotform adalah widget tombol gratis untuk Squarespace yang memberikan Anda kontrol visual lebih banyak dibandingkan blok bawaan. Anda bisa mengkustomisasi warna latar belakang, teks, dan hover secara terpisah, menambahkan ikon sebelum atau sesudah label, serta mengatur radius sudut, tinggi, padding, ukuran teks, dan bayangan. 

Berikut cara menambahkan tombol di Squarespace menggunakan widget:

1. Di halaman Jotform Workspace Anda, klik Create, pilih Website Widget, cari “Button,” lalu klik Use Widget.

2. Di bawah tab General, pilih fungsi tombol — apakah itu membuka halaman web, memulai email, atau membuka chat WhatsApp — lalu masukkan URL tautan dan label tombol Anda. Beralih ke tab Style untuk warna, ikon, dan bentuk, lalu ke tab Layout untuk memilih apakah tombol ditampilkan secara inline atau floating dan apakah tombol muncul di desktop, mobile, atau keduanya.

3. Klik Publish, lalu klik Copy Code di bagian Embed. 

4. Di editor Squarespace Anda, klik Add Block, pilih Code, atur mode blok ke HTML, hapus teks placeholder, tempelkan kode Anda, lalu klik Save.

Karena tombol didesain di Jotform dan bukan di panel Custom CSS Anda, tombol tersebut tidak akan bertentangan dengan Site Styles global Anda, dan perubahan Anda tidak akan memengaruhi tombol lain di situs. Menguji warna atau label yang berbeda cukup dilakukan dengan mengedit widget, tanpa perlu mencari ID blok dan menulis ulang snippet.

Tingkatkan situs Squarespace Anda dengan widget cerdas tanpa server

Sebagai marketer, pemilik situs, atau desainer, waktu Anda terlalu berharga untuk dihabiskan mencari ID blok hanya agar satu tombol CTA bisa terlihat berbeda dari sisa situs Anda. Widget tombol menyelesaikan masalah itu dalam hitungan menit, dan Anda bisa mengubah gayanya nanti tanpa harus menyentuh panel Custom CSS lagi.

Tombol adalah salah satu dari beberapa hal yang bisa Anda tambahkan ke halaman Squarespace tanpa snippet kode atau plug-in berbayar. Direktori widget website gratis dari Jotform memiliki lebih dari 150 pilihan, termasuk

• Timer hitung mundur untuk peluncuran atau batas waktu pendaftaran, menciptakan urgensi yang tidak bisa dilakukan oleh tombol statis
• Popup untuk penawaran pendaftaran yang biasanya memerlukan plug-in premium untuk dijalankan
• Feed media sosial yang menampilkan postingan terbaru Anda di halaman, sehingga situs yang jarang Anda perbarui tetap terlihat aktual

Masing-masing widget disematkan melalui blok kode dengan cara yang sama seperti tombol. Artinya, Anda tidak perlu membeli snippet atau plug-in tambahan setiap kali ingin menambahkan satu elemen lagi di halaman.

Jika Anda masih membuat website atau merencanakan pembangunan ulang, ada baiknya mengetahui bagian mana saja yang bisa Anda tambahkan nanti tanpa bantuan developer. Integrasi Jotform-Squarespace menyematkan formulir di situs Anda dengan cara yang sama, sehingga tombol yang mengarahkan orang ke halaman pendaftaran bisa langsung terhubung ke formulir yang mengumpulkan informasi mereka.

Apa pun alternatif tombol CTA Squarespace yang Anda pilih, tombol yang menonjol lebih bernilai dibandingkan tombol yang sekadar menyatu dengan semua elemen lain di halaman. Widget hanyalah cara yang lebih cepat dan lebih terjangkau untuk mendapatkan klik tersebut.