Cara membangun pop-up dengan interaksi Divi 5 (unduhan gratis)

Pop-up adalah alat yang hebat untuk menarik perhatian dan mendorong keterlibatan di situs web Anda. Apakah Anda ingin menumbuhkan daftar email Anda, mempromosikan penawaran khusus, atau memandu pengunjung menuju tindakan tertentu, pop-up yang dirancang dengan baik dapat membuat semua perbedaan. Dengan rilis interaksi Divi 5, membuat pop-up yang dinamis dan kustom tidak pernah semudah ini.

Dalam posting ini, kami akan memandu Anda dengan membuat pop-up menggunakan fitur interaksi Divi 5. Ayo menyelam!

Apa interaksi Divi 5?

Divi 5 Interactions adalah fitur baru yang terintegrasi ke dalam pembangun visual, yang dirancang untuk membuat situs web lebih dinamis dan menarik. Ini memungkinkan Anda untuk membuat animasi dan tanggapan khusus berdasarkan tindakan pengguna atau acara halaman, seperti klik, hovers, atau pengguliran. Tidak seperti desain statis, interaksi memungkinkan Anda untuk membuat pop-up, rogen, gerakan mouse, dan efek gulir, semua dengan antarmuka Divi yang akrab.

Berlangganan saluran YouTube kami

Komponen kunci interaksi divi

Setiap interaksi dalam Divi 5 terdiri dari tiga komponen inti:

• Pemicu: Peristiwa yang memulai interaksi, seperti klik, hover, atau elemen yang masuk atau keluar dari viewport.
• Efek: Tindakan yang terjadi ketika pemicu diaktifkan, seperti beralih visibilitas, menerapkan gaya preset, atau mengubah atribut.
• Target: Elemen spesifik yang dipengaruhi oleh interaksi, yang dapat menjadi elemen yang sama, bagian lain, baris, kolom, atau modul pada halaman yang diidentifikasi oleh label admin -nya.

Komponen-komponen ini bekerja bersama, memungkinkan Anda untuk membuat interaksi yang kompleks dengan antarmuka yang sederhana dan tanpa kode.

Mengapa Anda harus menggunakan interaksi untuk membuat pop-up

Interaksi Divi 5 menawarkan beberapa keunggulan untuk membangun pop-up:

• Anda tidak memerlukan plugin apa pun: tidak seperti pembangun pop-up tradisional, interaksi Divi 5 dibangun langsung di pembangun visual, menghilangkan kebutuhan untuk plugin pihak ketiga.
• Terletak di dalam Visual Builder: Anda dapat membangun pop-up menggunakan antarmuka, modul, dan pilihan styling Divi yang akrab, memudahkan pengguna dari tingkat keterampilan apa pun.
• Opsi dan Efek Serbaguna: Gabungkan pop-up dengan interaksi lain, seperti animasi berbasis gulir atau efek gerakan mouse, untuk menciptakan pengalaman yang unik dan menarik.
• Kontrol penuh: Kustomisasi pemicu, efek, dan target untuk membuat pop-up untuk tujuan spesifik Anda, semua tanpa menulis kode.

Panduan langkah demi langkah untuk membangun pop-up di Divi 5

Membuat pop-up di Divi 5 sangat mudah, membuat cocok dengan desain situs Anda yang ada. Di bagian ini, kami akan menunjukkan betapa mudahnya membuat pop-up untuk mencocokkan salah satu tata letak yang sudah dibuat sebelumnya, menunjukkan kepada Anda cara menata, dan mengatur interaksi untuk menampilkan pop-up dengan penundaan waktu.

1. Pasang paket tata letak

Untuk tutorial ini, kami akan menyederhanakan hal-hal dengan memulai dengan salah satu desain paket tata letak kami dan kemudian membangun pop-up dengan gaya yang sama. Untuk melakukannya, klik ikon + di sudut kiri atas pembangun visual.

Saat kotak dialog muncul, pilih Premade Layout dari opsi yang tersedia.

Klik thumbnail paket tata letak pembelajaran online untuk menyoroti halaman yang tersedia.

Pilih desain halaman arahan dan klik Gunakan tata letak ini untuk memuatnya ke pembangun visual.

Langkah terakhir dalam mengimpor paket tata letak adalah memilih apakah akan mengimpor preset. Setelah membuat pilihan, klik tombol Impor.

2. Buat bagian untuk pop-up

Sekarang setelah paket tata letak diimpor, kita harus membuat bagian baru untuk pop-up kita di bagian bawah halaman. Gulir ke akhir halaman dan tambahkan bagian baru.

