Cara Mendesain Tata Letak Halaman Layar Penuh Kustom di Divi

Tata letak halaman Layar Penuh benar-benar dapat berguna dalam dunia desain web. Salah satu manfaat utama dari tata letak halaman layar penuh adalah visibilitas. Dengan halaman layar penuh, semua konten halaman Anda tetap berada di dalam jendela browser. Di dunia di mana pengguna dengan cepat menggulir, memiliki semua konten Anda yang terkandung dalam viewport browser dari awal dapat menyegarkan bagi pemirsa dan juga dapat membantu dengan konversi.

Jika Anda terbiasa dengan Divi, Anda seharusnya sudah tahu tentang modul header fullwidth yang memiliki fungsionalitas layar penuh bawaan. Ini adalah solusi luar biasa untuk membuat halaman layar penuh dengan konten minimal. Tetapi jika Anda ingin memanfaatkan membangun tata letak halaman layar penuh menggunakan bagian reguler dengan banyak baris dan modul, ini adalah pos untuk Anda. Saya akan menunjukkan kepada Anda beberapa trik sederhana untuk memastikan konten halaman Anda (bahkan bilah header dan footer) sesuai dengan jendela browser Anda dan kemudian skala dengan baik pada ukuran browser yang berbeda.

Mari kita mulai.

Sneak Peek

Berikut ini adalah cuplikan dari tata letak halaman layar penuh terakhir yang akan kita buat dalam tutorial ini.

Perhatikan bagaimana tinggi halaman menyesuaikan dengan ketinggian jendela browser sehingga semuanya tetap di tempatnya.

Apa yang kau butuhkan

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi. Saya juga akan menggunakan paket Fitness Gym Layout yang dapat diakses dari Divi Builder.

Berlangganan Saluran Youtube Kami

Cara membuat Halaman Layar Penuh Kustom di Divi

Sebelum saya masuk ke desain utama tutorial ini, saya pikir saya akan menunjukkan ide dasar di balik pembuatan halaman layar penuh di Divi. Lagi pula, Anda mungkin terkejut betapa sederhananya itu.

Ide dasarnya dijelaskan

Di halaman baru, pilih templat halaman kosong. Ini akan menghentikan bilah header dan footer bawah agar tidak muncul di halaman (saya akan menunjukkan cara memasukkannya nanti).

Sekarang gunakan Divi Builder di ujung depan untuk membangun halaman Anda dari awal. Kemudian tambahkan satu bagian reguler dengan satu baris kolom.

Selanjutnya, tambahkan modul penghitung waktu mundur (atau modul apa pun) ke baris satu kolom.

Untuk membuat segalanya lebih mudah dilihat, keluarkan warna latar belakang di penghitung waktu mundur dan tambahkan warna latar belakang ke bagian sehingga kita bisa lebih mengenali tinggi bagian di halaman. Saat ini tinggi bagian relatif terhadap tinggi konten yang dikandungnya. Dalam hal ini satu-satunya konten yang kami miliki adalah satu baris dengan modul sing.

Sekarang buka pengaturan bagian dan buka tab lanjutan dan tambahkan CSS khusus berikut ke Elemen Utama:

min-height: 100vh;
display: flex;
flex-direction: column;

Menyetel tinggi minimum bagian Anda ke 100vh (100% dari tinggi viewport) akan memastikan bahwa bagian Anda mencakup jendela browser penuh (atau viewport). Properti "display:flex" adalah cara cepat dan mudah untuk memusatkan konten bagian Anda secara vertikal.

Lihat panduan bermanfaat ini untuk info lebih lanjut tentang unit panjang vh.

Lihat halaman langsung Anda di browser penyamaran untuk melihat hasilnya karena jika Anda masuk ke WordPress, bilah admin atas akan sedikit menurunkan ketinggian browser.

Nah itu dia. Itulah ide dasar cara membuat tata letak halaman layar penuh kustom di Divi.

Memasukkan Header dan Footer ke Halaman Layar Penuh Anda.

Jika Anda ingin bilah header dan footer bawah disertakan dalam halaman layar penuh, Anda perlu melakukan satu penyesuaian kecil. Pertama, ubah templat halaman Anda kembali ke templat default di bagian belakang editor halaman Anda.

