22 May 2025
Ingin menambahkan pop up ke website kamu? Ada berbagai cara yang bisa digunakan, mulai dari plugin, layanan pihak ketiga, hingga coding manual dengan HTML, CSS, dan JavaScript. Jika dirancang dengan baik, pop up dapat meningkatkan interaksi pengguna, mengumpulkan leads, serta menampilkan informasi penting tanpa mengganggu pengalaman browsing. Artikel ini akan membahas cara membuat pop up pada website. Simak sampai akhir, ya!
Pengertian Pop Up dan Manfaatnya
Pop up adalah elemen yang muncul secara tiba-tiba di atas konten utama situs web. Biasanya digunakan untuk menampilkan informasi penting, promosi, atau ormular pendaftaran. Penggunaan pop up yang tepat dapat meningkatkan interaksi pengguna dan membantu mencapai tujuan tertentu, seperti meningkatkan penjualan atau mengumpulkan alamat email.
Definisi Pop Up dalam Pengembangan Web
Di dalam dunia web developer, pop up adalah jendela atau elemen yang muncul di atas konten halaman web yang sedang dilihat oleh pengguna. Pop up dapat berupa jendela baru yang terbuka secara terpisah atau elemen yang muncul di dalam halaman yang sama tanpa membuka jendela baru. Tujuan utamanya adalah untuk menarik perhatian pengguna terhadap informasi atau tindakan tertentu yang diinginkan oleh pemilik situs.
Manfaat Penggunaan Pop Up pada Website
Penggunaan pop up pada website memiliki beberapa manfaat, antara lain:
1. Meningkatkan Konversi: Pop up dapat digunakan untuk menampilkan penawaran khusus atau diskon, yang dapat mendorong pengunjung untuk melakukan pembelian atau tindakan lain yang diinginkan.
2. Mengumpulkan Data Pengguna: Dengan menampilkan formulir pendaftaran atau survei, pop up dapat membantu mengumpulkan informasi berharga dari pengunjung, seperti alamat email untuk keperluan pemasaran.
3. Memberikan Informasi Penting: Pop up dapat digunakan untuk menyampaikan pengumuman penting, seperti perubahan kebijakan atau pemberitahuan layanan, sehingga memastikan informasi tersebut tidak terlewatkan oleh pengunjung.
4. Meningkatkan Keterlibatan Pengguna: Dengan menampilkan konten interaktif atau penawaran menarik, pop up dapat meningkatkan waktu yang dihabiskan pengunjung di situs dan mengurangi tingkat pentalan.
Hal yang perlu diperhatikan adalah pentingnya menggunakan pop up secara bijak agar tidak mengganggu pengalaman pengguna. Pop up yang terlalu sering atau menghalangi konten utama dapat menyebabkan frustrasi dan mendorong pengunjung meninggalkan situs. Oleh karena itu, gunakanlah fitur pop up dengan sewajarnya.
Baca juga artikel tentang website lainnya: Perbarui Konten dengan Cara Membuat RSS Feed di Website
Jenis-Jenis Pop Up yang Umum Digunakan
Cara membuat pop up pada website melibatkan pemahaman tentang berbagai jenis pop up yang dapat digunakan untuk meningkatkan interaksi pengguna. Setiap jenis pop up memiliki karakteristik dan tujuan spesifik yang dapat disesuaikan dengan kebutuhan situs kamu. Berikut beberapa jenis pop up yang umum digunakan:
Pop Up Lightbox
Pop up lightbox adalah jenis pop up yang paling umum digunakan. Pop up ini muncul di tengah layar dengan latar belakang yang meredup, sehingga fokus pengguna tertuju pada konten yang ditampilkan. Biasanya digunakan untuk menampilkan formulir langganan, promosi, atau pemberitahuan penting. Keunggulan dari pop up lightbox adalah kemampuannya menarik perhatian tanpa terlalu mengganggu pengalaman pengguna.
Pop Up Exit-Intent
Pop up exit-intent muncul ketika sistem mendeteksi bahwa pengguna akan meninggalkan situs, misalnya saat kursor mouse bergerak ke arah tombol tutup atau bilah alamat browser. Tujuan dari pop up ini adalah memberikan penawaran khusus atau meminta umpan balik untuk mencegah pengguna meninggalkan situs tanpa melakukan tindakan yang diinginkan. Melalui penggunaan strategi ini, kamu dapat mengurangi tingkat pentalan dan meningkatkan konversi.
Pop Up Slide-In
Pop up slide-in muncul secara halus dari sisi atau sudut layar setelah pengguna menggulir halaman atau setelah periode waktu tertentu. Jenis pop up ini kurang mengganggu dibandingkan pop up tradisional dan sering digunakan untuk menampilkan penawaran khusus, ajakan berlangganan, atau konten terkait lainnya. Melalui pendekatan yang lebih lembut, pop up slide-in dapat meningkatkan interaksi tanpa mengganggu pengalaman pengguna.
Pop Up Full-Screen Overlay
Pop up full-screen overlay menutupi seluruh layar dengan konten pop up, memastikan bahwa pesan yang disampaikan mendapatkan perhatian penuh dari pengguna. Jenis pop up ini efektif untuk pengumuman penting, penawaran eksklusif, atau ajakan bertindak yang memerlukan perhatian penuh. Namun, penggunaannya harus dilakukan dengan hati-hati agar tidak mengganggu pengalaman pengguna secara keseluruhan.
Memilih jenis pop up yang tepat sangat penting untuk memastikan bahwa interaksi pengguna dengan situs kamu tetap positif dan tujuan pemasaran tercapai. Pertimbangkan konteks dan audiens saat menentukan jenis pop up yang akan digunakan.
Baca juga artikel lain: Mau Bikin Situs yang Efektif? Begini Cara Membuat Rancangan Website
Cara Membuat Pop Up di WordPress Menggunakan Plugin
Membuat pop up di WordPress dapat meningkatkan interaksi dan konversi pengunjung. Salah satu cara yang efektif adalah menggunakan plugin khusus yang dirancang untuk memudahkan pembuatan dan pengelolaan pop up.
Berikut adalah langkah-langkah yang dapat kamu ikuti untuk membuat pop up di WordPress menggunakan plugin.
Memilih Plugin Pop Up yang Tepat
Langkah pertama adalah memilih plugin pop up yang sesuai dengan kebutuhan situs kamu. Beberapa plugin populer yang sering digunakan antara lain:
1. Popup Maker: Plugin ini menawarkan fleksibilitas tinggi dengan berbagai opsi kustomisasi. Kamu dapat membuat berbagai jenis pop up, seperti form berlangganan, notifikasi, atau penawaran khusus.
2. OptinMonster: Dikenal dengan fitur exit-intent dan berbagai template menarik, plugin ini cocok untuk meningkatkan konversi dan mengumpulkan leads.
3. Popup Builder: Menawarkan interface yang user-friendly dengan berbagai opsi desain dan animasi untuk membuat pop up yang menarik.
Pilihlah plugin yang sesuai dengan kebutuhan dan tingkat kenyamanan kamu dalam penggunaannya.
Langkah-Langkah Instalasi dan Aktivasi Plugin
1. Masuk ke Dashboard WordPress: Login ke dashboard WordPress situs kamu.
2. Navigasi ke Menu Plugin: Pilih menu "Plugins" dan klik "Add New".
3. Cari Plugin yang Diinginkan: Gunakan kotak pencarian untuk menemukan plugin pop up yang telah kamu pilih, misalnya "Popup Maker".
4. Instal Plugin: Klik tombol "Install Now" pada plugin yang sesuai.
5. Aktivasi Plugin: Setelah instalasi selesai, klik "Activate" untuk mengaktifkan plugin tersebut.
Konfigurasi dan Pengaturan Pop Up
Setelah plugin aktif, langkah berikutnya adalah membuat dan mengatur pop up sesuai kebutuhan:
1. Buat Pop Up Baru
a) Navigasi ke menu plugin yang telah diinstal, misalnya "Popup Maker" > "Add Popup".
b) Beri judul pada pop up yang akan kamu buat.
2. Desain Konten Pop Up
a) Gunakan editor yang tersedia untuk menambahkan konten, seperti teks, gambar, atau formulir.
b) Sesuaikan tampilan sesuai dengan branding situs kamu.
3. Atur Pengaturan Tampilan
a) Trigger: Tentukan kapan pop up akan muncul, misalnya saat halaman dimuat (on load), setelah waktu tertentu (time delay), atau saat pengguna hendak meninggalkan halaman (exit-intent).
b) Display Rules: Pilih di halaman mana saja pop up akan ditampilkan, apakah di seluruh situs atau hanya pada halaman tertentu.
4. Sesuaikan Desain dan Animasi:
a) Pilih tema atau template yang tersedia.
b) Atur ukuran, posisi, dan animasi munculnya pop up agar sesuai dengan tampilan situs.
5. Simpan dan Publikasikan
Setelah semua pengaturan selesai, klik "Publish" untuk mengaktifkan pop up di situs kamu.
Penerapan langkah-langkah di atas akan memudahkanmu untuk membuat dan mengelola pop up di WordPress menggunakan plugin. Pastikan untuk tidak menggunakan pop up secara berlebihan agar tidak mengganggu pengalaman pengunjung di situs kamu.
Cara Membuat Pop Up di WordPress Tanpa Plugin
Membuat pop up di WordPress tanpa menggunakan plugin dapat dilakukan dengan memanfaatkan layanan pihak ketiga seperti Popupsmart. Cara ini memungkinkan kamu untuk menambahkan pop up ke situs WordPress tanpa perlu menginstal plugin tambahan, sehingga menghemat ruang penyimpanan dan menjaga performa situs tetap optimal.
Menggunakan Layanan Pihak Ketiga seperti Popupsmart
Popupsmart adalah layanan pembuat pop up berbasis web yang memungkinkan kamu membuat dan menyesuaikan pop up sesuai kebutuhan tanpa memerlukan pengetahuan coding. Interface yang intuitif akan memungkinkanmu untuk merancang pop up yang menarik dan fungsional guna meningkatkan interaksi dengan pengunjung situs.
Langkah-Langkah Integrasi dengan WordPress
1. Membuat Akun di Popupsmart
a) Kunjungi situs Popupsmart dan buat akun gratis dengan mengklik tombol "Get Started".
b) Setelah mendaftar, masuk ke dashboard Popupsmart.
2. Menambahkan Situs Web
a) Di dashboard Popupsmart, klik pada profil kamu dan pilih opsi "Websites".
b) Klik tombol "New Website" dan masukkan URL situs WordPress kamu, lalu simpan.
3. Membuat Pop Up Baru
a) Setelah menambahkan situs, klik "Create a New Popup" untuk mulai membuat pop up.
b) Pilih tujuan pembuatan pop up, misalnya untuk mengumpulkan email pengunjung atau menampilkan penawaran khusus.
c) Gunakan editor Popupsmart untuk menyesuaikan desain, konten, dan pengaturan lainnya sesuai preferensi kamu.
4. Mendapatkan Kode Embed
a) Setelah selesai mendesain pop up, navigasikan ke bagian "Publish" dan salin kode embed yang disediakan.
5. Menambahkan Kode Embed ke WordPress
a) Masuk ke dashboard WordPress kamu.
b) Pilih menu "Appearance" (Tampilan) dan klik "Theme File Editor" (Editor Berkas Tema).
c) Di editor tema, cari dan buka berkas footer.php.
d) Tempelkan kode embed dari Popupsmart tepat sebelum tag penutup </body>.
e) Simpan perubahan dengan mengklik "Update File".
6. Verifikasi Integrasi
Kembali ke dashboard Popupsmart dan klik tombol "Verify" untuk memastikan bahwa pop up telah berhasil diintegrasikan ke situs WordPress kamu.
Langkah-langkah di atas memudahkanmu untuk menambahkan pop up ke situs WordPress tanpa perlu menginstal plugin tambahan. Pastikan untuk mendesain pop up yang responsif dan tidak mengganggu pengalaman pengguna agar interaksi dengan pengunjung tetap positif.
Artikel menarik lainnya: Penting untuk Skripsi! Ini Cara Memasukkan Website ke Mendeley
Membuat Pop Up Menggunakan HTML, CSS, dan JavaScript
Pembuatan fitur pop up secara manual menggunakan HTML, CSS, dan JavaScript memberikan fleksibilitas penuh dalam desain dan fungsionalitas. Melalui pendekatan ini, kamu dapat menyesuaikan pop up sesuai kebutuhan spesifik situs web kamu tanpa bergantung pada plugin atau layanan pihak ketiga.
Struktur Dasar HTML untuk Pop Up
Langkah pertama adalah membuat struktur HTML yang akan menjadi dasar dari pop up.
Berikut adalah contoh sederhana:
<!-- Tombol untuk memicu pop up -->
<button id="openPopup">Tampilkan Pop Up</button>
<!-- Struktur pop up -->
<div id="popup" class="popup-hidden">
<div class="popup-content">
<span id="closePopup" class="close-button">×</span>
<h2>Judul Pop Up</h2>
<p>Ini adalah konten dari pop up.</p>
</div>
</div>
Dalam kode di atas:
1) <button id="openPopup">: Tombol yang digunakan untuk membuka pop up.
2) <div id="popup" class="popup-hidden">: Elemen utama pop up yang awalnya disembunyikan dengan kelas popup-hidden.
3) <div class="popup-content">: Kontainer untuk konten pop up.
4) <span id="closePopup" class="close-button">×</span>: Tombol untuk menutup pop up, ditampilkan sebagai simbol "×".
Style Pop Up dengan CSS
Setelah struktur HTML siap, langkah berikutnya adalah menambahkan gaya dengan CSS untuk memastikan pop up tampil menarik dan responsif:
/* Gaya untuk menyembunyikan pop up */
.popup-hidden {
display: none;
}
/* Gaya untuk menampilkan pop up */
.popup-visible {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
/* Gaya untuk konten pop up */
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
border-radius: 5px;
width: 80%;
max-width: 500px;
}
/* Gaya untuk tombol tutup */
.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
Penjelasan kode CSS di atas:
1) .popup-hidden: Menyembunyikan elemen pop up dengan display: none;.
2) .popup-visible: Menampilkan pop up dengan menutupi seluruh layar menggunakan latar belakang semi-transparan.
3) .popup-content: Memposisikan konten pop up di tengah layar dengan latar belakang putih, padding, dan bayangan untuk efek elevasi.
4) .close-button: Menempatkan tombol tutup di sudut kanan atas konten pop up.
Fungsi JavaScript untuk Interaksi Pop Up
Untuk mengaktifkan interaksi seperti membuka dan menutup pop up, diperlukan fungsi JavaScript sederhana:
// Mendapatkan elemen yang diperlukan
var popup = document.getElementById('popup');
var openButton = document.getElementById('openPopup');
var closeButton = document.getElementById('closePopup');
// Fungsi untuk membuka pop up
function openPopup() {
popup.classList.remove('popup-hidden');
popup.classList.add('popup-visible');
}
// Fungsi untuk menutup pop up
function closePopup() {
popup.classList.remove('popup-visible');
popup.classList.add('popup-hidden');
}
// Menambahkan event listener ke tombol
openButton.addEventListener('click', openPopup);
closeButton.addEventListener('click', closePopup);
// Menutup pop up saat pengguna mengklik di luar konten pop up
window.addEventListener('click', function(event) {
if (event.target === popup) {
closePopup();
}
});
Penjelasan kode JavaScript di atas:
1) Mendapatkan referensi ke elemen pop up, tombol buka, dan tombol tutup menggunakan getElementById.
2) openPopup(): Fungsi untuk menampilkan pop up dengan mengganti kelas dari popup-hidden ke popup-visible.
3) closePopup(): Fungsi untuk menyembunyikan pop up dengan mengganti kelas kembali ke popup-hidden.
4) Menambahkan event listener ke tombol untuk membuka dan menutup pop up saat diklik.
5) Menambahkan event listener ke jendela untuk menutup pop up jika pengguna mengklik di luar area konten pop up.
Melalui penerapan langkah-langkah di atas, kamu dapat membuat pop up yang fungsional dan estetis menggunakan HTML, CSS, dan JavaScript murni. Pendekatan ini memberikan kontrol penuh atas tampilan dan perilaku pop up sesuai kebutuhan spesifik situs web kamu.
Membuat pop up pada website dengan strategi yang tepat dapat meningkatkan konversi, mengumpulkan leads, dan menarik perhatian pengunjung tanpa mengganggu pengalaman mereka. Untuk hasil yang lebih optimal, profesional, dan sesuai kebutuhan bisnis kamu, gunakan jasa pembuatan website dari digital marketing agency seperti DCLIQ. Kami siap membantu menciptakan website yang menarik, fungsional, dan efektif!
