Cara Mendesain Sticky Bar untuk Halaman Produk dengan Modul Woo Divi

Diterbitkan: 2019-10-16

Sticky Bar terus menjadi elemen populer dalam desain web. Mereka bagus untuk meningkatkan konversi dengan menjaga CTA di garis depan tanpa mengganggu seperti popup.

Dalam kasus penggunaan ini, kita akan mendesain bilah lengket untuk produk WooCommerce menggunakan Modul Woo Divi. Batang lengket dapat menyertakan modul Divi apa pun. Untuk tutorial ini, kita akan membuat satu sticky bar yang menyertakan tombol “Add to Cart” sehingga tetap terlihat saat pengguna menggulir halaman ke bawah. Plus, kami juga akan membuat bilah pemberitahuan kereta tempel sehingga pengguna akan selalu melihat tombol "lihat keranjang" setelah tombol "Tambahkan ke Keranjang" diklik.

Elemen batang lengket ini akan membantu meningkatkan konversi dengan tetap memperhatikan CTA penting tersebut.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas apa yang akan kita rancang dalam tutorial use case ini.

Unduh Tata Letak Batang Tempel GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

Jika belum, instal dan aktifkan Divi Theme yang terpasang (atau Plugin Divi Builder jika tidak menggunakan Divi Theme).
Instal dan aktifkan plugin WooCommerce. Jika ini adalah pertama kalinya mengatur WooCommerce, Anda harus menjalankan wizard pengaturan dasar untuk menyiapkan toko Anda. Setelah selesai, Anda siap untuk menambahkan produk baru Anda.
Buat beberapa produk jika Anda belum memilikinya. Untuk info lebih lanjut tentang cara menambahkan produk baru, lihat tutorial ini.

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Mendesain Sticky Bar pada Halaman Produk

Kami akan menggunakan produk sederhana tiruan 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 Anda menyiapkan produk sederhana, klik untuk mengedit produk di backend dan gunakan Divi Builder di halaman produk. Di bawah Pengaturan Halaman Divi, pilih "Lebar Penuh" untuk Tata Letak Halaman dan kemudian klik "Bangun Di Ujung 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 Baris

Sebelum menambahkan modul apa pun, perbarui pengaturan baris sebagai berikut:

Warna Latar Belakang: #333333
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Lebar: 100%
Padding: 0px Atas, 0px Bawah

Membuat Baris Lengket

Untuk membuat baris menjadi lengket, tambahkan CSS khusus berikut ke Elemen Utama untuk Desktop:

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

Kemudian tambahkan CSS berikut ke Elemen Utama yang sama untuk tampilan Tablet:

top: 0px;

Jika Anda tidak terbiasa dengan properti css "position: sticky", pada dasarnya ini adalah semacam perpaduan antara posisi tetap dan posisi relatif di mana elemen (dalam hal ini baris) akan bergulir bersama dengan wadahnya hingga mencapai posisi yang ditentukan di bagian atas atau bawah halaman (atau offset yang ditentukan). Dalam contoh ini, kami mengatur offset menjadi 50px dari bagian atas jendela browser (meninggalkan ruang untuk ketinggian header tetap default di desktop). Kemudian di tablet, offset diubah menjadi “top: 0px” untuk memperbaiki baris/sticky bar di bagian atas browser di ponsel.

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 baris akan menjadi lengket saat pengguna menggulir ke bawah halaman produk.

CSS Khusus Kolom

Sebelum kita mulai mengisi baris dengan konten, kita perlu memastikan 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;

Itu menangani desain baris lengket kami. Sekarang, kita perlu mengisi baris dengan beberapa konten.

Tambahkan Judul Woo

Tambahkan Modul Judul Woo baru ke kolom baris lengket.

Kemudian perbarui pengaturan sebagai berikut:

Warna Teks Judul: #ffffff
Judul Teks Ukuran: 28px (desktop), 20px (tablet), 16px (ponsel)
Lebar: 30%
Padding: atas 2vw, bawah 2vw, kiri 2vw, kanan 2vw

