Loncat ke Konten Utama

Cara membuat slider layar penuh pada Divi

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]

Slider full-width hadir dengan fitur-fitur mengagumkan, termasuk dengan kemampuan untuk menambahkan slider dengan latar belakang video. Namun, fitur yang membuatnya bahkan lebih kuat adalah kemampuan untuk memperpanjang slider agar ditampilkan dalam mode layar penuh. Jadi kami akan menunjukkan cara menambahkan fitur layar penuh pada penggeser.

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

Implementasi fungsi slider layar penuh pada Divi

Jika Anda belum baca 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 sebuah modul ".

Menambahkan modul penuh-lebar.

Divi: Tema WordPress terbaik sepanjang masa!

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

menambahkan modul slider Divi #

Di Slider Settings layar penuh, di bawah tab "CSS Khusus", tambahkan kelas CSS yang disebut " et_fullscreen_slider ".

Di "Pengaturan Umum" tambahkan slide baru.

Buat Toko Online Anda dengan mudah

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

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 unsplash.com)

Ulangi langkah ini untuk sebanyak mungkin slide yang ingin Anda tambahkan.

Setelah selesai, klik " Simpan & Exit ".

Cara menambahkan CSS & JavaScript khusus

Dari dasbor WordPress, buka " Divi → Opsi Tema Dan di bawah "Pengaturan Umum," masukkan CSS berikut dalam 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 »:

<Script> (function ($) {$ (window) .on ( 'load resize', function () {$ () masing-masing (function () {et_fullscreen_slider ($ (ini)) 'et_fullscreen_slider ..';}); }); fungsi et_fullscreen_slider (et_slider) {var et_viewport_width = $ (window) .width () et_viewport_height = $ (window) .height () = $ et_slider_height (et_slider) .find () innerHeight () 'et_pb_slider_container_inner.'. , admin_bar $ = $ ( '# wpadminbar), main_header $ = $ (' # tangan-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); </ Script>

akhirnya

Sekarang Anda memiliki slider layar penuh untuk situs web Anda. Gunakan untuk membuat slider yang efisien dengan lebar penuh untuk sebagian besar browser.

Jika Anda memiliki pertanyaan, jangan ragu untuk bertanya kepada mereka.

Tutorial Divi lainnya

Artikel ini berisi komentar 10
  1. Halo,
    Terima kasih untuk artikel ini Saya membaca bahwa tidak perlu menginstal tema anak dengan Divi sampai Anda mengubah CSS terlalu banyak.
    Masih ada sedikit penyesuaian ...
    Jadi, apakah Anda merekomendasikan tema anak sebelum menerapkan tutorial super Anda?
    Terima kasih sebelumnya untuk semua saran baik Anda, saya sering terinspirasi olehnya 🙂

  2. Halo, artikel bagus sekali!
    Saya mengikuti apa yang ditunjukkan dalam artikel tapi slider saya tidak ditampilkan dalam layar penuh di DIVI.
    Dapatkah anda membantu saya Saya ingin meletakkannya di homepage saya.

    Terima kasih atas bantuan Anda

  3. Halo,
    Saya membangun homepage saya dengan pembangun ... ketika saya melakukan previsualization, saya melihat halamannya.
    Masalahnya adalah ketika saya menyimpan halaman saya dan membukanya lagi, slider tidak muncul.
    Bisakah seseorang tolong bantu 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
16 saham
saham10
menciak1
Register5
Ada apa