Divi ile soyut bir gradyan kahramanı nasıl yapılır (6 gradyan renk paleti!)
Degradeler, web tasarımınızı kolayca geliştirebilir. Genellikle, ince bir şekilde kullanılırlar. Ancak web sitenizde sadece gradyan kombinasyonlarından yapılmış parçalar da yapabilirsiniz. Tasarımınızı aynı zamanda modern ve soyut gösteriyorlar. Açıklamaya yardımcı olmak için, gradyan renginin özel kısmını yeniden yaratacağız. Ayrıca, sonuçlara uygulayabileceğiniz 6 farklı gradyan renk paletini paylaşacağız. Haydi Yapalım şunu! Sonuçlar Eğiticiye girmeden önce, 6 farklı gradyan renk paleti kullanarak sonuçların ne olduğuna bakalım.
Gradyan renk paleti #1
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)
Gradyan 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,100.0.47)
Renk #4: #C33764
Renk #5: #1d2671
Renk #6: #FF5E7E
Renk #7: RGBA (255,255,255.0)
Gradyan 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)
Gradyan 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)
Gradyan 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 ile soyut gradyan kahramanları nasıl yapılır (6 gradyan renk paletleri!) YouTube kanalımıza yaklaşan abone olun
Seçtiğiniz renk paletini yakınınızdan kurtarın ve her paletin numaralandırılmasını koruyun
Öğretici boyunca, renk numarası renk numarasına başvuracağız
Belirli bir renk paletini belirleyin ve tüm örnekler için rengi yeniden kullanın
Daha sonra parçayı klonlayabilir ve sonuçları gerçek zamanlı olarak görmek için başka bir renk paleti uygulayabilirsiniz
Kahraman bölümünde bir gradyan yapmak için boş bir metin modülü kullanıyoruz
Bu formların her biri varsayılan divi seçeneği kullanılarak yapılır
Kahraman bölümünün tasarımını yeniden yapın Yeni bir sayfa için gradyan arka planının yeni bir kısmını ekleyin veya mevcut olanı açın ve aşağıdaki gradyan arka planı ile yeni bir parça yapın:
Birinci Gradyan Renk: Renk #1 (Terlenen renk paletinde bulun)
İkinci gradyan rengi: Renk #2 (tercih edilen renk paletinde bulun)
Gradyan Türü: Doğrusal
Gradien yönü: 160deg
Alt bölücü hemen tasarım sekmesine geçer ve aşağıdaki alt bölücüyü bu bölüme de uygular: Bölme Stili: Listede bulun
Renk Renk: Renk #3 (Terlenen renk paletinde bulun)
Böcek Yüksekliği: 500 piksel
Bölme Ayarları: Altını doldurun
Bir sonraki mesafe, aralık alt kategorisini açın ve üst ve alt dolguya ‘100px’ ekleyerek üst ve altınız için biraz alan oluşturun. Ayarları bitirdikten sonra yeni bir sütun yapısının satırını ekleyin, devam edin ve iki sütunu ekleyin. Sütun 2 Gradyan Arka Plan herhangi bir modül eklemeden önce satır ayarlarını açın. Her şeyden önce, gradyanı bu satırın ikinci sütununa uygulamamız gerekiyor: Birinci Degrade Renk: Renk #6 (Seçilen Renk Paletinde bulun) İkinci gradyan rengi: Renk #7 (tercih edilen renk paletinde bulun)
Sütun 2 gradyan yönü: 233deg
Sütun 2 Son Konum:% 42
Yapıştırıcı Ardından, tasarım sekmesindeki boyut alt kategorisini açın ve aşağıdaki ayarları uygulayın:
Bu çizgiyi tamamen genişletin: evet Yüksek sütunu eşitleyin: evet
Aralık alt kategorisine geçmek için mesafe ve aşağıdaki dolguyu kullanın:
Üst dolgu: 0px Dolgu Alt: 30 piksel
Üst Dolgu 2 Dolgu: 50 piksel
Sütun 2 Dolgu Sağ: 50px
Satır ayarları hakkında değiştirmeniz gereken son şeyi sınırlamak sınırdır. Sağ üst köşe için ‘300 piksel’ kullanın.
Boş bir metin modülü ekleyin Degradenin arka planının 1 sütununa satır ayarları tamamlandıktan sonra, her iki sütuna da çeşitli modüller eklemeye başlayabiliriz. Boş bir metin modülü ekleyerek Sütun 1 ile başlayacağız. Bu metin modülünün şeklini oluşturacağız. Arka plan alt kategorisini açın ve aşağıdaki gradyan arka planını ekleyin: Birinci Gradyan Renk: Renk #4 (Terlenen renk paletinde bulun)
İkinci gradyan rengi: Renk #5 (tercih edilen renk paletinde bulun)
Gradyan Türü: Radyal
Radyal yön: sol üst
Yapıştırıcı tasarım sekmesine taşındı, boyut alt kategorisini açın ve aşağıdaki değişiklikleri yapın:
Genişlik:% 33
Bu metin modülünün şeklini oluşturmak için mesafe, ayrıca biraz dolgu uygulamamız gerekiyor:
Üst kenar boşluğu: 50 piksel Üst dolgu: 200px
Sınırımız da her köşeye ‘500 piksel’ ekleyecektir, ancak sınır alt kategorisinde sağ alt.
Son kutu gölgesi, Box Shadow Alt Kategorisindeki ilk seçeneği etkinleştirerek şeklinize biraz derinlik ekleyin. Varsayılan ayarlarda herhangi bir değişiklik yapmadık. Bu öğreticinin önceki bölümünde oluşturduğunuz boş metin modülünün hemen altındaki başlık metin modülünü sütun 1 arka plan gradyanına ekleyin, 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 aşağıdaki gradyan arka planını uygulayın: Birinci Gradyan Renk: Renk #6 (Terlenen renk paletinde bulun) İkinci gradyan rengi: Renk #7 (tercih edilen renk paletinde bulun) Gradyan yönü: 156deg
Başlangıç Pozisyonu:% 6
Son pozisyon:% 47
Metin Ayarları İstediğiniz tüm metin ayarlarını kullanabilirsiniz, ancak aynı tasarımı oluşturmak için metin alt kategorileri için aşağıdaki ayarları kullanın:
Metin Yazı Tipi: Rufina
Metin yazı tipi ağırlığı: kalınlık Metin yazı tipi kuvveti: alt çizgiler
Renk Alt Çizgi Metin: RGBA (255,255,255.0.17)
Alt çizgi tarzı metin: katı
Metin Boyutu: 100 piksel
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Mesafe Bu metin modülüne de birkaç boşluk uygulayın:
Üst Marj: -100 piksel
Üst dolgu: 70px Dolgu Alt: 20 piksel
Sol dolgu: 70px
Sınır ve son olarak, sol üst açıyı ’50px’ ekleyeceğiz.
Sütun 2 Arka Planına Boş Bir Metin Modülü Ekleyin Degrade, ilk sütun için ihtiyacımız olan tüm modülleri yaptı, böylece ikinciye geçelim. Bir kez daha, şekil yapmak için boş bir metin modülü kullanacağız. Metin modülünü ekledikten sonra aşağıdaki gradyan arka planını uygulayın:
Birinci Gradyan Renk: Renk #4 (Terlenen renk paletinde bulun) İkinci gradyan renk: Renk #5 (tercih edilen renk paletinde bulun) gradyan tipi: radyal Gradyan Yönü: Sol
İstediğimiz şekli yapmak için mesafe, bu metin modülünün üst dolgu seçeneğine ‘600px’ ekleyin.
Sınır ve her köşeye ‘500 piksel’ uygulayın, ancak sol altta.
Kutunun Gölgesi Şeklinizi tamamlamak için, varsayılan ayarlarda herhangi bir değişiklik yapmadan ilk seçeneği kullanarak bazı kutu gölgeleri eklemeyi seçebilirsiniz.
Bu formun görünürlüğü, tabletler ve cep telefonlarında oldukça fazla alan gerektirir. Bu yüzden görünürlük alt kategorisinde devre dışı bırakacağız. Tüm adımlardan geçtik, 6 farklı gradyan renk paletini kullanarak nihai sonuçlara bakalım. Gradyan renk paleti #1 Gradyan renk paleti #2 Gradyan renk paleti #3 Gradyan renk paleti #4
Gradyan renk paleti #5 Gradyan renk paleti #6 Bu yazıdaki son zihin, kahramanları gradyandan nasıl tamamen yapacağınızı gösterdik. Ayrıca, bu örnekte uygulayabileceğiniz 6 farklı gradyan renk paleti verdik. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
