Apakah Anda ingin membuat dan menampilkan satu popup per post tag di WordPress? Jadi teruslah membaca artikel ini.
Kami yakin Anda sudah terbiasa dengan jendela kecil yang muncul saat menjelajahi situs web. Nah, itu namanya popup atau popup. Munculan dapat muncul dalam berbagai ukuran dan posisi di layar di situs web.
Di WordPress, ada banyak plugin untuk membuat popup, seperti Elementor Pro, JetPopup, Brizy Pro, dan lainnya.
L’élément important à retenir est que les fenêtres contextuelles ne doivent pas être ennuyeuses pour les visiteurs de votre site web. Par conséquent, créez un popup aussi simple et attrayante que possible.
Daftar isi
Beberapa plugin WordPress untuk membuat popup
Elementor Pro
Elementor Pro est une extension d’Elementor avec des centaines de fonctionnalités premium. Il vous offre de puissants outils professionnels qui accélèrent votre flux de travail et votre conception. Elementor Pro memberi Anda kendali penuh atas tata letak dan desain situs web Anda. Dalam hal ini, Anda dapat dengan bebas menyesuaikan desain sembulan Anda.
penggunaan Elementor Pro untuk membuat sembulan dengan tag pos sangat sederhana dan mudah digunakan. Anda dapat dengan mudah menentukan kondisi tampilan popup Anda dengan cara yang sangat tepat.
JetPopup
JetPopup Crocoblock adalah ekstensi untuk Elementor. Anda dapat membelinya sebagai plugin mandiri atau membelinya dalam bundel dengan plugin Crocoblock lainnya. Keuntungan menggunakan JetPopup untuk membuat jendela sembulan adalah ia hadir dengan banyak fitur keren.
- Anda dapat bermain-main dengan pemicu jendela popup.
- Anda dapat membuat animasi untuk jendela popup.
- Sejumlah besar template popup tersedia.
Baca juga: 22 Add-on Premium Terbaik untuk Elementor
Brizy Pro
Pembuat popup dari Brizy Pro menawarkan dua pilihan. Yang pertama adalah sembulan yang diaktifkan dengan klik, dan yang kedua adalah pemicu dan kondisi otomatis.
- Opening on click: Popup Anda dapat dipicu hanya dengan mengklik elemen halaman Anda.
- Pemicu dan ketentuan otomatis: Anda dapat mengonfigurasi tindakan pengunjung yang akan menentukan kapan munculan ditampilkan.
Cara Membuat dan Menampilkan Popup dengan Post Tag di WordPress dengan Elementor
Seperti yang disebutkan sebelumnya, Anda memiliki beberapa opsi untuk membuat popup di WordPress. Dalam tutorial ini, kami akan menunjukkan cara membuat dan menampilkan popup per post tag menggunakan versi Elementor Pro, assurez-vous donc d’en avoir déjà une.
Langkah 1: Buat template popup
Hal pertama yang harus dilakukan adalah membuat template Popup baru. Untuk membuat template Popup baru, buka Template > Munculan di dasbor WordPress Anda dan klik tombolnya Tambah baru.
Selanjutnya, tambahkan nama Popup Anda dan klik tombol BUAT MODEL.
Anda akan diarahkan ke template library, Anda dapat memilih template dari jendela library atau mendesain template Popup Anda sendiri. Untuk menggunakan templat dari pustaka, cukup klik tombol menyisipkan.
Namun dalam tutorial ini, kita akan membuat template Popup dari awal. Klik ikonnya X untuk menutup pustaka template.
Langkah 2: Sesuaikan Pengaturan Popup
Kita perlu melakukan beberapa penyesuaian pada pengaturan Popup sebelum kita mulai membuat template Popup. Anda dapat menemukan pengaturan terbaik untuk situs Anda. Dalam tutorial ini, kami akan menunjukkan kepada Anda pengaturan Popup pilihan Anda.
Klik ikon roda gigi di pojok kiri bawah. Di pengaturan Munculan, ubah Lebar dalam 90% dari lebar tampilan (VW) Et yang Posisi en Tengah-Bawah.
Langkah 3: Desain Popup
Selanjutnya, desain template Popup Anda. Tambahkan bagian baru dan pilih struktur 5 kolom. Di bagian pengaturan, atur Lebar pada 950. Anda dapat bermain dengan pengaturan Anda.
Misalnya, Anda dapat membuka tab Gaya untuk mengatur latar belakang, buka tab maju untuk menyesuaikan margin, dan banyak lagi.
Sekarang kembali ke kolom Anda. Di kolom kiri, atur lebarnya menjadi 33%, dan untuk empat lainnya, menjadi 16%.
Di kolom kiri, kami akan menambahkan widget Judul dengan beberapa teks. Anda dapat menambahkan teks yang mengundang pengunjung situs web Anda untuk melihat konten lain yang relevan dengan konten saat ini, atau teks lain pilihan Anda.
Di sebelah kanan, kami akan menambahkan widget Gambar. Anda dapat menambahkan gambar dari thumbnail/fitur gambar postingan atau mengunggahnya secara manual.
Sekarang strukturnya sudah siap. Kembali ke Pengaturan Munculan untuk menyesuaikan animasi masuk, keluar, dan margin. Dalam tutorial ini, kami mengatur input ke Memudar dan output aktif Memudar. Lalu pergi ke tab maju dan atur margin menjadi 30 (nilai umum untuk tautan).
Langkah 4: Publikasikan Popup
Sekarang desainnya sudah siap, klik tombolnya MENERBITKAN untuk mengatur kondisi tampilan dan pemicu. Untuk menentukan kondisi tampilan, klik tombol TAMBAHKAN KONDISI dan pilih opsi Anda dari daftar drop-down.
Saat Anda ingin menampilkan tag Popup by post, Anda dapat mengatur kondisi tampilan berikut (lihat animasi).
Klik Berikutnya. Di tab pemicu, atur pemicunya ke Di Gulir membalik saklar ke ya. Tentukan Kepemimpinan di Bas dan Lebar lebih dari 95%. Karena kita ingin Popup muncul saat pengunjung mencapai akhir artikel kita.
Dalam tutorial ini, kita tidak akan mendefinisikan Aturan Lanjutan. Jadi klik SIMPAN DAN TUTUP. Nah, sekarang kita sudah selesai.
Mari kita lihat seperti apa.
Di sini Anda baru saja menyelesaikan popup Anda. Lihat juga artikel terkait kami:
- 6 Cuplikan CSS Berguna untuk Widget Posting Elementor
- Cara Membuat Halaman Daftar dengan Elementor Loop Builder
- Cara Menambahkan Jam Kerja di Situs Web Elementor Anda
- Cara Menambahkan Line Break di Teks Tombol Elementor
- Cara Membuat dan Mengedit Footer di Elementor
- Cara Menambahkan Masker Gambar di Elementor
- Elementor atau Brizy: Mana pembuat halaman WordPress terbaik?
Artikel Terkait
- 22 Add-on Premium Terbaik untuk Elementor
- Elementor vs Beaver Builder: Perbandingan Mendetail Pembuat Halaman
- Ulasan Elementor 2024: Pengalaman dengan Elementor (Pro, Kontra, Fitur & Lainnya)
- Cara Membuat Lingkaran Interaktif di Elementor
- Cara Membuat Website Elementor Super Cepat: Tutorial Lengkap
- Cara memigrasikan situs ke Elementor Cloud
- 5 Plugin Umpan Instagram Terbaik untuk Elementor [Pilihan Teratas Kami]
- Cara Menggunakan Akordeon Tingkat Lanjut di Elementor