Penggeser lebar penuh hadir dengan beberapa fitur mengagumkan termasuk kemampuan untuk menambahkan penggeser dengan latar belakang video. Tapi, salah satu fitur yang membuatnya lebih bertenaga adalah kemampuan untuk memperluas slider untuk ditampilkan dalam mode layar penuh. Jadi kami akan menunjukkan kepada Anda cara menambahkan fungsionalitas layar penuh ke slider.

Penambahan fitur layar penuh ke modul slider Divi sangat mudah diterapkan dengan beberapa baris CSS dan JavaScript. Hanya dalam 5 menit, Anda dapat mengubah penggeser lebar penuh menjadi penggeser layar penuh yang meluas untuk memenuhi seluruh layar, seperti header layar penuh.

Implementasi fungsi slider layar penuh pada Divi

Jika Anda belum membaca tutorial tentang presentasi antarmuka Divi, Saya mengundang Anda untuk melakukannya.

Langkah 1: Tambahkan slider dengan slide dalam mode lebar penuh

Gunakan " Divi Builder »Tambahkan bagian« lebar penuh »Dan klik pada«  Masukkan modul '.

Cara menambahkan modul pada divi builder

Menambahkan modul penuh-lebar.

menambahkan modul slider Divi #

Di Setelan Penggeser Layar Penuh, di bawah tab "CSS Khusus", tambahkan kelas CSS yang disebut " et_fullscreen_slider '.

Modifikasi css lanjutan dari slider divi

Dalam "Pengaturan umum" tambahkan slide baru.

Tambahkan diaspositif di divi

Dalam pengaturan slide, di bawah Pengaturan Umum perbarui item berikut:

  • Bagian: [masukkan topik Anda]
  • Tombol Teks: [enter tombol teks]
  • URL Button: [enter tombol URL Anda]
  • gambar latar belakang: [menambahkan gambar latar belakang] (Saya menggunakan gambar dari unsplash.com)

Pengaturan slide Divi

Ulangi langkah ini untuk slide sebanyak yang ingin Anda tambahkan.

Setelah selesai, klik " Simpan & Keluar '.

Cara menambahkan CSS & JavaScript khusus

Dari dasbor WordPress, buka " Divi → Opsi Tema Dan di bawah "Pengaturan Umum", masukkan CSS berikut di kotak teks CSS Khusus:

.et_pb_slides .et_fullscreen_slider, .et_pb_slide .et_fullscreen_slider, .et_pb_container .et_fullscreen_slider {min-height: 100% yang signifikan; height: 100% penting;! }

klik pada tab berikutnya dan tambahkan javascript berikut ke kotak teks berlabel " Tambahkan kode ke kepala blog Anda »:

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 et_viewport_height = $(window).height(),
 et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
 $admin_bar = $('#wpadminbar'),
 $main_header = $('#main-header'),
 $top_header = $('#top-header');
 
 $(et_slider).height('auto');
 
 if ($admin_bar.length) {
 var et_viewport_height = et_viewport_height - $admin_bar.height();
 }
 
 if ($top_header.length) {
 var et_viewport_height = et_viewport_height - $top_header.height();
 }
 
 if (!$('.et_transparent_nav').length) {
 var et_viewport_height = et_viewport_height - $main_header.height();
 }
 
 if (et_viewport_height > et_slider_height) {
 $(et_slider).height(et_viewport_height);
 }
 }
 
})(jQuery);

akhirnya

Sekarang Anda memiliki penggeser mode layar penuh untuk situs web. Gunakan untuk membuat slider lebar penuh yang efektif untuk sebagian besar browser.

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi lainnya