Divi: Farklı gradyan türlerinin karşılaştırılması

Gradient Builder'ı kullanmak ister misiniz? Divi ama hangi gradyan tipini seçeceğinizi bilmiyor musunuz?

Gradyan türleri, yeni Divi Gradyan Oluşturucu . Yeni degrade türleri Divi arka planlarınıza farklı şekiller ve renkler eklemenizi sağlar. 

Bu makalede, bu tür degradeleri karşılaştıracağız ve bunları benzersiz arka planlar oluşturmak için nasıl kullanacağınızı göstereceğiz!

Başlayalım.

Divi gradyan türleri nelerdir?

Divi'nin yeni Gradyan Oluşturucusu, degrade türlerini içeren birkaç yeni degrade özelliği ekler. Seçilebilecek dört tür degrade vardır:

• Doğrusal
• DAİRESEL
• Eliptik
• Konik

Türlerin her biri degradeyi farklı şekilde görüntüler. Bir daire, elips veya koni içinde doğrusal bir renk deseni olarak görüntülenecek degradeyi şekillendirmek için kullanılırlar. Bunları örneklerimizde ayrıntılı olarak göreceğiz.

Degrade türleri, konum, tekrarlanıp tekrarlanmama, degrade kaydırma çubuğu için ölçü birimi ve degradenin arka planın üzerine yerleştirilmesi gibi diğer denetimlerden de etkilenir.

Her ayarın eğim üzerinde küçük veya büyük bir etkisi olabilir. Degrade ince veya göze çarpan olabilir. Tek bir ayar ile küçük veya büyük değişiklikler yapılabilir.

Bunu akılda tutarak, degrade türlerinin her birini kullanan bazı degrade örneklerine bakalım. Her bir degrade türü için üç örnek göstereceğiz. 

Birincisi, web'de göreceğiniz standart bir degrade türü olacaktır. Sonraki ikisi biraz daha deneysel olacak, sadece degrade türleriyle neler yapabileceğinizi görmek için.

Gradyan türleri örnekleri

Gradyan türü örnekleri için ana sayfanın Kahraman bölümünü kullanıyoruz. ücretsiz oda ve kahvaltı düzeni paketi Divi'de mevcuttur. Bu bölümde zaten bir gradyan var, ancak onu değiştireceğiz ve biraz deney yapacağız. 

Orijinal arka plan gradyanını kaldırabilir veya değiştirebiliriz. Sonuçlar aynı. Basitlik için, onu değiştireceğiz.

Başlık metnini siyahtan beyaza çevirerek özelleştirdik.

Doğrusal gradyan türü

Ayrıca Oku: Divi: Arka plan görüntülerinde desen karıştırma nasıl kullanılır?

Doğrusal degradeler, degradeyi sayfa boyunca yayılmış gibi görüntüler.

Doğrusal gradyan türünün ilk örneği

İşte ilk örneğimizin bir önizlemesi. Aralarında yumuşak bir geçiş ile ekranın solunda daha açık bir renk ve sağda daha koyu bir renk görüntüler.

Bu örneği oluşturmak için iki renk ekleyin. en başbakan %92,158,82,0.76 konumunda rgba(0)'dır. en ikinci rgba(0,10,4,0.76) %97 konumunda.

• Gradyan Durakları:
  • %0: rgba(92,158,82,0.76)
  • %97: rgba(0,10,4,0.76)

Sonra değiştir Tip Gradyan Doğrusal olarak ayarlayın ve Kullanım Şekli 131 derecenin üzerinde. ki o tekrar etme. Yı kurbirlik Yüzde üzerinde. Gradyanı arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• Gradyan Yönü: 131deg
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Doğrusal gradyan türünün ikinci örneği

İşte ikinci doğrusal gradyan örneğinin bir önizlemesi. İlki gibi çalışıyor, ancak solda daha koyu bir gölgenin devraldığı sert bir durağı var.

Bunu oluşturmak için üç Degrade Durağı ekleyin. en başbakan %18,76,41,0.76 konumunda rgba(13)'dır. en ikinci rgba(92,158,82,0.76) %13 konumunda. renk 3 rgba(18,76,41,0.76) %34 konumunda.

• Gradyan Durakları:
  • %13: rgba(18,76,41,0.76)
  • %13: rgba(92,158,82,0.76)
  • %34: rgba(18,76,41,0.76)

Ardından Tip Gradyan Doğrusal olarak ayarlayın ve Kullanım Şekli 90 derecenin üzerinde. ki o tekrar etme . Değiştirbirlik yüzde. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Doğrusal gradyan türünün üçüncü örneği

Üçüncü örneğimiz, açık renkli bir çizgiyi çapraz olarak sağ üst köşeye, daha koyu renkli bir çizgiye değecek şekilde yerleştirir.

