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:

  1. Le Tema Divi terpasang dan aktif
  2. Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
  3. 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.

Ragam rencana darriete

# 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

Gunakan gradienMenggunakan 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

Perbatasan dengan sudut membulat

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

Gunakan gambar paralaks sebagai pembatasHal 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.

Pilih tata letak kolom ganda

Tambahkan Modul Ringkasan

Kemudian tambahkan modul uraian di kolom kiri.

Tambahkan modul ringkasan divi

Setelah uraian tersedia, buka pengaturan uraian dan ekstrak gambar default sehingga hanya judul dan isi isi yang terlihat.

Setel Ulang Gambar Default

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

Gaya modul ringkasan yang dimodifikasi

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

Gabungkan latar belakang warna diviKemudian perbarui sudut membulat dan bayangan kotak sebagai berikut:

  • Sudut membulat: 20px di kanan atas, 20px di kiri bawah
  • Box Shadow: lihat tangkapan layar

Modifikasi kolom perbatasan divi

Hasil akhir

Sekarang, periksa desain final.

Hasil akhir divi berbatasan dengan gambar

Perbatasan gambar latar belakang # 2

Gambar dengan batas persegiDesain 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

Konfigurasi jarak modul ringkasan DiviTambahkan 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%

gambar batas gambar latar belakang divi

Kemudian tambahkan gambar latar belakang dengan efek gradien yang bagus.

  • Gambar latar belakang: [unduh gambar]
  • Campuran Gambar Latar Belakang: Warna

Campuran warna Divi

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.

Hasil akhir divi

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.