Loncat ke Konten Utama

Cara membuat slider layar penuh pada Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Slider lebar penuh hadir dengan fitur luar biasa, termasuk dengan kemampuan untuk menambahkan slider dengan latar belakang video. Tapi, fitur yang membuatnya lebih kuat adalah kemampuan untuk memperpanjang slider untuk ditampilkan dalam mode layar penuh. Jadi kami akan menunjukkan kepada Anda cara menambahkan fitur layar penuh pada slider.

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.

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]

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.

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

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]

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

Buat Toko Online Anda dengan mudah

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

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

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
16 saham
saham10
menciak1
Register5
Ada apa