Cara Membuat Popup Pojok Konten Terkunci dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara membuat popup sudut konten terkunci dengan Divi dan Paket Tata Letak Resor. Konsep formulir optin konten yang dikunci itu sederhana. Orang-orang harus memasukkan alamat email mereka dan segera setelah mereka melakukannya, konten tersembunyi akan terungkap. Anda dapat menggunakan konten tersembunyi ini untuk membagikan kode diskon misalnya. Untuk mewujudkan semua ini, kita akan menggunakan plugin Bloom dan menambahkan shortcode formulir optin konten terkunci ke Modul Teks yang akan kita gaya sebagai popup. Modul Teks juga akan menyertakan animasi dengan penundaan animasi untuk membuat Modul Teks muncul seolah-olah itu adalah popup.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Instal Plugin Bloom

Unduh Bloom

Hal pertama yang perlu Anda lakukan adalah mengunduh plugin Bloom. Jika Anda sudah menjadi anggota Elegant Themes, Anda dapat menemukan plugin dengan masuk ke member area. Di sana, Anda dapat mengunduh file zip. Jika Anda belum menjadi anggota Elegant Themes, Anda harus membeli keanggotaan terlebih dahulu.

Unggah & Instal Bloom

Setelah Anda mengunduh Bloom, Anda dapat melanjutkan dan mengunggahnya ke situs WordPress Anda dengan membuka Plugins > Add New dan mengklik 'Upload Plugin' di bagian atas halaman.

Kemudian, unggah file zip dan klik 'Instal Sekarang'.

Jangan lupa untuk mengaktifkan plugin setelah diunggah juga.

Siapkan Formulir Bloom Optin

Tambahkan Formulir Konten Terkunci Baru

Kita sekarang dapat mulai membuat formulir konten terkunci yang nantinya akan kita gunakan dalam desain Divi! Buka Dasbor WordPress > Bloom > Optin Forms dan buat formulir optin baru.

Lanjutkan dengan memilih jenis optin 'Konten Terkunci' dan lanjutkan ke pengaturan penyiapan.

Pengaturan Pengaturan

Setelah Anda berada di pengaturan penyiapan, Anda harus memberi nama formulir optin baru Anda. Anda juga harus memilih penyedia email pilihan Anda dan memasukkan detail otentikasi.

Pengaturan Desain

Langkah selanjutnya adalah mendesain formulir. Nanti di posting, kita akan menggunakan shortcode formulir optin dalam Modul Teks yang akan kita gaya, jadi kita tidak perlu terlalu banyak pengaturan yang diterapkan pada formulir optin itu sendiri. Pastikan Anda membiarkan judul optin dan kotak isi pesan optin kosong. Ubah juga orientasi gambar.

• Orientasi Gambar: Tidak Ada Gambar

Gulir ke bawah halaman dan buat beberapa perubahan tambahan pada penataan gaya dan formulir optin.

• Warna Latar Belakang: #ffffff
• Orientasi Formulir: Formulir di Bawah

Kami juga mengubah pengaturan gaya formulir.

• Orientasi Bidang Formulir: Bidang Formulir Bertumpuk
• Warna Latar Belakang Formulir: #f4f4f4
• Warna Tombol: #ffffff
• Warna Teks Tombol: Gelap
• Pilih Gaya Tepi Bentuk: Opsi Kedua

Buat Desain dengan Divi

Tambahkan Baris Baru

Struktur Kolom

Kami sekarang dapat beralih ke Divi Builder! Silakan dan buat halaman baru menggunakan beranda Resort Layout Pack. Setelah tata letak diunggah, lanjutkan dengan menambahkan baris baru di bagian atas bagian kedua menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Buka pengaturan spasi berikutnya dan tambahkan '0px' ke padding atas dan bawah baris. Ini akan membatasi ruang yang digunakan oleh baris baru yang telah kita tambahkan.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks

Tambahkan Konten H3

