Divi (6 Gradyan Renk Paleti!) ile Soyut Gradyan Kahraman Bölümü Nasıl Oluşturulur?

Degradeler web tasarımınızı kolayca yükseltebilir. Genellikle, ince bir şekilde kullanılırlar. Ancak web sitenizde yalnızca degrade kombinasyonlarından oluşan bölümler de oluşturabilirsiniz. Tasarımınızın aynı zamanda modern ve soyut görünmesini sağlarlar. Bunu göstermeye yardımcı olmak için, yalnızca degrade renklerden yapılmış bir bölümü yeniden oluşturacağız. Bunun da ötesinde, sonuca uygulayabileceğiniz 6 farklı gradyan renk paletini paylaşacağız.

Hadi hadi bakalım!

Sonuç

Eğiticiye dalmadan önce, 6 farklı degrade renk paletini kullanarak sonucun ne olduğuna hızlıca bir göz atalım.

Degrade Renk Paleti #1

• Renk #1: #9b3e93
• Renk #2: #ffdf6d
• Renk #3: rgba(155,62,147,0.58)
• Renk #4: #eb4fa8
• Renk #5: #f6ff02
• Renk #6: #ffaa00
• Renk #7: rgba(255,255,255,0)

Degrade Renk Paleti #2

• Renk #1: #4b24fb
• Renk #2: #ffcad2
• Renk #3: rgba(255,202.210,0.4)
• Renk #4: #4b24fb
• Renk #5: #ffcad2
• Renk #6: #6de1ff
• Renk #7: rgba(255,255,255,0)

Gradyan Renk Paleti #3

• Renk #1: rgba(195,55,100,0.82)
• Renk #2: rgba(29,38,113,0.92)
• Renk #3: rgba(195.55.1000.047)
• Renk #4: #C33764
• Renk #5: #1D2671
• Renk #6: #ff5e7e
• Renk #7: rgba(255,255,255,0)

Degrade Renk Paleti #4

• Renk #1: rgba(255,0,157,0.67)
• Renk #2: rgba(0,255,216,0.8)
• Renk #3: rgba(255,0,157,0.51)
• Renk #4: #ff009d
• Renk #5: #00ffd8
• Renk #6: #770082
• Renk #7: rgba(255,255,255,0)

Degrade Renk Paleti #5

• Renk #1: rgba(0,19,165,0.76)
• Renk #2: #e5e5e5
• Renk #3: rgba(0,19,165,0.46)
• Renk #4: #0013a5
• Renk #5: #e5e5e5
• Renk #6: #0feff
• Renk #7: rgba(255,255,255,0)

Degrade Renk Paleti #6

• Renk #1: #873e4c
• Renk #2: #ffe9e8
• Renk #3: rgba(56,49,112,0.28)
• Renk #4: #f27088
• Renk #5: #383170
• Renk #6: #383170
• Renk #7: rgba(255,255,255,0)

Divi (6 Gradyan Renk Paleti!) ile Soyut Gradyan Kahraman Bölümü Nasıl Oluşturulur?

Youtube Kanalımıza Abone Olun

Yaklaşmak

• Seçtiğiniz renk paletini yakınınızda tutun ve her paletin numaralandırmasını olduğu gibi tutun
• Eğitim boyunca, renk paletinin renk numarasına değineceğiz.
• Belirli bir renk paletine karar verin ve tüm örnek için renklerini yeniden kullanın
• Daha sonra bölümü klonlayabilir ve sonucu gerçek zamanlı olarak görmek için diğer renk paletlerini uygulayabilirsiniz.
• Kahraman bölümünde degrade şekilleri oluşturmak için boş Metin Modülleri kullanıyoruz
• Bu şekillerin her biri Divi'nin yerleşik seçenekleri kullanılarak yapılmıştır.

Kahraman Bölüm Tasarımını Yeniden Oluştur

Yeni Bölüm Ekle

Degrade Arka Plan

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve aşağıdaki gradyan arka planıyla yeni bir bölüm oluşturun:

• Birinci Gradyan Rengi: Renk #1 (tercih ettiğiniz renk paletinde bulabilirsiniz)
• İkinci Gradyan Rengi: Renk #2 (seçilen renk paletinde bulabilirsiniz)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 160deg

Alt Bölücü

Hemen Tasarım sekmesine geçin ve aşağıdaki alt ayırıcıyı bu bölüme de uygulayın:

• Bölücü Stili: Listede Bul
• Bölücü Renk: Renk #3 (tercih ettiğiniz renk paletinde bulabilirsiniz)
• Bölücü Yüksekliği: 500px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

aralık

Ardından, Aralık alt kategorisini açın ve üst ve alt dolguya '100px' ekleyerek bölümünüzün üstü ve altı için biraz boşluk oluşturun.

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarıyla işiniz bittiğinde, devam edin ve ona iki sütunlu bir satır ekleyin.

Sütun 2 Gradyan Arka Planı

Herhangi bir modül eklemeden önce satır ayarlarını açın. Her şeyden önce, bu satırın ikinci sütununa bir degrade uygulamamız gerekecek:

• Birinci Gradyan Rengi: Renk #6 (seçtiğiniz renk paletinde bulabilirsiniz)
• İkinci Gradyan Rengi: Renk #7 (seçtiğiniz renk paletinde bulabilirsiniz)
• Sütun 2 Gradyan Yönü: 233deg
• Sütun 2 Bitiş Konumu: %42

boyutlandırma

