Popup di Elementor adalah elemen overlay yang muncul di atas halaman website berdasarkan trigger tertentu. Popup dapat digunakan untuk berbagai keperluan seperti:
- Form berlangganan newsletter
- Promo dan diskon
- Informasi penting
- Login / register
- Menu navigasi mobile
Apa Itu Interaction?
Interaction adalah efek atau respons visual yang terjadi ketika pengguna melakukan aksi tertentu, seperti hover, scroll, atau klik. Interaction bertujuan membuat website terasa lebih hidup dan interaktif.
Contoh interaction:
- Hover effect pada button
- Animasi saat scroll
- Sticky header
- Element muncul secara bertahap
Jenis-Jenis Popup di Elementor
1. Popup Promosi
Digunakan untuk menampilkan diskon, penawaran khusus, atau campaign marketing.
2. Popup Form
Digunakan untuk mengumpulkan data pengguna seperti email, nama, atau nomor telepon.
3. Popup Informasi
Menampilkan pengumuman, alert, atau informasi penting.
4. Popup Login / Register
Digunakan untuk website membership atau e-commerce.
Cara Membuat Popup di Elementor
- Masuk ke Dashboard WordPress
- Pilih Templates → Popups → Add New
- Beri nama popup
- Desain popup menggunakan widget Elementor
- Klik Publish
Trigger Popup
Trigger adalah kondisi yang menentukan kapan popup akan muncul.
Jenis trigger di Elementor:
- On Scroll
- On Scroll to Element
- On Click
- On Page Load
- On Inactivity
- On Exit Intent
Trigger ini memungkinkan popup muncul secara kontekstual dan tidak mengganggu pengguna.
Conditions Popup
Conditions menentukan di mana popup akan tampil.
Contoh conditions:
- Entire Site
- Include → Singular → Page
- Include → Singular → Post
- Include → WooCommerce
Dengan conditions, popup dapat ditampilkan secara spesifik sesuai kebutuhan.
Interaction di Elementor
1. Hover Effects
Elementor menyediakan hover effect pada:
- Button
- Image
- Container
- Icon
Pengaturan hover meliputi:
- Warna
- Scale
- Shadow
- Transform
2. Motion Effects
Motion effects memungkinkan animasi berdasarkan scroll.
Jenis motion effects:
- Entrance animation
- Scrolling effects
- Mouse effects
- Sticky element
3. Sticky & Offset
Sticky digunakan untuk membuat elemen tetap terlihat saat scroll.
Contoh penggunaan:
- Sticky header
- Sticky button CTA
Interaction Berbasis Scroll
Elementor mendukung interaksi berbasis scroll seperti:
- Fade in
- Slide up
- Zoom
- Reveal animation
Efek ini membantu menarik perhatian pengguna pada konten penting.
Popup & Interaction untuk Conversion
Beberapa strategi efektif:
- Popup diskon dengan exit intent
- CTA sticky di mobile
- Form popup setelah scroll 50%
- Animasi ringan pada tombol CTA
Kesalahan Umum
- Popup muncul terlalu sering
- Terlalu banyak animasi
- Popup menutup konten utama
- Tidak mobile-friendly
Tips Membuat Popup & Interaction yang Baik
- Gunakan popup seperlunya
- Utamakan tujuan (CTA jelas)
- Gunakan animasi ringan
- Uji di mobile & desktop
- Pastikan mudah ditutup
