Cara Membuat Desain Perbatasan Gambar Latar Belakang di Divi
Diterbitkan: 2019-08-18Gambar perbatasan dan latar belakang terus menjadi aset desain populer saat membangun situs web. Menggunakan gambar latar belakang yang tepat dapat menambahkan kepribadian dan gaya ke situs Anda tanpa harus menghabiskan waktu dan uang untuk grafik khusus. Dan batas sangat membantu untuk menambahkan struktur ke konten Anda.
Hari ini, kita akan menyatukan kedua aset ini dengan mendesain gambar latar belakang sebagai batas. Divi memiliki serangkaian opsi yang berguna untuk menyesuaikan gambar latar belakang yang memudahkan merancang gambar latar belakang untuk desain perbatasan yang unik. Ini memungkinkan kita untuk menggabungkan warna, gradien, bayangan kotak, dan mode campuran dalam segala macam cara kreatif.
Mari kita mulai.
Sneak Peek
Berikut adalah desain border gambar background yang akan kita buat bersama.
Unduh Tata Letaknya GRATIS
Untuk mendapatkan 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 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!
Berlangganan Saluran Youtube Kami
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar yang akan digunakan untuk konten tiruan
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Tips Umum untuk Membuat Desain Perbatasan Gambar Latar
Sebelum kita mulai membangun, berikut adalah beberapa tip umum yang perlu diingat saat membuat desain batas gambar latar belakang.
#1 Pilih Gambar dengan Banyak Tekstur
Sebagian besar waktu, Anda ingin perbatasan Anda lebih sempit. Ini berarti Anda tidak akan dapat melihat banyak gambar. Jadi ada baiknya menggunakan gambar yang memiliki banyak tekstur. Misalnya, Anda dapat menggunakan foto lanskap, karangan bunga, atau gedung pencakar langit kota. Berikut adalah beberapa gambar yang saya gunakan untuk tutorial ini.
#2 Gunakan Gradien dan Transparansi dengan Perbatasan Gambar Latar Anda
Gambar Latar Belakang terkadang dapat berdiri sendiri sebagai batas yang bagus untuk konten Anda. Tetapi sebagian besar waktu, Anda akan ingin menambahkan beberapa overlay ke gambar latar belakang Anda untuk beberapa warna atau untuk membuat latar belakang lebih gelap atau lebih terang. Gradien latar belakang adalah cara yang bagus untuk menambahkan overlay ke gambar latar belakang Anda dan membuat desain perbatasan yang unik.
#3 Gunakan Blend Mode
Menggunakan mode campuran pada gambar latar belakang Anda dapat menerapkan warna dan tekstur unik ke desain perbatasan. Yang perlu Anda lakukan adalah menambahkan warna latar belakang atau gradien bersama dengan gambar latar belakang Anda dan kemudian pilih mode campuran untuk gambar latar belakang. Beberapa mode campuran yang bagus untuk batas gambar latar belakang adalah warna, luminositas, perkalian, dan layar.
Gunakan Opsi Sudut Bulat untuk Bentuk Unik
Tidak semua batas harus memiliki tepi yang lurus. Campurkan sedikit! Opsi sudut bundar Divi memungkinkan Anda membentuk sudut tersebut dengan cara yang kreatif.
Gunakan Gambar Latar Belakang Paralaks sebagai Perbatasan
Hal hebat tentang paralaks adalah ia menghidupkan desain dengan gerakan. Plus, jika Anda menggunakan gambar latar belakang dengan paralaks untuk desain perbatasan Anda, Anda dapat membuat gerakan halus yang menonjol dan membuat konten Anda menonjol.
Mendesain Perbatasan Gambar Latar Belakang di Divi
Sekarang setelah kita memahami ide umum di balik pembuatan desain batas gambar latar belakang, mari kita rancang beberapa bersama-sama. Kita akan membangun 4 desain yang berbeda. Masing-masing akan memiliki modul uraian dasar untuk dijadikan konten tiruan. Dan kita akan menggunakan pengaturan kolom untuk menambahkan batas gambar latar belakang untuk modul.
Mari kita mulai dengan desain pertama kita.
Gambar Latar Belakang Desain Perbatasan #1
Desain pertama ini menampilkan batas gambar latar belakang sempit yang memiliki bayangan kotak agar lebih terlihat seperti bingkai untuk konten.
Berikut cara mendesainnya.
Pertama, tambahkan dua baris kolom ke bagian reguler.
Tambahkan Modul Blurb
Kemudian tambahkan modul uraian di kolom kiri.
Setelah uraian di tempat, buka pengaturan uraian dan keluarkan gambar default sehingga hanya Konten Judul dan Isi yang terlihat.
Selanjutnya, beri blurb Anda warna latar belakang putih.
Kemudian perbarui pengaturan desain uraian sebagai berikut:
- Judul Font: Oswald
- Font Tubuh: Lato
- Margin 5% atas, 5% bawah, 5% kiri, 5% kanan
- Padding: 7% atas, 7% bawah, 10% kiri, 10% kanan
- Sudut Bulat: 20px kanan atas, 20px kiri bawah
- Bayangan Kotak: lihat tangkapan layar
Tambahkan Gambar Latar Belakang ke Kolom
Itu menangani modul uraian kami. Sekarang mari kita tambahkan batas gambar latar belakang kita. Untuk melakukan ini, kami akan menambahkan gambar latar belakang ke kolom yang menampung modul uraian. Buka pengaturan baris lalu buka pengaturan untuk kolom 1 dan tambahkan latar belakang berikut:
- Gambar Latar Belakang: [unggah gambar pilihan Anda]
- Warna Latar Belakang: #303a7a
- Campuran Gambar Latar Belakang: Luminositas
Kemudian perbarui sudut membulat dan bayangan kotak sebagai berikut:
- Sudut Bulat: 20px kanan atas, 20px kiri bawah
- Bayangan Kotak: lihat tangkapan layar
Hasil Akhir
Sekarang periksa desain akhir.
Gambar Latar Belakang Desain Perbatasan #2
Desain berikutnya ini menyoroti bagaimana menggunakan gambar dengan banyak tekstur benar-benar dapat membuat batas yang indah, terutama saat Anda menggabungkannya dengan mode campuran gambar.
Berikut cara mendesainnya.
Tambahkan Modul Blurb
Untuk membuat desain, kita akan menambahkan uraian ke kolom 2 dari baris yang sama yang berisi desain #1. Lanjutkan dan salin modul blurb dari desain #1 dan tempelkan ke kolom 2. Kemudian perbarui pengaturan modul blurb sebagai berikut:
- Sudut Bulat: kembalikan ke default
- Margin: 10% atas, 10% bawah, 10% kiri, 10% kanan
- Padding: 15% atas, 15% bawah, 10% kiri, 10% kanan
- Lebar Perbatasan: 1px
- Warna Perbatasan: #ffffff
Tambahkan Gambar Latar Belakang ke Kolom
Dengan modul kami di tempat, buka pengaturan baris dan tambahkan gradien latar belakang ke kolom 2.
- Warna Kiri Gradien Latar Belakang: #f7e0a5
- Warna Kanan Gradien Latar Belakang: rgba(237,240,0,0,79)
- Arah Gradien: 90 derajat
- Posisi Awal: 50%
- Posisi Akhir: 0%
Kemudian tambahkan gambar latar belakang dengan efek perpaduan warna yang bagus.
- Gambar Latar Belakang: [unggah gambar]
- Campuran Gambar Latar Belakang: Warna
Seperti yang Anda lihat, mode perpaduan warna mempertahankan luminositas dua warna gradien di belakang gambar untuk menciptakan desain batas gambar yang bagus dengan warna-warna lembut.
Hasil Akhir
Lihat hasil akhir desainnya.
Gambar Latar Belakang Desain Perbatasan #3
Desain berikutnya ini menyoroti penggunaan gambar paralaks dalam desain perbatasan. Kami juga akan menggunakan trik bayangan kotak untuk membuat overlay warna untuk gambar paralaks.
Berikut cara mendesainnya.
Sebagai permulaan, tambahkan dua baris kolom baru di bawah baris pertama dan salin modul uraian dari uraian di kolom 1 baris atas dan tempel di kolom 1 baris baru.
Kemudian perbarui modul blurb sebagai berikut.
- Warna Latar Belakang: #333344
- Warna Teks: Cahaya
- Margin: 10% atas, 10% bawah, 10% kiri, 10% kanan
- Padding: 10% atas, 10% bawah
- Sudut Bulat: 20px
- Bayangan Kotak: tidak ada
Saat uraian di tempat, buka pengaturan baris dan perbarui pengaturan untuk kolom 1 sebagai berikut:
- Gambar Latar Belakang: [unggah gambar]
- Gunakan Efek Paralaks: YA
- Metode Paralaks: Paralaks Sejati
- Sudut Bulat: 20px
- Bayangan Kotak: lihat tangkapan layar
Saat ini batas gambar latar belakang dengan paralaks sedikit berlebihan secara default dan dapat mengalihkan perhatian dari konten.
Untuk membuat gambar latar belakang dengan paralaks lebih terang, kita bisa menambahkan bayangan kotak ke blurb yang akan berfungsi sebagai overlay cahaya.
Buka pengaturan uraian lagi dan tambahkan yang berikut ini:
- Bayangan Kotak: lihat tangkapan layar
- Kekuatan Buram Bayangan Kotak: 0px
- Kekuatan Penyebaran Bayangan Kotak: 200px
- Warna Bayangan: #ffffff
Desain Akhir
Sekarang mari kita periksa desain akhir.
Gambar Latar Belakang Desain Perbatasan #4
Untuk desain berikutnya, kita akan menggabungkan gambar latar belakang dengan gradien untuk dijadikan batas atas dan bawah untuk konten uraian.
Tambahkan Modul Blurb
Untuk memulai, salin modul uraian di kolom 2 baris atas dan tempel di kolom 2 baris kedua.
Setelah selesai, perbarui pengaturan modul blurb sebagai berikut:
- Perbatasan: [Keluarkan perbatasan dengan mengembalikan default perbatasan]
- Bayangan Kotak: tidak ada
- Margin: 5% atas, 5% bawah, 0% kiri, 0% kanan
Tambahkan Perbatasan Gambar Latar Belakang
Untuk menambahkan batas gambar latar belakang untuk desain ini, buka pengaturan baris dan perbarui pengaturan untuk kolom 2 sebagai berikut:
- Gambar Latar Belakang: [unggah gambar]
- Warna Kiri Gradien Latar Belakang: #141777
- Warna Gradien Latar Belakang Kanan: #ffb7eb
- Arah Gradien: 90 derajat
- Posisi Awal: 50%
- Posisi Akhir: 0%
- Gambar Latar Belakang: [unggah gambar]
- Campuran Gambar Latar Belakang: luminositas
Desain Akhir
Lihat desain akhir.
Pikiran Akhir
Membuat batas gambar latar belakang dengan Divi adalah cara sederhana untuk menambahkan keindahan dan kepribadian pada desain Anda. Desain yang ditampilkan dalam tutorial ini dimaksudkan untuk menampilkan opsi utama yang tersedia di Divi untuk membuat desain perbatasan yang unik. Namun, dengan semua kombinasi warna dan mode campuran yang tersedia, satu-satunya batasan Anda adalah imajinasi Anda. Jadi, ambil beberapa gambar Anda sendiri dan jelajahi desain perbatasan baru dan menarik untuk proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!