Loncat ke Konten Utama

Cara membuat slider layar penuh pada Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 »:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

(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 slider layar penuh untuk situs web Anda. Gunakan ini untuk membuat slider lebar-penuh yang efektif untuk kebanyakan browser.

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya.

Tutorial Divi lainnya

Artikel ini berisi komentar 12

  1. 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,

  2. Selamat siang, bagaimana cara menyesuaikan ukuran slide agar sesuai dengan ukuran gambar spanduk sehingga saya tidak dapat memotong gambar?

  3. 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 🙂

  4. 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

  5. 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?

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
11 saham
saham5
menciak1
Register5