MIU Login

Panduan Pembuatan dan Pengaturan Pop-up WordPress Elementor

Panduan ini bertujuan untuk memudahkan pengelola website unit, fakultas, atau lembaga di lingkungan UIN Malang dalam membuat pengumuman, pamflet, atau informasi penting menggunakan fitur Pop-up dari Elementor Pro.

Langkah 1: Mengakses Menu Popups

  1. Masuk (login) ke dashboard WordPress website Anda.
  2. Pada menu navigasi sebelah kiri, arahkan kursor ke menu Elementor lalu klik Editor (atau menu Templates).
  3. Pilih opsi Popups.

Langkah 2: Membuat Template Pop-up Baru

  1. Pada halaman kelola Popups, klik tombol Add New Popup di pojok kanan atas.
  2. Jendela pop-up baru akan muncul:
    • Choose Template Type: Pastikan terpilih Popup.
    • Name your template: Isikan nama pop-up yang spesifik (contoh: Pop-up Pengumuman KTM Online atau Pop-up Wisuda 2026).
  3. Klik tombol Create Template.

Langkah 3: Memilih Layout atau Mendesain Pop-up

  1. Setelah masuk ke halaman editor Elementor, Anda akan disajikan jendela Library:
    • Anda bisa memilih template preset yang sudah ada jika sesuai.
    • Jika ingin menggunakan desain banner/pamflet sendiri, tutup jendela Library (klik tanda X).
  2. Masukkan widget Image atau susun elemen (teks, tombol, dsb.) ke dalam Container Elementor sesuai kebutuhan pamflet Anda.
  3. Unggah gambar/banner informasi (misal: Banner KTM Online).

Langkah 4: Mengatur Kondisi Tampil (Publish Settings)

Setelah desain selesai, klik tombol Publish di pojok kanan atas untuk mengatur lokasi dan pemicu kemunculan pop-up.

A. Display Conditions (Aturan Halaman)

Menentukan di halaman mana pop-up akan muncul.

  1. Pilih tab Conditions.
  2. Klik tombol Add Condition.
  3. Atur kondisi kemunculan:
    • Untuk Beranda saja: Pilih Include > Singular > Front page.
    • Untuk Seluruh Halaman Website: Pilih Include > Entire Site.
  4. Klik Next.

B. Triggers (Pemicu Kemunculan)

Menentukan kapan pop-up otomatis muncul saat pengunjung mengakses halaman.

  1. Pilih tab Triggers.
  2. Aktifkan opsi On Page Load menjadi YES.
  3. Tentukan jeda waktu muncul pada kolom Within (sec) (rekomendasi: 1 detik agar pop-up langsung terlihat begitu halaman selesai memuat).
  4. Klik Save & Close (atau klik Next jika ingin melewati bagian Advanced Rules).

Langkah 5: Pengujian (Pratinjau Hasil)

  1. Buka halaman utama (front page) website Anda menggunakan mode Incognito / Private Window pada browser.
  2. Pastikan banner pop-up muncul di tengah layar dengan rapi dan tombol tutup (tanda X) berfungsi dengan baik.

Catatan Penting Pengelola Website UIN Malang:

  • Ukuran File Gambar: Usahakan file pamflet/banner yang diunggah berukuran < 300 KB agar tidak memberatkan kecepatan muat website.
  • Penonaktifan: Jika masa pengumuman telah selesai, ubah status Publish Condition menjadi nonaktif (Draft) atau hapus aturan Conditions pada pop-up tersebut.

Berita Terkait