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 '.
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 '.
Dalam "Pengaturan umum" tambahkan slide baru.
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)
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
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana cara menambahkan teks pada produk Divi WooCommerce
- Cara mengubah warna menu antara halaman Divi
- Cara mempersonalisasi kisi-kisi blog dengan Divi
- Cara menggunakan peran Divi editor pada WordPress
- Cara membuat slider Divi layar penuh
- Cara mengubah warna menu antara halaman Divi
- Fitur yang Anda mungkin tidak tahu tentang Divi
- Cara menggunakan Divi Builder di WordPress
- Cara menggunakan modul gulir video Divi
- Cara menggunakan modul Flip Divi Builder
- Bagaimana cara menambahkan modul testimonial pada Divi Builder
- Cara menggunakan modul teks Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna Divi
- Cara menggunakan modul Divi Social Media
- Cara menggunakan modul shop pada tema WordPress Divi
- Cara menggunakan modul sidebar Divi
- Cara menggunakan Modul Tabel Divi Price
- Cara menggunakan modul judul publikasi Divi
- Bagaimana cara menambahkan modul video Divi
- Cara menggunakan modul navigasi artikel
- Cara menggunakan modul pencarian Divi
- Cara menggunakan modul dompet Divi
- Cara menggunakan modul orang di Divi Builder
- Cara menggunakan modul dompet dengan filter Divi
- Cara menggunakan modul slider lebar penuh
- Cara menggunakan Modul Gambar Divi Builder
- Cara menggunakan modul navigasi penuh lebar dari Divi Builder
- Cara menggunakan modul galeri gambar
- Cara menggunakan Modul Full-Width Divi Builder Card
- Cara menggunakan Modul Portofolio Full Full Divi
- Cara menggunakan modul header penuh lebar Divi
- Cara menggunakan Modul Divi Counter
- Cara menggunakan slider artikel di Divi Builder
- Cara menggunakan modul Divi Email Optin
halo dan terima kasih untuk tutorial ini! Saya tidak dapat menemukan kode js dan css untuk dimasukkan ke dalam penggeser di sini
Halo, tutorial yang bagus.
Di sisi lain itu tidak ditampilkan layar penuh di iphone misalnya, dengan memiringkan iphone slider ditampilkan dari waktu ke waktu dalam layar penuh tetapi tidak setiap saat…. seolah-olah tidak responsif, apakah Anda punya ide untuk memperbaiki masalah kecil ini?
Terima kasih sebelumnya,
Hormat kami,
Halo,
Coba nonaktifkan semua plugin lain, periksa juga apakah versi WordPress dan Divi Anda terbaru.
Selamat siang, bagaimana cara menyesuaikan ukuran slide agar sesuai dengan ukuran gambar spanduk sehingga saya tidak dapat memotong gambar?
Halo,
Saya tidak mengerti pertanyaannya.
Halo,
Terima kasih untuk artikel ini. Saya telah membaca bahwa tidak perlu menginstal tema anak dengan Divi selama kami tidak terlalu banyak memodifikasi CSS.
Masih ada sedikit kustomisasi ...
Jadi, apakah Anda merekomendasikan tema anak sebelum menerapkan tutorial super Anda?
Terima kasih sebelumnya atas semua saran bagus Anda, saya sering mendapat inspirasi darinya 🙂
Halo,
Belum tentu. Anda dapat menyimpan divi jika Anda tidak memiliki terlalu banyak pengetahuan teknis.
Halo, artikel bagus sekali!
Saya mengikuti apa yang ditunjukkan dalam artikel tetapi slider saya tidak ditampilkan dalam layar penuh pada DIVI.
Bisakah kamu membantuku ? Saya ingin meletakkannya di beranda saya.
Terima kasih atas bantuan Anda
Halo,
Sudahkah Anda menghubungi tim DIVI?
Halo Ali,
Saya memiliki masalah yang sama ... Apakah Anda menemukan solusi?
Merci d'avance
Halo,
Saya membangun beranda saya dengan pembuat ... ketika saya melakukan pratinjau, saya melihat halamannya.
Masalahnya adalah ketika saya menyimpan halaman saya dan membukanya lagi, slider tidak muncul.
Bisakah seseorang membantu saya?
Halo,
Ini mungkin karena bug, apakah Anda mencoba menghubungi dukungan Eleganthemes?
Halo,
Terima kasih untuk artikel anda
Apakah Anda tahu bagaimana saya bisa mengubah kecepatan scrolling slide?