Klik ikon untuk memasukkan baris baru. Pilih opsi kedua di bawah kolom offset .

3. Desain pop-up

Sekarang kita dapat mulai menambahkan konten ke pop-up kita. Saat kotak dialog Sisipkan Modul atau Baris muncul, klik untuk menambahkan modul heading .

Masukkan “Ingin Diskon 15%?” Di bidang heading di bawah tab Konten.

Untuk menjaga desain konsisten di halaman, Anda dapat menggunakan fitur atribut Divi 5 untuk menyalin pengaturan modul heading lain untuk pop-up kami. Di bagian langsung di atas, arahkan kursor ke modul heading, klik kanan, dan klik Salin Atribut .

Selanjutnya, kurangi modul heading yang baru saja kita buat, klik kanan, pilih atribut pasta , lalu klik atribut desain teks tempel . Ini akan menempelkan gaya dari modul heading lainnya, memungkinkan konsistensi desain.

Di bawah modul heading, tambahkan modul teks baru.

Seperti halnya modul heading, cari modul teks di bagian di atas, klik kanan, dan pilih Salin Atribut . Dari sana, klik pada modul teks baru, ketuk atribut tempel , lalu tempel atribut desain teks .

Anda dapat menambahkan teks Anda ke dalam bidang teks atau menggunakan Divi AI untuk menghasilkannya untuk Anda.

Selanjutnya, kami akan menambahkan modul opt-in email di bawah modul teks.

Bagian di atas memiliki modul opt-in email, sehingga Anda dapat menyalin atributnya dan menempelkannya ke dalam email baru opt-in yang kami tambahkan ke pop-up kami.

Langkah terakhir adalah menambahkan gambar ke kolom kanan pop-up kami. Temukan modul gambar dan tambahkan ke kolom ke -2 tata letak kami.

Unggah gambar dan tambahkan ke modul gambar. Pada titik ini, bagian Anda harus terlihat mirip dengan ini:

4. Buat tombol tutup

Sekarang desain pop-up kami sudah ada, kami perlu menambahkan baris baru di atasnya untuk menambahkan ikon tombol tutup. Ini akan memungkinkan pengunjung Anda untuk menutup pop-up dengan kenyamanan mereka. Klik ikon Green + untuk menambahkan baris baru.

Ketika kotak dialog Sisipkan Baris muncul, klik tata letak kolom tunggal di bawah kolom yang sama untuk menambahkannya ke bagian.

Klik untuk menambahkan modul ikon ke baris.

Pilih ikon tutup dari opsi yang tersedia. Dapat dengan mudah ditemukan dengan mengetik "tutup" ke dalam kotak pencarian di atas daftar ikon.

Beralih ke tab Desain dan masukkan pengaturan desain berikut:

• Warna ikon: #5344B9
• Ukuran ikon: 36px
• Alignment: Benar

Langkah terakhir adalah memindahkan baris di atas baris dua kolom yang berisi konten pop-up kami. Gunakan tampilan Layers untuk mengatur ulang baris ke urutan yang benar. Sementara di sana, ganti nama bagian menjadi pop-up .

5. Sesuaikan pengaturan bagian

Sebelum membuat interaksi kami, kami harus memastikan bahwa pop-up berukuran tepat untuk lebar browser. Kami tidak ingin itu menjadi pop-up lebar penuh, jadi navigasikan ke desain untuk membuat beberapa penyesuaian. Perluas menu drop-down ukuran untuk mengungkapkan pengaturan.

Di bidang lebar , masukkan 80% untuk lebar. Selanjutnya, atur opsi bagian perataan bagian ke pusat .

Di bawah perbatasan , atur radius perbatasan 10px.

Kami juga akan menambahkan bayangan kotak sehingga pop-up kami menonjol di sisa konten. Temukan menu drop-down Box Shadow dan kembangkan. Di bawah Box Shadow , pilih Preset 1 .

Terakhir, pergilah ke tab konten untuk menambahkan warna untuk latar belakang bagian pop-up kami.

6. Buat interaksi untuk menampilkan pop-up

Dengan desain yang ada, kita dapat mengatur interaksi kita. Kami akan mengatur bagian pop-up kami untuk menampilkan 5 detik setelah pengguna mendarat di halaman. Arahkan ke tab lanjutan bagian dan temukan menu drop-down interaksi . Klik + tambahkan interaksi untuk memulai.

Pilih Muat dari opsi yang tersedia. Pengaturan ini akan memungkinkan pop-up muncul pada pemuatan halaman.

Ketika kotak dialog Edit Interaksi muncul, masukkan pengaturan berikut dan klik Simpan :

