Divi 4'ler ve Divi 5'in Renk Seçicileri Karşılaştırma

Renk, tek bir kelime okunmadan önce tonu ayarlar, ancak geleneksel renk seçicileri gerçek marka tutarlılığını elde etmeyi zorlaştırır. Hassasiyet yerine, genellikle tahminler ve yeterince yakın yaklaşımlar elde edersiniz.

Bu yüzden Divi 5 renk sistemini tamamen yeniden tasarladı. Bu yazıda, doğrudan Divi 4'ün renk seçicisiyle karşılaştıracağız ve ne kadar daha güçlü ve esnek olduğunu göstereceğiz.

Renk Seçicileri Karşılaştırma

Onları yan yana koyun ve yeni arayüzün ne kadar güçlü olduğunu hemen göreceksiniz. Divi 4'ün Renk Seçicisi, tanıdık gökkuşağı spektrumu ve sürükleme-seçme yaklaşımı ile bize iyi hizmet etti.

O beyaz daireyi renk seçmek, onaltılık kodlarla çalışmak ve kaydedilmiş, küresel ve son sekmeler aracılığıyla organize etmek için sürükleyeceksiniz. Renk örneğindeki bu küçük beyaz üçgenler, hangilerinin küresel renkler olduğunu söyledi.

Görünüşün ötesinde, Divi 4'ün renk seçicisinin harika bir temeli vardı. Sihirli renk aracı oldukça akıllıydı, gerçekten birlikte çalışan paletler önermek için sayfa renklerinizden ve son seçimlerinizden çekildi. Bu ritim her seferinde sıfırdan başlar.

Divi 4'ün sınırlandığı yer

Ancak, hepsi mükemmel değildi. Her şey sadece Hex veya RGBA kodlarını kullandı. Mavinizin daha hafif bir versiyonunu elde etmek, tahmin etmek veya başka bir uygulamayı bulmak için kullanmak anlamına geliyordu. Markanız genellikle ana marka renginden% 20 daha koyu veya% 40 daha açık renklere ihtiyaç duyuyorsa, Divi 4 bunu sizin için yapamadı.

Her renk kendi başına yaşıyordu. Renklerin Divi'nin içinde birbirleriyle ilişkili olduğu akıllı renk sistemleri oluşturamazsınız. Uygun kontrast oranları bina divi dışında manuel çalışma aldı.

Divi'nin 5 görsel değişikliği nedir

Divi 5 görsel renk seçicisini tutar, ancak daha birçok seçeneğe sahip hassas kaydırıcılar ekler (bunu daha fazla tartışacağız). Global Sekme, doğrudan Divi'nin renkleri içeren değişken sistemine bağlanan dinamik bir değişken simgesine dönüştü.

Renk renk örnekleri kendileri daha akıllı hale geldi; Aslında size ne tür bir renkle çalıştığınızı ve sisteminize nasıl bağlandığını gösterirler.

Gördüğünüz şey, divi'nin bireysel renk toplamasından bir renk sistemine geçmesidir. Divi 4, "Bu özel maviye ihtiyacım var." Divi 5, “Marka renklerimi tamamen değiştirdiğimde birincil rengimden% 20 daha hafif bir maviye ihtiyacım var ve otomatik olarak güncellemeler”.

Arayüz değişmek zorundaydı çünkü değişti.

Divi 5'in yeni renk seçicisi

Ekibimiz renk sistemini yeniden inşa etti çünkü eski yaklaşım modern tasarım iş akışlarını idare edemedi. Bu yeni seçici, renk tonu, doygunluk ve hafiflik (HSL), göreceli renk ilişkileri ve Divi 5'in değişken sistemi ile derin entegrasyon etrafında merkezlenir.

İzole Onaltılı Kodlarla çalışmak yerine, artık bir rengin değiştirdiği tüm ilgili varyasyonları otomatik olarak güncelleyen bağlı renk aileleri oluşturabilirsiniz. Hue, doygunluk, hafiflik ve opaklık için kesin ayarlamalar yapmanıza izin veren ayrı kaydırıcılar vardır. Arayüz, görsel göstergeler aracılığıyla tam olarak ne tür bir renkte çalıştığınızı gösterir.

Renk renk örnekleri artık kendileri hakkında bilgi gösteriyor. Bir rengin statik bir değer, bir değişken veya hsl modifikasyonları uygulanan göreceli bir renk olup olmadığını görebilirsiniz. Sistem bilmeniz gereken tüm renk ayrıntılarını gösterir.

