Cara Menggunakan Mode Campuran Pola pada Gambar Latar Belakang Divi Anda

Diterbitkan: 2022-07-18

Pengaturan pola latar belakang bawaan Divi memungkinkan Anda membuat desain yang menarik dan menambahkan beberapa bakat pada gambar latar di situs web Anda. Anda dapat menggunakan pengaturan mode campuran untuk menyempurnakan cara pola berpadu dengan gambar latar belakang. Gabungkan gambar latar belakang, pola, dan mode campuran untuk membuat latar belakang unik dan elemen desain untuk tata letak Anda. Dengan 24 pola untuk dipilih dan 16 mode campuran, belum lagi semua pengaturan lain yang dapat Anda gunakan untuk menyempurnakan tampilan pola, langit adalah batas untuk desain latar belakang Anda!

Dalam tutorial ini, kami akan menunjukkan beberapa contoh cara menambahkan mode campuran pola ke gambar latar belakang di halaman Anda. Ikuti terus untuk membuat ulang tampilan ini sendiri, atau gunakan sebagai inspirasi untuk membuat desain kustom Anda sendiri.

Mari kita mulai!

Sneak Peek

Berikut adalah preview dari apa yang akan kita desain dalam tutorial ini.

Tata Letak Pertama

Divi Background Pattern Blend Mode Layout 1 Desain Akhir

Tata Letak Kedua

Divi Background Pattern Blend Mode Layout 2 Desain Akhir

Tata Letak Ketiga

Divi Latar Belakang Pola Blend Mode Layout 3 Desain Akhir

Apa yang Anda Butuhkan untuk Memulai

Sebelum kita mulai, instal dan aktifkan Tema Divi dan pastikan Anda memiliki Divi versi terbaru di situs web Anda.

Sekarang, mari kita mulai!

Cara Menggunakan Mode Campuran Pola pada Gambar Latar Belakang Divi Anda

Buat Halaman Baru dengan Tata Letak Premade

Kami akan mulai dengan menggunakan tata letak premade dari perpustakaan Divi. Untuk desain ini, kita akan menggunakan Marina Landing Page dari Marina Layout Pack.

Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi untuk Gunakan Divi Builder.

Divi Background Pattern Blend Mode Layout 3 Gunakan Divi Builder

Kami akan menggunakan tata letak premade dari perpustakaan Divi untuk contoh ini, jadi pilih Browse Layouts.

Pola Latar Belakang Divi, Mode Campuran, Jelajahi Tata Letak

Cari dan pilih tata letak Halaman Arahan Marina.

Tata Letak Pencarian Mode Campuran Pola Latar Belakang Divi

Pilih Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.

Mode Campuran Pola Latar Belakang Divi Gunakan Tata Letak

Sekarang kita siap untuk membangun desain kita.

Tata Letak Pertama

Untuk desain pertama kami, kami akan menambahkan pola chevron ke gambar header pertama. Ini akan menambahkan beberapa minat visual ke header. Karena blend mode yang akan kita terapkan, polanya akan lebih halus dan tetap memungkinkan gambar background terlihat.

Pertama, buka pengaturan bagian dan arahkan ke bagian Latar Belakang. Klik pada tab pola dan pilih Tambahkan Pola Latar Belakang.

Divi Background Pattern Blend Mode Layout 1 Tambahkan Pola Latar Belakang

Selanjutnya, pilih jenis pola. Seperti yang Anda lihat, ada banyak pola berbeda untuk dipilih, dan semuanya dapat disesuaikan lebih lanjut dengan pengaturan pola di bawah ini.

Tipe Pola: Chevron Terbalik 2

Divi Background Pattern Blend Mode Layout 1 Pilih Pola

Menambahkan Mode Campuran Pola

Terakhir, atur mode campuran pola. Kami akan menggunakan mode campuran Soft Light untuk header ini. Blend mode ini membuat pola lebih halus sehingga tidak mengalihkan perhatian dari gambar latar belakang.

Mode Campuran Pola: Cahaya Lembut

Divi Background Pattern Blend Mode Layout 1 Pattern Blend Mode

Desain Akhir

Berikut adalah desain akhir untuk tata letak pertama kami.

Divi Background Pattern Blend Mode Layout 1 Desain Akhir

Berikut adalah tampilan seluler untuk desain ini.

Pola Latar Belakang Divi Blend Mode Layout 1 Desain Akhir Seluler

Tata Letak Kedua

Untuk tata letak kedua, kami akan menambahkan pola ke bagian Cara Kerja dari tata letak halaman arahan Marina. Kami akan menggunakan pola gelombang overlay pada gambar latar belakang dan gradien, yang cocok dengan tema bahari halaman. Mari kita mulai.

