Bagaimana Cara Membuat Popup Open On Button Click Menggunakan Elementor? [2022]

Ingin tahu seberapa menarik situs web Anda bagi pengunjung jika munculan terbuka saat klik tombol ? Jika Anda menginginkan tombol interaktif semacam itu yang membuka sembulan, maka ada banyak cara di pembuat situs web paling populer, Elementor . Hari ini kami akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah membuat popup yang menakjubkan dengan klik tombol tanpa coding.

5 Kasus Penggunaan Terbaik Tombol Dengan Elementor Modal Popup

Mari kita lihat manfaat apa yang akan Anda nikmati dengan membuat popup modal Elementor terbuka pada klik tombol sebelum kita mulai dengan tutorial. Pada dasarnya jenis popup modal interaktif ini digunakan untuk kampanye pemasaran situs web . Selain itu, ada juga begitu banyak kasus penggunaan serbaguna untuk membuat popup terbuka saat klik tombol. Berikut adalah 5 kasus penggunaan modal popup teratas.

1. Untuk Menangkap Prospek Untuk Bisnis

Untuk menjalankan bisnis Anda dengan lancar dan pertumbuhan perusahaan kelas atas, Anda membutuhkan arahan. Dengan memelihara prospek, Anda dapat mengubahnya menjadi pelanggan tetap Anda. Dan situs web adalah media terbaik untuk menangkap prospek. Jika Anda membuat sembulan terbuka dengan mengklik tombol, maka Anda dapat dengan mudah mengumpulkan nama prospek , nomor telepon, email, dan detail lainnya.

2. Mengumpulkan Langganan Email

Biasanya jika Anda menambahkan tombol dasar untuk mengumpulkan langganan email, itu akan membawa pengguna Anda ke halaman web baru. Alih-alih melakukan ini, Anda dapat membuat sembulan terbuka dengan mengklik tombol, lalu pengguna Anda tidak perlu meninggalkan halaman web saat ini. Praktik ini secara mengejutkan meningkatkan langganan email Anda menghitung dengan lancar.

3. Promosi Pemasaran & Penjualan

Saat Anda menjalankan promosi pemasaran melalui situs web Anda, popup yang terbuka dengan mengklik tombol dapat memberikan tampilan interaktif pada situs Anda dan meningkatkan penjualan . Anda dapat menambahkan gambar, formulir, kupon diskon khusus, dll pada satu popup Elementor. Tanpa membuat situs web Anda tidak diinginkan bersama dengan bagian promosi, Anda dapat menggantinya dengan popup terbuka dengan mengklik tombol.

4. Berbagi Pengumuman Seru

Jika Anda berencana untuk mengumumkan rilis besar atau pengumuman & promosi menarik lainnya, popup terbuka dengan mengklik tombol bisa menjadi cara terbaik. Ini akan memberikan situs web Anda tampilan yang menakjubkan dan Anda dapat menghias situs web dengan confetti virtual dan dekorasi meriah lainnya. Selain itu, jika Anda berencana untuk mengumumkan berita besar 'segera hadir', maka popup yang terbuka dengan mengklik tombol dapat membantu Anda menciptakan buzz .

5. Gunakan Sebagai Kunci Konten

Ketika Anda memiliki situs web multiguna, mungkin ada kebutuhan untuk memberikan batasan konten berdasarkan usia, keanggotaan, langganan , dan banyak lagi. Jika Anda langsung memberikan konten yang dibatasi secara langsung di bagian situs web, maka itu pasti akan mengurangi jumlah klik per tindakan Anda. Alih-alih ini, Anda dapat membuat popup menarik yang langsung terbuka dengan mengklik tombol.

Mengapa Elementor Platform Terbaik Untuk Membuat Popup Pada Tombol?

