Divi 5 ile bir renk sistemi nasıl oluşturulur

Rastgele renk seçenekleri nadiren uyumlu bir tasarıma yol açar. Web siteleri profesyonel olarak inşa ediyorsanız, kasıtlı bir sisteme ihtiyacınız var. Renk yönetimi ve tasarım değişkenlerini kullanarak Divi 5 içinde gerçek bir renk sistemi oluşturabilirsiniz. Bunlar doğrudan görsel düzenleyiciye ayarladığınız, herhangi bir renk alanına erişebileceğiniz ve diğer birçok kolaylıkla (aşağıda göstereceğiz) geldiğiniz renklerdir.

Bu yazı size Divi 5'te nasıl esnek, ölçeklenebilir bir renk sisteminin kurulacağını gösterecektir.

Renk sistemi nedir?

Renk sistemi temel olarak sitenizde sürekli olarak kullanılan önceden planlanmış bir renk paletidir. Her şeyin rastgele bir araya getirilmesinden ziyade kasıtlı olarak şekillendirilmiş görünmesine yardımcı olur. İyi bir sistem için genellikle gerekir:

• Birincil renk : Ana markalı renk.
• İkincil renk : Birincil ile destekler ve kontrastlar.
• Metin rengi : Başlıklar ve paragraflar için açık ve okunabilir.
• Aksan : Uyarılar, bildirimler ve diğer önemli şeyler için diğer renkler (isteğe bağlı).
• Arka plan renkleri : tipik olarak nötr veya ince renk tonları.

60-30-10 kuralı, web tasarımındaki renk için geçerlidir. Genel olarak, tasarımın%60'ı için nötr renkler (bölüm arka planları ve negatif alan gibi) kullanılır,%30'luk birincil renk ve geri kalan%10 için ikincil/vurgu renkleri kullanılır.

Web Sitesi Renkleri Nasıl Seçilir

Marka renkleri ve web sitenizde kullanılan renkler hafifçe alınma kararları değildir. Amaçlı bir renk paleti oluşturmak, tasarımcınızın becerisine, renk psikolojisine, endüstrisine ve marka farklılaşmasına bağlıdır. Ancak temel renkleriniz ve marka varlıklarınızı (logo varyasyonları gibi) aldıktan sonra, bir tasarım sistemi oluşturmaya başlayabilirsiniz.

Sınırlı tasarım kaynaklarınız varsa web sitenize hazırlanmak için birkaç hızlı görev yapabilirsiniz. İlk olarak, renk psikolojisinin bir cursory okunması yapın. Hangi marka değerlerini iletmek istediğinizi (güven, gençlik, yenilik vb.) Arayın ve bu değerlere göre renkleri eşleştirmeye çalışın. Ardından, marka değerlerinize uyduğunu düşündüğünüz bazı ev tarafından tanınan markalara bakın. Hangi renkleri kullanıyorlar? Bunları web sitelerinde, reklamlarında ve sosyal yayınlarında nasıl kullanıyorlar?

Şirket değerleriniz, yaptığınız iş türüne göre bile belirlenebilir. Çilingirler ve tesisatçılar güvenilir olmalıdır, bu yüzden mavi bunu iletmek için harika bir yoldur. Finansal planlamacılar ve peyzajlar büyüme ve sürdürülebilirlik (kendi alanlarında) ile ilgilenir, bu yüzden yeşil orada iyi bir çapa. Çiçek çiftçileri, çocuk bakım merkezleri ve restoranlar, enerji ve canlılığı markalarına bağlamak için kırmızılara ve sarılara yaslanabilirler. Genel bir fikriniz olduğunda, basit bir palet oluşturmak için serinleticiler gibi bir şey kullanın.

Renk Sisteminizi Divi 5'te İnşa Edin

Divi 5, küresel renkleri ele almanın en kolay yolu olan tasarım değişkeni yöneticisi ile birlikte gelir. İçinde, kutudan çıkmanız için önceden atanmış dört küresel renginiz var. Bunlar:

1. Birincil renk
2. İkincil renk
3. Başlık Metin Rengi
4. Vücut metni rengi

Adım 1: Temel renklerinizi değişken olarak tanımlayın

Divi'nin sol kenar çubuğunda tasarım değişkeni yöneticisini açın. Renkler bölümünü bulun ve bu dört farklı varsayılanı görmelisiniz.

