Sidebar lengket sangat efektif dalam menarik perhatian pengunjung tanpa mengganggu atau mengganggu. Caranya adalah dengan menyertakan satu atau dua elemen di sidebar yang “tetap terlihat” atau menempel di samping isi postingan saat pengguna menggulir halaman. Ini adalah alternatif yang menyegarkan terhadap tata letak sidebar tradisional, karena memberikan kesan tata letak lebar penuh yang modern (tanpa sidebar), dengan manfaat menghadirkan ajakan bertindak yang penting di sisi halaman bila diperlukan.
Dalam tutorial ini, kami akan menunjukkan cara menambahkan ajakan bertindak yang melekat ke template posting blog menggunakan Divi Theme Builder. Penerapan tata letak ini cukup besar. Ini akan berfungsi untuk hampir semua halaman atau template posting apa pun. Selain itu, Anda tidak perlu membatasi diri Anda pada CTA; Anda dapat memilih untuk menambahkan modul Divi pilihan Anda.
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda harus untuk menginstal dan mengaktifkan tema Divi . Pastikan Anda memiliki Divi versi terbaru.
Anda juga akan memerlukan setidaknya satu pesan yang dibuat dengan Divi Builder untuk pengujian untuk menampilkan hasil yang diinginkan.
Setelah itu, Anda siap pergi.
penelitian
Berikut ini adalah ikhtisar cepat dari ACT lengket yang telah ditambahkan ke template posting blog di Divi.
Cara menambahkan ajakan bertindak tetap di template posting blog Anda di Divi
Menambahkan templat pembuat tema
Langkah pertama adalah mengimpor template standar kami di situs kami. Kami akan menggunakan templat publikasi Divi Theme Builder Pack # 1.
Untuk memulai, navigasikan ke Divi > Generator tema. Klik ikon portabilitas di kanan atas halaman. Dalam modal portabilitas, pilih tab impor dan pilih file divi-theme-builder-pack-1-post-template.json dari folder. Jika Anda memiliki template yang saat ini terinstal di situs Anda, pastikan untuk tidak mencentang opsi apa pun yang dapat menimpa template Anda saat ini. Kemudian klik tombol impor.
Bangun templat posting blog
Setelah templat diimpor, kami siap menambahkan CTA baru kami ke bilah sisi yang melekat pada tata letak templat. Untuk melakukan ini, klik ikon edit untuk area tubuh kustom.
Menambahkan tata letak sidebar ganda untuk menahan CTA sidebar
Di Model Layout Editor, temukan baris yang berisi modul Publikasikan. isi dan mengganti tata letak kolom dengan struktur kolom seperlima kali tiga perlima kali seperlima (1/5 3/5 1/5). Ini akan memungkinkan kita untuk menjaga kolom tetap di tengah isi postingan sambil menyediakan dua bagian di kedua sisi untuk CTA tempel kami.
Setelah mengubah struktur kolom, seret modul penerbitan konten ke kolom tengah.
Perbarui parameter garis
Buka pengaturan garis dan perbarui opsi desain berikut:
- Gunakan lebar selokan khusus: YA
- Lebar selokan: 2
- Lebar: 100% (desktop), 90% (tablet)
- Lebar maksimum: 1500px
Ini akan memberi kita ruang yang kita butuhkan untuk konfigurasi bilah sisi ganda.
Perbarui pengaturan kolom 1
Kemudian buka pengaturan kolom 1 dan berikan kolom ini kelas CSS khusus:
- Kelas CSS: sticky-cta
Menambahkan sidebar CTA ke kolom kiri
Kami sekarang siap untuk ajakan bertindak pertama. Tambahkan panggilan ke modul tindakan di kolom kiri.
Sesuaikan Cebar Sidebar
Perbarui pengaturan sebagai berikut:
Isi
- Tombol: «Klik di sini»
- Body: "Konten Anda ditempatkan di sini. Edit atau hapus teks ini secara online atau di pengaturan konten modul. ”
- URL tautan tombol: #
Desain teks tubuh
- Font Tubuh: Montserrat
- Berat font: setengah tebal
- Teks isi: Perataan kanan
- Warna tubuh teks: # 444444
- Ukuran teks isi: 22px (desktop), 18px (tablet)
- Tinggi badan: 1.3em
tombol
- Ukuran teks tombol: 14px
- Warna teks tombol: #ffffff
- Warna latar tombol: # 6148df
- Lebar batas tombol: 0px
- Radius tombol: 80px
- Berat font: Tebal
- Gaya font tombol: TT
- Padding tombol: 12px di atas, 12px di bawah, 22px di kiri, 22px di kiri
Lebar, penjajaran, bantalan dan trotoar
- Lebar: 100%
- Lebar maksimum: 320px
- Penyelarasan modul: benar
- Padding: 10px di sebelah kiri, 10px di sebelah kanan
- Lebar batas atas: 10px
- Warna batas atas: #eeeeee
- Lebar batas bawah: 10px
- Warna batas bawah: #eeeeee
Menambahkan sidebar CTA ke kolom kanan
Untuk membuat CTA untuk kolom kanan, salin yang baru saja kita buat dan tempelkan di kolom paling kanan. Kemudian perbarui pengaturan untuk duplikat sebagai berikut:
- Alignment dari badan teks: kiri
- Perataan modul: kiri
Perbarui pengaturan kolom 3
Untuk CTA ini di kolom sebelah kanan, kami akan menambahkan margin atas ke kolom untuk menetapkan posisi awal sidebar CTA di titik bawah halaman.
Mulailah dengan membuka parameter kolom 3 dan tambahkan kelas CSS yang sama yang kami tambahkan ke kolom 1:
- Kelas CSS: sticky-cta
Kemudian tambahkan CSS khusus berikut ke elemen utama:
Biro
margin-top: 50%
Tablette
margin-top: 0%
Ini akan memberi kita titik awal yang berbeda untuk CTA lengket di kolom kanan, yaitu 50% dari lebar baris. Jangan ragu untuk menyesuaikan nilai ini sesuai kebutuhan untuk posting blog Anda sendiri.
Tambahkan custom CSS ke template dengan modul kode
Untuk mendapatkan pemosisian "melekat" untuk CTA sidebar kami, kami perlu menambahkan CSS khusus. Untuk melakukan ini, buat modul kode baru di bawah modul penerbitan konten (atau di mana saja di halaman).
Lalu, rekatkan CSS berikut ke dalam kotak kode:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
Offset atas dalam kode ini adalah perhitungan yang memposisikan CTA secara vertikal di tengah halaman saat menggulir. 50vh adalah setengah dari tinggi jendela browser dan 130px adalah setengah dari tinggi CTA. Jika CTA Anda lebih tinggi atau lebih rendah, Anda perlu menyesuaikan 130 piksel ke atas atau ke bawah.
Simpan pengaturan
Setelah selesai, simpan tata letak template.
Dan kemudian menyimpan pengaturan pembuat tema
Hasil akhir
Untuk melihat hasil akhirnya, kunjungi artikel blog menggunakan templat.
Dan beginilah cara CTA lengket akan tetap macet saat digulir. Anda dapat melihat bagaimana itu akan bekerja paling baik untuk konten yang lebih panjang.
final pikiran
Ajakan untuk bertindak sampingan yang melekat ini adalah alternatif yang menyegarkan dari sidebar tradisional. Mereka bekerja dengan baik untuk desain minimalis karena tidak terlalu mengganggu dan tidak membuat postingan terasa berantakan. Selain itu, Anda dapat memposisikan CTA lebih rendah pada halaman sehingga muncul secara bertahap dan melekat pada gulungan, membuatnya lebih terlihat oleh orang. pengunjung. Dan jangan lupa. Anda dapat mengganti CTA dengan modul Divi apa pun atau kombinasi modul untuk membuat apa saja yang Anda inginkan. Anda juga dapat memilih untuk menyimpan hanya satu CTA di satu sisi. Tampaknya memiliki banyak aplikasi.