Satu-satunya modul yang kita butuhkan untuk membuat popup pojok konten terkunci adalah Modul Teks. Tambahkan judul H3 pilihan Anda ke kotak konten.

Tambahkan Kode Pendek Formulir Keikutsertaan Konten Terkunci

Kemudian, kembali ke plugin Bloom dan salin kode pendek dari formulir optin yang Anda buat di bagian sebelumnya dari tutorial ini.

Tambahkan konten apa pun yang ingin Anda tampilkan setelah orang mengisi formulir optin. Pada contoh di bawah, Anda dapat melihat bahwa kami membagikan kode kupon, tetapi Anda dapat membagikan informasi apa pun yang Anda inginkan.

Warna latar belakang

Pergi ke pengaturan latar belakang modul berikutnya dan tambahkan warna latar belakang yang benar-benar putih.

• Warna Latar Belakang: #ffffff

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks berikutnya.

• Font Teks: Buka Sans
• Warna Teks: #0f87ff
• Ukuran Teks: 15px

Pengaturan Teks H3

Ubah font yang digunakan untuk salinan H3 Anda juga.

• Judul 3 Font: Tampilan Gilda

Jarak

Dan untuk memberi bentuk pada modul, kita akan menambahkan beberapa nilai margin dan padding kustom. Kami juga memodifikasi semua nilai ini untuk membuat desain cocok dengan ukuran layar apa pun yang digunakan pengunjung Anda.

• Margin Atas: -17vw
• Margin Kiri: 65vw (Desktop), 37vw (Tablet), 3vw (Telepon)
• Margin Kanan: 0px
• Padding Atas: 5vw (Desktop), 11vw (Tablet), 13vw (Telepon)
• Padding Bawah: 5vw, 11vw (Tablet), 13vw (Telepon)
• Padding Kiri: 6vw (Desktop), 11vw (Tablet), 16vw (Telepon)
• Padding Kanan: 6vw (Desktop), 11vw (Tablet), 16vw (Telepon)

Berbatasan

Lanjutkan dengan masuk ke pengaturan perbatasan Modul Teks dan tambahkan '500vw' ke masing-masing sudut, kecuali sudut kanan bawah.

Bayangan Kotak

Tambahkan bayangan kotak di sebelahnya untuk membuat Modul Teks muncul.

• Kekuatan Buram Bayangan Kotak: 150px
• Warna Bayangan: rgba(0,0,0,0.3)

Animasi

Terakhir, kami juga menambahkan animasi yang bergerak dari kanan ke kiri untuk membuat efek popup.

• Pengulangan Animasi: Sekali
• Arah Animasi: Kiri
• Durasi Animasi: 500ms
• Penundaan Animasi: 1000ms
• Intensitas Animasi: 16%

Baris Klon

Setelah Anda selesai membuat popup pojok konten terkunci pertama, Anda dapat melanjutkan dan mengkloning seluruh baris.

Tempatkan baris duplikat di sini:

Hapus Bagian Bawah Padding

Lepaskan bantalan bawah dari bagian tempat Anda meletakkan baris.

• Padding Bawah: 0px

Ubah Pengaturan Spasi Modul Teks

Kemudian, buka pengaturan Modul Teks dan ubah nilai margin khusus.

• Margin Kiri: 0vw
• Margin Kanan: 65vw (Desktop), 37vw (Tablet), 3vw (Telepon)

Ubah Sudut Bulat Modul Teks

Pastikan Anda juga mengubah sudut yang membulat. Kami menggunakan '500vw' untuk setiap sudut kecuali yang kiri bawah.

Ubah Pengaturan Animasi Modul Teks

Last but not least, ubah arah animasi ke kanan dan selesai!

• Arah Animasi: Kanan

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar!

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat popup sudut konten terkunci dengan Divi, plugin Bloom, dan Paket Tata Letak Resor. Anda dapat menggunakan teknik ini untuk meyakinkan orang agar menjadi bagian dari daftar email Anda dengan menawarkan kode kupon yang muncul setelah mereka mengisi formulir. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!