Apakah Anda ingin membuat gambar latar belakang yang unik menggunakan mode pencampuran pola dari Divi ?
Pengaturan pola latar belakang bawaan dari Divi memungkinkan Anda membuat desain yang menarik dan menambahkan gaya ke gambar latar belakang Anda situs jaringan. Anda dapat menggunakan pengaturan blending mode untuk menyempurnakan bagaimana pola berpadu dengan gambar latar belakang.
Dalam tutorial ini, kami akan menunjukkan beberapa contoh tentang cara menambahkan mode blending pola ke gambar latar belakang halaman Anda. Ikuti mereka untuk membuat ulang tampilan ini sendiri atau gunakan sebagai inspirasi untuk membuat desain kustom Anda sendiri.
Mari kita mulai!
penelitian
Berikut adalah pratinjau dari apa yang akan kita rancang dalam tutorial ini.
Tata letak pertama
Tata letak kedua
Tata letak ketiga
Cara Menggunakan Mode Pencampuran Pola pada Gambar Latar Belakang Divi Anda
Buat halaman baru dengan tata letak yang telah ditentukan
Kita akan mulai dengan menggunakan tata letak yang telah ditentukan sebelumnya dari perpustakaan Divi. Untuk desain ini kita akan menggunakan « Halaman Arahan Marina "Tentu Paket Tata Letak Marina .
Tambahkan halaman baru ke . Anda situs jaringan dan beri judul, lalu pilih opsi Use Divi Builder.
Kami akan menggunakan tata letak pra-dibuat dari perpustakaan Divi untuk contoh ini, jadi pilih Jelajahi Tata Letak.
Temukan dan pilih tata letak Halaman Arahan Marina.
Sélectionnez Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.
Kami sekarang siap untuk mendesain.
Tata letak pertama
Untuk desain pertama kami, kami akan menambahkan pola chevron ke gambar header pertama. Ini akan menambahkan beberapa minat visual ke header.
Baca juga: Divi: Cara menyesuaikan modul "Penghitung Waktu Mundur" dengan GIF
Karena blending mode yang akan kita terapkan, polanya akan lebih halus dan tetap memungkinkan gambar background terlihat.
Pertama, buka pengaturan bagian dan buka bagian Latar Belakang. Klik pada tab Pola Latar Belakang dan pilih Tambahkan Pola Latar Belakang.
Selanjutnya, pilih jenis pola. Seperti yang Anda lihat, ada banyak template berbeda untuk dipilih, dan semuanya dapat disesuaikan lebih lanjut dengan pengaturan template di bawah ini.
- Tipe Pola: Herringbone Terbalik 2
Menambahkan mode "Pola Campuran"
Terakhir, atur blending mode dari pola. Kami akan menggunakan blending mode Cahaya lembut untuk contoh ini. Blending mode ini membuat pola lebih halus sehingga tidak mengganggu gambar latar belakang.
- Mode Campuran Pola: Cahaya Lembut
Hasil
Berikut adalah desain akhir dari contoh pertama kami.
Berikut adalah versi seluler.
Tata letak kedua
Untuk tata letak kedua, kita akan menggunakan pola gelombang yang dihamparkan pada gambar latar belakang dan gradien, yang cocok dengan tema bahari halaman.
Pertama, navigasikan ke bagian "Bagaimana itu bekerja" dan buka pengaturan bagian.
Buka pengaturan Latar Belakang, lalu pilih tab Pola Latar Belakangdan klik Tambahkan Pola Latar Belakang.
Untuk desain ini kita akan menggunakan tipe pola Ombak.
- Tipe Pola: Gelombang
Kemudian ubah warna pola menjadi putih.
- Warna Pola: #FFFFFF
Menambahkan mode pencampuran pola
Kita sekarang dapat menambahkan blending mode ke pola kita. Atur mode blending pola ke Hamparan.
Temukan juga: Divi: Cara menyesuaikan keranjang dan ikon pencarian dari modul "Menu Lebar Penuh"
Blending mode ini menggelapkan warna gelap pada gambar latar belakang dan mencerahkan warna terang.
- Mode Campuran Pola: Hamparan
Hasil
Berikut adalah hasil akhir dari contoh kedua yang diterapkan pada bagian "Bagaimana itu bekerja".
Dan inilah versi selulernya.
Tata letak ketiga
Mari kita mulai tata letak ketiga kita.
Untuk tata letak ini, kami akan menambahkan garis diagonal buram ke latar belakang " Call to Action".
Mulailah dengan membuka pengaturan bagian dan pergi ke bagian Latar Belakang. Klik pada tab Pola Latar Belakang, lalu pilih Tambahkan Pola latar belakang.
Pilih pola Garis-garis Diagonal.
Selanjutnya, atur warna pola.
- Warna Pola: rgba (255,255,255,0.25)
Balikkan pola secara horizontal menggunakan pengaturan Transform Pattern. Ini adalah parameter lain yang dapat membantu Anda menyempurnakan pola sesuai keinginan Anda.
- Transformasi Pola: horizontal
Menambahkan mode pencampuran pola
Terakhir, atur blending mode dari pola. Untuk desain ini, kita akan menggunakan blending mode Kilau.
Baca juga panduan kami di: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Ini, dikombinasikan dengan warna pola kami, menambahkan layar cerah ke gambar sambil membiarkan foto terlihat. Dengan desain ini, gambar perahu lebih menonjol dari latar belakang karena polanya menambahkan kontras yang khas.
- Mode Campuran Pola: Luminositas
Hasil
Berikut adalah desain akhir untuk bagian ini.
Dan inilah versi mobile-nya.
Hasil akhir
Sekarang mari kita lihat desain halaman penuh dengan mode blending pola.
Unduh DIVI Sekarang!!!
Kesimpulan
Menambahkan pola bisa menjadi cara yang bagus untuk menambahkan daya tarik visual ke gambar latar belakang Anda, tetapi terkadang polanya bisa membuat gambar latar menjadi kewalahan. Untungnya, Divi hadir dengan banyak mode blending sehingga Anda dapat menyesuaikan pola sebanyak yang Anda inginkan.
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.
...
