Cara Buat Popup di Elementor dengan Mudah (Panduan Lengkap)

Daftar isi

Kalau Anda pakai WordPress dan Elementor untuk buat website, pasti pernah melihat website yang menampilkan popup saat pertama kali dibuka.

Baik setelah beberapa detik, atau ketika pengunjung hendak meninggalkan halaman.

Popup seperti ini ternyata bisa dibuat dengan mudah menggunakan Elementor Popup Builder tanpa perlu menulis satu baris kode pun.

Selain kelihatan lebih profesional, popup juga cukup efektif untuk mengumpulkan email, mempromosikan produk, memberikan voucher diskon, hingga mengarahkan pengunjung ke WhatsApp atau halaman tertentu.

Di artikel ini akan membahas cara buat popup di Elementor secara lengkap, mulai dari membuat popup pertama sampai mengatur kapan popup tersebut muncul di website.

Apa Itu Popup di Elementor?

Popup di Elementor adalah jendela yang muncul di atas halaman website berdasarkan kondisi tertentu.

Misalnya setelah pengunjung membuka halaman selama beberapa detik, menggulir halaman hingga persentase tertentu, atau mengklik sebuah tombol.

Fitur ini tersedia melalui Elementor Pro, sehingga belum bisa digunakan jika masih memakai Elementor versi gratis (free).

Menariknya, proses pembuatannya hampir sama seperti saat membuat halaman biasa di Elementor. Jadi kalau sudah terbiasa menggunakan drag and drop, pasti tidak akan kesulitan.

Kelebihan Menggunakan Elementor Popup Builder

Sebelum masuk ke tutorial, ada baiknya mengetahui beberapa alasan kenapa banyak pengguna WordPress memilih Popup Builder dari Elementor.

Beberapa kelebihannya antara lain:

Tidak perlu coding.
Desain popup bisa dibuat dengan sistem drag and drop.
Tersedia template yang siap pakai.
Mendukung form, gambar, video, countdown, hingga shortcode.
Memiliki pengaturan trigger dan display conditions yang lengkap.
Responsif untuk tampilan desktop maupun mobile.

Dengan fitur tersebut, tentunya bisa membuat berbagai jenis popup sesuai kebutuhan website.

Cara Buat Popup di Elementor

1. Buka Menu Popup Builder

Templates → Popups (pastikan elementor versi terbaru, ada penyesuaian tata letak)

Selanjutnya klik Add New Template.

Tambahkan atau beri nama popup agar mudah dikenali, misalnya:

Promo Akhir Tahun
Newsletter
Form Kontak
Diskon Member

Setelah itu klik Create Template.

Jika muncul tampilan seperti gambar diatas, itu tandanya elementor yang dipakai versi gratis, ingat ya harus pro atau berbayar baru bisa buat popup di elementor.

2. Pilih Template atau Mulai dari Nol

Elementor menyediakan banyak template popup yang bisa langsung digunakan.

Kalau ingin prosesnya lebih cepat, pilih template yang paling sesuai lalu sesuaikan isinya.

Namun jika ingin membuat desain sendiri, cukup tutup jendela template dan mulai dari halaman kosong.

3. Atur Layout Popup

Sebelum mulai mendesain, sebaiknya atur ukuran popup terlebih dahulu.

Klik ikon Settings yang berada di pojok kiri bawah.

Beberapa pengaturan yang biasanya saya sesuaikan adalah:

Width
Height
Horizontal Position
Vertical Position
Overlay
Entrance Animation
Close Button

Untuk popup standar, ukuran sekitar 500–700 piksel biasanya sudah cukup nyaman dilihat di desktop.

Sementara untuk tampilan mobile, pastikan ukurannya tetap proporsional agar tidak memenuhi seluruh layar.

4. Desain Popup Sesuai Kebutuhan

Tahap berikutnya adalah mendesain popup menggunakan widget Elementor.

Anda bebas menambahkan berbagai elemen seperti:

Heading
Text Editor
Image
Button
Form
Icon
Video
Countdown Timer

Misalnya jika ingin membuat popup promosi, bisa menyusun kontennya seperti berikut:

