Kenarlık ve arka plan resimleri, web siteleri oluştururken popüler tasarım öğeleri olmaya devam ediyor. Doğru arka plan resimlerini kullanmak, özel grafiklere zaman ve para harcamadan sitenize kişilik ve stil katabilir. Ve sınırlar, içeriğinize yapı eklemek için kullanışlıdır. içindekiler.

Bugün arka plan resimlerini kenarlık olarak tasarlayarak bu ikisini bir araya getireceğiz. Divi arka plan resimlerini özelleştirmek için bir dizi kullanışlı seçeneğe sahiptir ve benzersiz kenarlık tasarımları için arka plan resimleri tasarlamayı kolaylaştırır. Bu, renkleri, degradeleri, kutu gölgelerini ve karıştırma modlarını her türlü yaratıcı yolla birleştirmemizi sağlar.

Başlayalım.

Başlamak için neye ihtiyacınız var?

Başlamak için aşağıdakilere ihtiyacınız var:

  1. Le Divi teması yüklü ve aktif
  2. Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)
  3. Kullanılacak görseller içindekiler hayali

Bundan sonra tasarlamaya başlamak için boş bir tuvaliniz olacak. Divi.

Arka Plan Görüntüsü Sınır Desenleri Oluşturmak için Genel İpuçları

Oluşturmaya başlamadan önce, arka plan resmi sınır desenleri oluştururken aklınızda bulundurmanız gereken bazı genel ipuçları aşağıdadır.

# 1 Çok fazla doku içeren görüntüleri seçin

Çoğu zaman sınırlarınızın daha dar olmasını istersiniz. Bu, görüntünün çoğunu göremeyeceğiniz anlamına gelir. Bu nedenle, çok fazla dokuya sahip görüntüleri kullanmak faydalıdır. Örneğin, bir manzara, bir buket çiçek veya yüksek bir kulenin fotoğrafını kullanabilirsiniz. İşte bu eğitim için kullandığım bazı resimler.

Çeşit darriete planı

# 2 Arka plan resminin kenarlıklarında degradeler ve şeffaflık kullanın

Arka plan resimleri bazen tek başına harika bir çerçeve olabilir. içindekiler. Ancak çoğu zaman renk elde etmek veya arka planları daha koyu veya daha açık hale getirmek için arka plan resminize katmanlar eklemek isteyeceksiniz. Arka plan degradeleri, arka plan resimlerinize katman eklemenin ve benzersiz kenarlık tasarımları oluşturmanın harika bir yoludur.

# 3 Birleştirme modlarını kullanın

Degradeleri kullanArka plan resimlerinizde karışım modlarını kullanmak, kenarlık desenlerine benzersiz renkler ve dokular uygulayabilir. Tek yapmanız gereken, arka plan resminize bir arka plan rengi veya gradyan eklemek ve ardından arka plan görüntüsü için bir karışım modu seçmektir. Renk, Parlaklık, Çarpma ve Ekran, arka plan görüntüsü kenarlıkları için bazı harika harmanlama modlarıdır.

Benzersiz şekiller için yuvarlak köşe seçeneklerini kullanın

Yuvarlatılmış köşeli kenarlıklar

Tüm sınırların düz kenarlara sahip olması gerekmez. Biraz karıştırın! Yuvarlatılmış köşe seçenekleri Divi bu köşeleri yaratıcı bir şekilde şekillendirmenize olanak tanır.

Paralaks arka plan resimlerini kenarlık olarak kullanın

Paralaks resimleri kenarlık olarak kullanınParalaksın en güzel yanı, tasarımı hareketle hayata geçirmesidir. Ek olarak, bordür tasarımlarınız için paralakslı arka plan resimleri kullanırsanız, içeriğinizin öne çıkan ve öne çıkmasını sağlayan ince hareketler yaratabilirsiniz.

Divi arka plan görüntüsü sınır tasarlamak

Şimdi, arka plan görüntüsü sınır desenlerinin yaratılmasının altında yatan genel fikri anladığımızda, birlikte birkaç tane düşünelim. 2 farklı modeller yapacağız. Her biri kurgusal içerik görevi görecek temel bir sunum modülüne sahip olacaktır. Ve modülün arka plan görüntüsü sınırını eklemek için sütun parametrelerini kullanacağız.

İlk tasarımımızla başlayalım.

#1 sınır arka plan resmi

Bu ilk tasarım, içerik için daha çok bir çerçeve gibi görünmesini sağlamak için alan gölgeli dar bir arka plan görüntüsü kenarlığına sahiptir.

İşte nasıl tasarlayacağınız.

İlk olarak, normal bir bölüme iki sütunlu bir satır ekleyin.

Çift sütunlu bir düzen seçin