Di situs web, ada beberapa cara untuk membuat popup terbuka dengan mengklik tombol di WordPress. Salah satu cara untuk melakukannya adalah dengan pengkodean khusus atau mempekerjakan ahli. Jika Anda tidak paham teknologi, maka melakukan kode atau mempekerjakan ahli mungkin menghabiskan banyak uang. Tetapi ketika Anda menggunakan Elementor – pembuat situs web WordPress paling populer, Anda dapat melakukannya tanpa pengkodean .

Untuk membuat popup terbuka dengan satu klik tombol, Anda dapat melakukannya hanya dengan drag & drop , tidak perlu coding. Selain itu, dengan bantuan pembangun Elementor Popup membuat popup terbuka dengan mengklik tombol sangat sederhana sehingga Anda dapat membuatnya sendiri. Elementor menyediakan opsi kustomisasi & personalisasi tanpa batas. Jadi menyelaraskannya dengan nilai merek situs web Anda, Anda dapat membuat semua jenis sembulan yang terbuka dengan mengklik tombol secara instan.

Tutorial Tanpa Kode: Bagaimana Cara Membuat Elementor Modal Popup Terbuka Saat Klik Tombol?

Sekarang mari masuk ke tutorial dan mulai membuat popup terbuka dengan klik tombol. Sebelum mulai membuat popup Elementor, yang Anda butuhkan hanyalah konsentrasi 5 menit dan ikuti tutorial mudah ini selangkah demi selangkah.

Langkah 1: Memulai Dengan Elementor PRO

Jika Anda berencana untuk membuat popup modal terbuka dengan mengklik tombol menggunakan Elementor, maka Anda harus mendapatkan Elementor PRO . Dengan fitur eksklusif Elementor PRO, Elementor Popup Builder , Anda dapat langsung membuat popup yang terbuka dengan satu klik tombol. Elementor hadir dengan paket harga serbaguna, mulai dari $49 . Setelah mendapatkan plugin Elementor PRO, instal & aktifkan ke situs WordPress Anda.

Langkah 2: Buat Template Menggunakan Elementor Popup Builder

Sekarang saatnya membuat template untuk popup terbuka dengan mengklik tombol. Untuk melakukan ini, buka dasbor WordPress Anda, buka Template → Popup . Dengan mengklik tab, itu akan langsung membawa Anda ke pembuat popup Elementor. Kemudian klik tombol 'Tambahkan Popup Baru' . Sebuah popup akan muncul. Ada Template Type yang dipilih secara otomatis sebagai popup. Anda dapat memberikan nama template jika Anda mau dan kemudian klik tombol 'Buat Template' .

Kemudian Anda akan diarahkan ke Elementor Template Library . Ada 100+ koleksi popup yang tersedia dalam kategori serbaguna. Berdasarkan persyaratan situs WordPress Anda, pilih template popup Elementor yang sesuai. Klik pada template untuk mendapatkan pratinjau singkat. Kemudian klik tombol 'Sisipkan' untuk membuka popup modal dengan mengklik tombol.

Langkah 3: Konfigurasikan Dan Personalisasi Template Popup

Setelah itu, panel editor Elementor akan terbuka dengan semua opsi konfigurasi di sisi kiri. Dari sana Anda dapat dengan mudah menyesuaikan popup yang terbuka dengan mengklik tombol. Anda dapat menyimpan popup modal dengan Boxed atau Full Width . Demikian pula, Anda dapat mengonfigurasi tinggi popup modal, celah kolom, posisi kolom, perataan vertikal, luapan, tag HTML, dan banyak lagi. Berbagai jenis lebar menawarkan berbagai jenis konfigurasi.

Untuk menyesuaikan konten popup modal, cukup klik pada teks, gambar, atau tombol. Seketika panel pengeditan akan terbuka di sebelah kiri. Anda dapat dengan mudah mengubah konten popup, jenis font, dll. Juga menambahkan beberapa bagian keluaran email, tinggi tombol, lebar, warna, teks, dan banyak lagi. Ada opsi yang tersedia untuk mengatur tindakan setelah mengirim, mengelola kiriman, menambahkan konten email khusus, email penerima, ID email pengirim, dll. Setelah melakukan semua perubahan, klik tombol 'Terbitkan' .