Tambahkan Harga Woo

Selanjutnya, tambahkan modul harga woo dengan mengklik ikon plus abu-abu yang muncul saat 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 (ponsel)
Lebar: 30%
Padding: atas 2vw, bawah 2vw, kiri 2vw, kanan 2vw
Lebar Batas Kanan: 1px
Warna Batas Kanan: #777777
Lebar Batas Kiri: 1px
Warna Batas Kiri: #777777

Tambahkan Woo Tambahkan ke Keranjang Modul

Untuk konten terakhir, tambahkan Modul Woo Add to Cart tepat setelah modul Woo Price.

Kemudian perbarui pengaturan sebagai berikut:

Sederhanakan elemen Tambahkan ke Keranjang dengan menyembunyikan jumlah stok dan bidang kuantitas di ponsel.

Tampilkan Bidang Kuantitas: MATI (tablet)
Tampilkan Stok: OFF

Perataan Teks: Kanan
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 18px (tablet), 14px (ponsel)
Warna Teks Tombol: #ffffff
Warna Latar Tombol: #7ac5af
Lebar Batas Tombol: 0px

Lebar: 40%
Padding: kiri 2vw, kanan 2vw

Hasil

Sekarang mari kita lihat seperti apa tampilannya di halaman langsung.

Dan ini dia di ponsel.

Bagian 2: Membuat Sticky Bar Pemberitahuan Keranjang

Membuat bilah lengket pemberitahuan keranjang sebenarnya hanya melibatkan beberapa langkah sederhana, tetapi hasilnya bisa sangat efektif. Seperti yang mungkin sudah Anda ketahui, pemberitahuan keranjang hanya muncul setelah pengguna mengklik tombol “Tambahkan ke Keranjang”. Tapi itu adalah langkah penting berikutnya dalam proses pembelian yang mengarahkan pengguna ke halaman checkout. Jadi ketika pemberitahuan keranjang muncul sebagai bilah lengket di bagian bawah jendela, itu lebih terlihat oleh pengguna.

Untuk membuat bilah tempel pemberitahuan keranjang, pertama buat baris satu kolom baru di bagian bawah halaman produk. Kemudian perbarui pengaturan baris sebagai berikut:

Lebar: 100%
Padding: 0px atas, 0px bawah

Kemudian buat baris menjadi 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.

Ini akan membuat baris menempel di bagian bawah jendela saat menggulir ke atas.

Kemudian perbarui indeks z agar tetap terdepan sebagai berikut:

Indeks Z: 10

Tambahkan Modul Pemberitahuan Keranjang

Setelah Anda membuat baris, tambahkan Modul Pemberitahuan Woo Cart ke baris dan perbarui pengaturan sebagai berikut:

Ukuran Teks Teks (telepon): 15px
Margin: 0em bawah

Itu dia! Terserah Anda apakah Anda ingin menghapus elemen pemberitahuan keranjang default di bagian atas halaman atau tidak, tetapi mungkin ide yang baik untuk membiarkannya untuk konversi yang lebih baik.

Hasil Akhir

Berikut adalah hasil akhir dengan dua batang lengket di tempatnya.

Desktop

Seluler

Pikiran Akhir

Semoga postingan ini dapat membantu kita memahami cara membuat sticky bar untuk halaman produk kita di Divi. Kami membahas cara membuat bilah tempel yang menyertakan judul produk, harga, dan tombol tambahkan ke troli. Dan kami juga menunjukkan cara membuat bilah tempel pemberitahuan keranjang. Kedua hal ini akan membantu proses pembelian dan meningkatkan konversi. Dan kami bahkan tidak membutuhkan plugin!

Jangan ragu untuk menjelajahi cara baru menggunakan bilah tempel halaman produk di situs Anda sendiri.

Kami berharap dapat mendengar dari Anda di komentar.

Bersulang!