Menggabungkan beberapa gambar dapat berguna untuk membuat latar belakang profesional untuk Anda situs jaringan. Idenya adalah untuk mengambil dua atau tiga gambar terpisah dan melapisinya. Kemudian gunakan blending mode untuk memadukan lapisan bersama-sama untuk menciptakan desain yang mulus dan terpadu.

Setiap elemen Divi Builder memiliki mode penggabungan dan opsi filter bawaan sehingga memudahkan untuk menggabungkan elemen dalam pembuat Divi. Tentu saja, Anda dapat mencampur gambar di Photoshop (atau editor foto lain), tetapi bagi mereka yang mencari solusi Divi yang praktis, tutorial ini akan membantu Anda, karena dengan Divi itu cukup mudah. Setelah Anda memiliki gambar di tempat yang tepat, Anda dapat menggabungkannya hanya dengan beberapa klik. Dan tentu saja, Anda memiliki banyak pilihan Divi untuk membuat sentuhan akhir dan memberikan dimensi kreatif baru pada desain.

Mari kita mulai.

penelitian

Berikut ini adalah ikhtisar desain yang akan kami bangun bersama.

Apa yang Anda butuhkan untuk memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika Anda belum melakukannya, instal dan aktifkan Tema Divi diinstal (atau plugin Divi Builder jika Anda tidak menggunakan Tema Divi).
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di front-end (konstruktor visual).
3. Unggah beberapa gambar tiruan ke perpustakaan media untuk digunakan dalam tutorial. Saya menggunakan gambar dari Paket Tata Letak Dokter Mata .

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

Cara menggabungkan beberapa gambar untuk membuat desain latar belakang kustom di Divi

Mari kita mulai dengan bagian dan garis

Untuk menyelesaikannya, tambahkan baris kolom ke bagian reguler.

Menambahkan gambar dengan modul gambar

Gambar n ° 1

Setelah baris dan kolom ditentukan, tambahkan modul gambar ke baris.

Unggah gambar berukuran sekitar 500 piksel kali 700 piksel. Saya menggunakan satu dari Paket Tata Letak Dokter Mata.

Setelah gambar diunggah, buatlah lebar maksimum gambar menggunakan satuan panjang vw agar pas dengan gambar lain yang akan kita gabungkan, lalu sejajarkan ke kiri seperti berikut :

• Lebar maksimum: 33vw
• Perataan modul: kiri

Kami ingin gambar berikutnya yang kami tambahkan sejajar dengan kanan gambar itu. Jadi kita perlu mengapungkan gambar ini ke kiri. Untuk melakukan ini, tambahkan CSS berikut ke elemen utama:

float: kiri;

Gambar n ° 2

Kemudian tambahkan modul gambar baru di bawah gambar saat ini.

Setelah itu, unduh gambar baru yang dimensinya mendekati 1000 piksel demi 667 piksel.

Kemudian beri gambar lebar baru dan perataan maksimum baru.

• Lebar maksimum: 40vw
• Penyelarasan modul: benar

Karena gambar pertama melayang ke kiri, gambar kedua sekarang harus bersebelahan dengan kanan.

Kami akan kembali untuk memberikan beberapa sentuhan akhir pada gambar-gambar ini, tetapi untuk sekarang mari beralih ke pengaturan di bagian tersebut.

Pengaturan bagian

Buka pengaturan bagian dan tambahkan gambar latar belakang dan gradien sebagai berikut:

• Gambar latar: [unduh gambar kira-kira 1920px kali 1280px]
  

• Warna gradien latar belakang kiri: rgba (1,16,63,0.64)
• Warna gradien latar belakang kanan: rgba (12,113,195,0.82)
• Tempatkan gradien di atas gambar latar belakang: YA

Kemudian sesuaikan padding sedikit.

• Pelapis (kantor): 0px di bagian atas, 0px di bagian bawah
• Padding (telepon): 0px di bagian atas, 10vw di bagian bawah

Pengaturan saluran

Ketika bagian ini selesai, buka pengaturan garis dan perbarui item berikut:

• Lebar: 100%;
• Lebar maksimum: 100%;
• Pelapis: 0px di bagian atas, 0px di bagian bawah

Tambahkan mode gabungan ke baris

Sekarang garis tersebut harus menutupi seluruh bagian bawah. Ini akan memungkinkan kita menambahkan mode penggabungan ke garis untuk menggabungkan dua gambar dengan latar belakang bagian. Untuk melakukan ini, tambahkan mode campuran berikut.

