Cara Membuat Menu CTA Lengket saat Anda Menggulir Halaman ke Bawah
Diterbitkan: 2020-10-23Secara tradisional, menu tempel terlihat di bagian atas (atau bawah) halaman saat halaman dimuat. Namun, membangun menu CTA yang lengket saat pengguna menggulir halaman ke bawah dapat menjadi cara yang kreatif dan efektif untuk menjaga agar CTA penting tersebut dapat diklik setiap saat. Dalam beberapa hal, ini adalah yang terbaik dari kedua dunia. Ini memungkinkan CTA untuk mempertahankan penempatan utamanya dalam desain aslinya. Dan, itu membuat versi CTA (tombol) yang diperkecil terlihat dalam struktur menu lengket yang akrab dengan pengguna.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat menu CTA yang lengket saat Anda menggulir halaman ke bawah di Divi. Ini akan bekerja dengan baik untuk pengguna desktop dan seluler dengan menambahkan cara yang intuitif, namun unik, untuk menarik pengunjung agar mengambil tindakan.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letaknya 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 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!
https://youtu.be/kpjbG8frPTQ
Berlangganan Saluran Youtube Kami
Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di 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 Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Cara Membuat Menu CTA Lengket saat Anda Menggulir Halaman di Divi
Membangun CTA #1
Untuk mulai membangun CTA pertama kami, kami akan menggunakan modul uraian dengan tombol CTA khusus yang akan menempel di bagian atas dan bawah halaman saat pengguna menggulir.
Untuk memulai, buat baris satu kolom baru di dalam bagian reguler.
Tambahkan Blurb
Di dalam kolom baris, tambahkan modul uraian.
Buka pengaturan uraian dan tambahkan gambar pilihan Anda alih-alih ikon default. Saya menggunakan gambar dari Paket Tata Letak Cryptocurrency.
Di bawah tab desain, perbarui gaya teks sebagai berikut:
- Judul Judul Tingkat: H2
- Judul Font: Titillium Web
- Judul Font Berat: Semi Tebal
- Perataan Teks Judul: Tengah
- Judul Teks Ukuran: 36px (desktop), 28px (ponsel)
- Judul Baris Tinggi: 1.5em
- Tinggi Garis Tubuh: 2em
Tambahkan Baris untuk Tombol CTA
Di bawah baris yang berisi uraian yang baru saja kita buat, tambahkan baris satu kolom baru.
Sangat penting untuk mendapatkan pengaturan baris yang benar agar fungsi tombol lengket berbaris dengan benar.
Buka pengaturan baris dan perbarui yang berikut:
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 1400 piksel (desktop), 100% (tablet)
Tambahkan Tombol Ajakan Bertindak
Di dalam baris baru, tambahkan modul ajakan bertindak. Pembaruan berikut:
- Kita hanya akan membutuhkan elemen tombol di dalam modul ini sehingga kita dapat menyingkirkan Judul dan teks isi.
- Pastikan untuk menambahkan URL Tautan tombol ('#' akan dilakukan untuk saat ini) sehingga tombol akan terlihat saat mendesain tata letak. Anda selalu dapat memperbarui ini nanti.
- Nonaktifkan opsi "Gunakan Warna Latar".
(CATATAN: Anda tidak akan dapat melihat tombol putih pada latar belakang putih tetapi itu akan berubah pada langkah berikutnya)
Di bawah tab desain, perbarui gaya tombol berikut:
- Ukuran Teks Tombol: 14px (desktop), 11px (ponsel)
- Warna Teks Tombol: #1b1f50
- Warna Latar Tombol: #09d5fe
- Lebar Batas Tombol: 0px
- Jarak Huruf Tombol: 2px
- Font Tombol: Titillium Web
- Berat Huruf Tombol: Tebal
- Gaya Font Tombol: TT
- Tombol Padding: 1em atas, 1em bawah
Lanjutkan memperbarui desain sebagai berikut:
- Lebar: 33,33%
- Penyelarasan Modul: tengah
- Padding: 0px atas, 0px bawah
Lebar tombol sebesar 33,33% akan memungkinkan tombol untuk mengambil tepat 1/3 dari jendela browser saat dalam posisi lengket. Menggabungkan ini dengan dua tombol lain (masing-masing dengan lebar 33,33% yang sama) akan memberikan bilah menu tombol CTA penuh.
Di bawah Tab Tingkat Lanjut, tambahkan cuplikan CSS khusus berikut ke Deskripsi Promo (ini memiliki spasi yang tidak perlu yang tidak kita perlukan):
display:none;
Kemudian tambahkan cuplikan lain Tombol Promo:
display:block;
Membuat Tombol Lengket
Untuk membuat tombol lengket, kita akan menggunakan opsi posisi lengket untuk menempelkan tombol dan bagian atas dan bawah jendela browser. Kami juga akan menambahkan offset untuk header tetap Divi default.
Perbarui berikut ini:
- Posisi Lengket: Tempel ke Atas dan Bawah
- Offset Atas Lengket: 54px (desktop), 0px (tablet)
- Offset Dari Elemen Lengket Sekitarnya: TIDAK
Dengan posisi lengket kami di tempat, kami sekarang dapat menargetkan gaya tombol dalam status lengket. Dalam hal ini kami ingin memindahkan tombol ke kiri untuk memberi ruang bagi tombol lengket tambahan di kemudian hari.
Perbarui gaya transformasi berikut dalam status lengket:
- Transformasi Terjemahkan sumbu X (lengket): -100%
Ini akan memindahkan tombol pada jarak yang sama dengan lebar tombol yang tepat (yaitu 33,33%) setelah menempel di bagian atas atau bawah halaman.
Membangun CTA #2
Sekarang kita memiliki satu bagian lengkap dengan tombol CTA yang berfungsi, kita dapat menduplikasi bagian sebelumnya dan membuat sedikit penyesuaian pada tombol.
Pertama, duplikat bagian tersebut.
Buka pengaturan untuk modul Ajakan Bertindak di bagian baru dan perbarui opsi transformasi sebagai berikut:
- Transformasi Terjemahkan sumbu X (Lengket): 0px
Ini sebenarnya hanya mengembalikannya ke keadaan default karena kami tidak ingin memindahkan tombol ini karena harus tetap berada di tengah.
Membangun CTA #3
Untuk membangun bagian CTA ketiga, duplikat bagian sebelumnya.
Kemudian buka pengaturan untuk modul Ajakan Bertindak di bagian baru dan perbarui opsi transformasi sebagai berikut:
- Transformasi Terjemahkan sumbu X (Lengket): 100%
Ini akan memindahkan tombol ke kanan dengan jarak yang sama dengan lebar tombol yang tepat (yaitu 33,33%) setelah menempel di bagian atas atau bawah halaman.
Perbarui Teks dan Warna Tombol
Untuk menyempurnakan desain, perbarui teks dan warna tombol CTA agar sesuai dengan desain situs Anda. Berikut adalah pengaturan untuk contoh ini:
Untuk CTA #2…
- Teks Tombol: Lihat Paket Kami
- Warna Teks Tombol: #ffffff
- Warna Latar Tombol: #1b1f50
Untuk CTA #3…
- Teks Tombol: Mengobrol Dengan Kami
- Warna Teks Tombol: #ffffff
- Warna Latar Tombol: #4328b7
Tambahkan Margin Sementara ke Bagian Atas dan Bawah untuk Fungsi Pengujian
Di situs web normal, CTA ini akan berada di tengah halaman di suatu tempat sehingga ada ruang ekstra untuk menggulir ke atas dan ke bawah halaman. Untuk saat ini, kita dapat menambahkan beberapa margin sementara ke bagian atas dan bawah halaman.
Di bagian atas tambahkan margin atas 90vh.
Di bagian bawah, tambahkan margin bawah 90vh.
Hasil Akhir
Sekarang mari kita lihat hasil akhirnya.
Pikiran Akhir
Tutorial ini menunjukkan cara kreatif untuk menjaga CTA penting tersebut di garis depan sehingga pengguna dapat mengkliknya kapan pun mereka mau. Itu juga menambahkan interaksi mikro halus yang menarik lebih banyak perhatian kepada mereka tanpa mengganggu konten utama halaman. Mudah-mudahan, ini akan membantu membuat jus kreatif mengalir sehingga Anda dapat bereksperimen dengan lebih banyak desain untuk membuatnya lebih baik.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!