Divi'de Arka Plan Görüntüsü Kenar Tasarımları Nasıl Oluşturulur
Yayınlanan: 2019-08-18Kenarlıklar ve Arka Plan resimleri, web siteleri oluştururken popüler tasarım varlıkları olmaya devam ediyor. Doğru arka plan resimlerini kullanmak, özel grafiklere zaman ve para harcamak zorunda kalmadan sitenize kişilik ve stil katabilir. Kenarlıklar, içeriğinize yapı eklemek için yararlıdır.
Bugün, arka plan resimlerini kenarlık olarak tasarlayarak bu iki varlığı 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 kullanışlı bir dizi seçeneğe sahiptir. Bu, renkleri, degradeleri, kutu gölgelerini ve karışım modlarını her türlü yaratıcı yolla birleştirmemizi sağlar.
Başlayalım.
Gizlice Bakış
İşte birlikte oluşturacağımız arka plan görüntüsü bordür tasarımları.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Youtube Kanalımıza Abone Olun
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Arka Plan Görüntüsü Kenarlık Tasarımları Oluşturmak İçin Genel İpuçları
İnşa etmeye başlamadan önce, arka plan resmi kenarlık tasarımları oluştururken akılda tutulması gereken birkaç genel ipucu.
#1 Çok Dokusu Olan Görüntüleri Seçin
Çoğu zaman sınırlarınızın daha dar tarafta olmasını isteyeceksiniz. Bu, görüntünün çoğunu göremeyeceğiniz anlamına gelir. Bu yüzden çok fazla dokuya sahip görüntülerin kullanılmasına yardımcı olur. Örneğin, bir manzara fotoğrafı, bir buket çiçek veya yüksek bir şehrin fotoğrafını kullanabilirsiniz. İşte bu eğitim için kullandığım birkaç resim.
#2 Arka Plan Resmi Kenarlıklarınızla Degradeler ve Saydamlık Kullanın
Arka Plan Görüntüleri bazen içeriğiniz için harika bir sınır olarak tek başına durabilir. Ancak çoğu zaman, biraz renk için arka plan resminize bazı kaplamalar eklemek veya arka planları daha koyu veya daha açık hale getirmek isteyeceksiniz. Arka plan gradyanları, arka plan resimlerinize kaplama eklemenin ve benzersiz kenarlık tasarımları oluşturmanın harika bir yoludur.
#3 Karışım Modlarını Kullanın
Arka plan resimlerinizde karışım modlarını kullanmak, kenarlık tasarımlarına benzersiz renkler ve dokular uygulayabilir. Tek yapmanız gereken arka plan resminizle birlikte bir arka plan rengi veya degrade eklemek ve ardından arka plan görüntüsü için bir karışım modu seçmek. Arka plan görüntüsü kenarlıkları için bazı harika karışım modları renk, parlaklık, çarpma ve ekrandır.
Benzersiz Şekiller için Yuvarlatılmış Köşe Seçeneklerini Kullanın
Tüm sınırların düz kenarları olması gerekmez. Biraz karıştır! Divi'nin yuvarlak köşe seçenekleri, bu köşeleri yaratıcı şekillerde şekillendirmenizi sağlar.
Paralaks Arka Plan Resimlerini Kenarlık Olarak Kullan
Paralaksın en güzel yanı, tasarımı hareketle canlandırmasıdır. Ayrıca, bordür tasarımlarınız için paralakslı arka plan resimleri kullanırsanız, öne çıkan ve içeriğinizi öne çıkaran ince hareketler oluşturabilirsiniz.
Divi'de Arka Plan Resmi Kenarlıkları Tasarlama
Artık arka plan resmi kenarlık tasarımları oluşturmanın arkasındaki genel fikri anladığımıza göre, birlikte birkaç tane tasarlayalım. 4 farklı tasarım yapacağız. Her birinin, sahte içerik olarak hizmet edecek temel bir tanıtım modülü olacaktır. Modül için arka plan görüntüsü kenarlığını eklemek için sütun ayarlarını kullanacağız.
İlk tasarımımızla başlayalım.
Arka Plan Resmi Kenarlık Tasarımı #1
Bu ilk tasarım, içerik için daha çok bir çerçeve gibi görünmesi için kutu gölgesine sahip dar bir arka plan görüntüsü kenarlığına sahiptir.
İşte nasıl tasarlanacağı.
İlk olarak, normal bir bölüme iki sütunlu bir satır ekleyin.
Blurb Modülünü ekleyin
Ardından sol sütuna bir tanıtıcı modül ekleyin.
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 İçeriği görünecek şekilde varsayılan resmi çıkarın.
Ardından, tanıtım metninize beyaz bir arka plan rengi verin.
Ardından, tanıtıcı tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Başlık Yazı Tipi: Oswald
- Gövde Yazı Tipi: Lato
- Kenar boşluğu %5 üst, %5 alt, %5 sol, %5 sağ
- Dolgu: %7 üst, %7 alt, %10 sol, %10 sağ
- Yuvarlatılmış Köşeler: 20 piksel sağ üst, 20 piksel sol alt
- Kutu Gölgesi: ekran görüntüsüne bakın
Arka Plan Resmini Sütuna Ekleyin
Bu bizim tanıtım modülümüzle ilgilenir. Şimdi arka plan resmi kenarlığımızı ekleyelim. Bunu yapmak için, tanıtım modülünü tutan sütuna bir arka plan görüntüsü ekleyeceğiz. Satır ayarlarını açın ve ardından 1. sütun için ayarları açın ve aşağıdaki arka planı ekleyin:
- Arka Plan Resmi: [seçtiğiniz resmi yükleyin]
- Arka Plan Rengi: #303a7a
- Arka Plan Resmi Karışımı: Parlaklık
Ardından yuvarlatılmış köşeleri ve kutu gölgesini aşağıdaki gibi güncelleyin:
- Yuvarlatılmış Köşeler: 20 piksel sağ üst, 20 piksel sol alt
- Kutu Gölgesi: ekran görüntüsüne bakın
Son sonuç
Şimdi son tasarımı kontrol edin.
Arka Plan Resmi Kenarlık Tasarımı #2
Bu sonraki tasarım, çok dokulu görüntüleri kullanmanın, özellikle bunları görüntü harmanlama modlarıyla birleştirdiğinizde gerçekten güzel kenarlıklar oluşturabileceğini vurgular.
İşte nasıl tasarlanacağı.
Blurb Modülünü ekleyin
Tasarımı oluşturmak için, tasarım 1'i içeren aynı satırın 2. sütununa tanıtım yazısı ekleyeceğiz. Devam edin ve tanıtım modülünü tasarım 1'den kopyalayın ve 2. sütuna yapıştırın. Ardından tanıtım yazısı modülü ayarlarını aşağıdaki gibi güncelleyin:
- Yuvarlatılmış Köşeler: varsayılana geri yükle
- Marj: %10 üst, %10 alt, %10 sol, %10 sağ
- Dolgu: %15 üst, %15 alt, %10 sol, %10 sağ
- Kenar Genişliği: 1px
- Kenar Rengi: #ffffff
Arka Plan Resmini Sütuna Ekleyin
Modülümüz yerindeyken, satır ayarlarını açın ve 2. sütuna bir arka plan gradyanı ekleyin.
- Arka Plan Gradyanı Sol Renk: #f7e0a5
- Arka Plan Gradyanı Sağ Renk: rgba(237,240,0,0.79)
- Gradyan Yönü: 90deg
- Başlangıç Konumu: %50
- Bitiş Konumu: %0
Ardından, güzel bir renk karışımı efektine sahip bir arka plan resmi ekleyin.
- Arka Plan Resmi: [resmi yükle]
- Arka Plan Resmi Karışımı: Renk
Gördüğünüz gibi, renk karışım modu, yumuşak renklerle hoş bir görüntü kenarlığı tasarımı oluşturmak için görüntünün arkasındaki iki degrade rengin parlaklığını korur.
Son sonuç
Tasarımın nihai sonucunu kontrol edin.
Arka Plan Resmi Kenarlık Tasarımı #3
Bu sonraki tasarım, bir sınır tasarımında paralaks görüntülerin kullanımını vurgulamaktadır. Ayrıca paralaks görüntüsü için bir renk katmanı oluşturmak için bir kutu gölge hilesi kullanacağız.
İşte nasıl tasarlanacağı.
Yeni başlayanlar için, ilk satırın altına yeni bir iki sütun satırı ekleyin ve tanıtım yazısı modülünü üst satırın 1. sütunundaki tanıtım yazısı modülünü kopyalayın ve yeni satırın 1. sütununa yapıştırın.
Ardından, blurb modülünü aşağıdaki gibi güncelleyin.
- Arka Plan Rengi: #333344
- Metin Rengi: Açık
- Marj: %10 üst, %10 alt, %10 sol, %10 sağ
- Dolgu: %10 üst, %10 alt
- Yuvarlatılmış Köşeler: 20px
- Kutu Gölgesi: yok
Tanıtım yazısı yerinde olduğunda, satır ayarlarını açın ve 1. sütunun ayarlarını aşağıdaki gibi güncelleyin:
- Arka Plan Resmi: [resmi yükle]
- Paralaks Etkisini Kullan: EVET
- Paralaks Yöntemi: Gerçek Paralaks
- Yuvarlatılmış Köşeler: 20px
- Kutu Gölgesi: ekran görüntüsüne bakın
Şu anda paralakslı arka plan resmi sınırı, varsayılan olarak biraz zorlayıcıdır ve dikkati içerikten uzaklaştırabilir.
Paralakslı arka plan görüntüsünü daha açık hale getirmek için, tanıtım yazısına hafif bir kaplama görevi görecek bir kutu gölgesi ekleyebiliriz.
Tanımlama ayarlarını tekrar açın ve aşağıdakileri ekleyin:
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Bulanıklığı Gücü: 0px
- Kutu Gölge Yayılma Gücü: 200px
- Gölge Rengi: #ffffff
Son tasarım
Şimdi son tasarımı kontrol edelim.
Arka Plan Resmi Kenarlık Tasarımı #4
Bu sonraki tasarım için, tanıtım metni içeriği için bir üst ve alt kenarlık görevi görmesi için bir arka plan görüntüsünü degradelerle birleştireceğiz.
Blurb Modülünü ekleyin
Başlamak için, üst satırın 2. sütunundaki tanıtım modülünü kopyalayın ve ikinci satırın 2. sütununa yapıştırın.
Bitirdiğinizde, tanıtıcı modül ayarlarını aşağıdaki gibi güncelleyin:
- Kenarlık: [Sınır varsayılanlarını geri yükleyerek sınırı çıkarın]
- Kutu Gölgesi: yok
- Marj: %5 üst, %5 alt, %0 sol, %0 sağ
Arka Plan Resmi Kenarlığını Ekleyin
Bu tasarım için arka plan resmi kenarlığı eklemek için, satır ayarlarını açın ve 2. sütunun ayarlarını aşağıdaki gibi güncelleyin:
- Arka Plan Resmi: [resmi yükle]
- Arka Plan Gradyanı Sol Renk: #141777
- Arka Plan Gradyanı Sağ renk: #ffb7eb
- Gradyan Yönü: 90deg
- Başlangıç Konumu: %50
- Bitiş Konumu: %0
- Arka Plan Resmi: [resmi yükle]
- Arka Plan Resmi Karışımı: parlaklık
Son tasarım
Son tasarımı inceleyin.
Son düşünceler
Divi ile arka plan resmi sınırları oluşturmak, tasarımınıza güzellik ve kişilik katmanın basit bir yoludur. Bu eğitimde yer alan tasarımlar, benzersiz bordür tasarımları yapmak için Divi'de bulunan temel seçenekleri sergilemeyi amaçlamaktadır. Ancak, mevcut tüm farklı renk kombinasyonları ve karışım modları ile tek sınırınız hayal gücünüzdür. Bu nedenle, kendinize ait bazı resimler alın ve bir sonraki projeniz için yeni ve heyecan verici sınır tasarımlarını keşfedin.
Yorumlarda sizden haber bekliyorum.
Şerefe!