• Label Admin: Interaksi Pop-Up
• Peristiwa Pemicu: Muat
• Tindakan Efek: Tampilkan Elemen
• Modul Target: Bagian (pop-up)
• Waktu Penundaan: 5 detik

Selanjutnya, kita perlu menambahkan interaksi untuk tombol tutup kita. Pilih modul ikon di baris pertama bagian pop-up kami. Arahkan ke tab Advanced, klik + Tambahkan Interaksi , dan masukkan pengaturan berikut dan simpan:

• Label Admin: Tutup pop-up
• Acara Pemicu: Klik
• Tindakan Efek: Toggle Visibilitas
• Modul Target: Bagian (pop-up)
• Tunda Waktu: 0

7. Uji dan perbaiki pop-up Anda dengan breakpoints responsif yang dapat disesuaikan Divi 5

Sebelum melanjutkan ke langkah terakhir, merupakan ide bagus untuk menggunakan breakpoint responsif Divi 5 yang dapat disesuaikan untuk memastikan pop-up Anda terlihat bagus di semua ukuran layar. Di Divi 5, sekarang ada 7 breakpoint untuk dipilih.

Secara default, hanya tiga yang diaktifkan. Memiliki 7 memungkinkan Anda untuk menguji pop-up Anda pada lebih banyak breakpoint, memastikan pengalaman pengguna yang mulus dengan ukuran layar apa pun. Untuk mengizinkan semua 7, klik menu Ellipsis di tengah atas bilah admin. Dari sana, aktifkan semua breakpoint dengan mengacau.

Sistem tata letak Flexbox baru Divi 5 memungkinkan Anda untuk dengan mudah melakukan perubahan untuk memastikan pop-up Anda terlihat bagus di perangkat apa pun. Misalnya, Anda dapat menggunakan bidang Struktur Kolom Perubahan Divi 5 untuk mengubah jumlah kolom yang ditampilkan pada perangkat yang lebih kecil. Opsi ini akan menumpuk konten di seluler dengan satu klik.

8. Set opsi tampilan

Agar pop-up Anda ditampilkan dengan benar, kami perlu menyesuaikan visibilitas, penentuan posisi, dan indeks Z-Pop-up. Ini akan memungkinkan pop-up Anda untuk ditampilkan di tempat yang Anda inginkan, sembunyikan sampai saatnya untuk ditampilkan, dan pastikan muncul di atas sisa konten halaman.

Arahkan ke tab Advanced untuk bagian pop-up. Temukan menu drop-down visibilitas . Klik untuk menonaktifkan bagian pada semua tampilan (telepon, tablet, dan desktop).

Selanjutnya, klik menu drop-down Posisi. Atur posisi untuk diperbaiki dan pilih asal offset. Akhirnya, tambahkan z-indeks 99999 untuk memastikan tampilan pop-up di atas sisa konten halaman.

Setelah semua pengaturan ada, simpan halaman dan pratinjau di tab lain. Pop-up harus ditampilkan dalam 5 detik setelah halaman dimuat. Anda juga harus dapat menutup pop-up menggunakan interaksi dekat yang kami buat.

Opsi kustomisasi pop-up canggih

Interaksi Divi 5 memungkinkan Anda untuk membawa pop-up Anda ke tingkat berikutnya dengan fitur-fitur canggih seperti kondisi tampilan, menggabungkan efek, atau bahkan menggunakan divi AI untuk menghasilkan pop-up. Mari kita lihat beberapa cara Anda dapat membuat pop-up Anda lebih canggih tanpa perlu cuplikan CSS atau JavaScript khusus.

Kondisi tampilan

Anda dapat menggunakan opsi kondisi Divi untuk menunjukkan pop-up berdasarkan perilaku pengguna, seperti peran pengguna. Misalnya, Anda dapat menampilkan pop-up hanya untuk mencatat pengguna untuk mendorong pendaftaran.

Anda juga dapat mengaktifkan kondisi untuk menampilkan pop-up berdasarkan kunjungan halaman. Misalnya, Anda harus menonaktifkan pop-up jika pengguna tertentu telah mengunjungi halaman tersebut. Anda juga dapat mengaturnya untuk ditampilkan hanya jika pengguna belum mengunjungi halaman. Ini dapat berguna bagi pengunjung yang menemukan situs Anda melalui halaman yang berbeda dan klik pada halaman beranda berikutnya.

Menggabungkan efek

Anda dapat meningkatkan pop-up Anda dengan animasi berbasis gulir atau efek gerakan mouse. Ini dapat ditambahkan sebagai interaksi tambahan dengan memilih pemicu dan efek tambahan. Interaksi dapat digabungkan, dan tidak ada batasan untuk nomor yang dapat Anda buat. Misalnya, Anda dapat dengan mudah menerapkan interaksi pada gambar di pop-up kami menggunakan efek gerakan mouse.

