Cara Menambahkan CTA Sticky Sidebar ke Template Posting Blog di Divi

Sticky Sidebar CTA sangat efektif untuk menarik perhatian pengunjung tanpa menjadi sombong atau mengganggu. Caranya adalah dengan memasukkan satu atau dua elemen di sidebar yang "menempel" atau tetap berada di sisi konten posting saat pengguna menggulir halaman ke bawah. Ini adalah alternatif yang menyegarkan untuk tata letak bilah sisi tradisional karena memberikan nuansa tata letak lebar penuh (tanpa bilah sisi) modern dengan manfaat menampilkan CTA penting di sisi halaman bila diperlukan.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan CTA bilah sisi lengket ke template posting blog menggunakan Divi Theme Builder. Penerapan tata letak ini jauh jangkauannya. Ini akan berfungsi untuk hampir semua halaman atau templat posting. Plus, Anda tidak perlu membatasi diri pada CTA; Anda dapat memilih untuk menambahkan modul Divi apa pun yang Anda suka.

Mari kita mulai!

Unduh Template CTA Sticky Sidebar secara GRATIS

Untuk meletakkan tangan Anda pada template posting cta sidebar lengket dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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 di 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.

UNDUH

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 tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.

Anda juga memerlukan setidaknya satu posting yang dibuat dengan Divi Builder untuk tujuan pengujian agar dapat menampilkan hasil yang diinginkan.

Setelah itu, Anda siap untuk pergi.

Sneak Peek

Berikut ini sekilas CTA sticky sidebar yang telah ditambahkan ke template posting blog di Divi.

Cara Menambahkan CTA Sticky Sidebar ke Template Posting Blog Anda di Divi

Menambahkan Template Pembuat Tema

Langkah pertama termasuk mendapatkan template premade kami yang diimpor ke situs kami. Kami akan menggunakan template posting dari Divi Theme Builder Pack #1.

Untuk memulai, navigasikan ke Divi > Theme Builder. 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 terpasang di situs Anda, pastikan untuk menghapus centang pada opsi apa pun yang dapat menimpa template Anda saat ini. Kemudian klik tombol impor.

Membangun Template Posting Blog

Satu template telah diimpor, kami siap untuk mulai menambahkan CTA bilah sisi lengket baru kami ke tata letak template. Untuk melakukan ini, klik ikon edit dari area tubuh kustom.

Menambahkan Tata Letak Bilah Sisi Ganda untuk Memegang CTA Bilah Sisi

Di Editor Tata Letak Template, temukan baris yang berisi modul konten posting dan ubah tata letak kolom menjadi struktur kolom seperlima tiga per lima (1/5 3/5 1/5). Ini akan memungkinkan kita untuk menjaga kolom tengah untuk konten posting sambil menyediakan dua bagian di kedua sisi untuk CTA sidebar lengket kita.

Setelah struktur kolom diubah, seret modul konten posting ke kolom tengah.

Memperbarui Pengaturan Baris

Buka pengaturan baris dan perbarui opsi desain berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 2
• Lebar: 100% (desktop), 90% (tablet)
• Lebar Maks: 1500px

Ini akan memberi kami ruang yang kami butuhkan untuk pengaturan bilah sisi ganda kami.

Memperbarui Pengaturan Kolom 1

Selanjutnya, buka pengaturan untuk kolom 1 dan berikan kolom tersebut Kelas CSS khusus:

• Kelas CSS: sticky-cta

Menambahkan CTA Sidebar ke Kolom Kiri

Sekarang kita siap untuk ajakan bertindak pertama. Tambahkan modul ajakan bertindak ke kolom paling kiri.

Menata CTA Bilah Sisi

Perbarui pengaturan sebagai berikut:

Isi

• Tombol: “Klik Disini”
• Body: “Konten Anda ada di sini. Edit atau hapus teks ini sebaris atau dalam pengaturan Konten modul.”
• URL Tautan Tombol: #

Desain Teks Tubuh