Menyertakan header dan footer bawah akan menambah ketinggian tambahan ke viewport browser Anda sehingga bagian tersebut tidak lagi pas seperti dulu. Ini karena halaman Anda sekarang terdiri dari tinggi bagian yang 100% dari tinggi area pandang PLUS tinggi bilah header dan footer bawah Anda. Itu terlalu banyak. Untuk memperbaikinya, kita perlu menyesuaikan CSS khusus di bagian kita sebagai berikut:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Satu-satunya perbedaan adalah nilai ketinggian minimum. Sekarang ada perhitungan yang memperhitungkan ketinggian tambahan (dalam piksel) dari bilah header dan footer bawah secara kolektif.

132px didasarkan pada total tinggi default header (80px) dan tinggi default bilah footer bawah (53px).

Sekarang setelah kita memiliki pemahaman dasar tentang cara membuat halaman layar penuh kustom di Divi, mari selami desain yang lebih kompleks.

Membangun Desain Halaman Layar Penuh Lengkap

Untuk memulai desain ini, buat halaman baru, beri judul halaman Anda, dan terapkan Divi Builder. Pilih opsi Choose a Premade Layout dan dari Load from Library Popup, pilih halaman Fitness Gym Layout. Kemudian klik untuk menggunakan Halaman Harga.

Setelah tata letak dimuat ke dalam pembuat, klik tombol untuk membangun di ujung depan (Pembangun Visual) dan Anda siap untuk memulai.

Membuat Bagian Baru

Tata letak premade ada untuk membantu memulai desain. Kami akan menggunakan elemen desain tata letak ini di sepanjang jalan dan menghapus sisa tata letak setelah kami selesai. Untuk membuat bagian utama untuk tata letak layar penuh kami, lanjutkan dan buat bagian reguler baru dan seret ke bagian paling atas halaman. Kemudian tambahkan seperempat struktur satu-setengah kolom seperempat ke baris. Ini akan menjadi dasar halaman layar penuh kami.

Menambahkan Modul ke Kolom Anda

Menggunakan Multiselect (tahan ctrl/cmd dan klik), pilih semua modul di dua baris pertama di bagian pertama tata letak dan seret ke kolom pertama bagian baru di bagian atas halaman.

Selanjutnya, gunakan multiselect untuk menyalin semua modul di baris ketiga dari bagian pertama tata letak yang sama dan menempelkannya ke kolom kedua dari bagian baru di bagian atas halaman.

Teks akan disembunyikan karena latar belakang putih tetapi kami akan mengubah warna latar belakang nanti.

Di kolom ketiga, tambahkan modul slider. Penggeser ini pada akhirnya akan menjangkau ketinggian penuh layar, tetapi untuk saat ini mari kita siapkan kontennya. Dalam pengaturan slider, hapus salah satu dari dua slide default yang ada secara default, lalu klik untuk membuka pengaturan slide tunggal.

Dalam pengaturan slide, tambahkan gambar latar belakang untuk memastikan gambar itu cukup besar untuk menjangkau tinggi penuh browser.

Itu menangani semua modul kami yang kami butuhkan untuk saat ini. Kami akan mengunjungi kembali pengaturan desain nanti tetapi untuk saat ini, mari sesuaikan baris kami.

Menyesuaikan Pengaturan Baris

Buka pengaturan baris dan mulai dengan menambahkan warna latar belakang ke kolom 2:

Kolom 2 Warna Latar Belakang: #2a2e40

Lompat ke tab desain dan perbarui yang berikut:

Jadikan Baris Ini Lebar Penuh: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Padding Kustom: 0px Atas, 0px Bawah

Menyesuaikan Pengaturan Bagian

Satu-satunya hal yang diperlukan pada saat ini untuk pengaturan bagian kita adalah menghilangkan padding default, tetapi saya pikir akan lebih baik untuk menambahkan pembagi bagian yang membingkai bagian atas kolom pertama. Buka pengaturan bagian dan perbarui yang berikut ini:

Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: #2a2e40
Tinggi Pembagi Atas: 8vw
Pengulangan Horizontal Pembagi Atas: 0.8x
Flip Pembagi Atas: vertikal dan horizontal

