Çoklu Degrade Renklerini Zahmetsizce Karıştırmak için Divi Degrade Oluşturucu Nasıl Kullanılır

Divi'nin yeni Gradient Builder'ı, istediğiniz her tür degrade arka planı oluşturan güçlü bir araçtır. Kullanımı kolaydır ve ilginç ve benzersiz degradeler oluşturmak için birden çok renk ekleyebilirsiniz. Ancak, daha fazla renk eklemek, tasarım sürecinde daha fazla düşünmeyi gerektirebilir. Bu gönderide, kendi çok renkli degradelerinizi oluşturmaya başlamanıza yardımcı olmak için birden fazla degrade rengi zahmetsizce karıştırmak için Divi Gradient Builder'ın nasıl kullanılacağını göreceğiz.

Çoklu Degrade Renkleri Önizlemesi

İlk olarak, bu eğitimde ne inşa edeceğimize bir göz atalım. Aynı düzeni kullanarak dört farklı degrade oluşturacağız.

İlk Örnek Sonuçlar

İkinci Örnek Sonuçlar

Üçüncü Örnek Sonuçlar

Dördüncü Örnek Sonuçlar

Birden Çok Degrade Renklerini Birleştirmek İçin En İyi Uygulamalar

Tüm tasarım ilkeleri gibi, birden çok degrade rengi birleştirirken akılda tutulması gereken birkaç şey vardır. Web siteniz için en iyi görünümü ve hissi elde etmek için birden çok gradyan rengini birleştirirken aklınızda bulundurmanız gereken birkaç şey.

Renk Ailelerine Odaklanın

Aynı rengin farklı tonlarını kullanırken aynı renk ailesinde kalın. Bu, arka plan renkleri arasında daha düşük bir kontrast tutar ve arka planın fazla dikkat dağıtmasını engeller. İlk örneğimiz için bu tekniği kullanacağız.

Tonlanmış Renkleri Deneyin

Aynı seviyede tonlanmış renklerin çeşitli tonlarını deneyin. Bu, aralarındaki kontrastı düşük tutarken size daha fazla renk verir. Pasteller buna iyi bir örnektir. Bu, arka planınıza ön plandan dikkati dağıtmadan birden fazla renk tonu verir. İkinci örneğimizde bu yöntemi kullanacağız.

Okunabilirliğe Öncelik Verin

Tasarımınızda her zaman okunaklılığı ön planda tutun. Degradelerinizle renk ve desenler tasarlarken içeriğinizin her zaman okunaklı olduğundan emin olun. Bunu yapmanın bir yolu degradeyi ekranın bir tarafına itmektir. Bu, içeriğin önüne geçmeden öne çıkan bir degrade tasarlamanıza olanak tanır. Üçüncü örneğimiz için bu yöntemi kullanacağız.

Kesişen ve Harmanlanmış Degradeler Kullanın

Sert çizgiler ve yumuşak tonlar oluşturmak için kesişen degradeleri harmanlanmış degradelerle birleştirin. Bu, içeriğinizin önüne geçmeden ilginç desenler oluşturabilir. Mizanpajınız için en iyi olanı görmek için farklı yönleri ve eğimli durma noktalarını deneyin. Daireler, sert çizgiler ve daha fazlasını oluşturmak için bu ayarları kullanın. Üçüncü örneğimiz için de bu yöntemi kullanacağız.

Farklı Degrade Türleri Kullanın

Benzersiz sonuçlar elde etmek için farklı degrade türleri ile denemeler yapın. Örneğin konik, farklı degrade renklerle benzersiz bir görünüm ve his yaratmak için harika bir degrade türüdür. Dördüncü örneğimizde konik kullanacağız.

Çok Fazla Renk Kullanmayın

Sırf daha fazla renge sahip olmak için daha fazla renk kullanmayın. Genellikle iki ila üç renk idealdir, ancak dikkatli olursanız daha fazlasını kullanabilirsiniz. Daha da fazla renk kullanırken, keskin kontrastlar yerine gölgeler olmaları için onları mümkün olduğunca benzer tutun.

Renkleri Rastgele Seçmeyin

İçeriğiniz ve web sitenizle uyumlu renkler kullanın. Bu yalnızca içeriğinizi okunaklı kılmakla kalmaz, aynı zamanda web sitesine ait gibi görünür.

UX'i hatırla

