5 Background Mask & Pattern Overlay yang Dapat Anda Terapkan Pada Gambar Latar Belakang Anda

Diterbitkan: 2022-08-08

Dengan topeng latar belakang terbaru dan rilis fitur pola latar belakang, Anda dapat membuat beberapa bagian pahlawan unik untuk situs web Anda. Bagian pahlawan adalah bagian pertama situs web Anda dan merupakan hal pertama yang dilihat pengunjung Anda sebelum menggulir situs web Anda, jadi penting untuk terlihat menarik! Menggabungkan opsi gambar latar belakang, topeng latar belakang, dan pola latar belakang Divi memungkinkan kami membuat bagian pahlawan yang menarik sehingga situs web Anda membuat kesan pertama yang hebat.

Posting ini akan menunjukkan kepada Anda cara membuat lima topeng latar belakang dan pola overlay unik yang dapat Anda terapkan pada gambar latar belakang untuk membuat bagian pahlawan yang benar-benar menakjubkan. Tutorial ini akan membahas langkah-langkah penting yang diperlukan untuk membuat setiap bagian pahlawan dan memberi Anda alat yang Anda butuhkan untuk membuat bagian pahlawan yang mencolok untuk situs web Anda dalam hitungan menit.

Kami akan menggunakan foto gratis dari Paket Tata Letak Kursus Online dalam contoh ini. Untuk menggunakan gambar yang sama, gulir ke bawah postingan ini untuk mengunduh gambar beresolusi penuh.

Mari kita mulai!

Apa yang Kami Ciptakan

Berikut adalah tampilan singkat dari lima bagian pahlawan yang akan kita buat di posting ini hari ini.

Desainnya halus, sederhana, namun berdampak.

Unduh Tata Letaknya GRATIS

Jika Anda ingin mengunduh desain tata letak pra-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 pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

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!

Cara Mengunduh dan Menggunakan Tata Letak

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 Anda berhasil mengimpor tata letak, tata letak tersebut akan terlihat di Perpustakaan Divi Anda dan akan tersedia untuk digunakan di Divi Builder.

Sekarang, mari kita ke tutorialnya!

Yang Anda Butuhkan Untuk Memulai

Sebelum kita bisa mulai, Anda harus:

Instal dan aktifkan Tema Divi.
Buat halaman baru, terbitkan, dan klik tombol "Gunakan Divi Builder" untuk mengedit halaman di ujung depan menggunakan Visual Builder.
Pilih opsi "Bangun Dari Awal."

Sekarang kita memiliki kanvas kosong untuk mulai mendesain!

Cara Membuat 5 Background Mask & Pattern Overlay untuk Diterapkan ke Gambar Latar Belakang

Pertama, Mari Buat Bagian Pahlawan

Semua contoh desain kita menggunakan struktur bagian, baris, dan kolom yang sama, jadi mari kita siapkan sekarang.

1. Buat Struktur Tata Letak

Tambahkan baris ke halaman Anda dan kemudian klik ikon hijau "+" untuk membuka struktur kolom dan pilih kolom pertama, satu kolom lebar penuh.

2. Tambahkan Spasi Bagian

Sekarang setelah kita mengatur baris dan kolom, saatnya menambahkan spasi ke bagian.

Di bawah tab Spasi, perbarui yang berikut ini:

Desktop: 400px atas dan 400px bawah
Tablet: 200px atas dan 200px bawah; 25px kiri dan kanan
Telepon: 50px atas dan 50px bawah; 25px kiri dan kanan

Bagaimana Mendesain Bagian Pahlawan #1

Mari kita desain bagian pahlawan pertama.

1. Tambahkan Teks Judul

Klik ikon abu-abu "+" untuk membuka pustaka modul. Gulir ke teks dan klik untuk memuat.

Ketik teks judul dan kemudian di bawah tab Teks Judul, konfigurasikan pengaturan ini:

Keluarga Font: Work Sans
Warna font: Putih #ffffff
Ukuran huruf:
- Desktop: 3rem
- Tablet: 2.2rem
- Telepon: 1.4rem

2. Tambahkan Modul Tombol

Tambahkan tombol dan konfigurasikan pengaturan ini:

Di bawah jenis Tab Teks: Pelajari Lebih Lanjut
Di bawah Tab Alignment Pilih: Center
Klik Gunakan Gaya Kustom dan kemudian konfigurasikan:
- Ukuran Teks Tombol:
  - Desktop: 20px
  - Tablet: 16px
  - Telepon: 14px
- Warna Teks Tombol: Putih #ffffff
- Warna Latar Tombol: Hitam #1d1d1d
- Lebar Perbatasan Tombol: 0
- Radius Perbatasan Tombol: 0
- Jarak Huruf Tombol: 3pt
- Font Tombol: Work Sans
- Gaya Font Tombol: Huruf Besar

