Sayfalarınızın Farklı Renk Düzeni Modellerini Oluşturmak için Divi Nasıl Kullanılır

Müşterileriniz için renk şeması maketleri oluşturmak, web tasarım sürecinde önemli bir adımdır. Bazen müşteri, site için kullanabileceğiniz bir şirket markası renk paletine sahip olabilir. Ancak çoğu zaman, hem şirket markasına uyacağını hem de web sitelerinde harika görüneceğini düşündüğünüz birkaç önerilen renk şeması sunmanız gerekecektir.

Divi ile, görsel oluşturucu içindeki Bul ve Değiştir ve Renk önerileri gibi tasarım özelliklerini kullanarak herhangi bir sayfa düzeninin renk düzenini kolayca değiştirebilirsiniz. Ayrıca müşteriniz için bir sayfanın (farklı renk şemalarına sahip) birden çok sürümünü oluşturabilirsiniz.

Bu eğitimde, bir ana sayfa için yeni renk şeması maketleri oluşturmak üzere Divi'yi kullanma sürecinde size yol göstereceğim. Umarım, yol boyunca birkaç numara öğreneceksiniz.

Başlayalım!

Yeni Sayfanızı Kurun

Bu eğitim için Business Coach Ana Sayfa Düzenini kullanacağım. Bu nedenle, henüz yapmadıysanız, yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından “Önceden Düzeni Seç” öğesini seçin. Kitaplıktan Ekle açılır penceresinden, Business Coach Ana sayfa düzenini seçin.

Düzen sayfaya yüklendikten sonra yayınlamayı unutmayın.

Farklı renk şeması maketleri oluşturmak için bu ana sayfa düzenini kullanacağız. Ancak şimdilik yeni bir renk şeması seçmemiz gerekiyor.

Renk Şemanızı Seçmek

Halihazırda bir renk düzeniniz olabilir, ancak değilse, Divi'nin renk önerilerini veya bir üçüncü taraf renk düzeni oluşturucusunu kullanabilirsiniz. Daha fazla ilham almak için sektörünüze uygun renk şemaları için web'e göz atabilirsiniz.

Renk Şemanızı Oluşturmak için Üçüncü Taraf Renk Şeması Üreticilerini Kullanma

Web'de siteniz için mükemmel renk şemasını seçmenize yardımcı olacak bazı harika üçüncü taraf (ve ücretsiz) renk şeması oluşturucuları vardır. En sevdiğim renk paleti oluşturucularımdan bazıları Coolers.co, Canva ve Adobe'den.

Bu renk şeması oluşturucularının çoğu en az beş renk üretecektir. Yeni renk düzeninizi oluşturmak için ihtiyacınız olan tüm renkleri kaydettiğinizden emin olun.

Divi'nin Yerleşik Renk Önerilerini Kullanarak Bir Renk Düzeni Oluşturma

Divi'nin yeni renk yöneticisi ve sihirli renk önerilerinin piyasaya sürülmesinden bu yana, Divi, Divi Builder'da bir renk seçeneğini değiştirirken erişilebilen kaydettiğiniz ve son kullandığınız renklerin kaydını otomatik olarak tutar. "Kaydedildi" veya "Son" sekmesine tıklayarak her paleti görüntüleyebilirsiniz.

Divi ayrıca görsel oluşturucunun içine yerleştirilmiş basit ve akıllı bir renk önerme aracına sahiptir. Kullanılan algoritmanın tüm ayrıntılarına girmeyeceğim (zaten yapabileceğimden emin değilim), ancak genel anlamda Divi, geçerli temel renge (renk) dayalı olarak tamamlayıcı (ve benzer) bir renk paleti oluşturacaktır. seçeneğinde seçilir). Bu, tasarımınız için uyumlu renk kombinasyonları seçmenize yardımcı olacaktır.

Renk önerilerini (veya renk düzenini) görüntülemek için, doğrudan seçilen renk seçeneğinin altındaki renk düzeni simgesini (üç noktalı olan) tıklamanız yeterlidir. Orada, kaydettiğiniz ve son kullandığınız renklerin tamamlayıcı ve benzer renklerinden oluşturulan paletler bulacaksınız.