Her zaman kullanıcı deneyimini göz önünde bulundurun. Ne kadar iyi çalıştığını görmek için üzerinde içerik bulunan gradyanı kontrol edin. Onlar için iyi çalıştığından emin olmak için birkaç kullanıcının içeriğe ve degradeye bakmasını sağlayın.

Degradelerinizi Test Edin

Neyin en iyi sonuçları aldığını görmek için a/b testiyle birden fazla degrade türü ve rengi deneyin.

Çoklu Degrade Renk Örnekleri

Şimdi birkaç Gradient Builder örneğine bakalım. Bu örnekler için, Divi'de bulunan ücretsiz Flooring Layout Pack'in Hakkında Sayfasındaki kahramanı değiştirdim. Ona yeni bir arka plan rengi, #6294d1 ve yeni bir düğme rengi, #c1fff4 verdim.

• Arka Plan Rengi: #6294d1
• Düğme Rengi: #c1fff4

Divi Gradient Builder ile Çoklu Gradyan Renkleri Nasıl Oluşturulur

Öncelikle Divi Gradient Builder'da ayarlamaların nasıl yapıldığını görelim. Gradyanı bir bölümün arka planına ekleyeceğiz. Başlamak için bölümün ayarlar simgesine tıklayın.

Ardından, Arka Plan seçeneğine ilerleyin. Arka Plan Degradesi sekmesini seçin ve Arka Plan Degradesi Ekle'yi tıklayın.

Degrade iki renkle başlar. Renklerini değiştirmek için Degrade Durakları çubuğundaki degradeleri seçin ve onları yeni bir başlangıç ​​konumuna sürükleyin. İstediğiniz kadar degrade ekleyin. Daha fazlasını ekleyebilir, silebilir, düzenleyebilir vb.

İstediğiniz tasarımı elde etmek için Tür , Yön , Tekrar , Birim ve arka plan görüntüsü üzerinde isteyip istemediğinizi ayarlayın.

Divi Gradient Builder'a ayrıntılı bir genel bakış için Divi için Advanced Gradient Builder'a Giriş makalesine bakın.

Çoklu Gradyan Renkleri Örnek Bir

İlk örneğimiz için dört gradyan durağı oluşturacağız. Arka Plan Degradesi sekmesini açın ve ilk degradeyi seçin. Degrade Konumunu %0'da bırakın ve Degrade Rengini #6294d1 olarak değiştirin.

• Gradyan Birinci Nokta Konumunu Durdurur: %0
• Renk: #6294d1

Ardından, Degrade Durdurma çubuğuna tıklayarak yeni bir renk durağı ekleyin. Gradyan Konumunu %29'a taşıyın ve Rengini #b5bfd1 olarak değiştirin.

• Gradyan İkinci Nokta Konumunu Durdurur: %29
• Renk: #b5bfd1

Ardından, üçüncü Gradient Stop'u ekleyin ve Konumunu %84'e taşıyın. Rengini #8eacd1 olarak değiştirin.

• Gradyan Üçüncü Puan Konumunu Durdurur: %84
• Renk: #8eacd1

Son olarak, dördüncü Gradyan Durağının rengini #b5bfd1 olarak değiştirin. Bu Gradyan Konumunu %100'de bırakacağız.

• Gradyan Durur Dördüncü Nokta Pozisyonu: %100
• Renk: #b5bfd1

Ardından, degradenin ayarlarını ayarlayacağız. Yönü 225deg olarak değiştirin. Ayarların geri kalanını varsayılanlarında bırakın. Bu ayarları görebilmeniz için buraya ekleyeceğim. Artık modülün ayarlarını kapatabilir ve çalışmanızı kaydedebilirsiniz.

• Tür: Doğrusal
• Yön: 225deg
• Gradyan Tekrarı: Hayır
• Gradyan Birimi: Yüzde
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Hayır

Çoklu Gradyan Renkleri Örnek İki

İkinci örneğimiz için üç degrade durağı oluşturacağız. Arka Plan Degradesi ayarlarını açın ve ilk degrade durağının Rengini #bffffc olarak değiştirin. Konumunu %0'da bırakın.

• Birinci Gradyan Durma Konumu: %0
• Renk: #bffffc

Yeni bir eğim durağı ekleyin ve Konumunu %42'ye taşıyın. Rengini #bbc7f9 olarak değiştirin.