3. Tambahkan Gambar Latar Belakang

Sekarang setelah kita menyiapkan konten, saatnya untuk mulai mendesain latar belakang bagian.

Arahkan ke sakelar Latar Belakang dan klik tab ke-3, tab gambar, lalu klik "Tambah Gambar Latar Belakang."
Ini akan memunculkan perpustakaan media Anda, tempat Anda dapat memilih foto atau mengunggah yang baru.
Setelah foto Anda dipilih, klik tombol "Unggah Gambar" di sudut kanan bawah.

4. Tambahkan Pola Latar Belakang

Sekarang setelah kita mengatur gambar latar belakang kita, mari tambahkan sebuah pola.

Di dalam tab Latar Belakang, navigasikan ke tab ke-5, tab pola, lalu klik "Tambahkan Pola Latar Belakang."
Pilih Tufted dari menu tarik-turun dan konfigurasikan pengaturan ini:
- Warna Pola – rgba (255,255,255,0.31)
- Transformasi Pola: tidak ada
- Ukuran Pola: Ukuran Sebenarnya
- Pola Pengulangan Asal: Kiri Atas
- Pola Ulangi: Ulangi
- Mode Campuran: Normal

5. Tambahkan Topeng latar belakang

Sekarang setelah kita mengatur gambar latar belakang dan pola, mari tambahkan topeng latar belakang.

Di dalam tab Background, navigasikan ke tab ke-6, tab mask, dan klik "Add Background Mask."
Pilih Bean dari menu dropdown dan konfigurasikan pengaturan ini:
- Warna Topeng: rgba (0,0,0,0.36)
- Rasio Aspek Topeng: persegi panjang horizontal
- Ukuran Masker: Peregangan untuk mengisi

Voila! Sekarang Anda memiliki bagian pahlawan yang dirancang dengan indah.

Bagaimana Mendesain Bagian Pahlawan #2

Sekarang, mari kita rancang bagian pahlawan kedua.

1. Tambahkan Gambar Latar Belakang dan Atur Blend Mode ke Overlay

Pilih gambar latar belakang Anda, atur blend mode ke Overlay, dan tambahkan warna overlay rgba (10,10,10,0.64).

2. Tambahkan Pola Latar Belakang

Sekarang setelah kita mengatur gambar latar belakang, mari tambahkan pola latar belakang.

Di dalam tab Latar Belakang, navigasikan ke tab ke-5, tab pola, dan klik "Tambahkan Pola Latar Belakang."
Pilih Tufted dari dropdown dan konfigurasikan pengaturan ini:
- Warna Pola – rgba (255,255,255,0.09)
- Transformasi Pola: tidak ada
- Ukuran Pola: Penutup
- Pola Pengulangan Asal: Kiri Atas
- Pola Ulangi: Ulangi
- Mode Campuran: Normal

3. Tambahkan Topeng Latar Belakang

Sekarang setelah kita mengatur gambar latar belakang dan pola, mari tambahkan topeng latar belakang.

Di dalam tab Background, navigasikan ke tab ke-6, tab mask, dan klik "Add Background Mask."
Pilih Caret dari menu tarik-turun dan konfigurasikan pengaturan ini:
- Warna Topeng: rgba (0,0,0,0.36)
- Transformasi Topeng: Tidak Ada
- Rasio Aspek Topeng: persegi panjang horizontal
- Ukuran Masker: Peregangan untuk mengisi
- Mode Campuran Masker: Normal

Bagaimana Mendesain Bagian Pahlawan #3

Sekarang, mari kita rancang bagian pahlawan ketiga.

1. Tambahkan Gambar Latar Belakang dan Atur Blend Mode ke Overlay

Pilih gambar latar belakang Anda, atur blend mode ke Overlay, dan tambahkan warna overlay rgba (10,10,10,0.39).

2. Tambahkan Pola Latar Belakang

Sekarang setelah kita mengatur gambar latar belakang, mari tambahkan pola latar belakang.

Di dalam tab Latar Belakang, navigasikan ke tab ke-5, tab pola, dan klik "Tambahkan Pola Latar Belakang".
Pilih Diagonal Stripes 2 dari dropdown dan konfigurasikan pengaturan ini:
- Warna Pola – rgba(0,0,0,0.06)
- Transformasi Pola: tidak ada
- Ukuran Pola: Ukuran Sebenarnya
- Pola Pengulangan Asal: Kiri Atas
- Pola Ulangi: Ulangi
- Mode Campuran: Normal

3. Tambahkan Topeng Latar Belakang

Sekarang kita memiliki gambar latar belakang dan pola yang ditambahkan, mari tambahkan topeng latar belakang.