Bunun üç rengi var. renk 1 rgba(92,158,82,0.76) %13 konumunda. renk 2 %92,158,82,0.76 konumunda rgba(23)'dir. bu üçüncü renk rgba(18,76,41,0.76) %32 konumunda.

• Gradyan Durakları:
  • %13: rgba(92,158,82,0.76)
  • %23: rgba(92,158,82,0.76)
  • %32: rgba(18,76,41,0.76)

tanımlayın Tip gradyanı Doğrusal'a yön 209 derece. doğdu tekrar etme ve ayarlabirlik Yüzde üzerinde. Gradyanı arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Doğrusal
• Gradyan Yönü: 209deg
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Dairesel degrade türü

Dairesel degrade türü, renklerle bir daire oluşturur.

Dairesel gradyan türünün ilk örneği

İlk dairesel gradyan örneğimiz, ortada açık bir renk ve kenarlarda daha koyu bir renk yerleştirir.

Bunun 2 rengi var. en başbakan %92,158,82,0.76 konumunda rgba(0)'dır. en ikinci rgba(0,10,4,0.76) %62 konumunda.

• Gradyan Durakları:
  • %0: rgba(92,158,82,0.76)
  • %62: rgba(0,10,4,0.76)

tanımlayın Tip Dairesel üzerinde gradyan. ortala yön . emin ol tekrar etme , değiştirbirlik yüzde olarak ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• Gradyan Konumu: Merkez
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Dairesel gradyan türünün ikinci örneği

Bu gradyan, ekranın ortasına net bir dairesel kenar yerleştirir.

Dört rengi vardır. İki renk üst üste bindirilmiştir. en başbakan %18,76,41,0.76 konumunda rgba(13)'dır. en ikinci rgba(92,158,82,0.76) %33 konumunda. renk 3 rgba(92,158,82,0.76) %51 konumunda. renk 4 rgba(18,76,41,0.76)'dir. Renk 51'ün üzerinde %3 konumuna yerleştirilir.

• Gradyan Durakları:
  • %13: rgba(18,76,41,0.76)
  • %33: rgba(92,158,82,0.76)
  • %51: rgba(92,158,82,0.76)
  • %51: rgba(18,76,41,0.76)

tanımlayın Tip gradyanı Dairesel'e getirin ve Kullanım Şekli sol üst köşede. emin ol tekrar etme , değiştir birlik yüzde olarak ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• Gradyan Konumu: Sol Üst
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Dairesel gradyan türünün üçüncü örneği

Bu örnek, dairenin ortasından başlayarak en koyu renkte birkaç açık daire yerleştirir.

Bu aynı zamanda, bu tasarımı elde etmek için iki rengi belirli bir sırayla istifler. bu premiere renk, %18,76,41,0.76 konumunda rgba(13)'dir. renk 2 %18,76,41,0.76 konumunda rgba(44)'dir. bu üçüncü renk ikinci renkle örtüşür. Bu, %92,158,82,0.76 konumunda rgba(44). renk 4 rgba(92,158,82,0.76) %51 konumunda.

• Gradyan Durakları:
  • %13: rgba(18,76,41,0.76)
  • %44: rgba(18,76,41,0.76)
  • %44: rgba(92,158,82,0.76)
  • %51: rgba(92,158,82,0.76)

değiştir gradyan türü dairesel olarak. yerleştirin yön alt kısımda. tekrar Bu. Yı kurbirlik Yüzde üzerine dokunun ve degradeyi arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Dairesel
• Gradyan Konumu: Alt
• Gradyan Tekrarı: EVET
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

eliptik gradyan tipi

Eliptik gradyanlar, renkleri elips şeklinde yerleştirir.

Eliptik gradyan türünün ilk örneği

İlk eliptik örneğimiz ekranın ortasına açık renkli bir elips ve çevresinde daha koyu renkli bir elips yerleştirir.

Bunun iki rengi var. en başbakan %92,158,82,0.76 konumunda rgba(0)'dır. en ikinci rgba(0,10,4,0.76) %50 konumunda.

• Gradyan Durakları:
  • %0: rgba(92,158,82,0.76)
  • %50: rgba(0,10,4,0.76)

değiştir gradyan türü eliptik olarak. Yı kur yön Merkezde. emin ol bu tekrar etme , ayarlabirlik Yüzde üzerine dokunun ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• Gradyan Konumu: Merkez
• Gradyan Tekrarı: HAYIR
• Gradyan Birimi: Yüzde
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Eliptik gradyan türünün ikinci örneği

İkinci örneğimiz degrade boyunca birçok ince dairesel çizgi yerleştirir.

İki rengi vardır. en başbakan 92,158,82,0.76pt konumunda rgba(34)'dir. en ikinci 0,10,4,0.76pt konumunda rgba(39)'dır.

• Gradyan Durakları:
  • 34pt: rgba(92,158,82,0.76)
  • 39pt: rgba(0,10,4,0.76)