Padding Kustom: 0px atas, 0px bawah

Karena pembagi diatur untuk menampilkan konten di bawah bagian, itu akan bersembunyi di balik penggeser di kolom 3 dan tidak akan ditampilkan di kolom 2 karena cocok dengan warna latar belakang kolom. Ini menciptakan elemen desain pembingkaian yang bagus untuk kolom 1.

Hapus sisa tata letak yang dibuat sebelumnya

Pada titik ini bagian teratas kami memiliki segalanya untuk tata letak halaman layar penuh kami sehingga kami dapat menghapus semua bagian yang tersisa yang datang dengan tata letak yang dibuat sebelumnya. Seperti inilah tampilan halaman Anda sejauh ini.

Sekarang kita siap untuk mulai menyesuaikan halaman kita menjadi layar penuh.

Menambahkan CSS Kustom untuk Membuat Halaman Layar Penuh

Pada contoh dasar di awal artikel ini, saya menambahkan custom css langsung ke bagian. Namun, untuk memastikan fungsionalitas layar penuh kami hanya berlaku untuk desktop (dan menggunakan gaya default di seluler), saya akan menambahkannya ke CSS di bawah pengaturan halaman. Ini akan memungkinkan saya untuk menambahkan CSS eksternal yang hanya berlaku untuk halaman ini tetapi juga memberi saya opsi untuk menambahkan kueri media yang membatasi gaya hanya untuk desktop.

Dari menu pengaturan di bagian bawah pembuat ujung depan, buka pengaturan halaman. Di bawah tab lanjutan, masukkan CSS khusus berikut:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Bagi Anda yang tidak terbiasa dengan CSS, perhatikan bahwa kode tersebut dibungkus oleh kueri media yang menerapkan penataan gaya saat lebar browser minimal 980px. Dengan tanda kurung, cuplikan pertama menyertakan ID CSS bernama "fullsection" diikuti dengan ID CSS bernama "fullslide". Kedua ID CSS ini penting untuk diingat karena kita perlu menambahkannya ke bagian dan slider kita. Setelah kita melakukannya, css "height: calce(100vh – 133px)" akan diterapkan membuat keduanya layar penuh (mencakup ketinggian penuh jendela browser).

Cuplikan kedua akan menerapkan properti display flex ke bagian, membuat semua konten bagian dipusatkan secara vertikal. Untuk info lebih lanjut tentang ini, lihat posting kami tentang cara menyelaraskan konten secara vertikal di Divi.

Cuplikan ketiga sepenuhnya opsional. Ini hanya membuat bilah footer bawah lebar penuh agar sesuai dengan desain sedikit lebih baik dan juga agar sesuai dengan gaya header lebar penuh yang akan kita tambahkan.

Sekarang setelah Anda memiliki CSS eksternal, kami dapat menambahkan ID CSS kami ke bagian dan slider kami. Buka pengaturan bagian dan tambahkan ID CSS berikut:

ID CSS: bagian penuh

Sekarang buka pengaturan Modul Slider untuk slider di kolom 3 dan tambahkan ID CSS berikut:

ID CSS: slide penuh

Sentuhan Akhir

Pada titik ini, fungsionalitas halaman layar penuh sudah ada dan seharusnya berfungsi. Anda dapat memeriksanya di browser penyamaran untuk memastikan. Yang tersisa hanyalah beberapa sentuhan akhir.

Tambahkan spasi ke kolom kami

Buka pengaturan baris Anda untuk menambahkan beberapa padding ke bagian atas kolom 1 dan kolom 2 sebagai berikut:

Kolom 1 Padding Kustom: Atas 12vh, Kiri 1vw, Kanan 1vw
Kolom 2 Padding Kustom: Atas 12vh, Kiri 1vw, Kanan 1vw

Perhatikan bahwa saya menggunakan unit panjang vh untuk nilai padding teratas saya. Ini akan memungkinkan padding untuk menskalakan dengan ketinggian viewport, membuat lebih banyak padding saat jendela browser semakin tinggi dan membuat lebih sedikit padding saat browser semakin pendek. Saya menggunakan unit panjang vw (lebar viewport) untuk nilai padding kiri dan kanan saya sehingga padding akan diskalakan sesuai dengan lebar browser.

