Gambar perbatasan dan latar belakang terus menjadi elemen desain populer saat membangun situs web. Menggunakan gambar latar belakang yang tepat dapat menambah kepribadian dan gaya pada situs Anda tanpa menghabiskan waktu dan uang untuk grafis khusus. Dan pembatas berguna untuk menambah struktur pada Anda isi.
Hari ini kita akan menyatukan dua hal ini dengan mendesain gambar latar belakang sebagai batas. Divi memiliki serangkaian opsi yang berguna untuk menyesuaikan gambar latar belakang, membuatnya mudah untuk mendesain gambar latar belakang untuk desain perbatasan yang unik. Ini memungkinkan kita untuk menggabungkan warna, gradien, bayangan kotak, dan mode pencampuran dalam segala macam cara kreatif.
Mari kita mulai.
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu yang berikut:
- Le Tema Divi terpasang dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
- Gambar yang akan digunakan isi samaran
Setelah itu Anda akan memiliki kanvas kosong untuk mulai mendesain Divi.
Tips Umum untuk Membuat Pola Perbatasan Gambar Latar Belakang
Sebelum Anda mulai membangun, berikut adalah beberapa tips umum yang perlu diingat ketika membuat pola batas gambar latar belakang.
# 1 Pilih gambar dengan banyak tekstur
Sering kali, Anda ingin perbatasan Anda lebih sempit. Ini berarti Anda tidak akan dapat melihat banyak gambar. Oleh karena itu, berguna untuk menggunakan gambar yang memiliki banyak tekstur. Misalnya, Anda bisa menggunakan foto pemandangan, karangan bunga, atau menara tinggi. Berikut beberapa gambar yang saya gunakan untuk tutorial ini.
# 2 Gunakan gradien dan transparansi dengan batas gambar latar belakang
Gambar latar belakang terkadang bisa menjadi pembatas yang bagus untuk Anda isi. Namun sering kali Anda ingin menambahkan overlay ke gambar latar belakang untuk mendapatkan warna atau membuat latar belakang lebih gelap atau terang. Gradien latar belakang adalah cara terbaik untuk menambahkan lapisan pada gambar latar belakang dan membuat desain tepi yang unik.
# 3 Gunakan mode gabungan
Menggunakan mode campuran pada gambar latar belakang Anda dapat menerapkan warna dan tekstur unik ke pola perbatasan. Yang perlu Anda lakukan adalah menambahkan warna latar belakang atau gradien dengan gambar latar belakang Anda dan kemudian memilih mode campuran untuk gambar latar belakang. Warna, Kecerahan, Perkalian, dan Layar adalah beberapa mode pencampuran yang bagus untuk batas gambar latar belakang.
Gunakan opsi sudut bulat untuk bentuk unik
Tidak semua perbatasan harus memiliki tepi yang lurus. Campurkan sedikit! Opsi sudut membulat Divi memungkinkan Anda membentuk sudut-sudut ini secara kreatif.
Gunakan gambar latar paralaks sebagai pembatas
Hal hebat tentang paralaks adalah ia menghidupkan desain dengan gerakan. Selain itu, jika Anda menggunakan gambar latar belakang dengan paralaks untuk desain perbatasan Anda, Anda dapat membuat gerakan halus yang menonjol dan membuat konten Anda menonjol.
Desain perbatasan gambar latar belakang di Divi
Sekarang kita memahami ide umum yang mendasari penciptaan pola batas gambar latar belakang, mari kita bayangkan beberapa bersama. Kami akan membangun 2 model yang berbeda. Masing-masing akan memiliki modul presentasi dasar untuk berfungsi sebagai konten fiksi. Dan kita akan menggunakan parameter kolom untuk menambahkan batas gambar latar belakang modul.
Mari kita mulai dengan desain pertama kami.
Gambar latar perbatasan #1
Desain pertama ini menampilkan batas gambar latar belakang yang sempit dengan bayangan area agar lebih terlihat seperti bingkai untuk konten.
Inilah cara mendesainnya.
Pertama, tambahkan baris dua kolom ke bagian biasa.
Tambahkan Modul Ringkasan
Kemudian tambahkan modul uraian di kolom kiri.
Setelah uraian tersedia, buka pengaturan uraian dan ekstrak gambar default sehingga hanya judul dan isi isi yang terlihat.
Kemudian beri teks Anda latar belakang putih.
Kemudian perbarui parameter desain presentasi sebagai berikut:
- Judul Teks: Oswald
- Polisi Tubuh: Lato
- Margin 5% di atas, 5% di bawah, 5% di kiri, 5% di kanan
- Pelapis: 7% di atas, 7% di bawah, 10% di kiri, 10% di kanan
- Sudut membulat: 20px di kanan atas, 20px di kiri bawah
- Box Shadow: lihat tangkapan layar
Tambahkan gambar latar belakang ke kolom
Ini menangani modul presentasi kami. Sekarang mari tambahkan batas gambar latar belakang kita. Untuk melakukan ini kita akan menambahkan gambar latar belakang ke kolom yang berisi modul Blurb. Buka pengaturan baris, kemudian pengaturan untuk kolom 1 dan tambahkan latar belakang berikut:
- Gambar latar: [unggah gambar pilihan Anda]
- Warna latar belakang: #303a7a
- Gambar Latar Belakang Campuran: Kecerahan
Kemudian perbarui sudut membulat dan bayangan kotak sebagai berikut:
- Sudut membulat: 20px di kanan atas, 20px di kiri bawah
- Box Shadow: lihat tangkapan layar
Hasil akhir
Sekarang, periksa desain final.
Perbatasan gambar latar belakang # 2
Desain selanjutnya ini menyoroti fakta bahwa menggunakan gambar yang sangat bertekstur dapat membuat batas yang indah, terutama ketika Anda menggabungkannya dengan mode pencampuran gambar.
Inilah cara mendesainnya.
Tambahkan modul Blurb
Untuk membuat desain, kita akan menambahkan teks uraian ke kolom 2 dari baris yang sama yang berisi desain # 1. Lanjutkan dan salin modul layout desain # 1 dan paste ke kolom 2. Kemudian, perbarui pengaturan modul presentasi sebagai berikut:
- Sudut membulat: mengembalikan pengaturan default
- Margin: 10% di atas, 10% di bawah, 10% di kiri, 10% di kanan
- Pelapis: 15% di atas, 15% di bawah, 10% di kiri, 10% di kanan
- Lebar perbatasan: 1px
- Warna perbatasan: #ffffff
Tambahkan gambar latar belakang ke kolom
Dengan modul kami di tempat, buka pengaturan garis dan tambahkan gradien latar belakang ke kolom 2.
- Gradien latar belakang kiri: #f7e0a5
- Warna gradien latar kanan: rgba (237,240,0,0.79)
- Arah Gradien: 90deg
- Posisi awal: 50%
- Posisi akhir: 0%
Kemudian tambahkan gambar latar belakang dengan efek gradien yang bagus.
- Gambar latar belakang: [unduh gambar]
- Campuran Gambar Latar Belakang: Warna
Seperti yang Anda lihat, mode campuran warna mempertahankan kecerahan dua gradien warna di belakang gambar untuk membuat pola batas gambar yang bagus dengan warna-warna lembut.
Hasil akhir
Temukan hasil akhir dari desain.
Pikiran terbaru
Membuat perbatasan dengan gambar adalah cara mudah untuk menambahkan keindahan dan kepribadian pada desain Anda. Desain yang disorot dalam tutorial ini dibuat untuk menyoroti kemungkinan yang tersedia dengan Divi dalam desain batas unik. Karena itu, dengan kombinasi warna yang berbeda, desainnya tidak terbatas. Jadi, dapatkan beberapa gambar dan jelajahi lebih lanjut desain perbatasan dengan gambar di Divi.
Untuk kesehatanmu.