Ana İçeriğe Geç

Divi'de arkaplanlarla sınır nasıl oluşturulur?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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

Bugün, sınırlar gibi arka plan resimleri tasarlayarak bu iki gücü bir araya getireceğiz. Divi, benzersiz kenarlık tasarımları için arka plan resimleri tasarlamayı kolaylaştıran arka plan resimlerini özelleştirmek için bir dizi kullanışlı seçeneğe sahiptir. Bu, renkleri, gradyanları, kutu gölgelerini ve karışım modlarını her türlü yaratıcı şekilde birleştirmemize olanak tanır.

Başlayalım.

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

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

  1. Divi teması yüklü ve etkin
  2. Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)
  3. Kurgusal içerik için kullanılacak görüntüler

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

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 kendi başına bazen içeriğiniz için harika bir çerçeve olabilir. Ancak çoğu zaman, biraz renk elde etmek veya arka planları daha koyu veya daha açık yapmak için arka plan resminize kaplamalar eklemek isteyeceksiniz. Arka plan gradyanları, arka plan resimlerinize bir kaplama eklemenin ve benzersiz kenarlık desenleri 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 kenarları olması gerekmez. Biraz karıştır! Divi'nin yuvarlatılmış köşe seçenekleri, bu köşeleri yaratıcı bir şekilde şekillendirmenize izin verir.

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse4
cıvıltı
Enregistrer