Sayfanızdan farklı bir renk şeması maketini oluşturmak için divi nasıl kullanılır
Müşteriniz için bir renk şeması yapmak, web tasarım sürecinde önemli bir adımdır. Bazen, müşteriler zaten site için kullanabileceğiniz bir şirket marka renk paleti olabilir. Ancak çoğu zaman, şirketin markasına uyacağını ve web sitelerinde iyi görüneceğini düşündüğünüz bazı önerilen renk şemaları sunmanız gerekir. Divi ile, görsel yapımcılarda bulma ve bulma ve tavsiye renkleri gibi tasarım özelliklerini kullanarak her bir sayfa düzeninin renk şemasını kolayca değiştirebilirsiniz. Ayrıca, müşterileriniz için birkaç sayfa sürümü (farklı renk şemaları ile) oluşturabilirsiniz.
Bu öğreticide, ana sayfa sayfası için yeni bir renk şeması oluşturmak için divi kullanma sürecinde size rehberlik edeceğim. Umarım, yol boyunca birkaç numara öğreneceksiniz. Başlayalım! Yeni sayfanızı hazırlayın Bu öğretici için iş koçu evinin düzenini kullanacağım. Yani, yapmadıysanız, yeni bir sayfa yapın ve görsel bir yapımcı uygulayın. Ardından “Prem Yapımı Düzen’i seçin” seçeneğini seçin. Kütüphaneden gelen açılır pencereden, iş koçunun ana sayfasının yerleşimini seçin.
Farklı bir renk şeması maketini oluşturmak için bu ana sayfa sayfasının düzenini kullanacağız. Ancak şimdilik yeni bir renk şeması seçmemiz gerekiyor. Renk Şemanızı Seçme Zaten bir renk şemanız olabilir, ancak değilse, üçüncü taraf renk şemalarının divi renk önerilerini veya jeneratörlerini kullanabilirsiniz. Daha fazla ilham için, sektörünüz için uygun bir renk şeması için web’e göz atabilirsiniz. Renk şemenizi yapmak için üçüncü bir -Party renk şeması jeneratörü kullanarak, siteniz için mükemmel renk şemasını seçmenize yardımcı olmak için web üzerinde birkaç (ve ücretsiz) üçüncü taraf renk şemaları vardır. En sevdiğim renk paleti jeneratörlerinden bazıları Cooles.co, Canva ve Adobe’den geliyor. Bu renk şeması jeneratörünün çoğu en az beş renk üretecek. Yeni renk şemanızı oluşturmak için ihtiyacınız olan tüm renkleri sakladığınızdan emin olun. Divi’nin varsayılan önerilerini kullanarak bir renk şeması oluşturma Yeni renk yöneticisinin başlatılmasından bu yana ve Divi’nin sihirli renk önerileri, Divi, DIVI Builder’daki renk seçeneklerini değiştirirken erişilebilen ve yakın zamanda kullanabileceğiniz renkleri otomatik olarak izler. Her paleti “kaydedilen” veya “en son” sekmesine tıklayarak görebilirsiniz.
Divi ayrıca doğrudan görsel üreticilere inşa edilmiş basit ve akıllı bir renk tavsiyesine sahiptir. Kullanılan algoritmanın tüm ayrıntılarını tartışmayacağım (yapabileceğimden emin değilim), ancak genel olarak Divi, mevcut temel renge göre tamamlayıcı bir renk paleti (ve analog) üretecektir (renk seçeneğe seçilir) . Bu, tasarımınız için uyumlu bir renk kombinasyonu seçmenize yardımcı olacaktır. Renk tavsiyesini (veya renk manzarasını) görmek için, seçilen renk seçeneğinin hemen altında renkli manzara simgesini (üç noktaya sahip olan) tıklamanız yeterlidir. Orada, tuttuğunuz ve yeni kullanıldığınız renklerin tamamlayıcı ve analog renklerinden üretilen bir palet bulacaksınız. Ve her satırın en son veya saklanan renk paletinde her renk için genişletilmiş yeni bir renk şeması vardır. Bu renk önerisi, bölüm, satır ve modül seviyesindeki renkleri seçmeye yardımcı olmak için tasarlanmış olsa da, önerilen rengi kolayca kullanabilirsiniz. Her sayfa için yeni bir renk şeması olarak palet.
İş koçunun iş sayfalarının düzeni için bir renk şeması yapın Şimdi, yeni sayfamıza eklediğimiz iş koçunun işinin düzeni için yeni bir renk şeması yapmaya başlayalım. Bu önceden hazırlanmış düzen şu anda temel bir renk şemasına sahiptir. Ana renk açıkça koyu mavidir. Ayrıca aksan rengi olarak bazı farklı gri tonları da vardır. Ayrıca içeriğin arka planı ve metin için kullanılan siyah renk için standart bir beyaz renktir. Böylece, bir birincil koyu mavi rengin her örneğini başka bir renkle değiştirirseniz, tamamen yeni bir renk şemasına sahip olacağını hayal edebilirsiniz. Visual Maker’dan, düzenin üst kısmındaki tam geniş başlık ayarlarını açın ve tek renk metin düğmesini bulun. Bu, bu düzen tarafından kullanılan ana mavi renktir. Şimdi mevcut mavi renk için renk tavsiyesini görmek için renk scape simgesini tıklayın. Üst sıradan renk paletinde bulunacaklar.
Bu noktada yeni bir renk şeması görmek için paletten herhangi bir renk seçebilirsiniz, ancak bu örnek için hala oluşturulan ilk kullanacağım. Renk şemanızı varsayılan renk paletine saklayarak, yolda işleri çok daha rahat hale getirmek için, tema seçeneğinde varsayılan seçmen renk paletini değiştirmek için yeni renk paletinizin rengini güncellemek isteyeceksiniz. Bu şekilde rengin, renginizdeki kalan değişiklikler için görsel oluşturucuda depolanan renk paleti altında mevcut olacaktır. Yeni sekmede Divi> tema seçeneklerine gidin. Genel sekmenin altındaki varsayılan renk paleti seçeneğini göreceksiniz. Mavi rengimiz için renk tavsiyesinden üretilen renk paletini kopyalamanın kolay bir yolu yoktur. Bir pencerede aktif görsel yapımcılar ve başka bir pencerede divi tema seçenekleri ile sayfanızı açmanızı öneririm. Ardından, her renk kodunu varsayılan renk paletine kopyalayın.
Ayarları kaydedin. İpucu: Gelecekte metin ve arka plan düzenleme konforu için ilk varsayılan iki rengi (siyah beyaz) değiştirmek istemeyebilirsiniz, ancak tüm renk yuvalarına ihtiyacınız varsa, kullanmaktan çekinmeyin. Önceki varsayılan renk paletini devraldığından varsayılan renk paleti geçerli sayfanızda güncellenmeyecektir. Ayarlarınızda depolanan yeni renk paletini görmek için başka bir düzen ile yeni bir sayfa oluşturmanız gerekir. Bu çok zahmetliyse, 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ı simgesini tıklayın. Ardından Tasarım sekmesi altındaki paleti güncelleyin.
Bu, başka bir sayfa oluşturmak zorunda kalmadan tüm sayfalar için renk paletini güncelleyecektir. Temalar için varsayılan renk paletini güncellemeyi seçmemin nedeni (sadece sayfalar değil), yapacağım her yeni sayfa maketine yeni renk paleti eklenmesini önlemektir. Maker Your Visual ile Ana Sayfa Düzeni Etkindir ve Tam Geniş Başlık Ayarları (daha önce sizinle aynı yer) altında tek renk metin düğmesi seçeneğini açın. Şimdi kaydettiğiniz düzen henüz ortaya çıkmadı, ancak sorun değil. Orijinal koyu mavi rengin seçildiğinden emin olun ve ardından renk tavsiyesini yaymak için renk peyzaj simgesini tıklayın. Bu, üst sıra aynı renk şemasını gösterecektir. Koyu kahverengi bir renk seçin (#54381c). Ardından renk kodunu görmek ve renk kodunu vurgulayarak ve CTRL + C (veya CMD + C) tuşlarına basarak renk kodunu kopyalayın.
Aslında değişiklik yapmak istemediğimiz için, değiştirmemiz gereken orijinal mavi rengi geri yüklemek için düzenleyici sermayenin altındaki Mor Mor düğmesini tıklayın. Şimdi orijinal mavi renge sağ tıklayın ve Bul ve Değiştir seçeneğini tıklayın.
Pop -up Bul ve Değiştirmede, aşağıdaki kahverengi renkte “Değiştir” ‘de yapıştırın. Sayfaların her yerinde renkleri değiştirmek istediğimiz için “Bu sayfa” seçeneğini kaydedebilirsiniz. Emin olun ve renk değişikliklerinin kapsamı bir metin renkleri düğmesi ile sınırlı olmayacak şekilde “Tümünü Değiştir” seçeneğini seçin. Ardından Değiştir’i tıklayın. Ayarlarınızı kaydetmeyi unutmayın. Şimdi yeni renk şemasını kontrol edin.
Şimdi, Ayarlar menüsünü açıp kütüphaneye güvenlik simgesini tıklayarak Divi kitaplığınıza devam edin ve DIVI kitaplığınıza kaydedin. Düzeni “Brown” gibi adlandırın ve ardından kütüphaneye kaydet’i tıklayın. Bu, düzen sürümünüzü yeni sayfaya uygulamanıza olanak tanır. Yeni bir sayfaya yeni bir sayfaya yeni bir sayfaya yeni renk şemanızın düzenini ekleyin, yeni bir kahverengi renk şeması ile yeni bir sayfaya ek olarak yeni bir sayfa oluşturmanız gerekir. Ardından sayfanızın başlığını verin (“Çikolata” gibi bir şey) ve görsel bir yapımcı kullanın. Ardından önceden hazırlanmış düzeni seçin. Kütüphaneden yükleme açılır penceresinde, “Depo Edilen Düzen” sekmesini tıklayın ve kitaplığınıza yeni kaydettiğiniz yeni düzeni seçin.
Sayfalarınızı yayınlamayı unutmayın. Şimdi yeni bir sayfa oluşturmak ve sayfaya saklanan düzeni eklemek için aynı işlemi tekrarlayın. Bu sefer sayfanızı “Mor” adlandırın. Sayfaya düzen eklendikten sonra, yayınladığınızdan emin olun. Ardından Visual Builder’ı açın ve Fullwidth başlık ayarlarını açın ve bir metin renk düğmesini bulun (daha önce olduğu gibi). Artık kaydedilen temanın renk paletinin yeni renginle güncellendiğini göreceksiniz. Bu faydalı olacak. Sağ -Renk seçeneklerine (şu anda koyu kahverengi) tıklayın, ardından Bul ve Değiştir’i tıklayın. Depolanan renk paletinden yeni bir renk seçmek için aşağıdaki renk seçmenini açın “İle Değiştir”. Bu sefer Mor (#5A5ae2) seçin. Ardından tüm değiştirme seçeneklerini seçin. Ve ayarlarınızı kaydetmeyi unutmayın. Ve sihir gibi, sayfanız için mor bir şemanız var! Mockup sayfaları oluşturma Gelişmiş renk şemaları mevcut yeni renk şemaları ile, sayfanızda birkaç renk denemek isteyebilirsiniz. Örneğin, sayfanızın her bir parçası için farklı bir renge sahip olmayı seçebilirsiniz. Bu, “Bulma ve Değiştir” özelliği ile de kolayca yapılabilir. Bir sonraki mockup için yeni bir sayfa oluşturun ve sayfanızı “Çok Molor” gibi adlandırın. Ardından görsel bir yapımcı kullanın, “Bitmiş Düzeni seçin” seçeneğini seçin ve aynı düzeni (çikolata) sayfaya (daha önce yaptığınız gibi) aktarın. Visual Maker’da, Fullwidth başlık ayarlarını açın ve tek renk metin düğmesini bulun (daha önce olduğu gibi). Sağ -Tek Çarşamba Metin düğmesine tıklayın ve “Bul ve Değiştir” i seçin. Ardından aşağıdakileri güncelleyin: In: Bu bölüm: #0f1f2e ile değiştirin ANLEP’yi değiştirin ve ardından Değiştir düğmesini tıklatın. Ayarları kaydetmeyi unutmayın. Bu yenileme koyu mavi şema ile üst başlıkta. Şimdi ikinci kısmı geçin (kahverengi bir şema koruyabilir) ve üçüncü bölüme gidin. Bölümün altındaki düğmeyi “Hala emin değilim? İlgili “. Düğme ayarlarını açın, düğmenin arka plan rengine sağ tıklayın ve” Bul ve Değiştir “i seçin. Ardından aşağıdaki gibi bul ve değiştirin: In: Bu bölüm: #366BA2 ile değiştirin ALL TOP’u seçin, ardından Değiştir düğmesini tıklatın. Ve ayarları kaydetmeyi unutmayın. Beşinci kısmı geçin. Ardından, ilk bölümde aynı koyu mavi renkle Bölüm 6’daki (“Şirket ve benimle çalışan insanlar”) kahverengi rengi değiştirmek için aynı işlemi tekrarlayın. Bunu metin renk seçeneği metninin altında büyük bir teklif metni içeren bir metin modülü açarak yapabilirsiniz. Son bölümde, metin modülünü sağ sütundaki bulun ve metin modülü ayarlarını açın. Sağ -arka plan rengini tıklayın ve arama seçeneğini ve değiştirmeyi seçin. Aşağıdakileri güncelleyin: In: Bu bölüm şu şekilde değiştirin: #5A5ae2 (Mor) Tümünü seçin Ardından Değiştir düğmesini tıklayın ve ayarları kaydedin. Artık her bölümde birçok renk içeren bir ana sayfa maketiniz var. Her Mockup Renk Şemalarının her birini gözden geçirmek için bir menü oluşturma Son adım, müşterilerin her bir renk şeması maketinin önizlemesini görmesini kolaylaştırmak için yeni bir ana menü oluşturmaktır. WordPress kontrol panelinizden görünüm> menülere gidin. Ardından size menü başlığını verin, bir menü oluştur ve oluşturduğunuz sayfayı yeni menünüze ekleyin. Ardından, görünümünüzün yeri olarak ana menüyü seçtiğinizden emin olun. Ve menüyü kaydet’i tıklayın. Artık renk şemanızı göstermeye hazır bir siteniz var.