Sticky Bars terus menjadi bagian populer dari desain web. Mereka bagus untuk mendorong konversi dengan menjaga ajakan bertindak tetap canggih tanpa mengganggu seperti popup.
Dalam kasus penggunaan ini, kami akan mendesain bilah lengket untuk produk WooCommerce menggunakan modul Woo dari Divi. Batang lengket dapat mencakup modul apa pun Divi. Untuk tutorial ini, kami akan membuat bilah lengket yang menyertakan tombol "Tambahkan ke Keranjang" sehingga tetap terlihat saat pengguna menggulir halaman ke bawah. Selain itu, kami juga akan membuat bilah notifikasi keranjang belanja sehingga pengguna akan selalu melihat tombol “lihat keranjang” setelah tombol “tambahkan ke keranjang” diklik.
Elemen sticky stick ini akan membantu meningkatkan konversi dengan menjaga agar CTA penting ini tetap terlihat.
penelitian
Berikut ini adalah pratinjau dari apa yang akan kami desain dalam tutorial ini.
Bagian 1: Desain bilah perekat pada halaman produk
Kami akan menggunakan produk simulasi sederhana untuk contoh ini, jadi Anda perlu membuat produk baru atau mengedit produk yang sudah ada. Informasi produk tidak penting untuk tutorial ini. Pastikan Anda memiliki dasar-dasar seperti judul produk, harga, deskripsi, gambar, dll.
Setelah produk sederhana siap, klik untuk mengedit produk di backend dan menerapkannya Divi Pembuat di halaman produk. Di bawah Pengaturan Halaman Divi, pilih “Lebar Penuh” untuk tata letaknya, lalu klik “Bangun di Depan.”
Halaman produk akan terlihat seperti ini.
Di bawah baris pertama yang berisi remah roti dan pemberitahuan keranjang, tambahkan baris baru dengan tata letak satu kolom.
Pengaturan saluran
Sebelum menambahkan modul, perbarui pengaturan jalur sebagai berikut:
- Warna latar: # 333333
- Gunakan lebar selokan khusus: YA
- Lebar selokan: 1
- Lebar: 100%
- Pelapis: 0px Atas, 0px Bawah
Buat garis lengket
Untuk membuat garis menjadi lengket, tambahkan kode CSS khusus berikut ke elemen desktop utama:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Kemudian tambahkan kode CSS berikut ke elemen utama yang sama untuk tampilan tablet:
top: 0px;
Jika Anda tidak terbiasa dengan properti css "position: sticky", ini adalah semacam campuran antara posisi tetap dan posisi relatif di mana elemen (dalam hal ini garis) akan menggulir dengan wadah hingga mencapai posisi yang ditentukan di bagian atas atau bawah halaman (atau offset yang ditentukan). Dalam contoh ini, kami menyetel offset menjadi 50px dari bagian atas jendela browser (menyisakan ruang untuk tinggi header tetap default di desktop). Kemudian, di tablet, offset diubah menjadi "top: 0px" untuk mengoreksi garis / bilah perekat di bagian atas browser di perangkat seluler.
Catatan: Abaikan kesalahan yang Anda lihat saat menambahkan CSS ke kotak. Kode akan bekerja dengan baik.
Setelah Anda CSS, perbarui indeks Z sebagai berikut:
- Indeks Z: 10
Sekarang garis tersebut akan menjadi lengket saat pengguna menggulir halaman produk.
Kolom CSS khusus
Sebelum Anda mulai mengisi baris dengan isi, kita perlu memastikan bahwa modul di dalam baris satu kolom kita akan sejajar secara horizontal, bukan vertikal. Kita dapat menggunakan trik CSS sederhana untuk melakukan ini dengan properti flex. Buka pengaturan kolom dan tambahkan CSS khusus berikut ke elemen utama:
display:flex; align-items:center;
Ini menangani desain garis lengket kami. Sekarang kita perlu mengisi baris tersebut dengan isi.
Tambahkan judul Woo
Tambahkan modul judul Woo baru ke kolom garis lengket.
Kemudian perbarui pengaturan sebagai berikut:
- Judul teks berwarna: #ffffff
- Ukuran Judul Teks: 28px (desktop), 20px (tablet), 16px (telepon)
- Lebar: 30%
- Pelapis: 2vw di atas, 2vw di bawah, 2vw di kiri, 2vw di kanan, XNUMXvw di kanan
Tambahkan harga Woo
Kemudian tambahkan modul harga Woo dengan mengklik ikon abu-abu plus yang muncul ketika Anda mengarahkan kursor ke modul judul woo yang baru saja Anda buat.
Kemudian perbarui pengaturan Harga Woo sebagai berikut:
- Harga Ukuran Teks: 28px (desktop), 20px (tablet), 16px (telepon)
- Lebar: 30%
- Pelapis: 2vw di atas, 2vw di bawah, 2vw di kiri, 2vw di kanan, XNUMXvw di kanan
- Lebar batas kanan: 1px
- Warna batas kanan: #777777
- Lebar batas kiri: 1px
- Warna batas kiri: #777777
Tambahkan modul Tambahkan ke troli
Untuk elemen terakhir isi, tambahkan modul Woo Add to Cart tepat setelah modul Woo Price.
Kemudian perbarui pengaturan sebagai berikut:
Sederhanakan elemen Tambahkan ke Keranjang dengan menyembunyikan bidang kuantitas dan kuantitas inventaris di perangkat seluler.
- Bidang kuantitas tampilan: OFF (tablet)
- Tampilkan Stok: OFF
- Perataan teks: kanan
- Gunakan gaya khusus untuk Tombol: YES
- Ukuran teks tombol: 18px (tablet), 14px (telepon)
- Warna teks tombol: #ffffff
- Warna latar tombol: #0c71c3
- Lebar batas tombol: 0px
- Lebar: 40%
- Pelapis: 2vw di sebelah kiri, 2vw di sebelah kanan
Hasil
Mari kita lihat seperti apa di halaman live.
Bagian 2: Buat Bilah Pemberitahuan Keranjang
Membuat bilah notifikasi gerobak berperekat sebenarnya melibatkan beberapa langkah sederhana, tetapi hasilnya bisa sangat efektif. Seperti yang mungkin sudah Anda ketahui, pemberitahuan keranjang hanya muncul ketika pengguna mengklik tombol "Tambahkan ke keranjang". Namun, langkah penting selanjutnya dalam proses pembelianlah yang membawa pengguna ke halaman pembayaran. Jadi ketika pemberitahuan gerobak muncul sebagai batang perekat di bagian bawah jendela, itu lebih terlihat oleh pengguna.
Untuk membuat bilah melekat pemberitahuan keranjang, pertama-tama buat baris satu kolom baru di bagian bawah halaman produk. Kemudian perbarui pengaturan baris sebagai berikut:
- Lebar: 100%
- Pelapis: 0px di bagian atas, 0px di bagian bawah
Buat garis lengket dengan menambahkan CSS khusus berikut ke elemen utama:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Catatan: Seperti yang kita lakukan sebelumnya, Anda dapat mengabaikan kesalahan yang muncul saat menambahkan properti position: sticky.
Baris akan menempel ke bagian bawah jendela saat menggulir ke atas.
Kemudian perbarui indeks z agar tetap di latar depan, seperti:
- Indeks Z: 10
Tambahkan modul pemberitahuan keranjang
Setelah Anda membuat garis, tambahkan modul Pemberitahuan Woo Cart ke baris dan perbarui pengaturan sebagai berikut:
- Ukuran teks (telepon): 15px
- Margin: 0em di bagian bawah
Itu dia ! Anda bebas atau tidak ingin menghapus item peringatan keranjang default di bagian atas halaman, tetapi sebaiknya Anda membiarkannya untuk konversi yang lebih baik.
Hasil akhir
Berikut ini hasil akhirnya.
final pikiran
Semoga artikel ini akan membantu kami memahami cara membuat batang lengket untuk halaman produk kami di Divi. Kami telah membahas cara membuat bilah tempel yang menyertakan judul produk, harga, dan tombol Tambahkan ke Keranjang. Dan kami juga menunjukkan cara membuat batang lengket. Keduanya akan membuat proses pembelian lebih mudah dan meningkatkan konversi. Dan kami bahkan tidak membutuhkan plugin!
