Cara Menambahkan Popup ke Situs WordPress Secara Gratis dan Cepat

Saat mengunjungi sebuah situs web, pernahkah Anda melihat gambar atau pesan tiba-tiba muncul di layar? Itulah popup atau jendela notifikasi website.

Popup adalah strategi pemasaran yang populer dan efektif, digunakan oleh banyak pelari bisnis dan pemilik situs web. Untuk menambahkan popup seperti itu ke WordPress, Anda dapat menggunakan plugin gratis untuk membuatnya cepat dan sederhana. Bahkan jika Anda bukan seorang ahli, hanya butuh 10 menit untuk mengikuti instruksi kami.

Mengapa Anda Harus Menggunakan Popup di Situs Web Bisnis?

Gambar di bawah ini adalah contoh untuk popup website bisnis. Itu terlihat bagus, bukan?

Popup tidak hanya memukau (jika Anda berhasil mendesain yang serasi dan menarik) tetapi juga memiliki banyak manfaat lain seperti:

• Promosikan informasi penting, kampanye penjualan dan pemasaran,…
• Ajakan bertindak, tingkatkan rasio konversi
• Hasilkan prospek

Tambahkan Popup ke WordPress dengan plugin Popup Builder

Untuk menambahkan popup ke situs WordPress Anda, Anda dapat menyewa perusahaan desain web atau pembuat kode yang kredibel. Namun, untuk menghemat waktu dan uang, plugin adalah pilihan terbaik. Di antara banyak plugin popup di luar sana, Popup Builder mungkin yang paling mudah digunakan dan efektif.

Ini adalah plugin gratis dan tersedia di wordpress.org, jadi Anda hanya perlu menginstal dan mengaktifkan plugin langsung di Dashboard.

Setelah selesai, ikuti langkah-langkah di bawah ini.

Langkah 1: Pilih Jenis Popup

Sekarang submenu Popup Builder akan muncul di Dashboard. Pergi ke sana, klik Add News dan pilih salah satu dari 4 jenis popup yang disediakan.

Untuk ilustrasi yang lebih baik, gambar di bawah ini adalah bagaimana 4 jenis popup yang disediakan oleh plugin ini ditampilkan di ujung depan.

Setelah memilih jenis yang Anda inginkan, lanjutkan ke langkah berikutnya.

Langkah 2: Tambahkan Konten ke Popup

Pertama, beri nama popup untuk mengelolanya dengan lebih mudah.

Berbagai jenis popup membutuhkan konten yang berbeda. Mari kita gali setiap jenisnya.

Tambahkan Konten ke Popup Facebook

Pada antarmuka untuk membuat popup Facebook, Anda harus mengisi informasi berikut:

1. Pesan yang muncul di popup. Anda harus menggunakan kalimat ajakan bertindak untuk mendorong pembaca berinteraksi. Juga, Anda harus menambahkan gambar, spanduk agar lebih memukau.
2. Masukkan URL Facebook.
3. Pilih tata letak untuk popup sesuka hati. Pada dasarnya, tata letak ini tidak begitu berbeda. Dengan demikian, Anda dapat mencobanya dan memilih salah satu favorit Anda.
4. Klik di sini untuk menyembunyikan tombol bagikan jika Anda mau.

Dan inilah yang saya dapatkan:

Tambahkan Konten ke Popup Gambar

Di sini Anda hanya perlu mengunggah gambar atau menyisipkan tautan gambar. Plugin ini mendukung JPG, PNG dan GIF.

Ini adalah banner cantik yang saya buat sendiri untuk kampanye Black Friday di website saya:

Tambahkan Konten ke Popup HTML

Menambahkan konten ke popup HTML sama seperti menulis posting di editor WordPress Gutenberg. Anda dapat menyisipkan gambar, video, tabel, tombol, kutipan, … atau konten lain apa pun yang didukung editor WordPress. Antarmukanya agak mirip dengan editor Gutenberg, jadi cukup ramah dan asli.

Dan ini adalah sembulan HTML saya di ujung depan:

Tambahkan Konten ke Popup Langganan

Di sini kami memiliki cukup banyak konten untuk diisi dan disesuaikan untuk formulir berlangganan Anda. Namun, yang paling perlu Anda perhatikan adalah bidang formulir, seperti Nama depan , Nama belakang , Email , dan menyesuaikan bidang Placeholder dan Wajib diisi .

Setelah itu, scroll ke bawah dan sesuaikan tampilan formulir dalam hal opsi latar belakang Formulir, gaya Input, gaya tombol Kirim agar lebih memukau dan cocok dengan situs web.

Khususnya, di bagian Setelah berlangganan berhasil , pilih pesan yang sesuai, atau informasi yang ingin Anda tunjukkan kepada pengguna setelah mereka berlangganan. Misalnya, Anda dapat menampilkan catatan terima kasih, kupon, hadiah, kartu hadiah, … untuk pelanggan ini. Dengan melakukan itu, Anda dapat menarik tayangan pengguna dan meningkatkan pengalaman mereka.

Misalnya, ini adalah popup email langganan saya. Setelah mereka mengirimkan, saya akan menunjukkan pemberitahuan tentang kampanye penjualan Black Friday, yang mendorong pelanggan untuk berbelanja.

Buka Pembuat Popup > Semua Pelanggan untuk mengelola pelanggan.

Anda bahkan dapat mengirim email ke pelanggan di tab Newsletter .