Integrasi Divi AI

Mempercepat proses desain dengan menggunakan divi ai untuk menghasilkan tata letak. Anda dapat menginstruksikan Divi AI untuk membuat bagian tertentu, termasuk yang dapat Anda konversi menjadi pop-up. Dalam contoh di bawah ini, kami meminta Divi AI untuk membuat tata letak untuk pelatih bisnis, lengkap dengan bagian CTA kami dapat berubah menjadi pop-up.

Praktik terbaik untuk pop-up yang efektif

Untuk memastikan pop-up Anda meningkatkan pengalaman pengguna dan mendorong hasil, pertimbangkan praktik terbaik ini:

1. Tetap ramah pengguna

Hindari pop-up intrusif menggunakan penundaan waktunya, antara 5 dan 10 detik, bukan pemicu langsung. Ini memberi pengguna waktu untuk terlibat dengan konten Anda sebelum diminta. Meluncurkan pop-up terlalu cepat bisa mengganggu, menyebabkan pengguna menutup pop-up dan berpotensi kehilangan promosi, pendaftaran buletin, atau tindakan penting lainnya yang Anda inginkan.

Tetapkan penundaan waktu pop-up Anda untuk menghindari kehilangan keterlibatan pengguna.

Selain itu, selalu termasuk tombol tutup yang jelas dan mudah diidentifikasi sehingga pengguna dapat mengabaikan pop-up dan mempertahankan pengalaman menjelajah yang positif.

2. Optimalkan untuk kinerja

Optimalisasi kinerja sangat penting untuk pop-up yang efektif. Untuk menjaga waktu pemuatan cepat, minimalkan animasi berat atau gambar besar yang tidak dioptimalkan. Pilih gambar terkompresi dan batasi efek kompleks untuk memastikan pengalaman yang tajam dan mulus, terutama untuk pengguna pada koneksi yang lebih lambat atau perangkat seluler. Pendekatan ini meningkatkan kepuasan pengguna dan mendukung tingkat keterlibatan dan konversi yang lebih baik.

3. Desain pop-up dengan standar aksesibilitas dalam pikiran

Aksesibilitas adalah pertimbangan utama lain dalam membuat pop-up Anda inklusif untuk semua pengguna. Selalu tambahkan teks alt deskriptif ke gambar untuk membantu pembaca layar, pastikan kontras tinggi antara teks dan latar belakang untuk keterbacaan, dan gunakan ukuran font 16px atau lebih besar untuk mengakomodasi pengguna dengan gangguan visual.

Praktik-praktik ini membantu memastikan pop-up Anda dapat diakses oleh audiens yang beragam, selaras dengan standar aksesibilitas web.

4. Tes pada semua ukuran layar

Akhirnya, uji pop-up Anda secara menyeluruh pada semua ukuran layar untuk memastikan pengalaman yang konsisten di semua perangkat. Leverage breakpoint responsif yang dapat disesuaikan Divi 5 untuk memastikan pop-up Anda terlihat hebat dan berfungsi seperti yang dimaksudkan pada desktop, tablet, dan smartphone.

Perhatikan tombol tutup untuk memastikannya sebagaimana mestinya dan teks itu dapat dibaca di layar yang lebih kecil. Selain itu, periksa jarak, ukuran, dan tata letak sesuai kebutuhan untuk memberikan tampilan profesional yang dipoles.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama 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 mendapatkan akses ke paket tata letak divi mingguan gratis!

Buat pop-up dengan interaksi Divi 5

Fitur Interaksi Divi 5 membuat membuat pop-up mudah dengan memungkinkan Anda membangun desain khusus dan menarik secara langsung di dalam pembangun visual. Menggabungkan pemicu, efek, dan target memungkinkan Anda membangun pop-up yang menarik perhatian dan menggerakkan konversi sambil mencocokkan desain situs Anda dengan mulus. Jelajahi fitur lain seperti grup modul dan baris bersarang untuk membuat tata letak pop-up yang lebih dinamis.

Apakah Anda siap untuk mencoba Divi 5? Unduh alpha Public Divi 5 terbaru, bereksperimen dengan interaksi, dan bagikan pemikiran Anda di bagian komentar di bawah ini. Silakan bagikan kreasi Anda dengan kami di saluran media sosial kami dan kunjungi blog kami untuk tutorial lebih lanjut menggunakan fitur inovatif Divi 5. Kami berharap dapat melihat apa yang Anda buat!