Membuat Tata Letak Layar Penuh dengan Transisi Gambar Latar Belakang Paralaks di Divi

Membuat halaman web dengan bagian layar penuh adalah cara yang bagus untuk meningkatkan pengalaman pengguna dengan transisi yang mulus dan tata letak bagian yang bersih yang menjangkau lebar dan tinggi penuh browser. Biasanya, ini berfungsi dengan baik untuk menampilkan produk atau layanan satu bagian pada satu waktu yang memungkinkan pengguna untuk dengan mudah fokus pada masing-masing saat menggulir halaman ke bawah. Jenis desain ini juga bekerja sangat baik dengan gambar latar belakang yang berbicara dengan konten dan memberikan aksen desain yang indah. Dan jika Anda ingin sedikit kreatif, Anda dapat menambahkan beberapa fungsi paralaks ke gambar latar belakang Anda untuk membuat beberapa transisi yang cukup unik saat menggulir dari satu bagian layar penuh ke bagian layar penuh lainnya.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan beberapa transisi gambar latar belakang paralaks ke tata letak halaman layar penuh di Divi. Prosesnya sederhana dan dengan itu Anda dapat membuat beberapa hasil yang kuat.

Sneak Peek

Lihatlah beberapa desain yang akan kita buat bersama.

Mulai

Berlangganan Saluran Youtube Kami

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi dan kumpulan gambar yang akan digunakan untuk berbagai gambar produk dan gambar latar belakang. Saya menggunakan gambar gambar dari Paket Tata Letak Toko Jus kami. Anda dapat mengunduh file zip dengan gambar-gambar ini di bagian bawah posting blog yang menampilkan paket tata letak ini. Cukup klik tombol "Unduh Aset Gambar Resolusi Penuh".

Mempersiapkan Halaman Baru Anda

Setelah Anda memiliki gambar Anda siap. Buat halaman baru dan beri judul pada halaman Anda. Kemudian gunakan Divi Builder dan pilih "Build from Scratch". Kemudian klik tombol untuk membangun di ujung depan.

Sekarang Anda siap untuk berguling!

Ide Dasar

Ide dasar di balik konsep ini melibatkan penumpukan beberapa bagian lebar penuh, masing-masing dengan modul header lebar penuh. Setiap modul header diberi lebar khusus yang dapat disejajarkan ke kiri, tengah, atau kanan saat mengekspos latar belakang bagian. Kemudian setiap bagian diberi gambar latar dengan metode paralaks tertentu. Ini menciptakan efek transisi gambar latar belakang yang berbeda saat Anda menggulir halaman ke bawah.

Berikut cara melakukannya.

Membuat Bagian Header Lebar Penuh

Pertama, Anda perlu membuat bagian lebar penuh baru dan kemudian menambahkan modul header lebar penuh ke bagian tersebut.

Perbarui pengaturan tajuk lebar penuh dengan beberapa konten dengan yang berikut:

Judul : “Jus Tomat”
Tombol #1 Teks Tautan: “Lihat Resep”
Konten: “Konten Anda ada di sini. Edit atau hapus teks ini sebaris atau dalam pengaturan Konten modul.”
Gambar Logo: [lihat tangkapan layar] (Gambar berukuran 240px kali 300px)

Sekarang lanjutkan untuk memperbarui desain tajuk Anda sebagai berikut:

Warna Latar Belakang: rgba(255,255,255,0.92)

Jadikan Layar Penuh: YA

Tampilkan Tombol Gulir Bawah: YA
Ikon: lihat tangkapan layar
Gulir ke Bawah Warna Ikon: #222222

Warna Teks: Gelap

Judul Judul Tingkat: H2
Judul Font: Raleway
Ukuran Teks Judul: 50px

Font Tubuh: Lato
Ukuran Teks Tubuh: 16px
Spasi Huruf Tubuh: 1px

Tombol Satu Ukuran Teks: 16px
Tombol fOne Warna Teks: #ffffff
Tombol Satu Warna Latar Belakang: #222222
Tombol Satu Radius Batas: 50px
Tombol Satu Huruf Spasi: 2px
Tombol Satu Gaya Font: TT

Lebar: 45% (desktop), 60% (tablet), 100% (ponsel pintar)

Simpan Pengaturan.

Elemen desain utama utama di sini adalah opsi "Buat layar penuh" dan "Lebar: 45%". Ini akan memungkinkan bagian untuk menjangkau lebar dan tinggi penuh jendela browser setiap saat. Dan lebar kustom mengecilkan modul header untuk mengekspos latar belakang bagian yang akan kita tambahkan selanjutnya.

Menambahkan latar belakang bagian