Bu renk öneri aracı, bölüm, satır ve modül düzeyinde renk seçimine yardımcı olmak için tasarlanmış olsa da, önerilen renk paletini her sayfa için yeni bir renk şeması olarak kolayca kullanabilirsiniz.

Business Coach Ana Sayfa Düzeni için Renk Şeması Oluşturma

Şimdi yeni sayfamıza daha önce eklediğimiz Business Coach Ana Sayfa düzeni için yeni renk şeması maketleri oluşturmaya başlayalım. Bu önceden hazırlanmış düzen şu anda temel bir renk şemasına sahiptir. Ana renk, açıkçası, kullanılan koyu mavidir. Ayrıca vurgu renkleri olarak bazı farklı gri tonlarına da sahiptir. Ayrıca içerik arka planları için standart bir beyaz renk ve metin için kullanılan siyah bir renktir. Bu nedenle, bir ana koyu mavi rengin her örneğini başka bir renkle değiştirirseniz, tamamen yeni bir renk düzenine sahip olacağınızı hayal edebilirsiniz.

Görsel oluşturucudan, mizanpajın üst bölümündeki tam genişlikli başlık ayarını açın ve Düğme Bir Metin Rengi'ni bulun. Bu, bu düzenin kullandığı birincil mavi renktir. Şimdi o geçerli mavi renk için renk önerilerini görüntülemek için color-scape simgesini tıklayın. En üst sıranın renk paletinde bulunurlar.

Bu noktada, yeni renk şemalarını görmek için paletten herhangi bir rengi seçebilirsiniz, ancak bu örnek için, ilk oluşturulanla devam edeceğim.

Renk Düzeninizi Varsayılan Renk Paletine Kaydetme

Yolda işleri çok daha kolay hale getirmek için, tema seçeneklerinde renk seçicilerin varsayılan paletini değiştirmek için yeni renk paleti renklerinizi güncellemek isteyeceksiniz. Bu şekilde renkleriniz, geri kalan renk değişiklikleriniz boyunca Visual Builder'da kayıtlı renk paleti altında mevcut olacaktır.

Yeni bir sekmede Divi > Tema Seçenekleri'ne gidin. Genel sekmesi altında varsayılan renk paleti seçeneğini göreceksiniz. Mavi rengimiz için renk önerilerinden oluşturulan renk paletini kopyalamanın gerçekten kolay bir yolu yoktur. Sayfanızı bir pencerede görsel oluşturucu etkinken ve başka bir pencerede Divi Tema seçenekleriyle açmanızı öneririm. Ardından her bir renk kodunu varsayılan renk paletine kopyalayın.

Ayarları kaydet.

İpucu: Daha sonra metin ve arka planları düzenleme kolaylığı için ilk iki varsayılan rengi (siyah ve beyaz) değiştirmek istemeyebilirsiniz, ancak tüm renk yuvalarına ihtiyacınız varsa bunları kullanmaktan çekinmeyin.

Varsayılan renk paleti, önceki varsayılan renk paletini devraldığı için mevcut sayfanızda güncellenmeyecektir. Ayarlarınızda yeni kaydedilmiş renk paletini görmek için mizanpajla tekrar yeni bir sayfa oluşturmanız gerekecektir.

Bu çok fazla rahatsızlık veriyorsa, yalnızca geçerli sayfanız için varsayılan renk paletini güncellemeyi seçebilirsiniz. Bunu yapmak için ayarlar menüsünü açın ve Sayfa Ayarları simgesine tıklayın. Ardından tasarım sekmesi altındaki paleti güncelleyin.

Bu, başka bir sayfa oluşturmak zorunda kalmadan tüm sayfanın renk paletini güncelleyecektir.

Tema için (sadece sayfa yerine) varsayılan renk paletini güncellemeyi seçmemin nedeni, oluşturacağım her yeni sayfa maketine yeni renk paletleri eklemek zorunda kalmamaktı.

Sayfa Renklerinizi Güncellemek için Bul ve Değiştir'i Kullanma

