Divi: 5 overlay topeng dan pola yang berlaku untuk gambar latar belakang

Apakah Anda ingin menggunakan topeng Divi dan overlay pola latar belakang?

Dengan yang terakhir versi topeng latar belakang dan fitur pola latar belakang dari Divi, Anda dapat membuat bagian Pahlawan unik untuk Anda situs jaringan. Bagian pahlawan adalah bagian pertama dari Anda situs jaringan dan itulah hal pertama Anda pengunjung lihat sebelum menggulir Anda situs jaringan, jadi penting untuk tampil menarik!

Artikel ini akan menunjukkan kepada Anda cara membuat lima topeng latar belakang dan hamparan pola unik yang dapat Anda terapkan pada gambar latar belakang untuk membuat Bagian Pahlawan yang benar-benar menakjubkan. 

Tutorial ini akan mencakup langkah-langkah penting yang diperlukan untuk membuat setiap bagian Pahlawan dan memberi Anda alat yang Anda perlukan untuk membuat bagian Pahlawan yang menarik untuk situs web Anda dalam hitungan menit.

Ayo mulai!

penelitian

Berikut adalah ikhtisar singkat dari lima Bagian Pahlawan yang akan kita buat di artikel ini hari ini.

Unduh DIVI sekarang!!!

Desainnya halus, sederhana, namun berdampak.

Baca juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda

Buat halaman baru dengan Divi Builder

Untuk memulai, Anda perlu melakukan hal berikut:

Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.

Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder

kemudian klik Mulai Membangun (Bangun Dari Awal)

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Lima contoh topeng latar belakang dan lapisan pola untuk diterapkan pada gambar latar belakang

Pertama, mari kita buat bagian Pahlawan

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

1. Buat struktur tata letak

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

2. Tambahkan Spasi Bagian

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

Pada tab Spasi, perbarui yang berikut ini:

• Desktop: 400 piksel (Atas dan Bawah)
• Tablet: 200 piksel (Atas dan Bawah); 25px (Kiri dan Kanan)
• Telepon: 50 piksel (Atas dan Bawah); 25px (Kiri dan Kanan)

Desain Bagian Pahlawan #1

Mari kita rancang bagian Pahlawan pertama.

Unduh DIVI sekarang!!!

1. Tambahkan teks tajuk

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

Masukkan teks judul, lalu di bawah tab Heading Text, konfigurasikan setelan ini:

• Font Judul: Work Sans
• Warna Teks: Putih #ffffff
• Ukuran Teks Judul:
  • Desktop: 3 em
  • Tablet: 2,2 em
  • Telepon: 1.4em

2. Tambahkan Modul Tombol

Tambahkan tombol dan konfigurasikan pengaturan ini:

• Di bawah tab isis: Cari tahu lebih lanjut
• Di bawah tab Strategi, pilih: Tengah
• Klik Gunakan Gaya Kustom Untuk Tombol lalu konfigurasikan:
  • Ukuran Teks Tombol:
    • Desktop: 20px
    • Tablet: 16px
    • Telepon: 14px
  • Warna Teks Tombol: #ffffff
  • Latar belakang: #1d1d1d
  • Lebar Perbatasan Tombol: 0
  • Radius Perbatasan: 0
  • Spasi Huruf: 3 poin
  • Font Tombol: Work Sans
  • Gaya Huruf: TT

3. Tambahkan gambar latar belakang

Sekarang kita isi sudah dikonfigurasi, saatnya mulai mendesain latar belakang bagian tersebut.

• Buka sakelar latar belakang dan klik pada 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 Anda memilih foto Anda, klik tombol "Unggah Gambar" di sudut kanan bawah.

4. Tambahkan pola latar belakang

Sekarang kita telah menyiapkan gambar latar belakang kita, mari tambahkan sebuah pola.

• Di tab Latar Belakang, arahkan ke tab ke-5, tab Pola Latar Belakang, lalu klik “Tambahkan Pola Latar Belakang”.
• Sélectionnez Berumbai dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Pola – rgba(255,255,255,0.31)
  • Transformasi Pola: tidak ada
  • Ukuran: Ukuran Sebenarnya
  • Pola Pengulangan Asal: Atas Bawah
  • Pola Ulangi: Ulangi
  • Mode Campuran: Normal

5. Tambahkan topeng latar belakang

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

• Di tab Latar Belakang, arahkan ke tab ke-6, tab Topeng Latar Belakang, lalu klik “Tambahkan Topeng Latar Belakang”.
• Sélectionnez kacang dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Topeng: rgba (0,0,0,0.36)
  • Rasio Aspek Topeng: persegi panjang horizontal
  • Ukuran: Meregangkan untuk Mengisi

Jadi ! Anda sekarang memiliki bagian Pahlawan yang dirancang dengan indah.

Bagian Pahlawan #2 desain

Sekarang mari kita rancang bagian pahlawan kedua.

1. Tambahkan gambar latar belakang dan atur blending mode ke Overlay

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

2. Tambahkan pola latar belakang

Sekarang kita telah menyiapkan gambar latar belakang, mari tambahkan pola latar belakang.

• Di tab Latar Belakang, buka tab ke-5, tab Pola Latar Belakang, lalu klik “Tambahkan Pola Latar Belakang”.
• Sélectionnez Berumbai dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Pola – rgba(255,255,255,0.09)
  • Transformasi Pola: tidak ada
  • Ukuran: Penutup
  • Pola Pengulangan Asal: Kiri Atas
  • Pola Ulangi: Ulangi
  • Mode Campuran: Normal