Setelah menambahkan konten ke dalamnya, gulir ke bawah. Anda akan melihat banyak opsi pengaturan lainnya. Mari gali setiap opsi di langkah 4,5,6.

Langkah 3: Atur Lokasi Tampilan dan Kondisi Popup

Siapkan Lokasi Tampilan

Pada bagian Popup Display Rules , kita perlu mengatur dimana popup akan/tidak muncul.

Anda dapat memilih Everywhere untuk menampilkannya di setiap halaman, memposting, menandai, atau menyesuaikan, atau menampilkannya di tempat tertentu yang Anda inginkan. Anda juga dapat mengklik tooltip (?) untuk mendapatkan detail selengkapnya.

Misalnya, saya memilih lokasi sebagai halaman tertentu, memilih “adalah” untuk menampilkannya, dan memilih halaman tampilan sebagai “Beranda” . Selain itu, Anda dapat menambahkan lokasi lain dengan memilih Tambahkan .

Atur Kondisi Tampilan

Di bagian Acara Popup , pilih waktu ketika popup muncul (ketika situs web telah dimuat selama beberapa detik, ketika pengguna mengklik di suatu tempat, dll). Plugin ini mendukung kondisi tampilan berikut:

• Saat memuat : Popup akan muncul secara otomatis setelah beberapa detik (Anda dapat menambahkan jumlah detik di tab Delay ) sejak situs selesai memuat.

• Ditetapkan oleh kelas CC : memungkinkan pengguna untuk mengklik beberapa komponen untuk mengaktifkan popup. Komponen ini akan didasarkan pada ID-nya. Bagian ini agak rumit sehingga Anda sebaiknya membaca dokumentasi dengan cermat.

• Saat diklik : mirip dengan bagian kelas Ditetapkan oleh CSS tetapi Anda tidak perlu menggunakan ID popup untuk menginstal "tombol" untuk mengaktifkannya.

Sebaliknya, jika Anda memilih Default di bagian Opsi , plugin akan membuat kelas default untuk popup di bagian Kelas Default seperti di bawah ini.

Jika Anda memilih Custom CSS , isikan class yang telah Anda buat sendiri di bagian Custom Class .

Setelah itu, tambahkan kelas popup ke dalam CSS komponen yang Anda inginkan.

Misalnya, dalam posting ini, saya menambahkan tombol dan kelas yang saya inginkan di bagian Kelas CSS tambahan .

Ini adalah hasil di ujung depan:

• Hover Click : saat mengarahkan kursor ke suatu komponen, popup akan muncul. Anda dapat melakukan hal yang sama seperti di bagian On Click .

Langkah 4: Sesuaikan Tampilan Popup

Setelah langkah 3, Anda memiliki popup dasar. Namun jika ingin lebih memukau, scroll ke bawah ke bagian Design . Di sini Anda dapat menyesuaikan beberapa komponen seperti antarmuka, overlay, latar belakang untuk menjadikannya sempurna sebagai favorit Anda.

Lebih dari itu, pada bagian Dimensions , sesuaikan lebar dan panjangnya dengan memilih Custom mode , atau memilih Responsive mode agar ukurannya sesuai dengan kontennya secara otomatis.

Langkah 5: Sesuaikan Pengaturan Lanjutan Lainnya

Pengaturan lanjutan ini memungkinkan Anda untuk mengonfigurasi tampilan dan interaksi dengan popup, … dengan cara yang lebih detail.

Misalnya, Anda dapat memilih cara menutup jendela sembul di bagian Tutup Pengaturan . Ada banyak cara untuk menutupnya, seperti tekan Esc , atau tambahkan tombol tutup, … Pilih satu atau lebih, terserah Anda.

Jika Anda ingin menambahkan efek menutup dan membuka popup, atau menyesuaikan waktu tampilannya untuk satu pengguna, ... gulir ke bawah ke bagian Opsi Popup . Anda hanya perlu mengklik opsi yang Anda inginkan, dan di sana Anda sudah selesai.

Perhatikan bahwa saat menggunakan plugin Pembuat Popup gratis, bagian bernama Opsi Buka Kunci berwarna kuning seperti gambar di bawah ini adalah fitur versi pro. Anda harus membeli lebih banyak ekstensi plugin ini untuk menggunakannya.

Terakhir, di bilah sisi, ada opsi yang sangat menarik: menambahkan tombol tetap di situs web untuk menampilkan sembulan saat diklik. Tombol mengambang ini sangat nyaman, memungkinkan orang untuk melihatnya kapan saja dan di mana saja. Desainnya juga menyenangkan dan tidak mengganggu.

Ini adalah tombol mengambang di situs web:

Atau Anda dapat menonaktifkannya dengan mengklik Nonaktifkan .

Terakhir, klik Publish untuk menyelesaikannya.

Jadi Anda telah menyelesaikan popup Anda setelah 6 langkah dari pengaturan dasar hingga lanjutan. Anda telah melakukan pekerjaan dengan baik!

Kata-kata terakhir

Seperti yang Anda lihat, menambahkan popup ke WordPress tidak terlalu rumit. Anda hanya perlu sedikit bersabar saat menyesuaikan tampilannya, itu saja kerja kerasnya!

Selain itu, ada banyak hal untuk meningkatkan tingkat konversi situs web. Jika Anda ingin membuat halaman arahan yang efektif, Anda sebaiknya membaca beberapa artikel lagi tentang cara membuat halaman arahan dengan konversi tinggi, atau cara membuat halaman produk.

Semoga berhasil!