Müşterinizin marka renklerini Divi 5 renk sistemine dönüştürmek

Marka renkleri genellikle başlıklar, düğmeler ve arka planlar arasında uygulanan onaltılık kodlar ile başlar. Başlangıçta yeterince basittir, ancak düzen büyüdükçe, genellikle daha hafif renk varyasyonlarına, havada vuruş durumlarına veya tamamlayıcı aksanlara ihtiyacınız vardır. Bunu manuel olarak yönetmek dağınık olabilir.

Divi 5'teki yeni renk sistemi, bir paleti bir kez tanımlamanıza ve ilk renk paletinizden bağlı tonlar oluşturmanıza izin vererek bunu kolaylaştırır. Tasarım gelişse bile her renk senkronize kalır. Bu kılavuzda, her şeyi müşterinizin sitesinde tutarlı tutan esnek, ölçeklenebilir bir renk sisteminin nasıl oluşturulacağını öğreneceksiniz.

Divi 5'in renk sistemini anlamak

Divi 4'teki Global Renklerle çalıştıysanız, bir rengi bir kez tanımlamanın ve sitenize uygulamanın ne kadar yararlı olduğunu zaten biliyorsunuz. Divi 5 aynı fikir üzerinde inşa edilir, ancak bu sefer rengi sizinle birlikte ölçeklendiren eksiksiz bir sisteme dönüştürür.

YouTube kanalımıza abone olun

İşte üç büyük yükseltme:

Tasarım değişkenleri ile başlar. Değişken Yönetici'de Renkler sekmesinin içindeki marka paletinizi tanımlarsınız ve bu değerler sizin temeliniz haline gelir. Tanımlandıktan sonra, herhangi bir modülde veya bölümde kullanıma hazırdırlar. Ve marka çizgiyi geliştirdiğinde, değişkenleri yalnızca tek bir yerde güncellemeniz gerekir. Onlarla bağlantılı her şey kendi başına ayarlanır.

İkinci yükseltme HSL renk filtresidir. Kaydırıcılar, ton ve kontrast ile çalışırken size daha fazla kontrol sağlayarak renk tonu, doygunluk ve hafifliği ayarlamanıza izin verir.

Birincil yeşili bir arka plan için çok sert hissediyorsa, hafifçe yumuşatabilir, parlaklığı ayarlayabilir ve bu versiyonu değişkeni olarak kaydedebilirsiniz. Bu yepyeni bir renk olacak, ancak yine de orijinal renge bağlı.

Bu aynı zamanda izole değerlerden ziyade ilişkilerde düşünmek için alan açar. Değişkenleri birbirine bağlayabilirsiniz, böylece biri daha koyu, daha hafif, biraz daha sıcak veya daha bastırılmış gibi diğerinden belirli bir mesafe kalır. Bunlara üçüncü gelişme olan göreceli renkler denir.

Örneğin, bir vuruş rengi birincilden% 20 daha koyu olarak tanımlanabilir. Birincil renk değişirse, vurgu durumu manuel ayarlamalara ihtiyaç duymadan ilişkisini korur.

Bu üç bölümlü sistem esnek ve topraklanmış bir çalışma renk sistemi oluşturur. Her seferinde sadece bir modül renk uygulamakla kalmıyorsunuz; Tasarımınızı tutarlı ve temiz tutarken gerektiği gibi kayabilecek bir palet inşa ediyorsunuz.

Divi'nin yeni renk sistemi hakkında her şeyi öğrenin

Şimdiye kadar onaltılık kodlara güveniyorsanız, iş akışının sınırlı hissetmeye başladığı nokta budur. Ve bu, geleceğe hazır bir renk sistemine kaymak için işaretiniz.

Müşterinizin marka renklerini Divi 5 renk sistemine dönüştürmek

Artık Divi 5'in renk sisteminin nasıl çalıştığını bildiğinize göre, gerçek bir projede nasıl göründüğünü yürüyelim. Bu örnek için, Divi kütüphanesinden artırılmış gerçeklik ana sayfası düzenini içe aktardık.

Bir senaryo oluşturalım. Bir müşterinin, sitede kullanılan cesur yeşili dengelemek için tamamlayıcı bir renk eklemek istediğini varsayalım. Birkaç noktaya manuel olarak eklemek yerine, düzeni Divi 5'in renk sistemine kaydırma şansı olarak alalım, böylece tekrar sorulursa gelecekte manuel değişiklikler yapmak zorunda değiliz.

