Cara Menghapus Bidang Nama Modul Optin Email Divi

Dalam tutorial hari ini, kami akan menunjukkan cara menghapus bidang nama Modul Optin Email Divi. Menghapus kolom nama tidak hanya memastikan kolom nama dan nama belakang, yang merupakan standar dalam modul optin email, tidak muncul secara visual. Ini juga tentang fungsionalitas. Secara default, nama depan dan alamat email diperlukan untuk berlangganan. Itu sebabnya membuat bidang nama tidak terlihat tidak akan membantu prosesnya.

Untuk membantu Anda menyelesaikannya, kami akan, bagaimanapun, menunjukkan kepada Anda cara menghilangkan bidang nama secara visual dan membuatnya berfungsi secara fungsional juga

Hasil

Jika Anda mengikuti posting ini langkah demi langkah, Anda akan mendapatkan hasil sebagai berikut:

Mengapa Anda Ingin Menghapus Bidang Nama Modul Email Optin

Mungkin ada beberapa alasan mengapa Anda ingin menghapus bidang nama. Jika Anda tidak tahu mengapa; lihat dua alasan yang tercantum di bawah ini.

Untuk Menghemat Waktu Pengunjung Anda

Alasan pertama mengingat pengalaman pengguna. Dengan hanya meminta bidang email, pengunjung Anda akan memiliki kemungkinan untuk berinteraksi dengan Anda dengan cepat. Satu-satunya hal yang harus mereka lakukan adalah mengetikkan alamat email mereka dan Anda akan memberikan konten yang mereka minati.

Untuk Membuat Penghalang Lebih Kecil / Mengandalkan Perilaku Cepat

Jika orang mengisi semua modul optin yang mereka temukan di web, mereka mungkin akan kehabisan waktu. Formulir optin adalah bagian dari semua jenis situs web saat ini. Hari-hari ketika orang-orang terpesona oleh mereka sudah berakhir. Jika mereka melihat bahwa mereka harus melakukan terlalu banyak upaya (baca: mereka harus menyelesaikan terlalu banyak bidang yang diperlukan) untuk berlangganan, mereka mungkin akan mengabaikannya. Namun, jika Anda hanya meminta alamat email, kemungkinan besar mereka akan setuju. Dibutuhkan maksimal 5 detik untuk hanya mengetikkan alamat email (yang kurang dari rentang perhatian rata-rata 7 detik yang dimiliki manusia).

Cara Menghapus Bidang Nama Modul Optin Email Divi

Berlangganan Saluran Youtube Kami

Tanpa penundaan lebih lanjut, mari kita buat ini berhasil.

Tambahkan Halaman Baru

Hal pertama yang harus Anda lakukan adalah menambahkan halaman baru atau membuka halaman di mana Anda ingin menempatkan Modul Optin Email dengan kolom email saja.

Tambahkan Modul Optin Email

Setelah Anda berada di halaman itu, tambahkan Modul Email Optin di mana pun Anda inginkan. Setelah Anda melihat pratinjau halaman dengan Modul Optin Email, Anda akan melihat bahwa itu akan terlihat seperti ini:

Jika Anda melanjutkan dan mengklik tombol berlangganan, tanpa mengisi kolom apa pun, Anda akan melihat bahwa itu tidak akan berfungsi. Secara default, Modul Email Optin memerlukan nama depan dan nilai email agar dapat berfungsi. Itu sebabnya membuat bidang menghilang (tetapi masih ada) tidak akan berhasil. Menghapusnya juga tidak akan berhasil.

Namun, hal yang dapat Anda lakukan adalah menambahkan nilai default ke bidang nama depan. Anda bisa menggunakan sesuatu seperti '*', yang hanya akan memastikan bidang memiliki nilai. Hal lain yang perlu kita lakukan adalah menghapus label yang ditautkan ke kolom input. Untuk mencapai semua ini, kita akan menggunakan beberapa kode jQuery dan kode CSS.

Tambahkan Kode CSS

Kita akan mulai dengan menambahkan kode CSS. Kode CSS hanya akan memastikan kedua bidang tidak akan ditampilkan di halaman. Untuk bagian fungsional, kita harus menggunakan beberapa baris kode jQuery.

Anda dapat membuat kode CSS berlaku untuk satu halaman tertentu atau ke seluruh situs web. Metode yang akan Anda gunakan kemungkinan besar akan bergantung pada seberapa sering Anda ingin menggunakan modul kode dengan bidang email saja. Jika Anda ingin menggunakan Modul Email Optin beberapa kali dan di seluruh halaman yang berbeda, gunakan metode kedua. Jika Anda ingin menghitungnya hanya untuk satu halaman, gunakan metode pertama.

Tambahkan Kode CSS ke Satu Halaman Secara Khusus

Untuk menambahkan kode CSS ke satu halaman tertentu, klik ikon berikut di dalam halaman yang sedang Anda kerjakan:

Di dalam layar yang muncul, salin dan tempel baris kode CSS berikut:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Tambahkan Kode CSS ke Opsi Tema

Untuk menambahkan kode CSS ke seluruh situs web, buka Dasbor WordPress > Divi > Opsi Tema > Gulir ke bawah tab Umum dan tambahkan baris kode CSS berikut ke bidang CSS Khusus:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Tambahkan Kode jQuery

Selanjutnya, kita akan menambahkan kode jQuery yang diperlukan. Untuk menambahkan kode jQuery, Anda juga memiliki dua kemungkinan: menambahkan kode untuk membuatnya berlaku untuk satu halaman tertentu atau menambahkan kode ke seluruh situs web.

Tambahkan Kode jQuery ke Satu Halaman Secara Khusus (Modul Kode)

Untuk menambahkan kode jQuery ke satu halaman tertentu, tambahkan Modul Kode tepat di bawah Modul Optin Email. Buka Modul Kode dan letakkan baris kode jQuery berikut di dalamnya:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Karena kami telah menghapus labelnya, kami memastikan nilai bidang alamat email tidak memiliki apa-apa di dalamnya. Untuk mengimbangi label, dan untuk memastikan orang tahu apa yang harus diketik, kami menggunakan placeholder sebagai gantinya. Dalam hal ini, placeholder adalah 'alamat email' tetapi jangan ragu untuk mengubahnya menjadi yang lain.

Tambahkan Kode jQuery ke Opsi Tema

Untuk membuat kode jQuery berlaku untuk seluruh situs web, Anda dapat menempatkannya di Opsi Tema. Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema > Integrasi dan tempatkan baris kode jQuery berikut di kepala situs web Anda:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Hasil

Jika Anda mengikuti setiap langkah dalam posting ini dan menerapkan kode CSS dan jQuery ke satu halaman tertentu atau ke semua halaman situs web Anda, Anda akan mencapai hasil berikut:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana mencapai Modul Optin Email yang hanya memiliki bidang alamat email. Alasan mengapa Anda mungkin ingin mencapai hasil seperti itu adalah karena efektivitasnya. Dengan meminta alamat email saja, audiens Anda harus berusaha lebih sedikit untuk berlangganan dan Anda akan dapat membuat daftar email Anda lebih cepat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh adichrisworo / shutterstock.com