değiştir Tip Eliptik olarak degradeyi ayarlayın ve Kullanım Şekli Solda. bu da var tekrar et. Değiştirbirlik noktalar halinde. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• Gradyan Konumu: Sağ
• Gradyan Tekrarı: EVET
• Gradyan Birimi: Nokta (pt)
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Eliptik gradyan türünün üçüncü örneği

Üçüncü örneğimiz degradeye çok sayıda yarım daire yerleştirir.

Bunun iki rengi var. en başbakan 32,68,35,0.73vmin konumunda rgba(34) 'dir. en ikinci 0,10,4,0.76vmin konumunda rgba(39)'dir.

• Gradyan Durakları:
  • 34vmin: rgba(32, 68, 35, 0.73)
  • 39vmin: rgba(0,10,4,0.76)

değiştir Tip Eliptik olarak degradeyi ayarlayın ve Kullanım Şekli Yüksek'te. bu da var tekrar et. DeğiştirUnité Minimum Görünüm Alanında. Arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Eliptik
• Gradyan Konumu: Üst
• Gradyan Tekrarı: EVET
• Gradyan Birimi: Minimum Görünüm Alanı (vmin)
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Konik gradyan tipi

Ayrıca bakınız: Divi: Öğeler arasında arka plan geçişleri nasıl oluşturulur?

Konik gradyan tipi, gradyanı koni yukarıdan görülüyormuş gibi bir koni olarak görüntüler.

Konik gradyan tipinin ilk örneği

Bu örnek, degradenin merkezinden sola, bir tarafında açık renkli, diğer tarafında koyu renkli bir çapraz çizgi yerleştirir.

İki rengi vardır. en başbakan %92,158,82,0.76 konumunda rgba(0)'dır. en ikinci rgba(0,10,4,0.76) %50 konumunda.

• Gradyan Durakları:
  • %0: rgba(92,158,82,0.76)
  • %50: rgba(0,10,4,0.76)

değiştir gradyan türü konik olarak. Ayarlayın yön 221 derecenin üzerinde. ortala pozisyon et tekrar etme . Gradyanı görüntünün üzerine yerleştirin.

• Gradyan Türü: Konik
• Gradyan Yönü: 221deg
• Pozisyon: Merkez
• Gradyan Tekrarı: HAYIR
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Konik gradyan tipinin ikinci örneği

Bu örnek öncekine benzer, ancak orta çizgiyi yukarı yerleştirir.

Bunun dört rengi var. en başbakan rgba(20,40,20,0.76) %7 konumunda. renk 2 rgba(30,73,25,0.68) %24 konumunda. renk 3 %103,132,30,0.68 konumunda rgba(65)'dir. bu Quatrieme renk, %38,86,26,0.68 konumunda rgba(85)'dir.

• Gradyan Durakları:
  • %7: rgba(20,40,20,0.76)
  • %24: rgba(30,73,25,0.68)
  • %65: rgba(103,132,30,0.68)
  • %85: rgba(38,86,26,0.68)

tanımlayın gradyan türü konik üzerinde ve yön 0 derecede. ortala pozisyon . doğdu tekrar etme ve resmin üzerine yerleştirin.

• Gradyan Türü: Konik
• Gradyan Yönü: 0deg
• Pozisyon: Merkez
• Gradyan Tekrarı: HAYIR
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Konik gradyan tipinin üçüncü örneği

Son örneğimiz, degradenin üst merkezinden dışarı doğru her yöne doğru bir çizgi patlaması yerleştirir.

Bunun iki rengi var. en başbakan 30,73,25,0.68deg konumunda rgba(5)'dir. en ikinci 20,40,20,0.76deg konumunda rgba(7)'dır.

• Gradyan Durakları:
  • 5 derece: rgba(30,73,25,0.68)
  • 7 derece: rgba(20,40,20,0.76)

Yı kur GradyanTürü Konik ve üzerinde Kullanım Şekli 221 derecede. yerleştirin pozisyon Yukarıdaki. Tekrar et bunu ve arka plan görüntüsünün üzerine yerleştirin.

• Gradyan Türü: Konik
• Gradyan Yönü: 221deg
• Pozisyon: Üst
• Gradyan Tekrarı: EVET
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

DIVI'yı Şimdi İndirin !!!

Sonuç

Bu, Divi's Gradient Builder'daki gradyan türlerinin karşılaştırmasına bakışımızdır. 

Bu örneklerden de görebileceğiniz gibi, ayarlar basittir, ancak bunlardan herhangi biri degrade tasarımında büyük bir fark yaratabilir. 

En iyi sonuçlar için, farklı yönlere ve konumlara sahip degrade türleriyle denemeler yapın ve ne oluşturabileceğinizi görmek için yineleme seçeneğini açıp kapatın.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...