Cara Membuat Latar Belakang Gambar Paralaks dengan Hamparan Gradien Campuran di Divi
Diterbitkan: 2022-08-03Di versi Divi sebelumnya, menambahkan hamparan gradien ke gambar latar belakang paralaks bukanlah opsi bawaan. Namun, dengan opsi latar belakang baru Divi (dan Gradient Builder), Anda dapat dengan mudah membuat latar belakang paralaks yang indah dengan desain hamparan gradien yang tak terhitung jumlahnya.
Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana menggunakan opsi latar belakang Divi untuk menambahkan overlay gradien warna-warni yang menyatu dengan gambar latar belakang menggunakan metode True dan CSS Parallax.
Sneak Peek
Berikut ini sekilas desain latar belakang yang akan kita buat dalam tutorial ini.
Yang pertama ini memiliki overlay gradien dengan mode campuran Warna yang digunakan pada gambar latar belakang menggunakan metode True Parallax.
Dan berikut adalah desain yang sama menggunakan Metode Parallax CSS. Perhatikan bahwa gradien tetap/terlampir pada gambar latar belakang sehingga tampak menjadi bagian dari gambar sebenarnya dan bukan hanya lapisan.
Dan berikut adalah contoh overlay gradien menggunakan perhentian warna semi-transparan tanpa mode campuran.
Konsep
Ide dasar dari desain ini melibatkan dua langkah:
1. Buat gradien latar belakang untuk bagian menggunakan pembuat gradien, pastikan untuk menempatkan gradien di atas gambar latar belakang.
2. Tambahkan gambar latar belakang ke bagian yang sama yang menggunakan salah satu metode paralaks dan mode campuran Warna.
Ini akan memungkinkan gradien warna-warni untuk melapisi gambar paralaks saat bergerak saat menggulir halaman ke bawah. Mode campuran Warna menggabungkan hamparan gradien dengan gambar untuk gambar indah yang tampak hebat dengan paralaks.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan
akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai yang baru
pelanggan, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah berada di
daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, lakukan hal berikut:
- Arahkan ke Perpustakaan Divi.
- Klik tombol Impor di bagian atas halaman.
- Di popup portabilitas, pilih tab impor
- Pilih file unduhan dari komputer Anda (pastikan untuk meng-unzip file terlebih dahulu dan menggunakan file JSON).
- Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
- Sekarang miliki kanvas kosong untuk mulai mendesain di Divi!
Cara Membuat Latar Belakang Gambar Paralaks dengan Hamparan Gradien Campuran di Divi
1. Buat Baris Isi dan Teks Judul
Meskipun kita akan berfokus pada desain latar belakang bagian untuk tutorial ini, masuk akal untuk menambahkan baris pengisi dan heading untuk mendapatkan perasaan yang lebih baik tentang seperti apa desain itu dalam kasus penggunaan normal.
Untuk memulai, tambahkan baris satu kolom ke bagian yang ada di pembuat.
Selanjutnya, tambahkan modul teks ke baris/kolom.
Pengaturan Teks
Buka pengaturan untuk Modul Teks. Di bawah tab Konten, tambahkan judul H2 ke konten isi.
<h2>Say Hello to Divi</h2>
Di bawah, tab desain, perbarui opsi heading dan lebar maksimal sebagai berikut:
- Judul 2 Font: Inter
- Judul 2 Berat Font: Tebal
- Judul 2 Warna Teks: #fff
- Judul 2 Ukuran Teks: 8vw
- Pos 2 Tinggi Baris: 1.2em
- Heading 2 Text Shadow: lihat tangkapan layar
- Heading 2 Text Shadow Blur Kekuatan: 0.28em
- Judul 2 Warna Bayangan Teks: #10076d
- Lebar Maks: 50%
Pengaturan Baris
Sekarang setelah heading sudah terpasang, mari perbarui ukuran baris dan spasi agar lebih responsif.
Buka pengaturan baris. Di bawah tab Desain, perbarui yang berikut ini:
- Lebar: 100%
- Lebar Maks: 80vw
- Padding: 15vw atas, 15vw bawah
2. Desain Latar Belakang Gradien untuk Bagian
Sekarang setelah konten pengisi selesai, kami siap untuk mulai mendesain latar belakang gradien bagian kami.
Pengaturan Gradien Latar Belakang
Buka pengaturan untuk bagian tersebut. Di bawah tab Konten, pilih tab gradien di bawah opsi latar belakang dan perbarui opsi gradien sebagai berikut:
- Gradien Berhenti 1: #0094ff (pada 0%)
- Gradien Berhenti 2: #ff00c7 (pada 25%)
- Gradient Stop 3: #0094ff (pada 50%)
- Gradien Berhenti 4: #ff00c7 (pada 75%)
- Gradien Berhenti 5: #0094ff (pada 100%)
- Tipe Gradien: Melingkar
- Posisi Gradien: Kiri Bawah
- Tempatkan Gradien Di Atas Gambar Latar Belakang: YA
3. Tambahkan Gambar Latar Belakang Paralaks dengan Mode Campuran Warna
Setelah desain gradien selesai, kami siap untuk menambahkan gambar latar belakang paralaks kami. Kemudian kita akan menerapkan mode Color blend untuk memadukan desain gradien dengan gambar latar belakang untuk desain latar belakang paralaks yang indah.
Pengaturan Gambar Latar Belakang
Saat berada di bagian opsi latar belakang, pilih tab Gambar Latar Belakang dan unggah gambar latar belakang . Pembaruan berikut:
- Gunakan Efek Paralaks: YA
- Metode Paralaks: Paralaks Sejati
- Campuran Gambar Latar Belakang: Warna
Mengapa Mode Campuran Warna?
Mode perpaduan warna memadukan versi skala abu-abu dari gambar dengan warna (rona dan saturasi) gradien. Ini mempertahankan kualitas visual gambar dengan skema warna yang sama sekali baru.
4. Tambahkan Topeng Latar Belakang (Mengapa Tidak?)
Untuk menyelesaikan desain, mari tambahkan topeng latar belakang yang akan berada di belakang heading kita untuk membuat teks sedikit lebih menonjol dan menekankan efek paralaks.
Pengaturan Topeng Latar Belakang
Saat berada di opsi latar belakang bagian, pilih tab Background Mask dan perbarui yang berikut:
- Topeng: Pisau
- Transformasi Topeng: Balik Horizontal, Balikkan
- Ukuran Masker: Ukuran Khusus
- Lebar Topeng: 72vw
- Posisi Masker: Kanan Atas
5. Tambahkan Beberapa Ruang Gulir Sementara untuk Pengujian
Sebelum kita memeriksa hasil akhir, kita perlu menambahkan beberapa ruang di atas dan di bawah bagian kita sehingga kita memiliki ruang gulir yang cukup untuk melihat efek paralaks beraksi. Untuk melakukan ini, cukup tambahkan margin berikut ke bagian:
- Margin: 80vh atas, 80vh bawah
Jangan lupa untuk menghapus spasi ini saat menambahkan bagian ke halaman Anda sendiri.
Hasil Akhir
Mari kita lihat hasil akhir di halaman langsung.
Dan berikut adalah desain yang sama menggunakan Metode Parallax CSS. Perhatikan bahwa gradien tetap/terlampir pada gambar latar belakang sehingga tampak menjadi bagian dari gambar sebenarnya dan bukan hanya lapisan.
Menggunakan Gradient Overlay tanpa Blend Mode
Meskipun saya menyukai mode campuran untuk desain ini, Anda mungkin merasa perlu untuk hamparan gradien yang lebih tradisional untuk gambar latar belakang paralaks Anda.
Misalnya, Anda dapat memilih untuk tidak menambahkan mode campuran ke desain dan cukup memberi setiap warna gradien perhentian warna semi-transparan. Ini akan memungkinkan Anda untuk melihat representasi gambar latar belakang yang lebih halus di balik hamparan gradien.
Untuk melakukan ini, Anda dapat menurunkan opacity setiap warna menjadi sekitar 72% dan kemudian mengatur opsi campuran gambar latar kembali ke Normal.
Berikut adalah contoh tampilannya.
Coba Lebih Banyak Gradien!
Gradient Builder dapat membuat lebih banyak warna dan tipe gradien yang dapat Anda gunakan untuk membuat desain latar belakang berlapis ini menonjol. Anda dapat melihat demo langsung kami tentang kemungkinan desain gradien latar belakang lainnya.
Pikiran Akhir
Membuat desain latar belakang paralaks dengan hamparan gradien campuran dapat dengan mudah dilakukan menggunakan opsi latar belakang bawaan Divi. Ini benar-benar memberi Anda kekuatan Photoshop di Divi yang belum pernah ada sebelumnya. Jangan ragu untuk menjelajahi kombinasi warna yang berbeda dengan pemberhentian dan posisi warna gradien yang tak terhitung jumlahnya. Plus, Anda dapat bereksperimen dengan mode campuran yang berbeda juga.
Mudah-mudahan, ini akan berguna untuk situs web Anda sendiri atau proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!