Yeni sistem gerçekten nasıl çalışıyor

Göreceli renkler bir temel renk değişkeni ile başlar ve varyasyonları uygulamanıza izin verir. Birincil mavi değişkeninizi seçin, hafifliği%20 azaltın ve “Kraliyet Deep Blue” değişkeni olarak kaydedin.

Divi 5'in HSL Renk Seçici Vs Divi 4'ün Renk Seçicisi

Her iki sistem de sitenizdeki renkleri yönetmenize yardımcı olur, ancak tamamen farklı şekillerde çalışır. Bu farkı anlamak, arayüzün neden bu kadar dramatik bir şekilde değişmesi gerektiğini ve yeni yaklaşımın neden binayı hızlandırdığını açıklıyor.

Divi 4'ün küresel renkleri nasıl çalışır?

Divi 4'ün küresel renkleri temel bir palet sistemi gibi çalıştı. Marka mavinizi bir kez kaydedin, ardından tam gölgeye ihtiyacınız olduğunda tıklayın. Daha sonra, bu maviyi farklı bir tane için değiştirin ve sitenizdeki her düğmeyi, başlığı ve arka plan güncellemesini izleyin.

Çoğu insan bu şekilde üç veya dört ana marka rengi kurdu. Onaltılık kodları avlamayı yener veya bağlantılarınız için #2E86C1 veya #3498DB kullanıp kullanmadığınızı hatırlamaya çalışıyor.

Sorun daha sonra sekiz küresel renge sahip olduğunuzda geldi ve neden o gri gölgesini kurtardığınızı hatırlayamadı. Metin için miydi? Sınırlar? Arka plan kaplamaları? Global Renklerin hafızanızı koşacak etiketi veya açıklaması yoktu.

Divi 5 neden tasarım değişkenlerine taşındı?

Tasarım değişkenleri artık sadece renklerden daha fazlasını ele alıyor. Yazı tipleri, boşluk numaraları, görüntüler ve metin dizeleri aynı tedaviyi alır. Her şey farklı panellerin etrafında yüzmek yerine tek bir değişken yöneticide yaşıyor.

Her değişken uygun bir ad ve açıklama alır. “Global Color 3” yerine, buna “başlık metni gri” veya “ince arka plan kaplaması” diyebilirsiniz. Altı ay sonra tam olarak ne için olduğunu bileceksiniz.

Ama işte işler ilginç hale geliyor. Değişkenler birbirine başvurabilir ve ilişkiler oluşturabilir. Birincil yeşenizi temel olarak ayarlayın. Yeşil alan ve parlaklığını azaltan bir “yanmış yosun” oluşturun. Ardından, bu yanmış yosun rengini getiren ve opaklığı%15'e düşüren bir “gölge (yanmış yosun)” oluşturun.

Ve elbette, birincil yeşili turuncu olarak değiştirirseniz üç varyasyon da otomatik olarak güncellenir. Yanmış versiyon, seçtiğiniz renklerden daha az parlak kalır ve gölge buna göre uyarlanır. İlişkiler yapışıyor.

Uygulamadaki temel fark

Global renkler, birden fazla noktada aynı renge sahip olmak anlamına geliyordu. Değişkenler, birbirine uyum sağlayan renk ilişkilerine sahip olmak anlamına gelir. Hover durumları taban renklerine bağlı kalır. Gölge renkleri, rastgele griler olarak yaşamak yerine marka paletinizle ilgilidir. Sistem, ekstra iş yapmak zorunda kalmadan bu bağlantıları korur.

Renk Sisteminizi Divi 4 vs Divi 5'te ayarlayın

Uygun bir renk sistemi oluşturmak, web sitenizin profesyonel görünüp görünmediğini veya rastgele seçeneklerin bir patchwork gibi olup olmadığını belirler. Her iki Divi versiyonu da renklerinizi düzenlemek için yollar sunar, ancak yaklaşımları daha farklı olamazdı. Her sürümde renk sistemleri nasıl oluşturulacağı ve işlemin tasarım iş akışınız için neden önemli olduğu aşağıda açıklanmıştır:

Divi 4'te renkler ayarlamak

Renk seçimleriniz, ziyaretçilerin web sitenizi nasıl deneyimlediğini şekillendirir. Divi 4 renk yönetimi yaklaşımına bir göz atın:

1. Küresel renklerinizi ekleyin

Divi 4'ün renk kurulumu küresel renk sistemine ve manuel organizasyona dayanıyordu. Herhangi bir öğenin renk seçeneklerine giderek başlayacaksınız, ardından “Global” sekmesine giderek, Renk Seçicisinin yanındaki artı simgesini tıklayarak veya üzerine tıklayarak mevcut bir küresel rengi düzenleyerek küresel renkler oluşturacaksınız. Arayüz, doğrudan altıgen kodları girmenize veya renkleri seçmek için görsel seçiciyi kullanmanıza olanak tanır.

Zaten dönüştürmek istediğiniz bir renk uygulaması var mı? Üzerine sağ tıklayın ve “Global'e dönüştürün” seçeneğini seçin. Bu, küresel paletinize tam renk ekler ve modülü küresel sürümü kullanmak için değiştirir. Başından beri küresel bir şey yapmanız gerektiğini fark ettiğinizde çok yararlıdır.

Sihirli Renk Önerileri

Divi 4'ün sihirli renk özelliği, mevcut tasarım seçeneklerinizden koordineli paletler oluşturur. Hangi renklerin birlikte çalıştığını tahmin etmek yerine, bu araç zaten kullandıklarınıza dayanan öneriler yaratır.

Aktif renginizin gözü altındaki üç noktayı (elips) arayın. Bir sürü renk paleti önerisi almak için bu noktaları tıklayın. Divi, sayfanızda zaten hangi renkleri kullandığınıza ve son projelerde ve birlikte çalışması gereken kombinasyonları gösterir.

2. Küresel renklerinizi uygulamak

Bazı küresel renkler ayarladıktan sonra bunları kullanmak oldukça basittir. Bir renk uygulamak istediğiniz herhangi bir modüle tıklayın. Ardından, Tasarım sekmesine gidin ve değiştirmek istediğiniz renk ayarını bulun.

Global renk paletinizi görmek için Global'e tıklayın. Herhangi bir Global Renk Swatch'ı tıklatın ve hemen modülünüz için geçerlidir.

3. Küresel renklerinizi değiştirme

İşte işler ilginç hale geliyor. Global bir rengi değiştirmek istediğinizde, onu kullanan her modülden avlanmanıza gerek yoktur. Her renk ayarına gidin, Global sekmesini tıklayın ve düzenlemek istediğiniz rengi bulun.

Divi 5'te renklerinizi ayarlayın

Divi 5'te uygun bir renk sistemi oluşturmak dört adım alır. Bu yaklaşımı takip etmek, biraz farklı bir gölgeye ihtiyacınız olduğunda eski renk kodlarını tahmin etmenin eski yöntemini yener:

1. Temel renk değişkeninizi oluşturun

Tasarım değişkeni yöneticisini açın ve birincil marka renklerinizi mevcut birincil ve ikincil renk değişkenleri olarak ekleyin. Ayrıca üçüncül veya vurgu renkleri gibi daha fazla renk de ekleyebilirsiniz. Bunlar sizin temel renkleriniz haline gelir. Temel renkleriniz, görsel kimliğinizi tanımlayan ana marka paletinizi temsil etmelidir.

2. tabanınızdan göreceli renkler oluşturun

Artık temel renklerinize bağlı renk varyasyonları oluşturabilirsiniz. Tasarım değişkeni yöneticisine yeni bir renk ekleyin ve temel renginizi seçin.

Ayarlamak için HSL kaydırıcılarını kullanın: Metin için% 25, vücut metni için% 20; Hafifliği vurgu durumları için% 20 artırın veya sessiz arka planlar için doygunluğu değiştirin. Bu varyasyonlara “Derin Turuncu” ve “Parlak Crimson” veya “Hover Durumu (Birincil Renk)”, “Sessiz Arka Plan (İkincil Renk)” gibi açık isimler verin.

Tüm tasarım değişkenleri istiflenebilir, böylece oluşturulanlardan daha fazla renk oluşturabilirsiniz. Hepsi sisteme bağlı kalıyor.

Temel renginizi daha sonra değiştirirseniz, bu ilgili renkler otomatik olarak güncellenir ve ilişkileri sağlam tutar.

3. Elemanlarınıza değişkenleri uygulayın