Di dalam tab Background, navigasikan ke tab ke-6, tab mask, dan klik "Add Background Mask."
Pilih Segitiga dari menu tarik-turun dan konfigurasikan pengaturan ini:
- Warna Topeng: rgba(10,10,10,0.61)
- Transformasi Pola: tidak ada
- Rasio Aspek Topeng: persegi panjang horizontal
- Ukuran Masker: Peregangan untuk mengisi
- Mode Campuran Masker: Normal

Cara Mendesain Bagian Pahlawan #4

Sekarang, mari kita rancang bagian pahlawan keempat.

1. Tambahkan Gambar Latar Belakang

Pilih gambar latar belakang Anda.

2. Tambahkan Pola Latar Belakang

Sekarang setelah kita menambahkan gambar latar belakang, mari tambahkan pola latar belakang.

Di dalam tab Latar Belakang, navigasikan ke tab ke-5, tab pola, dan klik "Tambahkan Pola Latar Belakang."
Pilih Smiles dari dropdown dan konfigurasikan pengaturan ini:
- Warna Pola – rgba(0,0,0,0.2)
- Transformasi Pola: tidak ada
- Ukuran Pola: Penutup
- Pola Pengulangan Asal: Kiri Atas
- Pola Ulangi: Ulangi
- Mode Campuran: Normal

3. Tambahkan Topeng Latar Belakang

Sekarang setelah gambar dan pola latar belakang kita diterapkan, mari tambahkan topeng latar belakang.

Di dalam tab Background, navigasikan ke tab ke-6, tab mask, dan klik "Add Background Mask."
Pilih Corner Lake dari menu dropdown dan konfigurasikan pengaturan ini:
- Warna Topeng: rgba(10,10,10,0.61)
- Transformasi Topeng: Horizontal
- Rasio Aspek Topeng: Persegi panjang horizontal
- Ukuran Masker: Penutup
- Posisi Topeng: Kiri Tengah
- Mode Campuran Masker: Normal

3. Konfigurasikan Pengaturan Baris

Sebelum kita pergi, bagian pahlawan ini memiliki gaya baris yang unik. Mari kita atur itu.

Perekat:
- Lebar: 80%
- Lebar Maks: 800px
Penjajaran Baris:
- Desktop: Default
- Tablet: Tengah
- Telepon: Pusat
Jarak:
- Kiri: 20vw

Cara Mendesain Bagian Pahlawan #5

Sekarang, mari kita rancang bagian pahlawan kelima.

1. Tambahkan Gambar Latar Belakang

Pilih gambar latar belakang Anda.

2. Tambahkan Pola Latar Belakang

Sekarang setelah kita mengatur gambar latar belakang, mari kita terapkan pola latar belakang.

Di dalam tab Latar Belakang, navigasikan ke tab ke-5, tab pola, dan klik "Tambahkan Pola Latar Belakang."
Pilih Persilangan dari dropdown dan konfigurasikan pengaturan ini:
- Warna Pola – #ffffff
- Transformasi Pola: tidak ada
- Ukuran Pola: Ukuran Khusus
- Lebar Pola: 10px
- Tinggi Pola: 10px
- Pola Pengulangan Asal: Kiri Atas
- Pola Ulangi: Ulangi
- Mode Campuran: Normal

3. Tambahkan Topeng Latar Belakang

Sekarang kita memiliki gambar latar belakang dan pola yang diterapkan, mari tambahkan topeng latar belakang.

Di dalam tab Background, navigasikan ke tab ke-6, tab mask, dan klik "Add Background Mask."
Pilih Pil Diagonal dari menu tarik-turun dan konfigurasikan pengaturan ini:
- Warna Topeng: rgba(10,10,10,0.61)
- Transformasi Topeng: Horizontal
- Rasio Aspek Topeng: Persegi panjang horizontal
- Ukuran Masker: Penutup
- Posisi Topeng: Kiri Tengah
- Mode Campuran Masker: Normal

3. Konfigurasikan Pengaturan Baris

Sebelum kita pergi, bagian pahlawan ini memiliki gaya baris yang unik. Mari kita atur itu.

Perekat:
- Lebar: 80%
- Lebar Maks: 800px
Penjajaran Baris:
- Desktop: Default
- Tablet: Tengah
- Telepon: Pusat
Jarak:
- Kanan: 18vw

Dapatkan Lebih Banyak Topeng Latar Belakang dan Desain Pola!

Jika Anda menginginkan lebih banyak desain seperti ini, lihat 12 topeng latar belakang dan desain pola ini gratis untuk diunduh.

Pikiran Akhir

Merancang bagian pahlawan yang unik dan menarik untuk situs web Anda mudah dilakukan dengan topeng latar belakang dan opsi pola baru Divi. Setiap fitur memiliki banyak opsi yang memungkinkan Anda membuat desain latar belakang yang benar-benar kreatif. Plus, Anda dapat menambahkan pola latar belakang dan topeng ke elemen Divi Builder mana pun! Pilihan desain tidak terbatas.