• Mode fusi: berkembang biak

Kenapa berkembang biak?

Mode campuran perkalian mengalikan lapisan / baris saat ini (termasuk gambar apa pun di dalamnya) dengan lapisan di bawahnya (latar belakang bagian). Cara mudah untuk memikirkan efeknya adalah dengan membayangkan dua slide dalam proyektor slide yang ditumpuk satu di belakang yang lain. Jika Anda memproyeksikan dua gambar di layar, Anda akan mendapatkan campuran yang sedikit lebih gelap dari keduanya.

Tengahkan gambar secara vertikal

Anda tidak perlu melakukannya, tetapi jika Anda ingin memastikan bahwa kedua gambar di baris tetap berada di tengah secara vertikal, Anda dapat menambahkan cuplikan CSS ke kolom. Untuk melakukan ini, buka pengaturan baris dan kemudian klik pengaturan kolom. Kemudian tambahkan kode CSS berikut ke elemen utama.

display: flex; menyelaraskan item: pusat;

Sentuhan terakhir pada dua gambar terbaik

Saat ini, dua gambar teratas kami berpasangan dengan baik, tetapi mereka dapat menggunakan beberapa perubahan desain agar terlihat sedikit lebih profesional. Kita dapat menggunakan bayangan kotak putih untuk memperhalus tepi gambar dan menggunakan perintah Transform untuk memposisikannya tepat di tempat yang kita inginkan.

Gambar # Tombol Final 1

Buka pengaturan modul gambar di sebelah kiri dan perbarui yang berikut:

• Box Shadow: lihat tangkapan layar
• Box Shadow Blur Force: 6vw
• Ketebalan naungan kotak: 6vw
• Warna Bayangan: #ffffff
  

• Terjemahan Trafo: 5vw (sumbu X), 11vw (sumbu Y)

Gambar # Tombol Final 2

Setelah Anda selesai memanipulasi gambar # 1 di sebelah kiri, buka pengaturan untuk gambar # 2 di sebelah kanan dan buat perubahan berikut:

• Box Shadow: lihat tangkapan layar
• Box Shadow Blur Force: 3vw
• Box Shadow Spread Force: 3vw
• Warna Bayangan: #ffffff

Kami bahkan dapat menambahkan beberapa filter untuk membuat gambar lebih tajam.

• Saturasi: 30%
• Opacity: 60%

Tambahkan konten teks

Sekarang bagian kita sudah lengkap dengan tiga gambar yang tercampur dengan baik, kita dapat menambahkan gambar kita sendiri isi di bagian atas. Untuk melakukannya, tambahkan bagian baru di bawah bagian saat ini.

Kemudian tambahkan baris kolom ke bagian reguler.

Kemudian tambahkan modul teks ke baris.

Konten Tubuh

Perbarui isi dari modul teks dengan isi dari badan berikut:

Pesan pemeriksaan mata Konten Anda ditempatkan di sini. Edit atau hapus teks ini sebaris atau di modul Pengaturan konten. Anda juga dapat mengatur gaya setiap aspek konten ini dalam pengaturan Desain modul dan bahkan menerapkan CSS khusus ke teks ini dalam modul Pengaturan lanjutan

Memformat teks

Setelah konten tubuh di tempat, perbarui parameter desain sebagai berikut:

• Warna teks teks: #ffffff
• Font: Poppins
• Warna teks judul: #ffffff
• Ukuran Judul Teks: 5vw
• Lebar: 60vw (desktop), 100% (telepon)
• Margin (desktop): -35% ke atas, 35% ke bawah
• Margin (telepon): -70% ke atas, 70% ke bawah

Desain akhir

Inilah desain akhir.

final pikiran

Mode campuran dan opsi filter Divi menyediakan semua yang Anda butuhkan untuk memadukan gambar untuk membuat latar belakang profesional. Caranya adalah dengan memposisikan gambar menggunakan satuan panjang vw agar desain background juga responsif di ponsel. Tetapi begitu gambar berada pada posisinya, kita dapat bereksperimen dengan semua jenis mode campuran dan pilihan desain lain yang tak terhitung jumlahnya untuk menciptakan desain yang sangat harmonis.

Semoga artikel ini memberi Anda beberapa inspirasi dan berharap untuk mendengar dari Anda di komentar.

Untuk kesehatanmu!