• Font Tubuh: Montserrat
• Berat Huruf Tubuh: Semi Tebal
• Perataan Teks Tubuh: kanan
• Warna Teks Tubuh: #444444
• Ukuran Teks Isi: 22px (desktop), 18px (tablet)
• Tinggi Garis Tubuh: 1.3em

Tombol

• Ukuran Teks Tombol: 14px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #6148df
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 80px
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: TT
• Tombol Padding: 12px atas, 12px bawah, 22px kiri, 22px kanan

Lebar, Perataan, Padding, dan Perbatasan

• Lebar: 100%
• Lebar Maks: 320px
• Penyelarasan Modul: kanan
• Padding: 10px kiri, 10px kanan
• Lebar Batas Atas: 10px
• Warna Batas Atas: #eeeeee
• Lebar Batas Bawah: 10px
• Warna Batas Bawah: #eeeeee

Menambahkan CTA Sidebar ke Kolom Kanan

Untuk membuat CTA untuk kolom kanan, salin yang baru saja kita buat dan tempel ke kolom paling kanan. Kemudian perbarui pengaturan untuk duplikat sebagai berikut:

• Perataan Teks Tubuh: kiri
• Penyelarasan Modul: kiri

Perbarui Pengaturan Kolom 3

Untuk CTA ini di kolom kanan, kita akan menambahkan beberapa margin atas ke kolom untuk menetapkan posisi awal CTA sidebar pada titik yang lebih jauh ke bawah halaman.

Pertama, buka pengaturan untuk Kolom 3 dan tambahkan Kelas CSS yang sama dengan yang kita tambahkan ke Kolom 1:

• Kelas CSS: sticky-cta

Kemudian tambahkan CSS Kustom berikut ke Elemen Utama:

Desktop

margin-top: 50%

Tablet

margin-top: 0%

Ini akan memberi kita titik awal yang berbeda untuk CTA lengket di kolom kanan yang sama dengan 50% dari lebar baris. Jangan ragu untuk menyesuaikan nilai ini sesuai kebutuhan untuk posting blog Anda sendiri.

Menambahkan CSS Kustom ke Template dengan Modul Kode

Untuk mendapatkan posisi "lengket" kami untuk CTA bilah sisi kami, kami perlu menambahkan beberapa CSS khusus. Untuk melakukan ini, buat modul kode baru di bawah modul konten posting (atau di mana saja di halaman).

Kemudian paste 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 teratas dalam kode ini adalah perhitungan yang memposisikan CTA secara vertikal di tengah halaman saat menggulir. 50vh pada dasarnya adalah setengah dari tinggi jendela browser dan 130px kira-kira setengah dari tinggi CTA. Jika Anda memiliki CTA yang lebih tinggi/kurang tinggi, Anda perlu menyesuaikan 130px ke atas atau ke bawah.

Simpan Pengaturan

Setelah selesai, simpan tata letak template.

Dan kemudian simpan pengaturan pembuat tema

Hasil Akhir

Untuk melihat hasil akhir, kunjungi posting blog yang menggunakan template.

Dan beginilah CTA bilah sisi lengket akan menempel pada gulir. Anda dapat melihat bagaimana ini akan bekerja paling baik untuk konten posting yang lebih panjang.

Dan ini dia di layar ponsel.

Pikiran Akhir

CTA bilah sisi lengket ini adalah alternatif yang menyegarkan untuk bilah sisi tradisional. Mereka cocok untuk desain minimalis karena tidak terlalu mengganggu dan tidak membuat postingan terkesan berantakan. Plus, Anda dapat memposisikan CTA lebih jauh ke bawah halaman sehingga secara bertahap muncul dan menempel pada gulir, membuatnya sedikit lebih menonjol bagi pengunjung. Dan jangan lupa. Anda dapat mengganti CTA dengan modul Divi atau kombinasi modul apa pun untuk membuat hampir semua yang Anda inginkan. Anda juga dapat memilih untuk menyimpan hanya satu CTA di satu sisi. Tampaknya memiliki banyak aplikasi.

Saya harap ini akan membantu meningkatkan cara Anda menampilkan CTA pada templat posting Anda di masa mendatang.

Untuk inspirasi lebih lanjut, lihat posting serupa kami di elemen lengket.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!