Düzene bakarsanız, başlıklar, düğmeler ve aksan öğeleri gibi birkaç yerde aynı yeşilin göründüğünü fark edeceksiniz. Her biri sabit bir hex kodu kullanır. Amacımız, renk değişkenleri olanları değiştirmek ve daha sonra değişikliklere uyum sağlayabilecek bir palet oluşturmaktır.

Normalde, bunun gibi bir düzenin güncellenmesi, her modülü elle düzenlemek anlamına gelir. Ancak sonraki birkaç adımda, daha kararlı bir şey oluşturmak için renk değişkenleri, HSL filtreleri ve bağlı renk mantığı kullanacağız. Aynı düzeni takip edebilir veya projenizi bir temel olarak kullanabilirsiniz.

1. Müşterinizin birincil rengini tasarım değişkeni olarak kaydedin

Müşteriniz yeni bir Hex kodu paylaşıyorsa veya mevcut bir marka rengine bağlı kalıyorsanız, ilk adım tasarım değişkeni yöneticisine eklemektir. Bu, temel renginiz haline gelir ve etrafında inşa ettiğiniz renk varyasyonlarının temeli olacaktır.

Birincil renk eklemek

Başlamak için değişken yöneticiyi açın ve Renkler sekmesine geçin.

Panel zaten birincil, ikincil, başlık ve vücut metni için varsayılan değerler içerebilir. Birincil renk alanında, ana marka rengi için hex kodunu girin ve değişkenleri kaydet'i tıklayın.

İkincil bir renk eklemek

Ardından, bir temel olarak birincil kullanarak bu ikincil rengin göreceli bir versiyonunu oluşturacağız. Bu şekilde, taban renginde gelecekteki herhangi bir değişiklik otomatik olarak devam edecektir.

Bu örnekte, mevcut yeşili dengelemek için tamamlayıcı bir renk eklediğimiz için, bunu ikincil renk olarak atayacağız. Düzenin arka planı siyahtır, bu yüzden bu eşleşme açıkça göze çarpmaktadır.

Şimdilik sadece bir renkle çalışıyorsanız, ikincil yuvayı siyah olarak ayarlamaktan çekinmeyin.

Renk penceresini açmak için ikincil renk renk örneğini tıklayın. Kaydettiğiniz tüm değerler , ilk olarak birincil renk listelenen küresel renkler altında listelenecektir.

Seçin. Bu, başlangıç noktanız olarak taban rengi getirir.

Şimdi, pencereyi yeniden açmak için renk örneğini tekrar tıklayın, ardından Renk Filtreleri açılır menüsünü açın. Bu, renk tonu, doygunluk ve hafifliği ayarlayabileceğiniz HSL kaydırıcılarını ortaya çıkarır.

Yeni rengi şekillendirmek için bu kaydırıcıları kullanın. Ondan memnun olduğunuzda kaydedin. Ve bunun gibi, birinciline bağlı ikincil bir rengin var.

İkincil rengi siyah tutmak isterseniz, ancak yine de birincil olarak bağlayın, hem hafiflik hem de doygunluk kaydırıcılarını -100'e çevirin.

Bunun yerine daha koyu bir gölge oluşturmak için, renk tonu ve doygunluğu olduğu gibi bırakın ve sadece hafifliği azaltın.

Bu noktada özgürce deneyebilirsiniz. Ton tasarımınız için doğru hissedene kadar değerleri ayarlayın. Yeni renk marka paleti ile yumuşak bir şekilde karışıyor veya kontrast olarak öne çıkıyor olsun, birincil ile bağlantılı kalacak ve onunla gelişecektir.

2. HSL ayarlarını kullanarak destekleyici renkler oluşturun

Birincil ve ikincil renkleriniz yerinde olduğunda, bir sonraki adım paleti genişletmektir. Bu destekleyici renkler tasarım odanıza nefes almasını sağlar. Düzen boyunca esneklik, ince kontrast ve görsel ritim eklerler.

Bu varyasyonları oluşturmak için HSL panelini açın ve kaydırıcıları ayarlayın:

• Dikkat çekmeden kontrast gerektiren bölümler veya arka planlar için daha açık tonlar oluşturun.
• Düğmeler, havada uçma durumları veya öne çıkması gereken cesur başlıklar için biraz daha koyu tonlar kullanın.
• Aksan renkleri oluşturmak için renk tonu veya doygunluğu hafifçe değiştirin. Bu renk bölücüler, simgeler veya diğer küçük görsel vurgular için mükemmeldir.

Bunu nasıl bir kez yapacağınızı göstereceğiz ve istediğiniz tüm yeni renkleri tanımlamak için aynı yaklaşımı izleyebilirsiniz. Diyelim ki ikincil rengin bir kaydırma versiyonunu yapmak istiyoruz. Yeni bir renk değişkeni oluşturacağız, net bir ad vereceğiz, tonu doğru almak için kaydırıcıları ayarlayacağız ve kaydedeceğiz.

Değişken kaydedildiğine göre, bunu diğer renkler gibi bir düğmenin gelişim durumuna uygulayabiliriz.

Destekleyici renkler eklerken, onları markanın ton ifadeleri, farklı vurgu, kontrast veya ruh hali yansıtan varyasyonlar olarak düşünmeye çalışın. Örneğin, yumuşak tonlar arka planlar için iyi çalışır, cesur olanlar harekete geçirici mesajlara dikkat çeker ve sessiz tonlar kaplamalar veya ikincil metinler için yararlıdır.

Onaltılık kodları kullanarak tüm bunları manuel olarak teknik olarak oluşturabilirsiniz. Ve sadece tek sayfalık bir site inşa ediyorsanız, bu iyi olabilir. Ancak müşterinizin çekirdek rengi değiştirmek istediği anda, her kısayol sınırlarını göstermeye başlar. Demek istediğimiz, bir web sitesinde kaç yer kullandığınızı izlemezsiniz. Bu senaryoda, bu varyasyonları bağlantılı değişkenler olarak oluşturmak biraz daha fazla zaman alır, ancak yerinde olduklarında, işler ne sıklıkla değişirse değişsin tasarımınızı tutarlı tutarlar.

3. Mevcut statik renkleri değişkenlerle değiştirin

Yeni renk değişkenleriniz kaydedildiğinde, düzen boyunca kullanılan sert kodlu onaltılık değerleri değiştirme zamanı. Bu, statikten dinamike geçmek, sadece tutarlılıkta değil, aynı zamanda tasarımı zamanla korumanın ne kadar kolay olduğu gerçek bir fark yaratmaya başlar.

Halen sabit renk değerlerini kullanarak herhangi bir öğe için düzeni tarayarak başlayın. Bu, düğmeleri, başlıkları, arka planları, simgeleri veya bölüm bölücülerini içerebilir. Marka renginin manuel olarak uygulandığı her yerde artık onu yeni sisteminize bağlama fırsatıdır.

Bunu yapmak için Divi size iki seçenek sunar: öznitelikleri genişletin ve bulun ve değiştirin. Her ikisi de birden fazla öğeyi hızlı bir şekilde güncellemenize izin verir, ancak her biri biraz farklı bir durumda parlar.

• Doğru değişkeni zaten bir öğeye uyguladığınızda ve gerisini eşleştirmek istediğinizde genişletme özniteliklerini kullanın.
• Farklı öğelere uygulansa bile, göründüğü her yerde belirli bir onaltılık değeri değiştirmek istediğinizde bul ve değiştirin.

Özgürlük özellikleriyle başlayalım.

Özgürlük özelliklerini kullanma

Bu örnekte, düzendeki tüm H2'lere yeni ikincil rengi atamak istiyoruz. Onlardan sadece birine uygulayarak başlayacağız.

Bu yapıldıktan sonra, öğeyi sağ tıklayacağız ve öznitelikleri genişleteceğiz. Görünen panelde, kapsamı tüm sayfaya ve öğe türüne metne ayarlarız.

Bir tıklamayla, sayfadaki her H2 aynı ikincil rengi benimser, bu da senkronizasyonda kalacaktır, çünkü bu taban renk değişirse birincil renginize bağlıdır.

Bul ve Değiştir kullanarak

Şimdi, özellikle belirli bir renk değerini sitede değiştirmek istediğinizde iyi çalışan bulup değiştirmeyi deneyelim.