• İkinci Gradyan Durma Konumu: %42
• Renk: #bbc7f9

Ardından, üçüncü degrade durağının Rengini #adbdd1 olarak değiştirin. Gradyan Konumunu %100'de bırakacağız.

• Üçüncü Derece Durdurma Konumu: %100
• Renk: #adbdd1

Ardından, Degrade Türünü Dairesel olarak değiştirin. Ayarların geri kalanını varsayılanlarında bırakın. Bu, bölümün ortasında bir sıcak nokta oluşturur. Ayarlarınızı kapatın ve çalışmanızı kaydedin.

• Gradyan Türü: Dairesel

Çoklu Gradyan Renkleri Örnek Üç

Üçüncü örneğimizde, gradyanımızı oluşturmak için üç gradyan durağı kullanacağız. İlk degradenin Konumunu %15'e taşıyın ve Rengini #afc3ed olarak değiştirin.

• Birinci Gradyan Durma Pozisyonu: %15
• Renk: #afc3ed

Ardından, ikinci degrade durağını %33'e getirin ve Rengini #adbdd1 olarak değiştirin.

• İkinci Gradyan Durdurma Konumu: %33
• Renk: #bffffc

Ardından, üçüncü degrade durağını doğrudan ikinci degrade durağının üzerine %33'e getirin ve Rengini #adbdd1 olarak değiştirin. Degrade Durdurma çubuğunda iki degradeniz varmış gibi görünecektir.

• Üçüncü Derece Durdurma Konumu: %33
• Renk: #adbdd1

Bu, ayarlarla oluşturacağımız ilginç bir kemere sahip olacak. Degrade Türünü Dairesel ve Degrade Konumunu Sağa değiştirin. Ayarları kapatın ve çalışmanızı kaydedin.

• Tür: Dairesel
• Pozisyon: Sağ

Çoklu Gradyan Renkleri Örnek Dört

Dördüncü örneğimiz beş gradyan durağı içerir. İlk degrade durağı için, Rengi #878ebc olarak değiştirin. Pozisyon için bunu %0 olarak bırakın.

• Birinci Gradyan Durma Konumu: %0
• Renk: #878ebc

İkinci eğim durağını %22'lik bir Konumda ekleyin. Rengini #a0c1d6 olarak değiştirin.

• İkinci Gradyan Durdurma Konumu: %22
• Renk: #a0c1d6

Ardından, üçüncü eğim durağını %48'lik bir Konumda ekleyin. Rengini #bffffc olarak değiştirin.

• Üçüncü Derece Durdurma Konumu: %48
• Renk: #bffffc

Dördüncü degrade durağımız için, onu %73 Konumuna yerleştirin ve Rengini #d3d8ff olarak değiştirin.

• Dördüncü Derece Durdurma Konumu: %73
• Renk: #d3d8ff

Beşinci degrade durağı için %77 Konumuna taşıyın ve Rengi #c6dfff olarak değiştirin.

• Beşinci Gradyan Durma Konumu: %77
• Renk: #c6dfff

Son olarak, Gradient Type'ı Conical olarak değiştirin ve Gradient Direction'ı 233deg olarak değiştirin. Ayarları kapatın ve çalışmanızı kaydedin.

• Tür: Konik
• Yön: 233 derece

Çoklu Degrade Renk Sonuçları

İlk Örnek Sonuçlar

İkinci Örnek Sonuçlar

Üçüncü Örnek Sonuçlar

Dördüncü Örnek Sonuçlar

Çoklu Gradyan Renkleri Üzerindeki Düşünceleri Bitirme

Bu, birden fazla degrade rengi zahmetsizce karıştırmak için Divi Gradient Builder'ın nasıl kullanılacağına bakışımız. Gradient Builder ile oynamak eğlencelidir. İstediğiniz kadar renk ekleyebilirsiniz, ancak birlikte harika görünmeleri için birkaç basit tasarım ilkesini izlemeniz gerekir. Bu örnekler, degradenizi oluşturmak için üç ila beş renk kullanmanın ve web sitenizin tasarımıyla iyi çalışmasını sağlamanın ne kadar kolay olduğunu göstermektedir.

Senden duymak istiyoruz. Divi'nin yeni Gradient Builder ile birden çok gradyan rengi oluşturmak için bu yöntemleri kullandınız mı? Yorumlarda deneyiminizi bize bildirin.