3. Tambahkan topeng latar belakang

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

• Di tab Latar Belakang, arahkan ke tab ke-6, tab Topeng Latar Belakang, lalu klik “Tambahkan Topeng Latar Belakang”.
• Sélectionnez Tanda sisipan dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Topeng: rgba (0,0,0,0.36)
  • Transformasi Topeng: Tidak Ada
  • Rasio Aspek: persegi panjang horizontal
  • Ukuran Masker: Peregangan Untuk Mengisi
  • Mode Campuran Masker: Normal

Bagian Pahlawan #3 desain

Sekarang mari kita desain bagian Pahlawan ketiga.

1. Tambahkan gambar latar belakang dan atur blending mode ke Overlay

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

2. Tambahkan pola latar belakang

Sekarang kita telah menyiapkan gambar latar belakang kita, mari tambahkan pola latar belakang.

• Di tab Latar Belakang, arahkan ke tab ke-5, tab Pola Latar Belakang, lalu klik “Tambahkan Pola Latar Belakang”.
• Sélectionnez Garis-garis Diagonal 2 dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Pola – rgba(0,0,0,0.06)
  • Transformasi Pola: tidak ada
  • Ukuran: Ukuran Sebenarnya
  • Pola Pengulangan Asal: Kiri Atas
  • Pola Ulangi: Ulangi
  • Mode Campuran: Normal

3. Tambahkan topeng latar belakang

Sekarang kita telah menambahkan gambar latar belakang dan pola, mari tambahkan topeng latar belakang.

• Di tab Latar Belakang, arahkan ke tab ke-6, tab Topeng Latar Belakang, lalu klik “Tambahkan Topeng Latar Belakang”.
• Sélectionnez Segitiga dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Topeng: rgba(10, 10, 10, 0,61)
  • Transformasi Topeng: tidak ada
  • Rasio Aspek: persegi panjang horizontal
  • Ukuran Masker: Peregangan Untuk Mengisi
  • Mode Campuran Masker: Normal

Bagian Pahlawan #4 desain

Sekarang mari kita desain bagian keempat dari Hero.

1. Tambahkan gambar latar belakang

Pilih gambar latar belakang Anda.

2. Tambahkan pola latar belakang

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

• Di tab Latar Belakang, arahkan ke tab ke-5, tab Pola Latar Belakang, lalu klik “Tambahkan Pola Latar Belakang”.
• Sélectionnez Senyum dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Pola – rgba(0,0,0,0.2)
  • Transformasi Pola: tidak ada
  • Ukuran: Penutup
  • Ulangi Asal: kiri atas
  • Pola Ulangi: Ulangi
  • Mode Campuran Pola: Normal

3. Tambahkan topeng latar belakang

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

• Di tab Latar Belakang, arahkan ke tab ke-6, tab Topeng Latar Belakang, lalu klik “Tambahkan Topeng Latar Belakang”.
• Sélectionnez Danau Sudut  dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Topeng: rgba(10, 10, 10, 0,61)
  • Transformasi Topeng: horizontal
  • Rasio Aspek: Persegi Panjang Horisontal
  • Ukuran: Penutup
  • Posisi Topeng: Kiri Tengah
  • Mode Blender Masker: Normal

3. Konfigurasikan parameter garis

Sebelum kita pergi, bagian Pahlawan ini memiliki gaya garis yang unik. Mari kita mengatur ini.

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

Bagian Pahlawan #5 desain

Sekarang mari kita desain bagian Pahlawan kelima.

Unduh DIVI sekarang!!!

1. Tambahkan gambar latar belakang

Pilih gambar latar belakang Anda.

2. Tambahkan pola

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

• Di tab Latar Belakang, arahkan ke tab ke-5, tab Pola Latar Belakang, lalu klik “Tambahkan Pola Latar Belakang”.
• Sélectionnez Crosses dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Pola – #ffffff
  • Transformasi Pola: tidak ada
  • Ukuran: Ukuran Khusus
  • Lebar Pola: 10px
  • Tinggi Pola: 10px
  • Ulangi Asal: Atas Bawah
  • Pola Ulangi: Ulangi
  • Mode Campuran Pola: Normal

3. Tambahkan topeng latar belakang

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

• Di tab Latar Belakang, arahkan ke tab ke-6, tab Topeng Latar Belakang, lalu klik “Tambahkan Topeng Latar Belakang”.
• Sélectionnez Pil Diagonal  dari menu tarik-turun dan konfigurasikan pengaturan ini:
  • Warna Topeng: rgba(10, 10, 10, 0,61)
  • Transformasi Topeng: horizontal
  • Rasio Aspek: Persegi Panjang Horisontal
  • Ukuran: Penutup
  • Posisi Masker: kiri tengah
  • Mode Campuran Masker: Normal

3. Konfigurasikan parameter garis

Sebelum kita pergi, bagian Pahlawan ini juga memiliki gaya garis yang unik. Mari kita mengatur ini.

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

Lihat juga: Divi: Cara menambahkan topeng dan pola latar belakang ke header

Kesimpulan

Merancang bagian Pahlawan yang unik dan menarik untuk situs web Anda mudah dilakukan dengan opsi baru latar belakang dan pola topeng oleh Divi. Setiap fitur memiliki banyak opsi yang memungkinkan Anda membuat latar belakang yang benar-benar kreatif. 

Plus, Anda dapat menambahkan pola latar belakang dan topeng ke item Divi Builder apa pun! Pilihan desain tidak terbatas.

Semoga teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan.

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 membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.

Jangan ragu untuk juga berkonsultasi dengan 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.

...