Langkah 4: Siapkan Kondisi & Pemicu

Anda dapat memanfaatkan popup yang terbuka dengan satu klik tombol untuk seluruh situs web WordPress atau halaman selektif. Anda dapat menyertakan atau mengecualikan popup Elementor dari halaman yang dipilih juga. Semua konfigurasi ini tersedia di tab 'Kondisi' .

Dari tab 'Pemicu' , Anda harus mengatur kapan Anda ingin popup terbuka dengan mengklik tombol. Karena kami ingin melihat pratinjau sembulan menggunakan klik tombol, alihkan untuk mengaktifkan 'Saat Diklik' . Dari 'Aturan Lanjutan' Anda dapat mengonfigurasi kondisi seperti siapa yang akan menampilkan popup, menunjukkan saat membuka formulir, dan banyak lagi. Kemudian klik tombol 'Simpan & Tutup' . Ini adalah betapa mudahnya Anda membuat template popup Elementor. Kemudian kembali ke dashboard WordPress.

Langkah 4: Tambahkan Tombol Elementor Di Mana Anda Membutuhkan

Sekarang, buka halaman di mana Anda ingin mengatur popup terbuka dengan mengklik tombol. Jika Anda ingin membuat halaman baru, buka Pages → Add New . untuk tutorial ini, kita akan menghubungkan modal popup dengan tombol Elementor. Seret & jatuhkan tombol Elementor di halaman Anda.

Personalisasi tampilan tombol, teks, dll untuk menyesuaikan dengan warna merek situs web Anda. Langkah selanjutnya adalah menautkan tombol dengan modal popup. Untuk melakukan ini, klik 'Jenis Dinamis' dari bidang 'Tautan' , pilih Munculan dari Tindakan . Kemudian, klik ikon 'Pengaturan' di sebelah popup dan pilih template popup yang dibuat sebelumnya. Itu dia!

Pandangan Terakhir Dari Popup Terbuka Pada Klik Tombol Elementor

Ini adalah betapa mudahnya Anda dapat membuat popup terbuka dengan mengklik tombol. Setelah membuat penyesuaian lain, publikasikan halaman. Sekarang ke pratinjau untuk melihat bagaimana popup terbuka dengan mengklik tombol.

Jika Anda ingin menggunakan tombol yang sama untuk halaman yang berbeda, maka Salin & Tempel tombol tersebut ke halaman web baru. Juga, Anda dapat menyalin kode pendek template popup Elementor dan menggunakannya di mana pun Anda ingin menambahkan popup terbuka dengan mengklik tombol.

Bonus Untuk Addons Esensial Untuk Pengguna Elementor

Essential Addons For Elementor adalah pustaka Elementor paling kuat dengan 1 juta+ pengguna aktif dan 85+ widget unik. Dan widget Tombol Kreatifnya hadir dengan desain yang lebih serbaguna dan kegunaan serbaguna bagi pelanggannya. Jika Anda menggunakan widget tombol Addons Esensial, maka dengan cara yang sama seperti tombol Elementor, Anda dapat membuat popup terbuka dengan mengklik tombol dengan mudah.

Elementor telah membuat pengembangan situs web lebih mudah. Seperti popup yang terbuka dengan satu klik tombol, Anda dapat membuat fungsionalitas yang lebih menakjubkan dan serbaguna ke situs web WordPress Anda. Inilah akhir dari tutorial ini. Jika Anda merasa tutorial ini bermanfaat, jangan lupa untuk membagikannya kepada orang lain.

Beri tahu kami bagaimana Anda membuat popup terbuka dengan mengklik tombol menggunakan Elementor di komunitas Facebook kami. Juga, berlangganan blog kami untuk tetap diperbarui tentang tutorial, tips & trik semacam ini.