Özet Modülü Ekle

Sonra sol sütuna bir bulanıklık modülü ekleyin.

Divi özet modülü ekle

Tanıtım yazısı yerleştirildikten sonra, tanıtım yazısı ayarlarını açın ve yalnızca başlık ve gövde içeriği görünecek şekilde varsayılan resmi çıkarın.

Varsayılan Resmi Sıfırla

Sonra metninize beyaz bir arka plan verin.

Ardından sunum tasarım parametrelerini aşağıdaki gibi güncelleyin:

  • Metin Başlığı: Oswald
  • Vücut Polisi: Lato
  • Üstte 5%, altta 5%, solda 5%, sağda 5%
  • Döşeme: Üstte% 7, altta% 7, solda% 10, sağda% 10
  • Yuvarlak köşeler: sağ üstte 20px, sol altta 20px
  • Kutu Gölgesi: ekran görüntüsüne bakın

Özet modül stili değiştirildi

Sütuna arka plan resmi ekleyin

Bu, sunum modülümüzle ilgilenir. Şimdi arka plan resim sınırımızı ekleyelim. Bunu yapmak için, Blurb modülünü içeren sütuna bir arka plan resmi ekleyeceğiz. Satır ayarlarını, ardından 1. sütunun ayarlarını açın ve aşağıdaki arka planı ekleyin:

  • Arka plan resmi: [seçtiğiniz resmi yükleyin]
  • Arka plan rengi: #303a7a
  • Karışım Arkaplan Görüntüsü: Parlaklık

Divi renkli arka plan birleştirmeArdından yuvarlatılmış köşeleri ve kutunun gölgesini aşağıdaki gibi güncelleyin:

  • Yuvarlak köşeler: sağ üstte 20px, sol altta 20px
  • Kutu Gölgesi: ekran görüntüsüne bakın

Divi sınır sütununun değiştirilmesi

Nihai sonuç

Şimdi, son tasarımını kontrol et.

Nihai sonuç resimli divi kenarlığı

Kenarlık arka plan resmi # 2

Kare kenarlıklı resimBu yeni tasarım, özellikle dokulu görüntüleri kullanmanın, özellikle bunları resim karıştırma modlarıyla birleştirdiğinizde, güzel kenarlıklar oluşturabildiğini vurgulamaktadır.

İşte nasıl tasarlayacağınız.

Blurb modülünü ekleyin

Tasarımı oluşturmak için, tanıtım metni 2 numaralı tasarımı içeren aynı satırın 1. sütununa ekleyeceğiz. Devam edin ve tasarım düzeni modülü # 1'i kopyalayın ve 2. sütuna yapıştırın. Sonra, sunum modülü ayarlarını aşağıdaki gibi güncelleyin:

  • Yuvarlak köşeler: varsayılan ayarları geri yükle
  • Marj: Üstte% 10, altta% 10, solda% 10, sağda% 10
  • Döşeme: Üstte% 15, altta% 15, solda% 10, sağda% 10
  • Kenarlığın genişliği: 1px
  • Kenarlık rengi: #ffffff

Divi özet modülü aralık yapılandırmasıSütuna arka plan resmi ekleyin

Modülümüz yerinde olduğunda, satır ayarlarını açın ve 2 sütununa bir arka plan gradyanı ekleyin.

  • Sol arka plan gradyanı: #f7e0a5
  • Sağ arka plan gradyanı Renk: rgba (237,240,0,0.79)
  • Gradyan Yönü: 90deg
  • Başlangıç ​​konumu:% 50
  • Son mevki:% 0

sınır çizimleri arka plan görüntüsü divi

Ardından, güzel bir degrade efektli bir arka plan görüntüsü ekleyin.

  • Arka plan resmi: [indirme resmi]
  • Arka Plan Resmi Karışımı: Renkli

Divi renk karışımı

Gördüğünüz gibi, renk harmanlama modu, yumuşak renklerle hoş bir görüntü kenarlık deseni oluşturmak için görüntünün arkasındaki iki renk gradyanının parlaklığını korur.

Nihai sonuç

Tasarımın son sonucunu keşfedin.

Nihai sonuç divi

Son düşünceler

Resimlerle sınırlar oluşturmak, tasarımınıza güzellik ve kişilik katmanın kolay bir yoludur. Bu eğitimde vurgulanan tasarım, benzersiz sınırların tasarımında Divi ile mevcut olasılıkları vurgulamak için yapılmıştır. Dolayısıyla farklı renk kombinasyonları ile tasarımlar sınırsızdır. Öyleyse, bazı görüntüler alın ve Divi'deki görüntülerle sınırların tasarımını daha fazla keşfedin.

Sağlığına.