Judul yang menarik perhatian.
Penjelasan singkat mengenai promo.
Gambar produk atau banner.
Tombol Call To Action seperti Beli Sekarang, Hubungi Kami, atau Klaim Diskon.

Usahakan desain tetap sederhana agar pengunjung langsung fokus pada informasi utama.

5. Publish Popup

Kalau desain sudah selesai, klik tombol Publish.

Setelah itu Elementor akan meminta mengatur beberapa konfigurasi sebelum popup benar-benar aktif.

Jangan langsung menekan Save karena masih ada beberapa pengaturan penting yang perlu dilakukan.

Cara Mengatur Display Conditions

Display Conditions berfungsi untuk menentukan di mana popup akan ditampilkan.

Misalnya:

Seluruh website.
Homepage saja.
Halaman produk tertentu.
Artikel tertentu.
Kategori tertentu.

Kalau ingin popup muncul di semua halaman website, pilih opsi Entire Site.

Namun jika popup hanya berkaitan dengan produk tertentu, sebaiknya tampilkan hanya pada halaman yang relevan agar pengalaman pengguna tetap nyaman.

Cara Mengatur Trigger Popup

Trigger menentukan kapan popup muncul.

Elementor menyediakan beberapa pilihan trigger seperti:

On Page Load

Popup muncul saat halaman selesai dimuat.

After Scroll

Popup muncul setelah pengunjung menggulir halaman hingga persentase tertentu.

After X Seconds

Popup akan muncul setelah beberapa detik.

Biasanya saya menggunakan jeda sekitar 5–10 detik agar pengunjung memiliki waktu membaca isi halaman terlebih dahulu.

On Click

Popup muncul ketika pengunjung mengklik tombol, gambar, atau link tertentu.

Cara ini cukup efektif untuk popup formulir kontak atau formulir pemesanan.

Caranya:

Klik element tombol, gambar atau element yang ketika di klik akan muncul popup
Lihat pada bagian input Link, pilih DynamIc Tag,

Pilih Popup, selanjutnya klik icon gear atau setting, ketikkan nama template popup yang sudah dibuat

Exit Intent

Popup akan muncul ketika sistem mendeteksi pengunjung hendak meninggalkan website.

Trigger ini sering digunakan untuk menawarkan diskon atau mengajak pengunjung berlangganan newsletter sebelum mereka keluar dari halaman.

Mengatur Advanced Rules

Selain trigger, Elementor juga menyediakan Advanced Rules.

Fungsinya untuk membatasi kapan popup ditampilkan.

Contohnya:

Hanya tampil sekali dalam seminggu.
Tidak muncul untuk pengguna yang sudah login.
Muncul setelah membuka beberapa halaman.
Hanya tampil untuk pengunjung dari sumber tertentu.

Pengaturan ini membantu mengurangi rasa terganggu karena popup tidak muncul berulang kali.

Tips Membuat Popup yang Efektif

Popup yang baik bukan hanya menarik secara visual, tetapi juga nyaman bagi pengunjung.

Beberapa tips yang bisa diterapkan adalah:

Jangan tampilkan popup tepat setelah halaman dibuka.
Gunakan judul yang jelas dan singkat.
Sertakan tombol Call To Action yang mudah dipahami.
Pastikan tombol Close mudah ditemukan.
Hindari penggunaan terlalu banyak teks.
Optimalkan tampilan popup di perangkat mobile.
Batasi frekuensi kemunculan popup agar tidak mengganggu pengalaman pengguna.

Semakin nyaman pengalaman pengunjung, semakin besar peluang mereka melakukan tindakan yang Anda inginkan.

Kesimpulan

Sekarang sudah tahu cara buat popup di Elementor mulai dari membuat desain, mengatur Display Conditions, menentukan Trigger, hingga menggunakan Advanced Rules.

Walaupun prosesnya cukup sederhana, pengaturan popup yang tepat bisa memberikan dampak besar terhadap konversi website.

Baik untuk mengumpulkan leads, meningkatkan penjualan, maupun mengajak pengunjung melakukan tindakan tertentu.

Jadi, jangan hanya fokus pada desain popup. Perhatikan juga kapan popup muncul dan kepada siapa popup tersebut ditampilkan agar hasilnya benar-benar maksimal.

What are You Looking For?