Bu dört etiket silinemez, ancak her birini hangi rengi ayarlayacağınızı seçebilirsiniz. Bu dörde ek olarak, Global Renk Ekle düğmesine tıklayarak istediğiniz kadar renk ekleyebilirsiniz. Devam edin ve renk jeneratöründen renklerin onaltılık değerlerini girin.

Bu değişkenler anında Divi'nin süper kullanışlı görsel inşaatçısında her yerde kullanılabilir. Ama onları kurtardığınızdan emin olun!

Adım 2: HSL renkleriyle gölgeler ve renk tonları oluşturun

Divi'nin HSL filtrelerini kullanarak, renk tonları (renklerimizin daha hafif versiyonları) ve tonlar (renklerimizin daha koyu versiyonları) oluşturabiliriz. Bu proje için sadece birincil ve ikincil renkler için varyasyonlar yapacağız. Bu renk varyasyonlarını oluşturmak için bir renk paleti jeneratörü kullanabilirsiniz.

Buradaki ilk adım başka bir küresel renk yaratmaktır. Bununla birlikte, onaltılık bir değeri yapıştırmak yerine, varyasyonlar (gölgeler ve renk tonları) oluşturmak için mevcut bir renk seçin.

Şimdi, bir varyasyon oluşturmak için o taban rengine bir filtre uygulamamız gerekiyor. Renk çipini tıklayın ve ardından “Rengi Filtre” yi seçin veya yeni göreceli renk değişkeniniz için renk renk örneğini tıklayın.

Bunu renk varyasyonlarınızın her biri için yapın. Renk varyasyonlarınızı tanınabilir adlar verdiğinizden ve kaydettiğinizden emin olun.

Örneğin, birincil renk oldukça karanlık olduğundan, birkaç daha hafif renk tonu ve birkaç koyu ton ekleyebiliriz. Renk sistemimi bir sayfa tasarımına uyguladığımızda bana birçok seçenek sunmalı.

İkincil ve/veya aksan renkleriniz için yukarıdaki adımları tekrarlayın. Bu varyasyonları oluştururken, her zaman bir temel renk seçin ve ardından filtreler uygulayın. Bu şekilde, birincil renginizi değiştirirseniz, bu varyasyonlar davayı takip edecektir.

Renklerinizi Divi ile Tasarımlarda Uygulamak

Değişkenleriniz şimdi var. Onları kullanma zamanı. Boş bir divi sayfasıyla başlayacağız ve sırayla güzel tasarlanmış bir düzene doğru çalışacağız.

1. Adım. Sayfanızın bir tel çerçevesini oluşturun

Renk sisteminizi daha iyi anlamanıza yardımcı olabilecek boş bir sayfa yerine bir tel çerçeveden başlayabilirsiniz. Bir sayfanın genel yapısını ve akışını anladıktan sonra, tasarım seçimlerinizi yapmaya başlayabilirsiniz. Divi'nin birçok önceden hazırlanmış düzen paketinden veya başlangıç ​​sitelerinden birini de kullanabilirsiniz. Zaten tanımlanmış renkleri olup olmadıkları önemli değil; Bunları kolayca değiştirebiliriz.

Bu örnek için, danışmanlık düzen paketini değiştirmeyi ve ana sayfa düzenini kullanmayı seçtik. Benzer bir şey yaparsanız, ön ayarları içe aktarabilirsiniz. Ancak, bu ön ayarlardaki renkleri düzenlemek isteyeceksiniz. Basitlik uğruna, stilleri doğrudan modül/eleman seviyesinde değiştireceğiz.

2. Adım. Tipografi ve Renk

Varsayılan olarak, Divi, metninizi temiz ve okunabilir hale getirerek küresel başlık ve vücut metni renklerinizi kullanır. Modüller veya ön ayarlardaki metin rengi değiştirerek bu önceden belirlenmiş renk seçeneklerini her zaman geçersiz kılabilirsiniz, ancak bunu çok sık yapmanız gerekmez.

Modülde başlık renginin nasıl yazılmadığına dikkat edin. Divi, global rengi otomatik olarak sizin için başlıklara ve gövde metnine atar. Tabii ki, farklı bir renk seçerek geçersiz kılabilirsiniz.

Bağlantıların onları daha belirgin hale getirmek ve tıklamaları çekmek için alabileceğiniz rengi özelleştirebilirsiniz.