Ardından Tasarım sekmesinde Boyutlandırma alt kategorisini açın ve aşağıdaki ayarları ona uygulayın:

• Bu Satırı Tam Genişlikte Yap: Evet
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Aralık alt kategorisine geçin ve ardından aşağıdaki dolguyu kullanın:

• Üst Dolgu: 0px
• Alt Dolgu: 30px
• Sütun 2 Üst Dolgu: 50 piksel
• Sütun 2 Sağ Dolgu: 50 piksel

Sınır

Satır ayarları hakkında değiştirmeniz gereken son şey kenarlıktır. Sağ üst köşe için '300px' kullanın.

Sütun 1'e Boş Metin Modülü Ekle

Degrade Arka Plan

Satır ayarları yapıldıktan sonra, çeşitli modülleri her iki sütuna da eklemeye başlayabiliriz. Sütun 1'e boş bir Metin Modülü ekleyerek başlayacağız. Bu Metin Modülünden bir şekil oluşturacağız. Arka Plan alt kategorisini açın ve buna aşağıdaki gradyan arka planını ekleyin:

• Birinci Gradyan Rengi: Renk #4 (tercih ettiğiniz renk paletinde bulabilirsiniz)
• İkinci Gradyan Rengi: Renk #5 (seçtiğiniz renk paletinde bulabilirsiniz)
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst

boyutlandırma

Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve bu kategoride aşağıdaki değişiklikleri yapın:

• Genişlik: %33
• Modül Hizalama: Sol

aralık

Bu Metin Modülünden bir şekil oluşturmak için, ona da biraz dolgu uygulamamız gerekecek:

• Üst Kenar Boşluğu: 50px
• Üst Dolgu: 200 piksel

Sınır

Ayrıca Border alt kategorisindeki köşelerin her birine ama sağ alt köşeye '500px' ekleyeceğiz.

Kutu Gölge

Son olarak, Kutu Gölge alt kategorisindeki ilk seçeneği etkinleştirerek şeklinize biraz derinlik katın. Varsayılan ayarlarında herhangi bir değişiklik yapmıyoruz.

Sütun 1'e Başlık Metin Modülü Ekle

Degrade Arka Plan

Bu öğreticinin önceki bölümünde oluşturduğunuz boş Metin Modülünün hemen altına, kahraman bölümünüzün başlığını içeren başka bir Metin Modülü ekleyin. Arka Plan alt kategorisini açın ve ona aşağıdaki gradyan arka planını uygulayın:

• Birinci Gradyan Rengi: Renk #6 (seçtiğiniz renk paletinde bulabilirsiniz)
• İkinci Gradyan Rengi: Renk #7 (seçtiğiniz renk paletinde bulabilirsiniz)
• Gradyan Yönü: 156deg
• Başlangıç ​​Konumu: %6
• Bitiş Konumu: %47

Metin Ayarları

İstediğiniz metin ayarlarını kullanabilirsiniz, ancak tamamen aynı tasarımı oluşturmak için Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Yazı Tipi: Rufina
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Altı Çizili
• Metin Alt Çizgi Rengi: rgba(255,255,255,0.17)
• Metin Altı Çizili Stili: Düz
• Metin Boyutu: 100px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

aralık

Bu Metin Modülüne de biraz boşluk uygulayın:

• Üst Kenar Boşluğu: -100px
• Üst Dolgu: 70px
• Alt Dolgu: 20px
• Sol Dolgu: 70px

Sınır

Ve son olarak, sol üst köşeyi yuvarlatılmış '50px' ekleyeceğiz.

Sütun 2'ye Boş Metin Modülü Ekle

Degrade Arka Plan

İlk sütun için ihtiyacımız olan tüm modülleri oluşturduk, o yüzden ikinciye geçelim. Yine, bir şekil oluşturmak için boş bir Metin Modülü kullanacağız. Metin Modülünü ekledikten sonra, ona aşağıdaki gradyan arka planını uygulayın:

• Birinci Gradyan Rengi: Renk #4 (tercih ettiğiniz renk paletinde bulabilirsiniz)
• İkinci Gradyan Rengi: Renk #5 (seçtiğiniz renk paletinde bulabilirsiniz)
• Gradyan Türü: Radyal
• Gradyan Yönü: Sol

aralık

İstediğimiz şekli oluşturmak için bu Metin Modülünün Üst Doldurma seçeneğine '600px' ekleyin.

Sınır

Ve köşelerin her birine, ancak sol alt köşeye '500px' uygulayın.

Kutu Gölge

Şeklinizi tamamlamak için, varsayılan ayarlarında herhangi bir değişiklik yapmadan ilk seçeneği kullanarak biraz Kutu Gölgesi eklemeyi seçebilirsiniz.

görünürlük

Bu şekil tablet ve telefonda oldukça fazla yer kaplıyor. Bu yüzden onu Görünürlük alt kategorisinde devre dışı bırakacağız.

Sonuç

Tüm adımların üzerinden geçtik, şimdi 6 farklı degrade renk paletinin tümünü kullanarak sonuca son bir göz atalım.

Degrade Renk Paleti #1

Degrade Renk Paleti #2

Gradyan Renk Paleti #3

Degrade Renk Paleti #4

Degrade Renk Paleti #5

Degrade Renk Paleti #6

Son düşünceler

Bu gönderide, tamamen degradelerden nasıl bir kahraman bölümü oluşturacağınızı gösterdik. Bunun da ötesinde, bu örneğe uygulayabileceğiniz 6 farklı degrade renk paleti sağladık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!