Pertama, navigasikan ke bagian Cara Kerja dan buka Pengaturan Bagian. Buka pengaturan Background, lalu pilih tab Pattern lalu klik Add Background Pattern.

Divi Background Pattern Blend Mode Layout 2 Tambahkan Pola Latar Belakang

Untuk desain ini, kita akan menggunakan tipe pola Waves.

Tipe Pola: Gelombang

Divi Background Pattern Blend Mode Layout 2 Pilih Pola

Selanjutnya, ubah warna pola menjadi putih.

Warna Pola: #FFFFFF

Divi Background Pattern Blend Mode Layout 2 Pola Warna

Menambahkan Mode Campuran Pola

Sekarang kita dapat menambahkan mode campuran ke pola kita. Atur mode perpaduan pola menjadi overlay. Mode campuran ini membuat warna gelap pada gambar latar menjadi lebih gelap dan warna terang menjadi lebih terang. Saat mode campuran ditambahkan ke bagian ini, pola gelombang putih berubah menjadi nuansa biru, menciptakan efek pola menarik yang tampak hebat dengan desain halaman ini.

Mode Campuran Pola: Hamparan

Divi Background Pattern Blend Mode Layout 2 Pilih Blend Mode

Desain Akhir

Berikut adalah desain akhir untuk bagian Cara Kerja.

Divi Background Pattern Blend Mode Layout 2 Desain Akhir

Dan inilah desain ponselnya.

Divi Background Pattern Blend Mode Layout 2 Final Design Mobile

Tata Letak Ketiga

Mari kita mulai pada tata letak ketiga kita. Untuk tata letak ini, kami akan menambahkan beberapa garis diagonal buram ke latar belakang bagian "Keamanan dan perbaikan terbaik".

Mulailah dengan membuka pengaturan bagian dan menavigasi ke bagian latar belakang. Klik tab pola lalu pilih Tambahkan Pola Latar Belakang.

Divi Background Pattern Blend Mode Layout 3 Tambahkan Pola Latar Belakang

Pilih pola Garis Diagonal.

Divi Background Pattern Blend Mode Layout 3 Pilih Pola

Selanjutnya, atur warna pola.

Warna Pola: rgba (255,255,255,0.25)

Divi Latar Belakang Pola Blend Mode Tata Letak 3 Warna Pola

Balikkan pola secara horizontal menggunakan pengaturan Transformasi Pola. Ini adalah pengaturan lain yang dapat membantu Anda menyempurnakan pola sesuai keinginan Anda.

Transformasi Pola: horizontal

Pola Latar Belakang Divi Blend Mode Tata Letak 3 Pola Transform

Menambahkan Mode Campuran Pola

Terakhir, atur mode campuran pola. Untuk desain ini, kita akan menggunakan mode campuran luminositas. Ini dikombinasikan dengan warna pola kami menambahkan layar cahaya ke gambar tetapi masih memungkinkan foto untuk ditampilkan. Dengan desain ini, gambar perahu lebih menonjol dari latar belakang karena polanya menambahkan kontras yang khas.

Mode Campuran Pola: Luminositas

Pola Latar Belakang Divi Blend Mode Tata Letak 3 Blend Mode

Desain Akhir

Berikut adalah desain akhir untuk bagian ini.

Divi Latar Belakang Pola Blend Mode Layout 3 Desain Akhir

Dan inilah desain ponsel untuk bagian ini.

Pola Latar Belakang Divi Blend Mode Layout 3 Desain Akhir Seluler

Hasil Akhir

Sekarang mari kita lihat desain penuh halaman dengan mode campuran pola.

Divi Background Pattern Blend Mode Full Final Design

Pikiran Akhir

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. Atau mungkin Anda ingin warna pola Anda berubah berdasarkan gambar di belakangnya. Untungnya, Divi hadir dengan banyak mode campuran sehingga Anda dapat menyesuaikan pola sebanyak yang Anda mau. Anda dapat bermain-main dengan berbagai kombinasi pola, mode campuran, warna pola, ukuran pola, dan banyak lagi pengaturan Divi untuk membuat desain yang benar-benar unik untuk gambar latar belakang Anda.

Semoga tutorial ini menginspirasi Anda untuk menggabungkan beberapa pola dan menggunakan mode campuran dalam desain situs web Anda! Untuk tutorial desain lainnya menggunakan pola, lihat tutorial ini untuk belajar membuat topeng pola latar belakang yang halus. Dan untuk ikhtisar tentang berbagai filter, efek, dan mode campuran yang dapat Anda gunakan dengan Divi, lihat artikel ini: Bagian 1 dan Bagian 2. Apakah Anda pernah menggunakan pola dan mode campuran Divi pada gambar latar belakang Anda sebelumnya? Beri tahu kami di komentar!