Tambahkan Satuan Panjang vh ke Teks Besar untuk Memaksimalkan Ruang Tampilan

Seperti yang Anda lihat, ada beberapa modul dengan teks yang sangat besar yang tidak benar-benar diskalakan dengan jendela browser sama sekali. Untuk memperbaikinya, kita dapat mengatur ukuran teks ke satuan panjang vh. Ini akan memungkinkan teks untuk diperkecil pada layar browser yang lebih pendek.

Buka pengaturan modul teks di bagian atas kolom 1 dan perbarui ukuran teks header h1 menjadi 7vh (bukan vw).

Selanjutnya, buka pengaturan modul teks di bagian atas kolom 2 dan perbarui ukuran Teks Judul 2 menjadi 6vh.

Perbarui Desain Slider

Untuk menyelesaikan desain, Anda dapat menyalin desain tombol tombol di kolom 2 dan menempelkannya ke gaya tombol slider. Untuk melakukan ini, buka pengaturan tombol untuk tombol di kolom 2 dan klik kanan pada kategori opsi tombol dan klik "salin gaya tombol".

Setelah itu, buka pengaturan penggeser dan tempel gaya tombol ke dalam kategori opsi tombol penggeser.

Anda juga dapat menambahkan hamparan latar belakang ke masing-masing slide.

Penyesuaian Bilah Header dan Footer Bawah

Anda mungkin ingat bahwa kami telah menambahkan potongan kecil CSS khusus yang memperluas footer kami ke lebar penuh. Ini untuk mengantisipasi membuat bilah menu utama kami lebar penuh juga. Untuk membuat bilah menu utama Anda lebar penuh, buka dasbor WordPress dan navigasikan ke Divi > Penyesuai Tema > Header & Navigasi > Bilah Menu Utama. Kemudian centang opsi Make Full Width.

Karena kami menampilkan bilah footer bawah kami di halaman layar penuh kami, kami dapat memperbarui warna latar belakang Bilah Bawah agar sesuai dengan desain. Tetap di Penyesuai Tema dan navigasikan ke Footer > Bilah Bawah. Kemudian atur warna latar belakang ke #2a2e40.

Kemudian publikasikan perubahan Anda.

Hasil akhir

Berikut adalah desain akhir. Perhatikan bagaimana semuanya cocok dengan baik di dalam jendela browser.

Dan lihat seperti apa saat menyesuaikan browser dengan ukuran yang berbeda.

Dan jangan lupa, karena kami hanya menerapkan CSS khusus kami ke lebar browser yang lebih besar dari 980px, desain akan kembali normal pada perangkat seluler.

Ini dia di tablet dan smartphone.

Pikiran Akhir

Membuat tata letak halaman layar penuh khusus di Divi tidak terlalu berlebihan setelah Anda memahami cara menyesuaikan ketinggian bagian dengan benar ke ketinggian browser Anda dengan beberapa cuplikan CSS. Tetapi begitu Anda memilikinya, Anda dapat membuat desain halaman layar penuh yang tak terhitung jumlahnya di dalam Divi Builder. Berhati-hatilah untuk menjaga konten seminimal mungkin jika Anda berencana untuk membuat semuanya terlihat di dalam jendela browser.

Jenis desain ini bekerja dengan baik untuk situs pribadi, penawaran promosi, dan semua jenis halaman arahan. Ini juga merupakan solusi bagus untuk halaman yang memiliki sedikit konten dan Anda ingin menghindari bilah footer bawah ditampilkan di tengah halaman.

Dan jangan lupa tentang opsi untuk menggunakan Modul Header Fullwidth Divi. Meskipun Anda tidak akan memiliki fleksibilitas yang sama dengan metode yang digunakan dalam posting ini, metode ini sangat cocok untuk halaman dengan konten minimal.

Berikut adalah beberapa posting lagi yang dapat Anda nikmati tentang masalah halaman layar penuh.

• Cara Membuat Bagian Layar Penuh dengan Tautan Gulir Atas dan Bawah dengan Divi
• Rancang Tata Letak Divi Layar Penuh Unik dengan Tombol Gulir Animasi
• dan banyak lagi

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!