Kita semua tahu bahwa membangun situs web yang menarik dan berbicara kepada audiens tertentu adalah suatu proses. Setiap tindakan yang mereka lakukan di situs web Anda sangat penting karena itu adalah bagian dari kenyamanan mereka maka dari itu temukan Pengaturan Module Fullwidth Header disini.
Untuk menjadikan situs web Anda menjadi menarik tentunya diperlukan banyak hal seperti, desain yang bagus serta konten yang dipikirkan dengan matang dan pasti cukup banyak CTA yang akan mendorong pengunjung Anda untuk mengambil tindakan apa yang mereka inginkan di web Anda.
Salah satu elemen yang paling sering digunakan yang ialah ajakan untuk mengklik sebuah tombol di situs web. Anda biasanya menemukan tombol di berbagai bagian situs web. Mereka bisa mengarah ke berbagai bagian situs web atau mereka bisa membawa pengunjung ke situs web eksternal.
Dengan Divi, Anda di izinkan untuk membuat situs web dengan memasukkan tombol di manapun, dan sebanyak mungkin sesuai yang Anda butuhkan.
Mengapa Pengunjung Anda Harus Secara Otomatis Membuka Tautan di Tab / Jendela Baru?
Mari kita simak terlebih dahulu mengapa anda harus mengaktifkan fitur ini di Pengaturan Module Fullwidth Header ,
Tidak membiarkan pengunjung Anda menjauh dari situs web
Saat Anda kehilangan pengunjung, sangat sulit untuk mendapatkannya kembali di situs web Anda. Itu biasanya terjadi ketika Anda mengirim mereka ke situs web eksternal dalam jendela yang sama ketika mengklik tombol.
Jadi, mengapa Anda mengirim mereka begitu saja? Dengan menjadikan tombol yang Anda buat terbuka di tab baru, Anda memastikan bahwa mereka masih memiliki halaman yang terbuka dengan situs web Anda di tab lainnya. Mereka dapat kembali dengan mudahnya ke halaman Anda tanpa harus membuka riwayat pencarian.
Mari kita mulai :
Di tab content dari setiap Modul Button, Anda dapat memilih apakah Anda ingin membuka tautan di jendela yang sama atau tab baru. Anda dapat menemukan opsi ini di subkategori Tautan pada tab Konten.
Namun jika menggunakan Fullwidth Header Anda tidak bisa menemukan opsi ini di tab content, Itu sebabnya Anda perlu menambahkan kode jQuery yang akan membuat tombol Fullwidth Header dan Fullwidth Slider terbuka di tab / jendela baru.
Membuat Header Fullwidth
Silahkan Anda menambahkan Bagian Fullwidth baru ke halaman yang ada atau baru.
Di dalam Bagian Fullwidth itu, pilih Header Fullwidth. Sekarang, gulir ke bawah tab content dari header Fullwidth dan tuliskan teks yang ingin Anda tampilkan di tombol. Setelah itu, tambahkan tautan ke tombol juga.
Kemudian, buka tab Advanced dari header Fullwidth dan gulir ke bawah sampai Anda menemukan bidang Button. Dalam hal ini, kami hanya ingin menggunakan tombol nomor satu. Misalkan Anda ingin membuka tombol kedua di tab baru, Anda harus menggunakan kelas yang ditetapkan untuk tombol dua.
Klik di bidang Button One dan lihat kelas muncul dalam warna font oranye. Kelasnya adalah ‘.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button‘.
Membuat Slider Fullwidth
Jika Anda ingin menambahkan Fullwidth Slider, lanjutkan dan tambahkan Bagian Fullwidth baru. Kali ini, tempat Slider Fullwidth di bagian.Tuliskan teks tombol di tab Konten dan pindah ke tab Advanced.
Gulir ke bawah tab itu sampai Anda menemukan opsi Tombol Slide. Salin class buttonnya.
Menambahkan Kode jQuery ke Opsi Tema Divi
Kode yang akan digunakan untuk membantu membuka tautan di tab baru untuk Fullwidth Header & Slider berbeda. Cara yang paling umum adalah menambahkan kode ke Opsi Tema situs web Divi Anda.
Alasan mengapa orang menggunakan opsi ini paling sering adalah karena itu akan berlaku untuk seluruh situs web. Pada halaman apa pun situs Anda, kode akan berlaku. Ini adalah cara termudah untuk menambahkan kode khusus ke situs web Anda jika Anda menggunakan kembali bagian atau elemen tertentu di berbagai halaman situs web Anda.
Untuk menambahkan kode ke seluruh situs web Anda, buka Divi > Theme Options > Integration and add the following code to the <head> situs website Anda:
Baca Juga : Pengaturan Lengkap Tema Divi
kode jQuery untuk tombol Header Fullwidth
<script>jQuery(function($){$('.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button').attr('target', '_blank');});</script>kode jQuery untuk tombol Slider Fullwidth
<script>jQuery(function($){$('.et_pb_slide_0.et_pb_slide .et_pb_container a.et_pb_more_button.et_pb_button').attr('target', '_blank');});</script>
Jangan lupa untuk menambahkan teks di antara tag <script> seperti yang ditunjukkan pada layar cetak di atas.
Seperti yang Anda ketahui, kode ini sedikit berbeda untuk Header Fullwidth dan Slider Fullwidth. Anda dapat melihat bagaimana kelas setiap tombol ditulis di antara tanda kurung di baris ketiga kode. Jadi, misalkan, Anda ingin membuat kode berlaku untuk tombol kedua dari Fullwidth Header, cukup ganti kelas tertulis dengan yang ditugaskan ke tombol kedua.
Setelah itu, simpan perubahannya. Kode akan segera berlaku di seluruh situs web Anda.