Web tasarımında göreceli renkleri anlamak

Web tasarımında, en basit kararlar bile çoğalabilir. Tek bir tasarım seçimi olarak başlayan şey, etkileşimler, arka planlar, sınırlar ve daha fazlası için düzinelerce görsel varyasyona hızla genişler. Yapınız, tutarlı bir sistem olmadan eşleşmeyen değerler ve manuel ayarlarla karıştırılabilir.

CSS'deki göreceli renk sözdizimi daha akıllı, daha ölçeklenebilir bir yaklaşım sunar. Tek bir kaynağa dayalı görsel varyasyonları tanımlamanızı sağlar, tasarımınızı uyumlu ve yönetimi kolay tutar. Normalde, bu özel kod yazmayı gerektirir. Ancak Divi 5 ile bu modern teknikleri en başından beri görsel olarak kullanabilirsiniz. Daha yakından bakalım.

Yaygın renk yönetimi sorunları

Seçtiğiniz mükemmel bir marka rengi, sitenize dağılmış düzinelerce varyasyonla hızla çoğalabilir. İşte bu konuya katkıda bulunan bazı konular:

Tek renk için varyasyonları yönetmek

Bir taban mavisi ile başlıyorsunuz ve hızlıca düzinelerce varyasyona ihtiyacınız var. Sayfa Oluşturucunun Renk Seçicisi bir karmaşa haline gelir. Açık mavi, daha açık mavi, koyu mavi, koyu mavi, soluk mavi - her biri ayrı bir renk olarak kaydedilir.

Marka maviniz sitenizde yirmi farklı tona yayılıyor. Bazı bölümler orijinal maviyi kullanır, diğerleri üç hafta önce yaptığınız daha hafif bir versiyon kullanır ve düğmeleriniz daha iyi kontrast için yaptığınız daha koyu gölgeyi kullanır.

Bu renklerin hiçbiri diğerlerine bağlanmaz. Müşteriniz mavi yerine mor istediğinde, her rengi elle güncellemekle karşılaşırsınız. Modülleri tıklayarak saatler geçireceksiniz. Her gölgeyi avlıyorsun. Umarım kaçırmazsın.

Soldaki birçok benzer mavi tondan oluşan bir koleksiyon, sağda dağınık, ilgisiz morlara dönüşür çünkü bunları tek tek güncellemek sıkıcıdır ve sürekli tutarlılık gerektirir. Dahası, bu renk varyasyonları genellikle göz küresidir ve herhangi bir bağlantısı yoktur.

Opaklık Sorunu

Birçok sayfa oluşturucu, renk kıvamı için bir kabus olabilecek şeffaflık kontrollerini içerir. % 60 opaklık ile mükemmel bir mavi kaplama oluşturabilirsiniz, ancak daha sonra farklı bir bölüm için aynı görme kırmızısına ihtiyacınız vardır.

Sayfa oluşturucunuz tam karışımı hatırlamıyor, bu yüzden opaklık kaydırıcısını göz küresine bırakıyorsunuz ve daha önce yaptığınız şeyleri eşleştirmeye çalışıyorsunuz.

Denemeler 1, 2 ve 3, gölge ve şeffaflık bakımından farklılık gösterir, çünkü göz küresi hassas kontrollerle bile kesin sonuçlar vermez.

Bazı sayfa oluşturucular şeffaf renkleri tasarruf etmenizi sağlar. Diğerleri yapmaz. Sonunda benzer görünümlü gören mavi ile sonuçlanırsınız.

Hepsi biraz farklı. Tasarımınız tutarlılığı kaybeder. Aynı şeffaf rengi çeşitli modüllerde güvenilir bir şekilde yeniden oluşturamazsınız. Her şeffaflığa ihtiyacınız olduğunda, sıfırdan başlarsınız. Opaklık değerlerini tahmin ediyorsunuz. Umarım mevcut tasarımınızla eşleşirler.

Değişkenleri manuel olarak oluşturmak

Çoğu sayfa oluşturucu bir çeşit renk tasarrufu sunar, ancak hızla yönetilemez hale gelir. “Sarı 1”, “Sarı 2” ve “Sarı Işık” gibi jenerik isimlerle renkleri kaydedersiniz.

