Divi: Tema WordPress terbaik sepanjang masa!

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

Apakah Anda ingin membuat slider layar penuh dengan Divi?

Penggeser Layar Penuh dapat berfungsi dengan baik sebagai tajuk beranda situs web Anda. 

Aspek layar penuh secara konsisten menjaga konten penting di paro atas. Dan fitur slider memungkinkan pengguna untuk melihat konten tambahan tanpa harus menggulir halaman ke bawah.

Membuat slider layar penuh dengan Divi ternyata sangat 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 'Gunakan Divi Builder'

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.

Penggeser Layar Penuh Divi

margin bagian

Sebelum menambahkan modul, buka pengaturan bagian, buka tab Mendesain, tarik ke bawah opsi Jarak dan ubah pengaturannya sebagai berikut:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

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

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

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.

penggeser layar penuh dengan Divi

Unduh DIVI Sekarang!!!

Dan inilah tampilan desain pada tablet dan ponsel.

penggeser layar penuh dengan Divi
penggeser layar penuh dengan Divi

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.

...