Apakah Anda ingin membuat penggeser layar penuh dengan Divi ?
Penggeser Layar Penuh dapat berfungsi dengan sangat baik sebagai tajuk beranda Anda. situs jaringan.
Aspek layar penuh secara sistematis mempertahankan isi penting di paro atas. Dan fungsi slider memungkinkan pengguna untuk melihat isi tambahan tanpa harus menggulir halaman.
Buat penggeser layar penuh dengan Divi mengejutkan mudah dilakukan. Kuncinya adalah memberi slider Anda ketinggian relatif terhadap tinggi browser, lalu singkirkan batasan margin dan lebar tambahan pada baris atau bagian induk.
Hanya dalam beberapa menit, Anda dapat membuat penggeser layar penuh yang mengembang untuk memenuhi seluruh layar saat memuat halaman dan tampak hebat di semua perangkat.
Mari kita mulai.
penelitian
Berikut adalah ikhtisar singkat tentang slider yang akan kita buat dalam tutorial ini.
Buat halaman baru dengan Divi Builder
Di dasbor WordPress, buka Halaman> Tambah Baru
Berikan judul yang relevan dengan Anda dan klik 'penggunaan Divi Pembangun'
Akhirnya, klik 'Mulai Membangun'
Setelah itu, Anda akan memiliki halaman kosong untuk mulai mendesain di Divi.
Buat penggeser layar penuh di Divi
Konfigurasi bagian dan garis
Untuk memulai, tambahkan baris satu kolom ke bagian.
margin bagian
Sebelum menambahkan modul, buka pengaturan bagian, buka tab Mendesain, tarik ke bawah opsi Jarak dan ubah pengaturannya sebagai berikut:
- Padding (Atas dan Bawah): 0px
Pengaturan saluran
Selanjutnya, buka pengaturan baris dan perbarui yang berikut di tab Mendesain :
- Lebar: 100%
- Lebar Maks: 100%
- Padding (Atas dan Bawah): 0px
Dengan semua pengaturan ini, kita sekarang dapat melanjutkan untuk membuat Slider yang sebenarnya.
Pembuatan penggeser layar penuh
Untuk membuat slider layar penuh, tambahkan modul Slider baru ke baris.
Tambahkan gambar ke setiap slide
Sebelum memperbarui pengaturan slide umum, buka pengaturan slide pertama default
Tambahkan gambar dan gambar latar belakang ke slide. Untuk contoh ini, kami menggunakan gambar yang sama untuk gambar slide dan gambar latar belakang (sekitar 1920px kali 1500px).
Kemudian buka pengaturan untuk slide kedua
Tambahkan gambar dan gambar latar belakang yang berbeda dari yang sebelumnya ke slide.
Perhatikan bahwa Anda dapat menambahkan slide sebanyak yang Anda inginkan.
Perbarui pengaturan penggeser
Sekarang setiap slide individu memiliki gambar unik dan gambar latar belakang, kami siap untuk memperbarui pengaturan slider secara umum.
Kembali ke pengaturan slider dan perbarui yang berikut di bawah tab Mendesain :
Hamparan
- Gunakan Hamparan Latar Belakang: YA
- Warna Hamparan Latar Belakang: rgba(27,18,38,0.74)
Bayangan Kotak
- Gaya Bayangan Kotak: Lihat Menangkap (1)
- Box Shadow (Horisontal dan Vertikal) Posisi: -8vw
- Kekuatan Penyebaran Bayangan Kotak: -6,5 vw
- Warna Bayangan: #cf1259
Teks Judul
Edit pengaturan judul
- Judul Font: Montserrat
- Judul Font Berat: Ultra Tebal
- Ukuran Teks: 5vw (desktop), 40px (tablet dan ponsel)
teks tubuh
Edit pengaturan teks deskripsi sebagai berikut:
- Berat Huruf Tubuh: Semi Tebal
- Ukuran Teks Tubuh: 16px
- Tinggi Garis: 1.8 em
Gaya Tombol
- Gunakan Gaya Kustom Untuk Tombol: YA
- Ukuran Teks Tombol: 16px
- Latar belakang: #cf1259
- Lebar Perbatasan: 0px
- Radius Perbatasan: 0px
- Berat Huruf: Tebal
- Gaya Huruf: TT
- Padding (Atas dan Bawah): 15px
- Padding (Kiri dan Kanan): 30px
Tinggi penggeser dan lebar konten
- Lebar Maks Konten: 90%
- Tinggi Min: 100vh
Memberi slider ketinggian minimum 100vh akan memastikan bahwa slider menjangkau ketinggian penuh jendela browser. Ini adalah kunci untuk membuat Slider layar penuh.
Slider sudah akan menjangkau lebar penuh jendela browser, karena lebar garis adalah 100%.
Panah Penggeser
Di bawah tab Advanced, perbarui ukuran dan posisi panah Slider dengan menambahkan CSS khusus berikut ke area CSS Geser Panah :
font-size: 8vw !important;
margin-top: -4vw;
Ini akan memperbesar panah Slider pada ukuran layar besar dan mengecilkannya ke ukuran yang lebih kecil di ponsel.
Kurangi tinggi header dari tinggi Slider
Jika Anda memiliki tajuk di halaman, Penggeser Layar Penuh sebenarnya akan memanjang sedikit di bawah jendela browser.
Ini karena tinggi header menurunkan Slider yang saat ini memiliki ketinggian 100vh (100% dari ketinggian jendela/browser). Untuk mencegah Slider didorong di bawah viewport browser, Anda dapat menambahkan fungsi CSS kal() untuk mengurangi tinggi header dari ketinggian slider.
Anda perlu mengetahui ketinggian tajuk (desktop dan seluler) agar ini berfungsi. Jika Anda menggunakan header Divi default, tinggi header akan menjadi 80px. Jadi, tinggi slider harus 100vh – 80px.
Untuk menambahkan tinggi kustom, buka pengaturan Slider dan tambahkan CSS kustom berikut ke elemen Slider utama dan juga untuk setiap slide:
min-height: calc(100vh - 80px)!important;
Hasil akhir
Inilah hasil akhirnya.
Unduh DIVI Sekarang!!!
Dan inilah tampilan desain pada tablet dan ponsel.
Kesimpulan
Langkah-langkah kunci untuk membuat Slider Layar Penuh di Divi adalah mengonfigurasi bagian dan baris untuk menjangkau lebar penuh browser, lalu memberikan slider ketinggian minimum 100vh.
Jika Anda menggunakan tajuk, Anda dapat menambahkan cuplikan CSS khusus yang akan mengurangi tinggi tajuk untuk memastikan penggeser layar penuh tidak melampaui bagian bawah browser.
Dengan langkah-langkah kunci ini, Anda dapat menyesuaikan slider (dan slide) lebih lanjut sesuai keinginan Anda menggunakan semua fitur canggih yang disertakan dalam Divi Builder.
Gunakan untuk membuat bilah geser yang indah dan efektif yang mengisi layar apa pun di perangkat apa pun.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