Altı ay sonra, hangi sarı ne yaptığını bilmiyorsunuz. Kaydedilen renk paletiniz, anlamsız isimlerle benzer görünümlü renklerin karmaşası haline gelir. Renk kütüphaneniz herhangi bir organizasyon sistemi olmadan büyür. Neredeyse aynı görünen üç farklı portakalınız var, ancak çeşitli amaçlara hizmet ediyorlar.

Üst üste binen tonları ve tutarsız, belirsiz isimlere sahip birçok renk renk örneğinin bir ızgarası, organize edilmesi veya etkili bir şekilde kullanılması zor olan dağınık, kafa karıştırıcı bir palete katkıda bulunur.

Ekip üyeleri renk varyasyonlarını ekleyerek farklı isimlerle yinelenen tonlar oluşturur. Markanız turuncu “turuncu”, “marka turuncu”, “birincil turuncu” ve “turuncu Main” olarak var. Kimse hangisini kullanacağını bilmiyor.

Bazı geliştiriciler özel CSS değişkenleri yazarak bunu çözmeye çalışır. Bu onlara renk ilişkileri üzerinde daha iyi kontrol sağlar.

Ama şimdi teknik bir engel yarattınız. Teknoloji olmayan ekip üyeleriniz artık renkleri güncelleyemez ve müşterileriniz basit renk değişiklikleri yapamazlar. Her küçük renk ayarından sorumlu olursunuz.

CSS'de hangi göreceli renkler var (ve neden onlara ihtiyacınız var)

Göreceli renkler renk problemlerinizi çözer. Bir marka rengi seçiyorsunuz. CSS, ihtiyacınız olan tüm sürümleri yapar. Arka planlar için hafif olanlar. Sınırlar için karanlık olanlar. Kaplamalar için net olanlar. Hepsi bir başlangıç renginden.

CSS dinamik bir renk aracı olarak işlev görür. "Bu sarı daha hafif yap." CSS işi yapar. Kırmızı düğmenizin sarkarken solması gerekir. CSS şeffaflığı ekler. Mavi başlığınızın daha koyu bir sınıra ihtiyacı var. CSS hemen yaratır.

Geleneksel iş akışları daha fazla manuel çaba gerektiriyordu. Tasarımcılar Photoshop'ta renk setleri yaptılar. Kodlayıcılar Sass gibi araçlar kullandı. Web sitesi üreticileri eşleşen renkleri tahmin etmek zorunda kaldı. CSS şimdi bunu otomatik olarak ele alıyor.

CSS renklerden renkler nasıl yaratır?

“From” kelimesi CSS'ye mevcut bir rengi başlangıç noktası olarak kullanmasını söyler. CSS'ye bir renk verirsiniz ve bu rengi kullanabileceği parçalara ayırır.

Başlangıç renginiz taban haline gelir. CSS onu parçalara ayırır. Kırmızı miktarlar, yeşil miktarlar, mavi miktarlar. Veya bu kontrolleri tercih ederseniz tonu, parlaklık ve doygunluk.

Herhangi bir renk biçimiyle başlayabilirsiniz. #E91E63 gibi bir altıgen renk kullanın. Kolay parlaklık değişiklikleri için CSS'ye HSL olarak onunla çalışmasını söyleyin. Kodunuzun buna ihtiyacı varsa RGB olarak çıktı. CSS her şeyi otomatik olarak dönüştürür.

Kod basit bir desen izler. İlk olarak, rengi nereden alacağınızı söylersiniz ve sonra bu konuda neyi değiştireceğinizi söylersiniz. Her şeyi aynı tutabilirsiniz, ancak şeffaflık ekleyebilir veya tonunu değiştirebilirsiniz, ancak parlaklığı koruyabilirsiniz. Her ikisi de aynı şekilde çalışır.

Renkleri parçalara ayırmak

Farklı renk formatları size farklı araçlar sağlar. RGB, kırmızı, yeşil ve maviyi ayrı ayrı değiştirmenizi sağlar. HSL size renk tonu, doygunluk ve hafiflik kontrolleri verir.