Bu durumda, vücut metni rengini güncellemek istiyoruz. Bunu yapmak için, Ayarlar> Tasarım> Vücut Metni Rengi'ne gideceğiz, sağ tıklayıp Bul ve Değiştir'i seçeceğiz. Ardından , Değer Değeri alanının üzerine gelip yeni değişkenimizi seçeceğiz.

Tüm gereken bu. Bu eski rengin her örneği artık yeni değişkeninizle güncelleniyor.

Burada takip etmeniz gereken tek bir yöntem yok. Extend öznitelikleri, bir modülü manuel olarak güncellediyseniz, bu değişikliği benzer öğeler arasında taşımanın daha hızlı bir yoludur. Hala statik altıgen kodlarıyla çalışıyorsanız ve bunları toplu olarak değiştirmek istiyorsanız, bulun ve değiştirin hızlı bir şekilde hareket etmenize yardımcı olacaktır.

Hangi yaklaşımı temizlemeyi kolaylaştırırsa seçin. Bu yapıldıktan sonra, bu sistemin gerçek faydasını göreceksiniz: sadece bir rengi değiştirdiğinizde tasarımınızın nasıl tepki verdiği.

Yeni renk şemanızı test etmek

Yaptığınız her şey kurmakla ilgiliydi. Şimdi tüm kurulum değerini göstermeye başladığında.

Sisteminiz yerinde olduğunda, birincil rengi değiştirmeyi deneyin. Tüm düzen saniyeler içinde yanıt verecektir - arka planlar, düğmeler, vurgunluk efektleri ve diğer bağlı öğeler anında güncellenecektir.

Gelecekteki güncellemeler de her zamankinden daha kolay. Müşterinizin Neon Green'den daha sıcak bir sarıya kaymak istediğini varsayalım, bu da tüm web sitesini, her sayfayı ve her modülü manuel olarak güncellemek anlamına gelir.

Kulağa acı verici geliyor, ama sizin için değil. Sadece birincil rengi güncellersiniz ve sitenin geri kalanı takip eder.

Ya da belki Kara Cuma ve kırmızı altın siyah bir renk şeması istediler. Birincilini altın bir tona güncellersiniz, ardından ikincisi daha derin bir kırmızıya çevirirsiniz. Düzen, son ayrıntıya anında uyum sağlar.

Bazı durumlarda, marka rengi aynı kalabilir, ancak ikincil bir yenileme gerektirir. Bu sadece HSL kaydırıcılarını ayarlama meselesi. Her düğmeye veya arka plana ayrı ayrı dokunmaya gerek yoktur.

Çok fazla renk çalışması dengeyi korumakla ilgilidir. Çekirdek renk değiştiğinde bile varyasyonları hizalamalı tutarsınız. Bu sistem, adımlarınızı geri çekmeye gerek kalmadan tasarımınızda ton, kontrast ve vurgu kontrol etmenin bir yolunu sunar.

Ve unutmayın, burada yaptığımız şey sadece bir sayfa. Tasarım değişkenleri küresel olduğundan, bu kurulum başlıklar, altbilgiler, blog yayınları, açılış sayfaları ve paletinize bağlı başka bir şey dahil olmak üzere tüm sitenize uzanır.

Bu, mevsimsel bir kampanya, marka yenilemesi veya yeni renk yönü olsun, her gelecekteki güncellemenin tek bir yerden başladığı anlamına gelir. Birkaç değişkeni güncellersiniz ve her şeyin yeni renk şemanızla eşleşmesini izlersiniz.

Divi, renk iş akışınızı geleceğe uygun hale getirir

Mavi bir gölge seçmek zor değil. Zor olan, maviyi düzinelerce modül, düzen, sayfa ve kampanyalar arasında tutarlı tutmak ve süreçte bir şey kırmadan daha sonra güncellemek.

Divi 5 bunu tamamen basitleştirir. Yeni renk sistemi, HSL filtreleri ve tasarım değişkenleri gibi araçlarla, tüm görsel kimliğinizi tek bir yerden yönetebilirsiniz. Her lomanın, her düzende, tutarlı ve güncellenmesi kolay kalacağını bilmek Divi 5'in vaat ettiği şeydir.

Ve bu, son birkaç ay içinde Loop Builder, Flexbox düzeni ve modern web tasarımcıları için tamamen yeniden tasarlanmış bir arayüz de dahil olmak üzere yaptığımız birçok kişiden sadece biri. Henüz keşfetmediyseniz, şimdi mükemmel bir zaman.