Cara Menambahkan Popup yang Dipicu Gulir ke Postingan Blog Anda di Divi

Menambahkan popup yang dipicu gulir ke posting blog Anda sepertinya merupakan hal yang sangat cerdas untuk dilakukan. Anda mungkin pernah melihatnya sebelumnya ketika membaca blog lain. Saat pengguna menggulir ke titik tertentu dari pos (biasanya akhir), sebuah kotak yang berisi beberapa ajakan bertindak tiba-tiba muncul. Seluruh tujuan dari popup yang dipicu gulir adalah untuk menyajikan ajakan bertindak yang ditargetkan kepada pengunjung pada saat yang tepat Anda ingin mereka melihatnya di halaman. Singkatnya, ini adalah alat yang hebat untuk meningkatkan konversi atau mendapatkan prospek yang berkualitas. Karena itu, banyak plugin penambah konversi (seperti Bloom kami sendiri atau seperti Optin Monster) memungkinkan Anda melakukan hal yang sama.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan popup yang dipicu gulir ke posting blog Anda di Divi dari awal, tanpa plugin. Untuk melakukan ini, kita akan menggunakan Divi Theme Builder untuk mendesain popup yang menampilkan postingan terkait berdasarkan kategori dan juga popup yang menyertakan email optin. Pemicu gulir akan diselesaikan menggunakan potongan kecil jQuery.

Mari kita mulai!

Sneak Peek

Berikut adalah tampilan cepat popup yang dipicu gulir yang akan kita buat.

Kami akan membuat di popup untuk menampilkan posting terkait (berdasarkan kategori) seperti yang terlihat di bawah ini.

Dan kami juga akan menunjukkan cara menambahkan email optin ke popup seperti yang terlihat di sini.

Unduh Template Pos Divi Popup yang Dipicu Gulir GRATIS

Untuk mendapatkan Template Posting 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.

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 perlu mengunduh Paket Pembuat Tema Keempat karena kami akan menggunakan templat posting yang dibuat sebelumnya dari paket itu untuk tutorial ini.

Anda juga memerlukan setidaknya beberapa posting blog yang dibuat untuk tujuan pengujian agar template posting menunjukkan hasilnya.

Setelah itu, Anda siap untuk pergi.

Membuat Pop-Up yang Dipicu Gulir di Akhir Postingan Blog Divi Anda

Mengimpor Template Posting Blog dari Paket Pembuat Tema Keempat

Dari dasbor WordPress, navigasikan ke Divi > Theme Builder. Di dalam pembuat tema, pilih ikon portabilitas di kanan atas halaman. Di popup portabilitas, pilih tab impor, pilih file theme-builder-pack-4-post-template.json dan klik tombol impor. (File impor ini akan berada di dalam folder Paket Pembuat Tema Keempat)

Anda juga dapat memilih opsi untuk mengimpor header dan footer global sebagai tata letak statis.

Setelah template diimpor, klik ikon untuk mengedit area badan kustom.

Ini akan membawa Anda ke editor tata letak templat tubuh tempat kami akan menambahkan munculan yang dipicu gulir.

Merancang Popup yang Dipicu Gulir dengan Posting Terkait berdasarkan Kategori

Popup akan ditampung oleh baris Divi. Oleh karena itu, setelah kami mendapatkan fungsionalitas popup, Anda dapat mengisi baris itu dengan modul apa pun untuk membuat konten apa pun yang Anda inginkan. Untuk contoh pertama ini, kami akan membuat popup yang menampilkan postingan terkait berdasarkan kategori. Dengan begitu ketika pengunjung menggulir ke bagian bawah posting, mereka akan mendapatkan posting terkait yang disarankan kepada mereka dalam popup.

Berikut cara melakukannya.

Tambahkan Baris Satu Kolom

Pertama tambahkan satu baris kolom tepat di bawah baris yang berisi modul konten posting di tata letak template posting.

Pengaturan Baris

Sebelum menambahkan modul, perbarui pengaturan baris sebagai berikut:

• Warna Latar Belakang: #ffffff
• Lebar Talang: 1
• Lebar: 300px (desktop), 200px (ponsel)
• Padding: 20px atas, 0px bawah
• Bayangan Kotak: lihat tangkapan layar

Tambahkan Modul Teks

Setelah pengaturan baris disesuaikan, tambahkan modul teks ke baris. Ini akan menjadi area judul dari popup posting terkait kami.

Isi

Perbarui isi isi dengan teks “Related Post”.

Desain

Kemudian perbarui pengaturan desain sebagai berikut:

• Font Teks: Heebo
• Gaya Font Teks: TT
• Warna Teks Teks: #f94857
• Perataan Teks: tengah

Tambahkan Modul Blog

Di bawah modul teks, tambahkan modul blog.

Isi

Karena kami hanya ingin menampilkan satu posting terkait, kami akan membatasi jumlah posting menjadi satu dan memasukkan "kategori saat ini" sehingga posting yang ditampilkan di popup akan berbagi kategori yang sama dari posting aktual yang ditampilkan pada template.

Perbarui berikut ini:

• Jumlah Postingan: 1
• Termasuk Kategori: Kategori Saat Ini

Elemen

Di bawah grup opsi elemen, pastikan Anda memilih untuk hanya menampilkan gambar unggulan. Sembunyikan yang lainnya.

Desain

Di bawah tab desain, perbarui yang berikut ini:

• Judul Font: Heebo
• Judul Font Berat: Ultra Tebal
• Ukuran Teks Judul: 16px
• Tinggi Baris Judul: 1.4em
• Padding: 5% atas, 5% kiri, 5% kanan

Pengaturan Baris Lanjut

Kelas CSS, CSS Kustom, dan Indeks Z

Di bawah tab lanjutan, kita perlu memberi baris kita kelas CSS, sedikit CSS khusus, dan memperbarui indeks z sehingga popup tetap berada di atas konten lain di halaman.

Langkah ini akan menyembunyikan baris dari pandangan saat menggunakan pembuat visual di ujung depan. Jadi mungkin lebih baik untuk menerapkan tampilan gambar rangka sebelum memperbarui opsi ini.

Setelah dalam mode tampilan gambar rangka, buka kembali pengaturan baris dan tambahkan Kelas CSS berikut:

• Kelas CSS: pasca-baris

Kemudian tambahkan custom css berikut ke Elemen Utama:

position: fixed;
bottom: 0%;
right: -300px;

Dan perbarui Indeks Z:

• Indeks Z: 999

Tambahkan Pembagi sebagai Poin Pemicu Gulir

Pada titik ini popup kami siap digunakan. Sekarang kita perlu memutuskan di mana akan menambahkan titik pemicu gulir pada templat posting, sehingga setelah pengguna menggulir ke titik-titik ini, munculan akan ditampilkan atau disembunyikan. Titik pemicu gulir akan ditentukan oleh elemen dengan kelas CSS. Karena kita ingin titik pemicu gulir berada di bagian bawah posting, kita dapat menggunakan pembagi dengan kelas CSS sebagai elemen titik pemicu gulir kita.

Tambahkan Titik Pemicu Gulir #1

Untuk menambahkan titik pemicu gulir pertama kami, mari tambahkan modul pembagi langsung di bawah modul konten posting.

Kemudian tambahkan Kelas CSS berikut:

• Kelas CSS: post-waypoint

Itu mudah.

Tambahkan Titik Pemicu Gulir #2

Sekarang untuk menambahkan titik pemicu kedua (yang akan menyembunyikan popup lebih jauh ke bawah halaman), salin modul pembagi yang baru saja dibuat.

Kemudian rekatkan di tempat yang terletak lebih jauh di bawah templat posting tempat Anda ingin popup ditutup (atau disembunyikan). Untuk contoh ini, saya menambahkannya tepat di bawah modul blog posting terkait dan tepat di atas bagian komentar dari template posting.

Tambahkan Kode Kustom dengan Modul Kode

Yang tersisa untuk dilakukan agar popup yang dipicu gulir ini berfungsi adalah sedikit kode.

Silakan dan tambahkan modul kode ke templat posting.

Kemudian paste kode berikut di kotak kode:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Hasil

Untuk melihat hasilnya, kunjungi salah satu posting blog Anda dan gulir ke bawah halaman. Anda akan melihat popup posting terkait ketika Anda mencapai bagian bawah konten posting. Terus gulir untuk melihatnya disembunyikan tepat setelah bagian posting terkait dari posting.

Menambahkan Keikutsertaan Email ke Pop-Up yang Dipicu Gulir

Popup posting terkait itu keren, tapi mungkin Anda ingin email optin untuk popup saja. Ini mudah untuk dilakukan. Bahkan, kita bahkan bisa menggunakan email optin yang sudah didesain dalam tata letak footer yang sudah dibuat sebelumnya pada template ini.

Simpan Footer Email Optin ke Divi Library

Simpan tata letak Anda dan keluar ke pembuat tema. Kemudian klik untuk mengedit tata letak template footer kustom.

Temukan modul optin email dan simpan ke perpustakaan divi.

Tambahkan Keikutsertaan Email Tersimpan ke Baris Popup

Sekarang kembali ke tata letak templat badan khusus dan tambahkan opsi email yang disimpan di baris yang sama yang Anda gunakan sebagai sembulan. Ingat, apa pun di dalam baris itu akan ditampilkan sebagai konten popup.

Karena Anda tidak menggunakan modul teks dan blog, Anda dapat menonaktifkannya agar tidak terlihat di bagian depan.

Pengaturan Keikutsertaan Email

Setelah email optin ditempatkan dan modul lainnya dinonaktifkan, perbarui pengaturan email optin sebagai berikut:

• Judul: “Menyukai Artikel Ini?”
• Isi: “Bergabunglah dengan Newsletter kami!”

Kemudian tambahkan padding berikut:

• Padding: 5% bawah, 20px kanan

Hasil

Sekarang lihat hasilnya di pos langsung.

Pikiran Akhir

Gulir yang dipicu popup pasti bisa menjadi aset berharga untuk blog Anda. Mereka memberikan cara yang tidak mencolok untuk memanfaatkan prospek yang berkualitas. Gunakan popup posting terkait untuk membuat mereka tetap terlibat di situs Anda atau gunakan email optin untuk membantu mengembangkan daftar Anda. Dan dengan Divi, Anda dapat menambahkan hampir semua konten lain yang dapat Anda pikirkan juga. Dan Anda dapat memutuskan dengan tepat kapan Anda ingin pengunjung melihat popup yang cukup kuat. Saya harap Anda menemukan ini berguna untuk blog Anda sendiri atau proyek berikutnya.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!