İşte böyle çalışıyor. RGB yazıyorsunuz ( #FF4081 RGB'den). CSS bu pembe altıgen kodunu alır ve kırmızı, yeşil ve mavi sayılara bölüyor. O zaman bu sayıları istediğiniz gibi kullanabilirsiniz. Desen aynı kalır: renk fonksiyonu (renkli kanal1 kanal2 kanal3'ünüzden).

Yani, sıfırdan renk yazmak yerine, mevcut bir renk üzerine inşa edersiniz ve yalnızca değiştirmek istediğiniz parçaları değiştirirsiniz.

Her bölüm seçtiğiniz şeylere uyacak şekilde dönüştürülür. Bu pembe altıgen size r = 255, g = 64, b = 129 verir. Bunları olduğu gibi kullanın veya calc () ile değiştirin.

Kanalları da karıştırabilir ve eşleştirebilirsiniz. Tüm kırmızı piksellerin aynı olmasını ister misiniz? RGB (var (–Color) GGG'den) kullanın. Bu yeşil değeri alır ve kırmızı, yeşil ve mavi için kullanır, orijinal rengin gri bir ton oluşturur.

Tarayıcı Desteği ve Diğer Hususlar

Büyük siteler ziyaretçileri görmezden gelemez çünkü herkesi ağırlamaları gerekir. Safari'nin eski versiyonları farklı çalışıyor. Chrome versiyonları bazı şeyleri kendi yollarıyla idare eder. Firefox, kendi. Sonunda bir renk efekti için üç farklı kod sürümü yazacaksınız.

Tüm bu ekstra çalışma daha iyi şeylerden uzaklaşır. Sitenin işlevselliğini geliştirebilir ve insanların istediği özellikleri ekleyebilirsiniz.

Birçok geliştirici göreceli renkleri seçici olarak kullanır. Tarayıcıyı kontrol ettiğiniz için dahili araçlar ve kişisel projeler iyi çalışır. Pazarlama siteleri ve müşteri çalışmaları daha dikkatli bir planlamaya ihtiyaç duyar.

Teknoloji desteklendiği yerde harika çalışıyor. Soru, ekstra karmaşıklığın proje zaman çizelgesine ve ekibinize veya müşterinin teknik yeteneğine uyup uymadığıdır. Ancak çoğu durumda, çoğu ekip üyesi için aşırı ve ek yük olacaktır.

Bu yüzden Divi ekibi devreye girdi. Güçlü renk araçlarını kaçırırken tarayıcı uyumluluğu ile mücadele eden web tasarımcılarının gördük. Divi 5'teki çözümümüz göreceli renklerin en iyi kısımlarını alır ve bunları her yerde çalışan ve kodlama gerektirmeyen bir sisteme sarar.

Divi 5 göreceli renkleri nasıl kolaylaştırır?

Şimdi, göreceli renklerin gücünü biliyorsunuz; Ancak, uygulanmasının kolay olmadığını fark etmiş olabilirsiniz. Divi 5 farklı bir yaklaşım benimsedi ve görsel arayüzüne renk esnekliği oluşturdu. Ama Divi'nin tam olarak ne olduğunu öğrenelim.

Divi nedir?

Divi en popüler WordPress sayfa oluşturucudur. Görsel tasarıma öncelik verir ve tasarımınız üzerinde tam kontrol sağlar.

Değişikliklerinizin canlı olduğunu izleyebilir, yazı tipi boyutlarını veya satır aralığını ayarlayabilir ve hemen sayfanızdaki sonuçları görebilirsiniz. İstediğiniz herhangi bir yere giden 200'den fazla modüle erişebilirsiniz. Metin blokları, başlıklar ve içerik parçaları ekip olarak çalışır. Fikirlerinizi garip şekillere sıkan sert şablon yok.

İşte Divi'yi farklı kılan şey: Gerçek işletmeler için 2000'den fazla hazır düzen. Bunlar temel başlangıç şablonları değildir. Her tasarım belirli endüstrileri hedefler. Kitlenizin dilini konuşan ve iş ihtiyaçlarınızı karşılayan düzenler bulacaksınız.

Divi hızlı sitelerle boş sayfa mavilerini atlayın

Divi Hızlı Siteler, projeleri başlamadan önce öldüren boş tuvalleri göz korkutur. Tasarım ekibimizin, başka bir yerde bulamayacağınız orijinal görüntüleri ve sanat eserlerini kullanarak oluşturduğu sağlam tasarıma sahip profesyonel başlangıç web siteleri alıyorsunuz.

Daha kişiselleştirilmiş bir şey istiyorsanız, Divi Quick Siteler, iş detaylarınıza göre özel düzenler oluşturmak için Divi AI ile çalışır. Danışmanlık firmanızı veya restoranınızı tanımlayın ve sektöre özgü içerikle ilgili sayfalar üretir.

Bunlar temel tel çerçeveler değildir: gerçek başlıklar, yazılı içerik ve iş türünüze uygun görüntüler alırsınız. Hatta diğer şeylerin yanı sıra başlıklar ve altbilgiler, ürün sayfaları ve blog yayın şablonları bile tasarlar.

Marka yazı tiplerinizi ve renklerinizi en baştan ayarlayabilir veya AI'nın bunları sizin için seçmesine izin verebilirsiniz. AI bu yönergelerde çalışır. Daha sonra, her şey tamamen düzenlenebilir kalır, böylece tipografiyi kesin ihtiyaçlarınızla eşleşene kadar ayarlayabilirsiniz.

Şimdi AI ile sitenizin tasarımı üzerinde tam kontrol

Tema oluşturucu sizi tüm web sitenizde tasarımdan sorumlu tutar. Marka kişiliğinizi yansıtan özel başlıklar oluşturun. Okuyucuları uzun makalelerle meşgul eden blog düzenleri oluşturun. 404 sayfanız eşleşen yazı tipleri ve stillerle marka kalabilir.

Divi AI, daha önce de belirtildiği gibi, AI'yı tasarım iş akışınızın içine koyar. Onları yazdığınız gibi görünen başlıklar ve marka sesinizi yakalayan ürün açıklamaları oluşturun.

Fotoğraf düzenleme inşaatçının içinde yapılabilir. AI'ya bir görüntüde hangi değişiklikleri istediğinizi söyleyin ve düzenlemeleri ele alır.

Taze görüntülere mi ihtiyacınız var? Bunları da yaratır.

İşinize mükemmel uyan sayfa bölümlerini tamamlayın.

Artı, bunlara ihtiyacınız olduğunda kod parçacıkları.

Divi 5: Bir sonraki evrim

Divi 5, net bir görevle alfa testine girer: web tasarım sürecinizin performansını artırmak için. Sizi neyin yavaşlattığı ve neyin yardımcı olacağı konusunda gerçek geri bildirimleri dinledik.

Mevcut divi hakkında sevdiğiniz her şey kalır. Sadece daha iyi çalışmasını sağladık. Arayüz daha temiz görünüyor. Sayfalar eskisinden daha hızlı yüklenir. Kontroller, onları tıkladığınızda doğru yanıt verir.

Vakfı bugünün web standartlarını kullanarak yeniden inşa ettik. Bu, genel olarak daha az garip böcek ve daha pürüzsüz performans anlamına gelir.

İnşaatçıyla savaşmak ve daha fazla zaman tasarlamak için daha az zaman harcıyorsunuz. Siteleriniz daha profesyonel görünüyor çünkü tutarlılık otomatik olarak gerçekleşiyor. Müşteriler daha iyi web siteleri alır, çünkü teknik problemler yerine ihtiyaçlarına odaklanabilirsiniz.

Alfa sürümü yeni web sitelerinde kullanılmaya hazırdır, ancak mevcut Divi 4 web sitelerinizi Divi 5'e dönüştürmenizi önermiyoruz.

Divi 5'te Yenilikler

Divi 5, web siteleri oluşturma konusunda büyük değişiklikler getirir. Halka açık alfa sürümü şu anda yeni projeler için harika çalışıyor. Geliştirme ekiplerimiz her iki haftada bir yeni özellikler gönderiyor ve Alpha'nın başladığından beri zaten birkaç büyük güncelleme yayınlanıyor.

İşte bazı önemli güncellemeler:

• Modern kod tabanı, yalnızca gerçekten ihtiyacınız olan modülleri yükleyerek işleri hızlandırır ve Divi 4'ü yavaşlatan kod şişmesini kaldırır.
• Tam bir FlexBox düzen sistemi artık yeni satır şablonları, otomatik dikey merkezleme, içerik sarma ve görsel kontroller aracılığıyla aralık dağılımını içeriyor.
• Dinamik içeriğe sahip modülleri, grupları veya bölümleri tekrarlayan ve karmaşık veri yapıları için iç içe döngüleri destekleyen yepyeni bir döngü oluşturucu .
• HSL ile göreceli renkler , ton, doygunluk ve hafiflik değerlerine dayalı dinamik renk kontrolü sağlar.
• HTML-5 tabanlı sistem, kısa kodların tamamen yerini alır , bu da daha az hata ve daha iyi WordPress uyumluluğu anlamına gelir.
• Visual Builder arayüzü, hafif ve koyu modlar, rıhtımlı paneller, sekmeli pencereler, klavye kısayolları ve ekmek kırıntıları ile geliştirilmiş katman görünümü ile eksiksiz bir makyaj yaptı .
• Özelleştirilebilir duyarlı kesme noktaları, Divi 4'ün üç sabit olanı değiştirerek, tasarımların farklı ekran boyutlarına tam olarak nasıl göründüğünü görmek için tuval ölçeklendirme ile daha fazla kontrol sağlar.
• Modül grupları, ilgili elemanları bir araya getiren çok yönlü kaplar gibi çalışır, böylece bunları birim olarak şekillendirebilir veya ilişkileri kaybetmeden hareket ettirebilirsiniz.
• Tasarım değişkenleri, tüm sitenizde küresel olarak renkleri, yazı tiplerini, sayıları, görüntüleri, metinleri ve URL'leri ayarlamanızı sağlar.
• Seçenek Grup Ön Ayarları Tipografi veya farklı modül türlerinde çalışan gölgeler gibi belirli tasarım özelliklerini kaydedin.
• Gelişmiş CSS birimleri artık kod yazmadan görsel arayüz üzerinden CLAMP (), Calc (), Min () ve Max () işlevlerini desteklemektedir.
• Etkileşim sistemi, harici eklentiler olmadan açılır pencereler, geçişler, kaydırma efektleri ve fare hareketi efektleri oluşturur.

Ne geliyor…

• WooCommerce modülleri, tam ön ayarlı ve değişken uyumluluk ile Divi 5 mimarisini kullanarak sıfırdan yeniden inşa edildi.
• Element Müfettişi, gelişmiş kullanıcılar için yeni hata ayıklama ve geliştirme araçları sağlayacaktır.
• Benzer şekilde, grup atlıkarınca modülü, gruplardan oluşan bir atlıkarınca oluşturmanıza yardımcı olabilir, daha sonra istediğiniz herhangi bir stilini tasarlamak için Divi'nin eksiksiz öğelerini kullanarak her slayt için içeriği geliştirebilir.

Kendilerini divi ile ölçeklendiren paletler bina 5

Düzinelerce marka renk varyasyonunuza ihtiyacınız olduğunda renk seçiciniz bir karmaşa haline gelir. Divi 5 bunu her gölgeyi bir taban rengine bağlayarak düzeltir. Aşağıdaki adımlar size ölçeklenebilir ve korunabilir bir renk sisteminin nasıl oluşturulacağını gösterir.

1. Birincil Renk Temelinizi Kurma

Visual Builder'ı açın ve sol kenar çubuğunda değişken yönetici simgesini bulun. Sitenizin renk temelini görmek için tıklayın. Divi 5 zaten sizi bekleyen önceden ayarlanmış renk değişkenleri ile birlikte gelir: birincil, ikincil, başlık ve vücut renkleri.

Bu önceden ayarlanmış değişkenleri silemezsiniz, ancak değerlerini değiştirebilirsiniz. Bu mükemmel çalışıyor çünkü bu dört renk çoğu web sitesini idare ediyor. Birincil renk değişkenine tıklayın ve markanızın ana rengini girin. Bu, sitenizdeki diğer tüm renk varyasyonlarının temeli haline gelir.

Birincil renk değişkeniniz, marka renginizin en doymuş versiyonunu yansıtmalıdır. Daha hafif arka planlar oluşturmadan veya şeffaflık efektleri eklemeden önce saf, seyreltilmemiş versiyon olarak düşünün. Bu, daha sonra varyasyonlar oluştururken size en fazla aralığı verir.

İkincil renk, birincil marka renginizden öne çıkması gereken aksanlar, düğmeler veya vurgular için iyi çalışır. Başlık renginizi arka planınıza karşı iyi okuyan bir şeye ayarlayın. Vücut rengi genellikle okunabilirlik için koyu gri veya siyah kalır.

Bu dört ön ayar değişkeni Divi'nin tüm sistemine bağlanır. Modüller oluşturduğunuzda, bu renkler hızlı seçenekler olarak görünür. Birincilinizi burada maviden yeşile dönüştürün ve bu birincil değişkeni kullanarak her modülü sitenizde anında güncelleştirir.

Erken aşırı özel değişkenler oluşturmaktan kaçının. Bunun yerine, bu dört ön ayarla başlayın. Çoğu web sitesi, Divi 5'in göreceli renk kontrolleri aracılığıyla oluşturulan varyasyonlarla sadece bu temel renklere ihtiyaç duyabilir. Ama elbette, ihtiyacınız varsa, istediğiniz kadar değişken ekleyebilirsiniz.

2. HSL kontrolleri ile renk tonları oluşturma

Şimdi başka bir renk değişkeni ekleyin. Bu sefer, yeni bir taban rengi ayarlamak yerine birincil renginizden bir gölge oluşturacaksınız. Renk Seçici'de listeden birincil renk değişkeninizi seçin.

Şimdi üç kaydırıcı görüyorsunuz: renk tonu, doygunluk ve hafiflik. Bunlar temel renginizin nasıl değiştiğini kontrol eder.

Hue, renk çarkının etrafında 0 ila 360 derece arasında hareket eder. Aynı renkte tonlar yaparken bunu yalnız bırakın. Doygunluk% 0'dan% 100'e gider ve rengin ne kadar canlı göründüğünü kontrol eder. %0 ile herhangi bir renk gri olur. %100 ile tam yoğunluk elde edersiniz.

Hafiflik% 0'dan% 100'e kadar çalışır. Bu kaydırıcı gerçek tonlarınızı oluşturur. 0'da rengin saf formunu alırsınız. Daha açık tonlar için% 50'ye kadar hareket ettirin. Daha koyu tonlar için% -20'ye düşürün.

Gerektiğinde yeni renkler ve varyasyonlar oluşturmak için bu HSL renklerini karıştırabilir ve eşleştirebilirsiniz.

Birincil rengimizin iki varyasyonunu yaratalım. Bir değişken ekleyin ve yeni gölgenize “birincil ışık” veya “birincil karanlık” gibi açık bir şey adlandırın. Birden çok ton oluşturmak için bu işlemi tekrarlayın. Tipik bir kurulum temel birincilinizi arka planlar ve benzeri için% 30 hafiflikte ve% -15 hafiflikte karanlık kullanır.

İkincil rengin için böyle daha hafif ve daha koyu tonlar da ekleyebilirsiniz.

3. Yuvalanmış renk değişkenleri oluşturma

2. adımda birincil ışık ve birincil karanlık yaptınız. Artık bu tonlardan daha fazla renk oluşturabilirsiniz.

“Kart Arka Plan Gölgesi” adlı yeni bir değişken yapın. Birincil ışığınızı listeden seçin. Opaklığı%50'ye düşür. Bu size kart arka planları için zar zor var. Ardından, “Düğme Himbisi” oluşturun. Birincil karanlık seçin. Daha da karanlık hale getirmek için hafiflik% 10'unu düşürün. Şimdi, insanlar üzerlerine doğru ilerlediğinde düğmeleriniz daha koyu bir renk olabilir.

Tonlarınızdan da özel renkler oluşturabilirsiniz. Düğme uçuşunu seçerek “Metin Gölgesi” yapın. Opaklığı%15'e ayarlayın. Şimdi metin gölgeniz, birincil olarak bağlanan birincil karanlığa bağlanan Button Hover'a bağlanır.

Birincil ışıktan “sınır aksanını” deneyin. Daha fazla patlamak için doygunluk% 100'e çarpın. Bu size hala markanızla eşleşen parlak bir sınır sağlar. Her zincir uzar. Beş rengin de birincil seçime kadar uzanıyor.

Seçilebilecek güzel renk seçimi için ikincil renginiz için benzer tonlar ekleyin.

4. Sitenize göreceli renkler uygulamak

Renk temelinizi kurdunuz ve tüm bu tonları yarattınız. Şimdi pratik kısım geliyor: bunları web sitenize uygulamak.

Görsel oluşturucudaki herhangi bir modülü açın. Arka planlar, metin veya sınırlar için bir renk seçeneğine tıklayın. Kaydedilen renk değişkenleriniz hemen renk seçicisinin içinde görünür. İsimleri veya altıgen kodlarını hatırlamanıza gerek kalmayacak.

Ana düğmeler için birincil renginizi seçin. Bölüm arka planları için birincil ışığı seçin. Sınırlar ve CTA düğmeleri gibi ince aksanlar için birincil karanlık kullanın. Her seçim temel renk sisteminize geri bağlanır.

Renk değişkenleriniz her yerde çalışır: başlıklar, altbilgiler, blog düzenleri ve ürün sayfaları. Ekip üyeleriniz ve müşterileriniz tahmin etmeden renkler seçebilir. Seçicide rastgele altıgen kodlar yerine “birincil ışık” görürler. Açık isimler daha az hata ve daha hızlı tasarım çalışması anlamına gelir. Herkes hangi rengin hangi amaca hizmet ettiğini bilir.

Bu değişken tabanlı sistem görsel tutarsızlığı önler. Onlarca benzer maviyi tasarruf etmek veya Hover efektleri için hangi gölgenin kullanılacağını merak etmek zorunda kalmayacaksınız. Değişkenleriniz tasarım esnekliğini korurken size yapı verir.

5. Gerektiğinde renkleri güncelleme

Müşteriniz sadece mavi yerine gece yarısı mavisi istediklerine karar verir. Geleneksel renk yönetimi ile bu, modüllerden saatlerce eleme ve her gölgeyi manuel olarak güncellemek veya aynı anda bir grup küresel rengi güncellemek anlamına gelir. Divi 5'in göreceli renkleriyle, bir değişkeni değiştirirsiniz ve diğer her şey takip eder.

Birincil ışık arka planlarınız açık yeşil hale gelir. Birincil karanlık sınırlar koyu yeşile doğru kayar. Düğme Saklama renkleri daha koyu maviye ayarlanır. Yaptığınız tüm bu iç içe ilişkiler sağlam kalır.

Kart arka plan gölgeniz% 15 birincil ışık opaklığı vardı. Siz dokunmadan yeni yeşil birincil ışığın% 15 opaklığı olur. Metin gölgeniz, birincil olarak bağlanan birincil karanlığa bağlanan Button Hover'a bağlanır.

Eski yol, her seferinde renk uyumunu sıfırdan yeniden yaratmak anlamına geliyordu. Temeli değiştirirken ilişkileri korursunuz ve tasarımınız dengeli kalır.

Renkleriniz, kurallarınız

Tutarsız renk kullanımı iyi tasarımı zayıflatır. Anlamsız isimlerle rastgele tonlar kaydetiyorsunuz, güncellemeler için modüller aracılığıyla avlanıyorsunuz ve müşteriler zihinlerini her değiştirdiklerinde paletleri sıfırdan yeniden inşa ediyorsunuz.

Divi 5'in göreceli renkleri bu iş akışı kabusunu bitirir. Bir temel renkten bir kez oluşturun ve sitenizdeki her varyasyon güncellemesini otomatik olarak izleyin. Sistem tarayıcı uyumluluğunu işler, ilişkileri korur ve renk seçicinizi düzenli tutar, böylece CSS ile oynamanıza gerek kalmaz.

Bir sonraki projeniz daha iyi renk yönetimini hak ediyor. Divi 5'i indirin ve organize tasarımın nasıl hissettiğini görün.