Birkaç gradyan rengi kolayca birleştirmek için divi gradyan oluşturucu nasıl kullanılır
Divi’nin yeni gradyan üreticisi, istediğiniz her türlü gradyan arka planını oluşturan güçlü bir araçtır. Kullanımı kolay ve çekici ve benzersiz bir gradyan yapmak için bazı renkler ekleyebilirsiniz. Bununla birlikte, daha fazla renk eklemek tasarım sürecinde daha fazla düşünce gerektirebilir. Bu yazıda, kendi çok renkli gradyanınızı yapmaya başlamanıza yardımcı olmak için bazı gradyan renklerini kolayca birleştirmek için Divi gradyan oluşturucusunu nasıl kullanacağımızı göreceğiz. Gradyanın ilk birkaç renginin önizlemesi, bu öğreticide ne yapacağımızı görelim. Aynı düzeni kullanarak dört farklı gradyan yapacağız.
İlk Örnek Sonuçlar
Yumuşatan renkleri deneyin, aynı seviyede çeşitli yumuşatma tonlarını deneyin. Bu, ikisi arasında kontrast tutarken daha fazla renk verir. Pastel bunun için iyi bir örnektir. Bu, arka arka planı rahatsız etmeden arka planınıza bazı renk tonları verir. Bu yöntemi ikinci örneğimizde kullanacağız. Okunabilirlik önceliklendirin Her zaman tasarımınızda okunabilirliğe öncelik verin. Gradyanınızla renkler ve desenler tasarlarken, içeriğinizin her zaman okunduğundan emin olun. Bunu yapmanın bir yolu, gradyanı ekranın bir tarafına itmektir. Bu, içeriği engellemeden önemli bir gradyan tasarlamanızı sağlar. Bu yöntemi üçüncü örneğimiz için kullanacağız. Hardliner ve yumuşak tonlar yapmak için gradyanları karışık gradyanlarla kesişen birleştirme ve harmanlanmış gradyanları kullanın. Bu, içeriğinizi engellemeden ilginç bir model yapabilir. Düzeniniz için en uygun olanı görmek için farklı gradyanların yönünü ve durdurma noktasını deneyin. Bir daire, zorluk ve daha fazlası yapmak için bu ayarı kullanın. Bu yöntemi üçüncü örneğimiz için de kullanacağız. Benzersiz sonuçlar elde etmek için çeşitli gradyan türleri ile farklı türde gradyan deneyleri kullanın. Örneğin, koni benzersiz bir görünüm oluşturmak ve farklı gradyan renkleriyle his oluşturmak için iyi bir gradyan türüdür. Dördüncü örneğimizde konileri kullanacağız.
Çok fazla renk kullanmayın, sadece daha fazla renge sahip olmak için daha fazla renk kullanmayın. İki ila üç renk genellikle idealdir, ancak dikkatli iseniz daha fazla kullanabilirsiniz. Daha fazla renk kullanırken, kontrast değil, zıt bir renk haline gelmesi için mümkün olduğunca yakın tutun. Renkleri seçmeyin Rastgele içeriğinize ve web sitenize uygun renkleri kullanın. Bu sadece içeriğinizin okunmasını sağlamakla kalmaz, aynı zamanda web sitesine ait gibi görünür. UX’in her zaman kullanıcı deneyimini düşünün. Ne kadar iyi çalıştığını görmek için gradyanı içerikle kontrol edin. Bazı kullanıcılardan onlar için iyi çalıştığından emin olmak için içeriği ve gradyanı görmelerini isteyin. Gradyanızı test edin, en iyi sonuçları elde edenleri görmek için A/B testi ile çeşitli türleri ve renkleri deneyin. Bazı gradyan renkleri örnekleri şimdi, gradyan üreticilerinin bazı örneklerine bakalım. Bu örnek için, Divi’de bulunan serbest zemin düzen paketi hakkında kahramanı sayfadan değiştirdim. Ona yeni bir arka plan rengi, #6294D1 ve yeni düğme rengi #C1FFF4 verdim.
Arka plan rengi: #6294D1
Düğme rengi: #c1fff4
İlk Divi Gradient Builder ile bazı gradyan renkleri nasıl yapılır, Divi gradyan üreticisinde nasıl ayarlanacağına bakalım. Bölümün arka planına degradeler ekleyeceğiz. Başlamak için Bölüm Ayarları simgesini tıklayın.
Ardından, arka plana doğru kaydırın. Arka Plan gradyanı sekmesini seçin ve Arka Plan Gradyan Ekle’yi tıklayın. Gradyan iki renkle başlar. Rengi değiştirmek ve yeni başlangıç konumuna sürüklemek için gradyan duraklarındaki gradyanı seçin. İstediğiniz kadar gradyan ekleyin. Daha fazla ekleyebilir, kaldırabilir, düzenleyebilirsiniz, vb. Divi gradyan oluşturucunun ayrıntılı genel bakışları için, DIVI için Gelişmiş Gradyan Oluşturucusunu tanıtan makaleye bakın. Bazı gradyan renkleri ilk örneğimiz için bir örnek olarak, dört gradyan durağı yapacağız. Arka Plan Gradyan sekmesini açın ve birinci gradyanı seçin. Gradyan konumunu% 0’da bırakın ve gradyan rengini #6294D1 olarak değiştirin. Gradien ilk noktayı durdurur:% 0 Renk: #6294D1
Ardından, gradyan durdurma çubuğunu tıklayarak yeni bir renk durağı ekleyin. Gradyan konumunu% 29’a taşıyın ve rengi #B5BFD1 olarak değiştirin,
Gradien ikinci noktayı durdurur:% 29
Renk: #B5BFD1 Ardından, üçüncü gradyan durağını ekleyin ve konumu%84’e taşıyın. Rengi #8EACD1 olarak değiştirin.
Gradien üçüncü nokta pozisyonu:% 84
Renk: #8eacd1 Son olarak, dördüncü gradyan durdurma rengini #b5bfd1 olarak değiştirin. Bu gradyan konumunu%100 olarak bırakacağız.
Gradyan Durdurma Pozisyonu Dördüncü Nokta:% 100
Renk: #B5BFD1 Ardından, gradyan ayarlarını ayarlayacağız. 225deg yönünü değiştirin. Kalan ayarları varsayılan olarak bırakın. Görebilmeniz için bu ayarları buraya ekleyeceğim. Artık modül ayarlarını kapatabilir ve işinizi kaydedebilirsiniz.
Tür: Doğrusal
Yön: 225deg
Gradient tekrar: Hayır
Gradyan Birimi: Yüzde
Gradyanı arka plan görüntüsünün üzerine yerleştirin: İkinci örneğimiz için gradyan örneğinin bazı renkleri değil, üç gradyan durağı yapacağız. Arka plan gradyan ayarlarını açın ve rengi birinci gradyan durağından #bffffc olarak değiştirin. Pozisyonu%0’da bırakın.
Durdur pozisyonu ilk gradyan:% 0
Renk: #bffffc
Yeni bir gradyan işten çıkarma ekleyin ve pozisyonunu%42’ye taşıyın. Rengi #BBC7F9 olarak değiştirin.
Renk: #BBC7F9
Ardından, rengi üçüncü gradyan durağından #ADBDD1 olarak değiştirin. Gradyan konumunu%100 olarak bırakacağız. Durdur Pozisyon Üçüncü Degrade:% 100
Renk: #ADBDD1
Ardından, gradyan tipini dairesel olarak değiştirin. Kalan ayarları varsayılan olarak bırakın. Bu, bölümün ortasında sıcak bir nokta oluşturur. Ayarlarınızı kapatın ve çalışmanızı kaydedin. Gradyan Türü: Dairesel
Bazı gradyan renkleri üçüncü örneğimiz için üçüncü örneğimiz için, gradyanımızı oluşturmak için üç gradyan durağı kullanacağız. Birinci gradyan konumunu% 15’e taşıyın ve rengi #afc3ed olarak değiştirin.
Durdur pozisyonu ilk gradyan:% 15 Renk: #afc3ed
Ardından, ikinci gradyan durağını% 33’e taşıyın ve rengi #ADBDD1 olarak değiştirin. İkinci gradyan durdurma konumu:% 33
Renk: #bffffc
Ardından, üçüncü gradyan durağını ikinci gradyan durağının hemen üzerinde%33’e taşıyın ve rengi #ADBDD1 olarak değiştirin. Bu, gradyan durdurma çubuğunda iki gradyan var gibi görünecektir. Durdur Pozisyon Üçüncü Degrade:% 33
Renk: #ADBDD1
Bu, ayarlarla yapacağımız ilginç bir kemer olacak. Gradyan tipini dairesel ve gradyan konumunu sağa değiştirin. İş ayarlarınızı kapatın ve çalışmanızı kaydedin. Tür: Sirküler: Doğru
Bazı gradyan renkleri Örnek Dört dördüncü örnek beş gradyan durağı içerir. İlk gradyan durması için rengi #878EBC olarak değiştirin. Bunu pozisyon için% 0’da bırakın.
Durdur pozisyonu ilk gradyan:% 0 Renk: #878EBC
İkinci gradyan durağını%22’ye ekleyin. Rengi #A0C1D6 olarak değiştirin.
İkinci gradyan durdurma konumu:% 22 Renk: #A0C1D6
Ardından, üçüncü gradyan durağını%48’e ekleyin. Rengi #bffffc olarak değiştirin.
Durdur Pozisyon Üçüncü Degrade:% 48 Renk: #bffffc
Dördüncü gradyan durağımız için% 73 konuma getirin ve rengi #d3d8ff olarak değiştirin.
Dördüncü gradyan durma konumu:% 73 Renk: #D3d8ff
Gradyanın beşinci işten çıkarılması için% 77 konuma taşıyın ve rengi #C6DFFF olarak değiştirin.
Beşinci gradyan durma konumu:% 77 Renk: #c6dffff
Son olarak, gradyan tipini konik olarak değiştirin ve gradyan yönünü 233deg olarak değiştirin. İş ayarlarınızı kapatın ve çalışmanızı kaydedin.
Tür: Koni Yön: 233deg
Bazı gradyan renk sonuçları ilk örnek sonuçları
İkinci Örnek Sonuçlar Üçüncü Örnek Sonuçlar
Dördüncü Örnek Sonuçlar