Değişkenlerinize erişmek için herhangi bir renk alanındaki dinamik içerik simgesini kullanın. Arayüz, her rengin statik, bir değişken mi yoksa HSL modifikasyonlarına sahip göreceli bir renk olup olmadığını gösterir.

Tutarlılığı kıran rastgele tek seferlik renkler oluşturmak yerine organize renk sisteminizden seçim yapın.

Tabanınızdan herhangi birinin veya inşa edilmiş renklerinizin özelliklerini değiştirdiğinizde, bunlardan miras alınan her şey otomatik olarak yeni değişikliklere uyum sağlayacaktır. Bir marka yenilemesine karar verdiğinizde renkleri manuel olarak ovalamaya ve değiştirmeye gerek yok.

4. HSL renk değişkenlerine başvuran ön hazırlıklar oluşturma

Belirli tasarım parçaları için seçenek grup ön ayarlarını kullanarak stratejinizi oluşturun. Bu ön ayarlar eleman ön ayarlarından farklıdır. Seçenek Grubu, değişkenlerinizi kullanarak arka plan, sınır veya metin renkleri gibi hedef stil gruplarını hazırlar.

Birincil renginize göre bir gölge renk değişkeni kullanarak bir opsiyon grubu ön ayar olarak bir gölgeyi kaydedin.

Bu ön ayarları sütunlarda, bölümlerde, satırlarda ve modüllerde kullanın.

Farklı renkler için ayrı seçenek grup ön ayarları oluşturun: biri vurgu renginizle sınırlar için, diğeri ikincil renginizle metin için vb. Bu ön ayarları diğer stilleri değiştirmeden öğeler boyunca karıştırın.

Eleman ön ayarları, içerik ve tüm stiller dahil tam modül kurulumlarını kaydeder. Bir öğe hazır ayarlama stilli bir düğme için ön ayarlar, kullanılan grup ön ayarlarında ve kullanılan renk değişkenlerine kilitlenir. Anında uygulamak size aynı düğmeyi verir.

5. Sitenizde Renkler Yayınlayın

Extend öznitelikleri özelliği, tasarım özelliklerini öğeler arasında kopyalamanıza izin vererek bunu daha da ileri götürür. Değişkenlerinizi kullanarak bir simgenin renk şemasını mükemmelleştirdiğinizde, bu öznitelikleri satır, sayfanız veya tüm sitenizdeki diğer simgelere genişletebilirsiniz.

Bu, manuel çalışma olmadan tutarlı stil yayarken renk ilişkilerinizi korur.

Divi 5'in bulunma ve değiştirme özellikleri, mevcut siteler için dönüşümlü statik renklerle dönüşüm işlemini hızlandırır. Herhangi bir renk alanını sağ tıklayın ve "Bul ve Değiştir" i seçin.

Kapsamınızı belirli öğeleri, tüm bölümleri veya tüm sayfayı hedefleyin. “Değiştir” altında, Global sekmesinden yeni değişkeninizi seçin. Bu rengin her örneğini değişkeninizle değiştirmek için “Bulunan Tüm Değerleri Değiştir” i kontrol edin.

Bu, eski tasarımları yeni renk sistemine taşırken mükemmel çalışır. Saniyelerde düzinelerce benzer ancak aynı olmayan portakalları bir tutarlı değişkenle değiştirebilirsiniz.

Tüm yönler birlikte çalışır: Renk değişkenlerinizi oluşturun, mevcut tutarsızlıkları temizlemek için Bul ve Değiştirini kullanın, ardından yeni bölümler oluştururken tasarım standartlarını korumak için özetleri kullanın. Ardından, stiller seçenek grubu ve eleman ön ayarları kullanılarak kolayca uygulanabileceğinden, sayfaları normal olarak oluşturun.

Yeni renk seçici iş akışınıza uyacak

Divi 5'in renk sistemi, projeleri yıllarca yavaşlatan iş akışı sorunlarını giderir. Artık doğru gölgeyi bulmak için harici araçlar kullanmanız gerekmiyor. HSL kaydırıcıları, inşaatçıyı terk etmeden size hassas kontrol sağlar.

Renk kararlarınız tasarım değişkenleriyle bağlantılı kalır. Birincil marka renginizi değiştirdiğinizde, ilgili renkler ilişkilerini korurken otomatik olarak güncelleyin. Bu, göz tarafından oluşturduğunuz her mavi varyasyonu manuel olarak avlar.

Bugün Divi 5'teki yeni renk sistemini deneyin!