Şimdi görsel oluşturucunuz etkinken ana sayfa düzenine geri dönün ve tam genişlikli Başlık ayarları altındaki Düğme Bir Metin Rengi seçeneğine gidin (daha önce bulunduğunuz yer). Şimdi kayıtlı düzeniniz henüz görünmüyor ama sorun değil. Orijinal Koyu mavi rengin seçildiğinden emin olun ve ardından renk önerilerini havalandırmak için renk skalası simgesini tıklayın. Bu, aynı renk düzenimizi üst satırda gösterecektir.

Koyu kahverengi rengi seçin (#54381c).

Ardından renk kodunu görüntülemek için renk seçiciyi açın ve renk kodunu vurgulayıp ctrl + C (veya Cmd + C) tuşlarına basarak panonuza kopyalayın.

Değişikliği henüz tam olarak yapmak istemediğimizden, değiştirmemiz gereken orijinal mavi rengi geri getirmek için ayarlar modunun altındaki mor geri al düğmesine tıklayın.

Şimdi orijinal mavi renge sağ tıklayın ve Bul ve Değiştir seçeneğine tıklayın.

Bul ve Değiştir açılır penceresinde, "Değiştir" altındaki kahverengi rengi yapıştırın. Tüm sayfadaki rengi değiştirmek istediğimiz için “İçinde” seçeneğini “Bu Sayfa” olarak tutabilirsiniz. Renk değişikliği kapsamının yalnızca Düğme Bir Metin Renkleri ile sınırlı kalmaması için “Tümünü Değiştir” seçeneğini seçin ve seçin. Ardından Değiştir'i tıklayın.

Ayarlarınızı kaydetmeyi unutmayınız.

Şimdi yeni renk şemasına göz atın.

Şimdi devam edin ve ayarlar menüsünü açıp Kitaplığa Kaydet simgesine tıklayarak düzeni Divi Kitaplığınıza kaydedin. Düzene "Kahverengi" gibi bir ad verin ve ardından Kitaplığa Kaydet'i tıklayın.

Bu, mizanpajınızın o sürümünü yeni bir sayfada dağıtmanıza olanak tanır.

Yeni Renk Düzeninizi Yeni Bir Sayfaya Ekleyin

Kaydedilmiş düzeninizi yeni kahverengi renk düzeninizle yeni bir sayfaya eklemek için önce yeni bir sayfa oluşturmanız gerekir. Ardından sayfanıza bir başlık verin ("Kahverengi" gibi bir şey) ve görsel oluşturucuyu dağıtın. Ardından Hazır Düzen Seç'i seçin. Kitaplıktan Yükle açılır penceresinde, “Kaydedilen Düzenleriniz” sekmesine tıklayın ve kitaplığınıza yeni kaydettiğiniz yeni düzeni seçin.

Sayfanızı yayınlamayı unutmayın.

Şimdi yeni bir sayfa oluşturmak ve kaydedilen düzeni sayfaya eklemek için aynı işlemi tekrarlayın. Bu sefer sayfanıza “Mor” adını verin.

Düzen sayfaya eklendikten sonra, onu yayınladığınızdan emin olun. Ardından görsel oluşturucuyu açın ve Fullwidth Header ayarlarını açın ve Button One Text Color'ı (önceki gibi) bulun. Şimdi kaydedilen tema renk paletinin yeni renklerinizle güncellendiğini görmelisiniz. Bu işe yarayacaktır. Renk seçeneğine (şu anda koyu kahverengi) sağ tıklayın, ardından bul ve değiştir'e tıklayın. Kaydedilen renk paletinden yeni bir renk seçmek için "Birlikte Değiştir" altındaki renk seçiciyi açın. Bu sefer mor rengi seçin (#5a5ae2). Ardından tümünü değiştir seçeneğini seçin. Ve ayarlarınızı kaydetmeyi unutmayın.

Ve sihir gibi, sayfanız için mor bir renk düzeniniz var!

Gelişmiş Renk Düzeni Sayfası Maketi Oluşturma

Yeni renk düzeniniz mevcutken, sayfanızda birden çok renkle denemeler yapmak isteyebilirsiniz. Örneğin, sayfanızın her bölümü için farklı bir renk seçebilirsiniz. Bu, “Bul ve Değiştir” özelliğiyle de kolayca yapılabilir.

Bu sonraki model için yeni bir sayfa oluşturun ve sayfanıza "Çok renkli" gibi bir ad verin. Ardından görsel oluşturucuyu dağıtın, "Önceden hazırlanmış bir Düzen seçin"i seçin ve aynı (kahverengi) kaydedilmiş düzeni sayfaya aktarın (tıpkı daha önce yaptığınız gibi). Görsel oluşturucuda, Fullwidth Header ayarlarını açın ve Button One Text Color'ı bulun (önceki gibi). Düğme Bir Metin Rengine sağ tıklayın ve “Bul ve Değiştir” i seçin. Ardından aşağıdakileri güncelleyin:

İçinde: Bu Bölüm
Şununla Değiştir: #0f1f2e
Tümünü Değiştir'i seçin

Ardından Değiştir düğmesini tıklayın.

Ayarları kaydetmeyi unutmayın.

Bu, üst başlık bölümünde koyu mavi renk şemasıyla güncellenir.

Şimdi ikinci bölümü atlayın (kahverengi renk düzenini koruyabilir) ve üçüncü bölüme geçin. "Hala Emin Değil misiniz?" başlıklı bölümün altındaki düğmeyi bulun. Temasta olmak". Düğme ayarlarını açın, düğme arka plan rengine sağ tıklayın ve "Bul ve Değiştir" i seçin.

Ardından Bul ve Değiştir'i aşağıdaki gibi güncelleyin:

İçinde: Bu Bölüm
Şununla Değiştir: #366ba2
Tümünü Değiştir'i seçin

Ardından değiştir düğmesine tıklayın. Ve ayarları kaydetmeyi unutmayın.

Beşinci bölümü atlayın. Daha sonra 6. bölümdeki (“Çalıştığım Firmalar & Çalıştığım Kişiler”) kahverengi rengi ilk bölümdeki aynı lacivert renkle değiştirmek için aynı işlemi tekrarlayın. Bunu, Metin Metin Rengi seçeneğinin altındaki büyük alıntı metninin bulunduğu metin modülünü açarak yapabilirsiniz.

Son bölümde, sağ sütundaki metin modülünü bulun ve metin modülü ayarlarını açın. Arka plan rengine sağ tıklayın ve Ara ve Değiştir seçeneğini seçin. Aşağıdakileri güncelleyin:

İçinde: Bu Bölüm
Şununla Değiştirin: #5a5ae2 (mor renk)
Tümünü Değiştir'i seçin

Ardından Değiştir düğmesine tıklayın ve ayarları kaydedin.

Artık her bölümde birden fazla renk içeren bir ana sayfa modeliniz var.

Her Renk Şeması Modelini Önizlemek için Bir Menü Oluşturma

Son adım, müşterilerin her bir renk şeması modelini önizlemesini kolaylaştırmak için yeni bir birincil menü oluşturmaktır. WordPress Kontrol Panelinizden Görünüm > Menüler'e gidin. Ardından menüye bir başlık verin, menü oluştur'a tıklayın ve oluşturduğunuz sayfaları yeni menünüze ekleyin. Ardından, görüntüleme konumunuz olarak Birincil Menü'yü seçtiğinizden emin olun. Ve Menüyü Kaydet'e tıklayın.

Artık renk şeması modellerinizi sergilemeye hazır bir siteniz var.

Son düşünceler

Divi'nin tasarım seçenekleriyle, yerleşik renk önerilerini ve Visual Builder ile "Bul ve Değiştir" seçeneğini kullanarak sayfa düzenleriniz için tamamen yeni renk şemalarını kolayca dağıtabilirsiniz. Bu, müşterileriniz için farklı renk şeması maketlerini sergilemeyi kolaylaştıracaktır. Umarım bu eğitim, bir sonraki projeniz için mükemmel renk şemasını bulmanıza yardımcı olur. Yorumlarda sizden haber bekliyorum.

Şerefe!