Stil yapmak istediğiniz metinle başka modüller (başlık ve metin modüllerinin yanı sıra) olabilir. İletişim formu, geri sayım zamanlayıcısı ve blog modülü gibi modüllerin hepsi renklerin benzersiz bir şekilde uygulanmasını gerektirebilir.

3. Adım. Stil Düğmeleri

Divi'nin düğmeleri varsayılan olarak basittir ve birincil renginizi alır. Ama farklı bir şey istiyorsanız bu karara zorlanmıyorsunuz. Modülün ayarları panelini açın, Tasarım sekmesine gidin ve düğmeyi seçin. Düğme ayarlarının altında "Düğme için özel stilleri kullanın." Arka planınızı küresel tercih renginize ve düğme metninizi beyaz gibi okunabilir bir renge ayarlayın.

Sayfada yan yana veya birden çok düğme varsa, ikincil renginizi veya başka bir aksanınızı kullanarak ikincil bir düğme stili için ayrı bir düğme ön ayarı oluşturabilirsiniz.

Tons ve/veya gölgelerle HOVER durumları oluşturun

Hover devletleri etkileşim ve bir amaç duygusu ekler. Daha önceki renk tonlarınızı ve tonlarınızı Hover Styles ile kullanın. Düğmelerde uygulamak açıktır, ancak başka yerlerde de ustaca kullanılabilir.

Hover durumlarını etkinleştirmek için arka plan renk seçeneğinin yanındaki imleç simgesini tıklayın. Hatta arka plan renginizi ayarlayın. Kullanıcılar düğmenin üzerine geldiğinde, etkileşimi doğal olarak yönlendirerek görsel olarak yanıt verir.

4. Adım. Renk ön ayarları ve gradyanları ile bölümler oluşturma

Divi'deki bölümlerin varsayılan olarak şeffaf arka planları vardır. Bu, ayrılmazsa, genellikle beyaz olarak görünecekleri anlamına gelir. Ana renklerinizden birinin tonuna dayalı olarak nötr renk varyasyonları oluşturarak biraz entrika ekleyebilirsiniz.

Bu arka plan rengi siyaha yakındır, ancak birincil renkle aynı taban tonunu paylaşır ve 'temaya' uyumlu 'uyumu verir.

Renk varyantlarınızı kullanarak gradyanları da deneyebilirsiniz. Buradaki hile, çok fazla renk kombinasyonu kullanmak değil. Renk eşleştirmeleri ve hiyerarşiye dayanan disiplinli, uyumlu bir tasarım istiyorsunuz.

Bu noktada bir hatırlatma. Bu renk eşleşmelerinin ve kararlarının çoğunu ön ayarlara (seçenek grubu veya öğe ön ayarları) kaydetmek istersiniz. Tasarım değişkenlerinizi tasarımınızda ön ayarlar aracılığıyla oluşturduktan ve uyguladıktan sonra, sonraki sayfaları çok daha hızlı oluşturmak için tasarım sisteminizi kullanabilirsiniz. Bu aynı zamanda sitenizde tutarlı tasarım modelleriyle çalışmanızı sağlar.

Ve daha sonra bir rengin biraz kapalı olduğunu belirlerseniz, taban renginin HSL değerlerini ayarlayabilirsiniz ve bu rengin (ve bu renge göre nispeten oluşturulan tüm renkler) tüm örnekleri sizin için değişecektir.

Divi 5 renk sisteminizi sarma

Düşünceli bir renk sistemi, web tasarımındaki en kolay kazançlardan biridir ve Divi 5 size sizin için çalışmasını sağlayacak araçlar sunar. Sadece birkaç adımla:

• Temel marka renklerinizi yeniden kullanılabilir tasarım değişkenleri olarak tanımlayın
• HSL filtreleri ile yararlı tonlara ve renk tonlarına genişletin
• Bunları metin, düğmeler, formlar ve bölümler arasında tutarlı bir şekilde uygulayın
• Her yeni sayfanın aynı kuralları izlemesi için seçimlerinizi ön ayar olarak kaydedin

Geri kazanç estetikten daha büyüktür. Doğru renk sistemi netlik yaratır, ziyaretçileri eyleme doğru yönlendirir ve markanızı sitenizin her köşesinde uyumlu hissettirir. Ve Divi'deki her şey değişken güdümlü olduğundan, bir taban renginde bir ayarlama anında bir site boyunca dalgalanabilir. Bu, daha az uğraşma ve tasarımınızın ölçeklenirken bir arada tutacağı konusunda daha fazla güven anlamına gelir.