Sekarang kita memiliki modul header yang dirancang, kita dapat menambahkan gambar latar belakang bagian kita. Buka pengaturan bagian lebar penuh Anda dan tambahkan gambar latar belakang. Pastikan itu cukup besar untuk menjangkau lebar dan tinggi penuh jendela browser. Kemudian pilih untuk menggunakan metode Parallax CSS.

Menduplikasi Bagian

Karena setiap bagian akan menampilkan konten baru, kami perlu menduplikasi bagian lebar penuh kami tiga kali sehingga Anda memiliki total empat bagian di halaman Anda masing-masing dengan modul header.

Membuat gambar latar statis dengan menggunakan Gambar Latar Bagian yang Sama dengan CSS Parallax

Sekarang kita memiliki empat bagian yang identik, kita dapat memperbarui konten header lebar penuh dengan gambar logo baru dan Judul untuk mendapatkan pemahaman desain yang lebih baik. Namun, jika kita menyimpan gambar latar belakang yang sama menggunakan paralaks CSS untuk keempat bagian, hasilnya adalah gambar latar statis yang tetap di tempatnya saat Anda menggulir ke bagian layar penuh yang berbeda. Dan karena kami menggunakan tombol gulir ke bawah pada setiap tajuk, pengguna memiliki opsi untuk mengeklik panah untuk menggulir dengan bersih ke setiap bagian baru.

Lihat hasilnya.

Menggunakan Gambar Latar Belakang Berbeda dengan Transisi Paralaks CSS

Menggunakan Gambar latar belakang yang berbeda (dengan paralaks CSS) untuk setiap bagian akan mengubah nuansa desain saat Anda menggulir. Karena kita sudah mengaktifkan paralaks CSS untuk gambar latar belakang empat bagian kita, yang perlu kita lakukan adalah mengubah setiap gambar menjadi sesuatu yang berbeda. Dalam hal ini, saya hanya menambahkan versi besar produk sebagai gambar latar belakang untuk setiap bagian.

Setelah Anda memiliki gambar latar belakang yang berbeda (dengan CSS Parallax) untuk masing-masing dari empat bagian, lihat hasilnya.

Menggunakan Gambar Latar Belakang Berbeda dengan Transisi Paralaks Sejati

Jika Anda ingin mengubah efek transisi gambar latar belakang, Anda dapat mengubah metode paralaks dari CSS ke True Parallax untuk keempat bagian gambar latar belakang.

Buka salah satu pengaturan bagian dan ubah metode CSS menjadi "True Parallax".

Kemudian Anda perlu melakukan hal yang sama untuk tiga bagian yang tersisa. Atau Anda cukup klik kanan pada opsi Metode Paralaks dan pilih "Perpanjang Metode Paralaks" ke semua modul header lebar penuh di seluruh halaman.

Setelah selesai, periksa efek transisi gambar latar belakang.

Menjelajahi Penyelarasan Modul yang Berbeda

Mengubah perataan modul Header fullwidth Anda sangat mudah. Karena modul header lebar penuh kami memiliki lebar khusus 45%, Anda dapat dengan mudah menyesuaikan perataan modul ke kiri, tengah, atau kanan untuk mendapatkan tata letak yang berbeda. Saya terutama menyukai perataan tengah dengan latar belakang statis.

Untuk memusatkan modul, buka pengaturan header lebar penuh dan perbarui Module Alignment ke Centered .

Untuk menyelaraskan modul di sebelah kanan halaman, cukup perbarui perataan modul menjadi rata kanan.

Setelah Anda menyelesaikan penyelarasan, Anda cukup memperluas gaya "penyelarasan modul" ke modul header lainnya di seluruh halaman.

Berikut adalah contoh perataan tengah dengan latar belakang statis (gambar latar belakang yang sama untuk masing-masing dengan paralaks CSS).

Berikut adalah contoh perataan tengah dengan gambar latar yang berbeda menggunakan metode CSS Parallax.

Berikut adalah contoh perataan tengah dengan gambar latar yang berbeda menggunakan metode True Parallax.

Berikut adalah contoh perataan kanan dengan gambar latar yang berbeda menggunakan kombinasi css dan paralaks sejati.

Pikiran Akhir

Transisi gambar latar belakang ini benar-benar terlihat bagus saat digunakan dalam kombinasi dengan bagian layar penuh dan modul header yang disesuaikan. Fungsionalitasnya bersih dan desainnya halus dan unik. Jika ada, ini adalah cara cepat dan mudah untuk membuat latar belakang statis untuk konten Anda. Jangan ragu untuk menjelajahi desain yang lebih canggih menggunakan gradien latar belakang, font, dan gambar!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!