Divi’de arka plan görüntüsü sınır tasarımı nasıl yapılır
Sınır ve arka plan görüntüleri, web siteleri oluştururken popüler tasarım varlıkları olmaya devam ediyor. Doğru arka plan görüntüsünü kullanmak, özel grafikler için zaman ve para harcamak zorunda kalmadan sitenize kişilik ve stil ekleyebilir. Ve sınır, içeriğinize yapı eklemek için çok yararlıdır. Bugün, arka plan görüntülerini bir sınır olarak tasarlayarak bu iki varlığı birleştireceğiz. Divi, benzersiz sınır tasarımı için arka plan görüntülerini tasarlamayı kolaylaştıran arka plan görüntülerini ayarlamak için bir dizi yararlı seçeneğe sahiptir. Bu, renkleri, gradyanları, gölge kutularını ve karışık modları her türlü yaratıcı yolla birleştirmemizi sağlar.
Başlayalım. Aşağıdaki gizlice göz atma, birlikte yapacağımız bir arka plan görüntüsü sınır tasarımıdır.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Arka plan görüntüsü oluşturmak için genel ipuçları oluşturmaya başlamadan önce, arka plan görüntüsü sınır tasarımları oluştururken hatırlanması gereken bazı genel ipuçları.
#1 Çoğu zaman çok fazla dokuya sahip bir görüntü seçin, sınırınızın daha dar olmasını istersiniz. Bu, birçok resim göremeyeceğiniz anlamına gelir. Bu yüzden çok fazla dokusu olan görüntüleri kullanmak güzel. Örneğin, peyzaj fotoğrafları, buketler veya şehir gökdelenleri kullanabilirsiniz. İşte bu öğretici için kullandığım bazı resimler.
#2 Arka plan görüntüsünüzle gradyanlar ve şeffaflık kullanın Sınır arka plan görüntüsü bazen içeriğiniz için iyi bir sınır olarak tek başına durabilir. Ancak çoğu zaman, arka plan görüntüsünüze birkaç renk için biraz yer paylaşımı eklemek veya arka planı daha koyu veya daha parlak hale getirmek isteyeceksiniz. Arka plan gradyanı, arka plan görüntüsünüze kaplama eklemenin ve benzersiz bir sınır tasarımı oluşturmanın iyi bir yoludur.#3 Karışım modunu kullanın Arka plan görüntüsünde bir karışım modu kullanarak sınır tasarımına benzersiz renkler ve dokular uygulayabilirsiniz. Tek yapmanız gereken, arka plan görüntüsünüzle birlikte bir arka plan veya gradyan rengi eklemek ve ardından arka plan görüntüsü için bir karışım modu seçmektir. Arka plan görüntü sınırları için bazı iyi karışım modları renk, parlaklık, çarpma ve ekrandır. Benzersiz bir şekil için yuvarlak açılı bir seçenek kullanın
Tüm sınırların düz bir kenarı olmamalıdır. Biraz karıştırın! Divi’nin yuvarlak açılı seçenekleri, bu açıyı yaratıcı bir şekilde oluşturmanıza olanak tanır. Sınır olarak bir paralaks arka plan görüntüsü kullanın Paralaks ile ilgili en güzel şey, hareketlerle tasarımı açmasıdır. Ayrıca, sınır tasarımınız için bir paralakslı arka plan görüntüsü kullanıyorsanız, öne çıkan pürüzsüz bir hareket yapabilir ve içeriğinizi öne çıkarabilirsiniz. Arka plan görüntüsü sınırını Divi’de tasarlamak, arka plan görüntüsü sınır tasarımının arkasındaki genel fikri anladıktan sonra, bazılarını birlikte tasarlayalım. 4 farklı tasarım inşa edeceğiz. Her birinin yapay içerik olarak kullanılacak temel bir açıklama modülü olacaktır. Ve modüle arka plan görüntü limitleri eklemek için sütun ayarlarını kullanacağız. İlk tasarımımızla başlayalım. Sınır Tasarımı Arka Plan Görüntü #1
Bu ilk tasarım, içerik için bir çerçeveye benzemesini sağlamak için bir kutunun gölgesine sahip dar bir arka plan görüntü sınırı görüntüler. İşte nasıl tasarlanacağınız. İlk olarak, normal bölüme iki sıra sütun ekleyin. Blurb modülünü ekleyin, ardından Sol sütuna açıklama modülünü ekleyin.
Spottaki açıklamadan sonra, açıklama ayarlarını açın ve varsayılan görüntüyü yalnızca başlık ve içerik içeriği görünür olacak şekilde kaldırın. Ardından, bulanıkınızı beyaz arka plan rengi ile verin. Ardından, açıklama tasarım ayarlarını aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Oswald Gövde yazı tipi: lato % 5 üst marj,% 5 dip,% 5 sol,% 5 sağ
Yuvarlak açı: 20 piksel sağ üst, 20 piksel sol alt
Gölge Kutusu: Ekran yakalamaya bakın
Nihai sonuç şimdi son tasarımı kontrol ediyor. Sınır Tasarımı Arka Plan Görüntü #2
Bu sonraki tasarım, özellikle bir görüntü karışımı ile birleştirdiğinizde, birçok doku ile görüntülerin nasıl kullanabileceğini vurgulamaktadır. İşte nasıl tasarlanacağınız. Bir Tasarım yapmak için bir bulanıklık modülü ekleyin, Tasarım #1’i içeren aynı satırdan Sütun 2’ye bir açıklama ekleyeceğiz. Tasarım #1’den bulanık modülü devam edin ve kopyalayın. Sütun 2’ye ekleyin. Ardından bulanıklık modülü ayarlarını aşağıdaki gibi güncelleyin:
Yuvarlak açı: varsayılana dön Marj:% 10 üst,% 10 altında,% 10 sol,% 10 sağ Dolgu:% 15 artış,% 15 aşağıda,% 10 sol,% 10 sağ Sınır Genişliği: 1 piksel
Sınır rengi: #ffffff
Modülümüzle birlikte sütuna bir arka plan görüntüsü ekleyin, satır ayarlarını açın ve arka plan gradyanını sütun 2’ye ekleyin.
Gradyan arka planın sol rengi: #f7e0a5
Sağ renk gradyan arka planı: RGBA (237,240,0,79)
Gradyan yönü: 90 derece Başlangıç Pozisyonu:% 50
Son pozisyon:% 0
Ardından iyi bir renk kombinasyonu efektine sahip bir arka plan görüntüsü ekleyin. Arka plan görüntüsü: [Görüntü yükle]
Arka Plan Görüntü Karışımı: Renk
Gördüğünüz gibi, renk kombinasyonu modu, yumuşak renklerle iyi bir görüntü sınır tasarımı oluşturmak için görüntünün arkasındaki iki gradyan renginin parlaklığını korur. Nihai sonuçlar tasarımın nihai sonucunu görüyor.
Sınır Tasarımı Arka Plan Görüntü #3 Bu sonraki tasarım, sınır tasarımında paralaks görüntülerinin kullanımını vurgular. Ayrıca paralaks görüntüleri için renk kaplaması yapmak için bir kutu gölge hilesi kullanacağız. İşte nasıl tasarlanacağınız. Yeni başlayanlar için, ilk satırın altına iki yeni sütun ekleyin ve açıklama modülünü üst 1 sütundaki açıklamadan kopyalayın ve yeni satır sütununa yapıştırın. Ardından bulanıklık modülünü aşağıdaki gibi güncelleyin.
Arka plan rengi: #333344
Metin Rengi: Işık Marj:% 10 üst,% 10 altında,% 10 sol,% 10 sağ Dolgu:% 10 artış,% 10 aşağı Yuvarlak açı: 20 piksel
Gölge Kutusu: Hiçbir şey
Spottaki açıklama sırasında satır ayarlarını açın ve sütun 1 için ayarları aşağıdaki gibi güncelleyin:
Arka Plan Görüntü: [Resim Yükle]
Paralax efektlerini kullanın: evet
Paralaks yöntemi: gerçek paralaks
Yuvarlak açı: 20 piksel Gölge Kutusu: Ekran yakalamaya bakın
Şu anda varsayılan olarak biraz aşırı bir paralaks ile arka plan görüntü limiti ve dikkati içerikten yönlendirebilir.
Daha parlak bir paralakla arka plan görüntüsü yapmak için, bulanık bir ışık kaplaması olarak işlev görecek bir kutunun gölgesi ekleyebiliriz. Açıklama ayarlarını tekrar açın ve aşağıdakileri ekleyin:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 0px
Gölge Alanının Gücü Kutusu: 200px Gölge Renk: #ffffff Son Tasarım Şimdi son tasarımı kontrol edelim. Sınır Tasarımı Arka Plan Görüntü #4
Bir sonraki tasarım için, arka plan görüntülerini açıklama içeriği için üst ve alt sınırlar olarak kullanılacak gradyanlarla birleştireceğiz. Blurb modülünü ekleyin Başlamak için, açıklama modülünü üst 2 satır sütunundaki kopyalayın ve ikinci sıra sütununa yapıştırın. Bittiğinde, bulanık modül ayarlarını aşağıdaki gibi güncelleyin:
Sınır: [Varsayılan sınırı döndürerek sınırı kaldırın]
Gölge Kutusu: Hiçbir şey
Marj:% 5 üst,% 5 aşağıda,% 0 sol,% 0 sağ Bu tasarıma bir arka plan görüntü limiti eklemek için arka plan görüntüsü sınırını ekleyin, satır ayarlarını açın ve 2 sütun ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Görüntü: [Resim Yükle] Sol renk gradyan arka plan: #141777
Doğru arka plan gradyan rengi: #ffb7eb
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50 Son pozisyon:% 0
Arka Plan Görüntü: [Resim Yükle]
Arka plan görüntü karışımı: parlaklık
Son Tasarım Son tasarıma bakın.
Son zihin, Divi ile arka plan görüntü sınırını yapar, tasarımınıza güzellik ve kişilik eklemenin basit bir yoludur. Bu öğreticide görüntülenen tasarım, benzersiz bir sınır tasarımı oluşturmak için Divi’de bulunan ana seçenekleri görüntülemeyi amaçlamaktadır. Bununla birlikte, mevcut tüm renk ve karışık mod kombinasyonları ile tek sınırınız hayal gücünüzdür. Bu yüzden, kendi fotoğraflarınızı çekin ve bir sonraki projeniz için yeni ve ilginç sınır tasarımlarını keşfedin. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Arka plan görüntüsü oluşturmak için genel ipuçları oluşturmaya başlamadan önce, arka plan görüntüsü sınır tasarımları oluştururken hatırlanması gereken bazı genel ipuçları.
#1 Çoğu zaman çok fazla dokuya sahip bir görüntü seçin, sınırınızın daha dar olmasını istersiniz. Bu, birçok resim göremeyeceğiniz anlamına gelir. Bu yüzden çok fazla dokusu olan görüntüleri kullanmak güzel. Örneğin, peyzaj fotoğrafları, buketler veya şehir gökdelenleri kullanabilirsiniz. İşte bu öğretici için kullandığım bazı resimler.
#2 Arka plan görüntüsünüzle gradyanlar ve şeffaflık kullanın Sınır arka plan görüntüsü bazen içeriğiniz için iyi bir sınır olarak tek başına durabilir. Ancak çoğu zaman, arka plan görüntüsünüze birkaç renk için biraz yer paylaşımı eklemek veya arka planı daha koyu veya daha parlak hale getirmek isteyeceksiniz. Arka plan gradyanı, arka plan görüntüsünüze kaplama eklemenin ve benzersiz bir sınır tasarımı oluşturmanın iyi bir yoludur.#3 Karışım modunu kullanın Arka plan görüntüsünde bir karışım modu kullanarak sınır tasarımına benzersiz renkler ve dokular uygulayabilirsiniz. Tek yapmanız gereken, arka plan görüntüsünüzle birlikte bir arka plan veya gradyan rengi eklemek ve ardından arka plan görüntüsü için bir karışım modu seçmektir. Arka plan görüntü sınırları için bazı iyi karışım modları renk, parlaklık, çarpma ve ekrandır. Benzersiz bir şekil için yuvarlak açılı bir seçenek kullanın
Tüm sınırların düz bir kenarı olmamalıdır. Biraz karıştırın! Divi’nin yuvarlak açılı seçenekleri, bu açıyı yaratıcı bir şekilde oluşturmanıza olanak tanır. Sınır olarak bir paralaks arka plan görüntüsü kullanın Paralaks ile ilgili en güzel şey, hareketlerle tasarımı açmasıdır. Ayrıca, sınır tasarımınız için bir paralakslı arka plan görüntüsü kullanıyorsanız, öne çıkan pürüzsüz bir hareket yapabilir ve içeriğinizi öne çıkarabilirsiniz. Arka plan görüntüsü sınırını Divi’de tasarlamak, arka plan görüntüsü sınır tasarımının arkasındaki genel fikri anladıktan sonra, bazılarını birlikte tasarlayalım. 4 farklı tasarım inşa edeceğiz. Her birinin yapay içerik olarak kullanılacak temel bir açıklama modülü olacaktır. Ve modüle arka plan görüntü limitleri eklemek için sütun ayarlarını kullanacağız. İlk tasarımımızla başlayalım. Sınır Tasarımı Arka Plan Görüntü #1
Bu ilk tasarım, içerik için bir çerçeveye benzemesini sağlamak için bir kutunun gölgesine sahip dar bir arka plan görüntü sınırı görüntüler. İşte nasıl tasarlanacağınız. İlk olarak, normal bölüme iki sıra sütun ekleyin. Blurb modülünü ekleyin, ardından Sol sütuna açıklama modülünü ekleyin.
Spottaki açıklamadan sonra, açıklama ayarlarını açın ve varsayılan görüntüyü yalnızca başlık ve içerik içeriği görünür olacak şekilde kaldırın. Ardından, bulanıkınızı beyaz arka plan rengi ile verin. Ardından, açıklama tasarım ayarlarını aşağıdaki gibi güncelleyin: Yazı tipi başlığı: Oswald Gövde yazı tipi: lato % 5 üst marj,% 5 dip,% 5 sol,% 5 sağ
Dolgu:% 7 artış,% 7 aşağıda,% 10 sol,% 10 sağ
Yuvarlak açı: 20 piksel sağ üst, 20 piksel sol alt
Gölge Kutusu: Ekran yakalamaya bakın
Açıklama modülümüzü işlemek için sütuna bir arka plan resmi ekleyin. Şimdi arka plan görüntü limitimizi ekleyelim. Bunu yapmak için, açıklama modülünü barındıran sütuna bir arka plan görüntüsü ekleyeceğiz. Satır ayarlarını açın ve Sütun 1 için ayarları açın ve aşağıdaki arka planı ekleyin: Arka plan görüntüsü: [Seçtiğiniz görüntü yükleyin]
Arka plan rengi: #303a7a
Arka plan görüntü karışımı: parlaklık
Yuvarlak açı: 20 piksel sağ üst, 20 piksel sol alt
Gölge Kutusu: Ekran yakalamaya bakın
Nihai sonuç şimdi son tasarımı kontrol ediyor. Sınır Tasarımı Arka Plan Görüntü #2
Bu sonraki tasarım, özellikle bir görüntü karışımı ile birleştirdiğinizde, birçok doku ile görüntülerin nasıl kullanabileceğini vurgulamaktadır. İşte nasıl tasarlanacağınız. Bir Tasarım yapmak için bir bulanıklık modülü ekleyin, Tasarım #1’i içeren aynı satırdan Sütun 2’ye bir açıklama ekleyeceğiz. Tasarım #1’den bulanık modülü devam edin ve kopyalayın. Sütun 2’ye ekleyin. Ardından bulanıklık modülü ayarlarını aşağıdaki gibi güncelleyin:
Yuvarlak açı: varsayılana dön Marj:% 10 üst,% 10 altında,% 10 sol,% 10 sağ Dolgu:% 15 artış,% 15 aşağıda,% 10 sol,% 10 sağ Sınır Genişliği: 1 piksel
Sınır rengi: #ffffff
Modülümüzle birlikte sütuna bir arka plan görüntüsü ekleyin, satır ayarlarını açın ve arka plan gradyanını sütun 2’ye ekleyin.
Gradyan arka planın sol rengi: #f7e0a5
Sağ renk gradyan arka planı: RGBA (237,240,0,79)
Gradyan yönü: 90 derece Başlangıç Pozisyonu:% 50
Son pozisyon:% 0
Ardından iyi bir renk kombinasyonu efektine sahip bir arka plan görüntüsü ekleyin. Arka plan görüntüsü: [Görüntü yükle]
Arka Plan Görüntü Karışımı: Renk
Gördüğünüz gibi, renk kombinasyonu modu, yumuşak renklerle iyi bir görüntü sınır tasarımı oluşturmak için görüntünün arkasındaki iki gradyan renginin parlaklığını korur. Nihai sonuçlar tasarımın nihai sonucunu görüyor.
Sınır Tasarımı Arka Plan Görüntü #3 Bu sonraki tasarım, sınır tasarımında paralaks görüntülerinin kullanımını vurgular. Ayrıca paralaks görüntüleri için renk kaplaması yapmak için bir kutu gölge hilesi kullanacağız. İşte nasıl tasarlanacağınız. Yeni başlayanlar için, ilk satırın altına iki yeni sütun ekleyin ve açıklama modülünü üst 1 sütundaki açıklamadan kopyalayın ve yeni satır sütununa yapıştırın. Ardından bulanıklık modülünü aşağıdaki gibi güncelleyin.
Arka plan rengi: #333344
Metin Rengi: Işık Marj:% 10 üst,% 10 altında,% 10 sol,% 10 sağ Dolgu:% 10 artış,% 10 aşağı Yuvarlak açı: 20 piksel
Gölge Kutusu: Hiçbir şey
Spottaki açıklama sırasında satır ayarlarını açın ve sütun 1 için ayarları aşağıdaki gibi güncelleyin:
Arka Plan Görüntü: [Resim Yükle]
Paralax efektlerini kullanın: evet
Paralaks yöntemi: gerçek paralaks
Yuvarlak açı: 20 piksel Gölge Kutusu: Ekran yakalamaya bakın
Şu anda varsayılan olarak biraz aşırı bir paralaks ile arka plan görüntü limiti ve dikkati içerikten yönlendirebilir.
Daha parlak bir paralakla arka plan görüntüsü yapmak için, bulanık bir ışık kaplaması olarak işlev görecek bir kutunun gölgesi ekleyebiliriz. Açıklama ayarlarını tekrar açın ve aşağıdakileri ekleyin:
Gölge Kutusu: Ekran yakalamaya bakın
Bulanık Güç Gölgesi Kutusu: 0px
Gölge Alanının Gücü Kutusu: 200px Gölge Renk: #ffffff Son Tasarım Şimdi son tasarımı kontrol edelim. Sınır Tasarımı Arka Plan Görüntü #4
Bir sonraki tasarım için, arka plan görüntülerini açıklama içeriği için üst ve alt sınırlar olarak kullanılacak gradyanlarla birleştireceğiz. Blurb modülünü ekleyin Başlamak için, açıklama modülünü üst 2 satır sütunundaki kopyalayın ve ikinci sıra sütununa yapıştırın. Bittiğinde, bulanık modül ayarlarını aşağıdaki gibi güncelleyin:
Sınır: [Varsayılan sınırı döndürerek sınırı kaldırın]
Gölge Kutusu: Hiçbir şey
Marj:% 5 üst,% 5 aşağıda,% 0 sol,% 0 sağ Bu tasarıma bir arka plan görüntü limiti eklemek için arka plan görüntüsü sınırını ekleyin, satır ayarlarını açın ve 2 sütun ayarlarını aşağıdaki gibi güncelleyin: Arka Plan Görüntü: [Resim Yükle] Sol renk gradyan arka plan: #141777
Doğru arka plan gradyan rengi: #ffb7eb
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 50 Son pozisyon:% 0
Arka Plan Görüntü: [Resim Yükle]
Arka plan görüntü karışımı: parlaklık
Son Tasarım Son tasarıma bakın.
Son zihin, Divi ile arka plan görüntü sınırını yapar, tasarımınıza güzellik ve kişilik eklemenin basit bir yoludur. Bu öğreticide görüntülenen tasarım, benzersiz bir sınır tasarımı oluşturmak için Divi’de bulunan ana seçenekleri görüntülemeyi amaçlamaktadır. Bununla birlikte, mevcut tüm renk ve karışık mod kombinasyonları ile tek sınırınız hayal gücünüzdür. Bu yüzden, kendi fotoğraflarınızı çekin ve bir sonraki projeniz için yeni ve ilginç sınır tasarımlarını keşfedin. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
