Divi'nin Yeni Arka Plan Ayarlarıyla Artık Mümkün 10 Arka Plan Tasarım Püf Noktası

Divi'nin yeni arka plan seçenekleri arayüzünün piyasaya sürülmesinden bu yana Divi daha da güçlü hale geldi. Yeni özellikler birçok yeni tasarım olanağının kapısını açmıştır. Bugün, farkında olmadığınız bazı yeni tasarım püf noktalarını tanıtacağım ve umarım harika arka plan tasarımları yaratmanız için size ilham verebilirim.

Visual Builder'ı kullanarak oluşturabileceğiniz sayısız arka plan tasarım kombinasyonu ve karışımı vardır. Bu gönderi için kararlaştırdığım 10 numara sadece yüzeyi çizecek, ancak sizi farklı kavramlarla tanıştırmak ve ilginizi çekmek içindir. Bu tasarım hilelerinin çoğu, yeni degrade arka plan seçenekleri gibi yeni arka plan seçenekleri kullanılarak ve arka plan resimlerini degrade renklerle birleştirerek gerçekleştirilir.

Yine de seni uyarmalıyım. Arka plan seçeneklerini araştırmaya başladığınızda bir daha asla çıkamayabilirsiniz! Çok eğlenceli. Yani en azından benim için öyleydi.

Eğlence.

İşte Tasarım Püf Noktalarına Kısa Bir Bakış

Bu Gönderiyi Takip Etme

Her yeni tasarım hilesini anlattığımda sıfırdan başlamak zorunda kalmak yerine çoğu için aynı örnek tasarımı kullandım ve o tasarıma farklı numaralar ekledim. Bu, çoğu örneğin, yeni numaraya geçmeden önce önceki bir tasarım numarasını tamamlamanızı gerektirdiği anlamına gelir. # 1-9 numaralı hilelerin tümü aynı temel kurulumu takip eder ve ön koşul olarak # 1 numaralı hileyi gerektirir. Bu nedenle, özellikleri test ediyorsanız, 1 Numaralı Trick ile başlamanızı öneririm.

Divi ile 10 Arka Plan Tasarım Püf Noktaları

Youtube Kanalımıza Abone Olun

1. numara: Çapraz bindirme

Tam genişlikte bir bölüm ekleyin ve ardından tam genişlikte bir başlık modülü ekleyin.

Ardından başlık modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Başlık: [başlığı girin]
Alt başlık: [alt başlığı girin]
Logo Resmi URL'si: [logo girin]
Arka Plan Degrade Renkleri: rgba(12,113,195,0.55), rgba(255,255,255,0)
Gradyan Türü: Doğrusal
Gradyan Yönü: 135deg
Başlangıç ​​Konumu: %60
Bitiş Pozisyonu: %60 (%60 veya altındaki herhangi bir şey işe yarayacaktır)

Gradyan aynı noktada başlayıp bittiği için, temelde hiçbir gradyan etkisi meydana gelmez. Böylece sonuç, %60 işaretçisinin her iki yanındaki iki renktir. Bu, gradyan yönünün açısıyla birleştiğinde etkiyi yaratır.

Tasarım Seçenekleri

Metin Rengi: Açık
Başlık Yazı Tipi: Varsayılan, Kalın (B), Büyük Harf (TT)
Başlık Yazı Tipi Boyutu: 40px
Alt Başlık Yazı Tipi Boyutu: 24px

Gelişmiş seçenekler

Ana Öğe kutusundaki Özel CSS'nin altına aşağıdaki CSS'yi ekleyin:

Padding: 150px 0;

Bu sadece başlık modülünün üstüne ve altına biraz ek dolgu eklemek içindir.

Ayarları kaydet

Şimdi tam genişlikli bölümünüze bir arka plan ekleme zamanı. Mor kontrol kutusundaki dişli simgesine tıklayarak Tam Genişlik Bölümü Ayarlarına gidin.

Ardından Bölüm Ayarları İçerik Seçeneklerini aşağıdaki gibi güncelleyin:

Arka Plan Resmi: [buraya arka plan resmini girin. En az 1960 piksel genişliğinde olmalıdır. Bu görseli unsplash.com'dan seçtim ve görselin göze çarpan kısmı sağ tarafta olacak şekilde kırptım.]
Paralaks Efektini Kullan: EVET (bu isteğe bağlıdır, ancak diyagonal kaplama ile iyi çalıştığını düşünüyorum)
Paralaks Yöntemi: Gerçek Paralaks

Bu kadar! Degrade renginin opaklığını ve degrade yönünün derecesini beğeninize göre ayarlamaktan çekinmeyin.

Bence iyi bir başlangıç ​​yapıyoruz. İkinci hileye geçelim.

2. Püf Nokta : Çapraz Katmanları Katmanlama

Bu tasarım numarası, 1. Numaranın devamıdır, bu yüzden devam etmeden önce 1. numarayı tamamladığınızdan emin olun.

1. numarada, Fullwidth Header Module'deki arka plan gradyan seçeneğini kullanarak çapraz bir kaplama ile ayrıldık.

Aynı örneği kullanarak, tam genişlik bölümüne ek bir arka plan gradyanı ekleyin. Bu bölüm için zaten bir arka plan resmimiz var, ancak Divi'nin yeni seçenekleriyle degrade renkleri arka plan resminizle birleştirebilir ve ardından bunları belirli efektlerle harmanlayabiliriz.

Tam Genişlik Bölümü ayarlarına gidin ve aşağıdaki İçerik seçeneklerini güncelleyin:

Arka Plan Gradyan Renkleri: rgba(131,0,233,0,38), rgba(255,255,255,0)
Gradyan Türü: Doğrusal
Gradient Direction: 135deg (başlık modülünüzdeki diğer degrade yönü ile aynı)
Başlangıç ​​Konumu: %38
Bitiş Konumu: %38

Şimdi arka plan resmi simgesine tıklayın ve aşağıdakileri değiştirin:

Paralaks Etkisi Kullan: Hayır
Arka Plan Resmi Karışımı: Çarpma

Artık benzersiz bir arka plan tasarımı için kolayca özelleştirilebilen 2 örtüşen diyagonal kaplamanız var.

3. numara: Daire yerleşimi

Bu tasarım numarası, 1. Numaranın devamıdır, bu yüzden devam etmeden önce 1. numarayı tamamladığınızdan emin olun.

Şimdi Trick #1'deki diyagonal bindirmeyi bir daire bindirmesine çevireceğiz. Bunu yapmak için Tam Genişlik Modülü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %30
Bitiş Konumu: %30

Tasarım Seçenekleri

Metin ve Logo Yönü: Orta

Şimdi yeni başlık arka planına bakın.

Bu numara, harika görünen başlıklar veya harekete geçirici mesajlar oluşturur. Daire katmanının boyutu kolayca ayarlanabilir ve farklı ekran boyutlarına iyi yanıt verir. Şu anda bir arka plan görüntüsünün üzerinde yarı saydam bir degrade rengi kullanıyorum, ancak bu, arka plan görüntüsü olmadan harika görünürdü.

Arka plan resmi olmadan ve daha koyu metin rengiyle nasıl görüneceğine dair bir örnek.

Numara 4: Daire kenarlığı oluşturmak için Daire Katmanlarını Katmanlama

Bu, tam genişlikte bir başlık modülüne bir daire katmanı ekleyerek bıraktığımız Trick #3'ün bir devamıdır. Daire yer paylaşımınız yerleştirildikten sonra, birincisi için kenarlık görevi görmesi için ikinci bir daire yerleşimi ekleyebiliriz. Bunu, Tam Genişlik Başlık Modülünün arkasında bulunan Tam Genişlik Bölümüne başka bir arka plan gradyanı ekleyerek yapıyoruz.

Tam Genişlik Bölümü Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Resmi sekmesi altında:

Paralaks Etkisi Kullan: HAYIR
Arka Plan Resmi Karışımı: Çarpma

Arka Plan Gradyanı sekmesi altında:

Arka Plan Gradyan Renkleri: rgba(0,0,0,0.45), rgba(255,255,255,0)
Arka Plan Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç ​​Konumu: %34
Bitiş Konumu: %34

Ayarları kaydet

Bu kadar.

Başlangıç ​​Konumunun yüzdesini ayarlayarak arka plan degrade dairenizin boyutunu da kolayca değiştirebilirsiniz.

Numara 5: Ters Daire Yerleşimi

Bu, tam genişlikli başlık modülünde bir daire kaplamasıyla bırakılan Trick #3'ün devamıdır. Şu anda daire yarı saydam mavi ve arka plan görüntüsünün geri kalanında hiç degrade kaplama rengi yok. Bu numara için, bunu değiştireceğim ve daire kaplamasını ters çevireceğim, böylece yarı şeffaf mavi degrade kaplama daireyi çevreleyecek ve dairenin içinde arka plan görüntüsünü ortaya çıkaracaktır.

Bunu yapmak için Fullwidth Header Settings'e gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: rgba(255,255,255,0), rgba(12,113,195,0.79)

Not: Burada gerçekten yaptığınız tek şey sol ve sağdaki renkleri değiştirmek. Şimdi şeffaf renk dairenin içinde gösterilen şeydir ve mavi gradyan onu çevreler. Biraz daha koyu olması için mavinin opaklığını arttırırdım.

Bunu kontrol et…

Numara #6: Video Arka Planı ile Ters Daire Yerleşimi

Bu, bizi çevreleyen mavi bir arka plana sahip bir ters daire kaplaması ile bize bırakan Trick #5'in bir devamıdır. Şu anda daire, arkasında bir arka plan görüntüsü gösteriyor. Bu daire yerleşiminin arkasına oturmak için kolayca bir video arka planı ekleyebilirsiniz. Çok dikkat dağıtıcı olmayan bir video kullanmanızı öneririm. Ayrıca ne zaman video kullanıyorsanız, sayfa yükleme sürenizin zarar görmemesi için dosya boyutunun küçük olduğundan emin olun.

Arka plan resmini bir video ile değiştirmek için Tam Genişlik Bölüm Ayarlarına gidin,
arka plan video simgesi ve videonuzu ekleyin.

Şimdi Fullwidth başlık Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: rgba(12,113,195,0.67), #333333

Yeni degrade renkleri ile arka plan videosu yalnızca daire içinde görünür. Ve üst üste binen renkler metni gerçekten öne çıkarıyor.

#7 Numara: Merkez Dışı Ters Daire Yerleşimi

Bu, bizi ters bir daire katmanıyla bırakan Trick #5'in devamıdır. Tam Genişlik Başlık Ayarlarına geri dönerseniz, başlığınız için farklı görünümler oluşturmak için Radyal Yönü farklı ayarlara ayarlayabilirsiniz.

Fulwidth Header Settings'e gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Radyal Yön: Sağ

Tasarım Seçenekleri

Metin ve Logo Yönü: Sol

İşte nihai sonuç ve birkaç farklı radyal yön örneği:

Bu örneklerin belli ki biraz çalışmaya ihtiyacı var ama siz anladınız.

Numara 8: Gölge efektleri için Gradyanları kullanma

Bu numara şaşırtıcı olmayabilir, ancak son derece yararlıdır. Resimlerinize gölgeleme eklemek için Photoshop gibi bir fotoğraf düzenleyici kullanmakla uğraşmak istemeyenlerimiz için bu tam size göre.

Bu, Fullwidth Header Module'deki arka plan gradyan seçeneğini kullanarak diyagonal bir kaplamayla bırakılan Trick #1'in devamıdır. Şimdi yarı saydam mavi kaplamayı, görüntünün solunda başlayan ve yavaş yavaş sağa doğru kaybolan bir miktar koyu gölgeyle değiştirelim. Bu şekilde, sağdaki görüntünün ana kısmına dokunulmadan kalır ve soldaki koyu gölge, metnin daha okunaklı olmasına yardımcı olur.

Gölge efekti eklemek için Tam Genişlik Üstbilgi Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Gradyan Renkleri: rgba(0,0,0,0.55), rgba(0,0,0,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %38
Bitiş Konumu: %85

İşte sonuç.

#9 Numara: Arka Plan Resmi Karışımı

Divi'nin yeni arka plan seçenekleri, görüntüleri özelleştirmek için CSS karışım modlarını içerir. Farklı görüntü karışımlarını keşfetmek çok eğlencelidir ve bazı şaşırtıcı tasarımlar yaratma eğilimindedir. Tasarımcı olmayanlarınız için, bu harika seçeneklerden yararlanmak için Doygunluk veya Parlaklık tanımını bilmek zorunda değilsiniz. Tüm harika efektleri görmek için arka plan rengi veya gradyan ayarının arka plan görüntüsüyle birlikte olması gerekir (sadece arka plan görüntüsüyle gerçekten çalışmaz). Ardından, istediğiniz görünümü elde edene kadar oynayın. Sonuçlar sizi şaşırtabilir.

Bu örnek için, Fullwidth Header Module'deki arka plan gradyan seçeneğini kullanarak çapraz bir bindirme ile kalan Trick #1'den devam edeceğim.

Tam Genişlik Üstbilgi Ayarlarına gidin ve İçerik Seçenekleri altındaki arka plan gradyanlarını silin.

Ayarları kaydet

Şimdi Bölüm Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: rgba(0,0,0,0.76), #0c71c3
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %50

Henüz herhangi bir değişiklik göremezsiniz. Sorun yok. Arka Plan Resmi sekmesine gidin ve aşağıdakileri güncelleyin:

Paralaks Etkisi Kullan: HAYIR
Arka Plan Resmi Karışımı: Sert Işık

Bu kadar. Sonucu kontrol edin.

Not: Burada kullanılan renkler, kullandığınız arka plan görüntüsüne göre farklı efektler oluşturacaktır. Bu yüzden, beğendiğinizi elde edene kadar renkler ve karışım seçenekleriyle oynamanızı öneririm.

10 numaralı numara: Degrade arka planınıza daha fazla renk eklemek için katman oluşturma.

Varsayılan olarak, her bölüm, satır, sütun ve modül iki renk gradyanına sahip olabilir. Ancak bunları birleştirip üst üste katladığınızda, degrade arka planınız için 5 renk oluşturabilirsiniz. Ve bu 5 renk bir araya geldiğinde oldukça havalı bir spektrum oluşturabilirsiniz.

İşte bunu nasıl yapacağınız. İlk olarak, 1 sütun yapısı satırına sahip bir Normal Bölüm ekleyin. Ardından satırın içine bir Blurb Modülü ekleyin.

Blurb Module ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Başlık: [başlığı girin]
İçerik: [içeriği girin]

Tasarım Seçenekleri

Metin Rengi: Açık
Metin Yönü: Merkez
Başlık Yazı Tipi: Varsayılan, Kalın(B)
Başlık Yazı Tipi Boyutu: 56px
Gövde Yazı Tipi boyutu: 22px
Özel Dolgu: 100 piksel Üst, 100 piksel Alt

Tanıtım metni beyaz bir arka plan üzerinde beyaz olduğu için henüz göremiyorsunuz, ama sorun değil. Yakında yapacaksın. Degrade renkleri eklemeye başlamanın zamanı geldi.

Arkadan öne, soldan sağa doğru yolumuza devam edeceğiz. Başlamak için Bölüm Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: #ff0077, #0c71c3
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %0
Bitiş Konumu: %30

Tasarım Seçenekleri

Özel Dolgu: 0px Üst, 0px Alt

Şimdi bir sonraki degrade rengimizi güncelleyelim – sıramızı. Satır Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik Seçenekleri

Arka Plan Degrade Renkleri: rgba(255,255,255,0), #8300e9
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %25
Bitiş Konumu: %50
Sütun 1 Arka Plan Degrade Renkleri: rgba(255,255,255,0), #e02b20
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %75

Tasarım Seçenekleri
Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Özel Dolgu: 0px Üst, 0px Alt

Ayarları kaydet

Şimdi degradenin son katmanı için Blurb Modülüne gitmemiz ve aşağıdakileri güncellememiz gerekiyor:

İçerik Seçenekleri
Arka Plan Degrade Renkleri: rgba(255,255,255,0), #edf000
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %75
Bitiş Konumu: %100

Tasarım Seçenekleri

Özel Dolgu: 100 piksel Üst, 100 piksel Alt

Bu kadar. Artık oldukça renkli bir arka plan oluşturmak için birbirine karışan beş degrade renginiz var.

Unutmayın, Gradyan Tipini Radyal (dairesel) olarak değiştirebilir ve tasarımı tamamen değiştirebilirsiniz (yaklaşık 20 saniye sürer).

Tüm katmanlar (bölüm, satır, sütun ve tanıtım yazısı modülü) için Degrade Türünü Radyal olarak değiştirirseniz, bunun gibi bir şey elde edersiniz.

Bonus Numarası

Paralaks ile arka plan görüntülerini nasıl katmanlayabileceğinize dair bir örnek. Bu, True Parallax kullanan bir arka plan görüntüsüne sahip normal bir bölümdür. Bölümün içinde, tam genişlikte ve dolgusuz yapılmış 1 sütunlu bir satır vardır, böylece bölümün tüm genişliğini uzatır. Satıra, CSS Paralaks yöntemini kullanarak bazı gradyan daireleriyle (kabarcık gibi görünmesi gereken) şeffaf bir arka plan görüntüsü ekledim. Ardından arka planı şeffaf olan satıra Harekete Geçirici Çağrı Modülü ekledim. Bu kombinasyon, sayfadaki bölümü aşağı kaydırırken hareket yaratır.

Bu numara, Divi dışında özel bir fotoğraf oluşturmayı gerektirdiğinden biraz daha ilgili. Sadece size olasılıkları göstermeyi umuyorum.

Birkaç örnek daha

Bunu, bu yazıda bahsedilen aynı hileleri test ederken oluşturduğum bazı tasarım örnekleriyle bitireceğim.

Son düşünceler

Umarım bu yeni arka plan seçeneklerini keşfetmekten keyif almışsınızdır ve getirdikleri olanaklardan heyecan duymuşsunuzdur. Ve bu seçenekler bölümlerde, satırlarda, sütunlarda ve modüllerde mevcut olduğundan, bu tasarım hilelerini web sitenizin herhangi bir yerinde uygulayabilirsiniz. Henüz yapmadıysanız, biraz daha derine inmek için biraz zaman ayırın ve bu yaratıcı meyve sularının akmasına izin verin. Arka plan seçeneklerini kendiniz keşfetmek için zaman ayırırsanız, bunları bir sonraki projenizde uygulamak için heyecanlanacağınızdan eminim. Ne bulduğunu görmek için sabırsızlanıyorum.

Yorumlarda sizden haber bekliyorum.