Divi 2.4'ü Keşfetmek: Yarı Saydam Renkleri Web Sitenizde Yaratıcı Bir Şekilde Nasıl Kullanabilirsiniz?

Geçen hafta, Divi tarihindeki en büyük yükseltme ve en popüler WordPress temamız için dev bir adım olan Divi 2.4'ü tanıttık. Bu güncellemede keşfedilecek o kadar çok harika özellik var ki, hepsini sürüm gönderisinde açıklamak zordu, bu yüzden size nasıl alınacağını öğretmeyi amaçlayan 2 haftalık bir dizi bilgilendirici blog gönderisi yapmaya karar verdik. Divi 2.4'ün tam avantajı ve yeni seçenekleri. Bu serinin sekizinci bölümünde, Divi'de yarı saydam arka plan renklerini kullanmanın yeni ve yaratıcı yollarından bahsedeceğim.

Divi 2.4 Hakkında Her Şeyi Buradan Öğrenin

Alfa Kaydırıcılı Renk Seçicilerle Tanışın

Divi 2.4'te alfa kontrolleri olan yeni renk seçicileri tanıttık. Bunlar, RGBa renk değerlerini seçmenizi ve girmenizi sağlar.

RGBa nedir?

RGBa, RGB değeri artı bir alfa değeri ile tanımlanan bir renk değeridir ve bu küçük ' a ' ne anlama gelir. Alfa değerini bir opaklık değeri olarak düşünebilirsiniz.

Örneğin…

Siyah birkaç farklı şekilde temsil edilebilir: #000000; veya rgb(0,0,0);
Şuna benzeyen üçüncü bir yöntem kullanabiliriz: rgba(0,0,0,1); burada 1 , opaklığını 0 – 1 ölçeğinde temsil eder. Bu ölçeği kullanarak rgba(0,0,0,0.5) ile %50 şeffaf bir siyah oluşturabiliriz ;

Şeffaf Arka Plan Renkleri Sitenize Nasıl Daha Fazla Esneklik Katabilir?

Arka plan renklerine biraz saydamlık eklemek, uyumlu bir renk paleti elde etmenin hızlı bir yoludur. Aşağıda, gerçek beyaz üzerine gerçek siyahın biraz sert olduğunu ve koyu ve açık grilerin gözler üzerinde biraz daha kolay olduğunu görebilirsiniz. Kendinize, "O halde neden sadece düz gri bir değer kullanmıyorsunuz?" diye soruyor olabilirsiniz. Karışıma renkli arka planlar eklemeye başlayana kadar bu iyi bir soru ve tartışması zor. Beyaz bir arka plan üzerindeyken hafif şeffaf bir siyah, yalnızca koyu gridir, ancak mavi bir arka plan üzerinde koyu maviye dönüşür.

Yarı saydam siyahın beyaz bir arka plan üzerindeyken tam olarak koyu griyle aynı görünebileceğini ve yarı saydam beyazın açık griyle nasıl aynı görünebileceğini görebilirsiniz, ancak renkli bir arka plana geçtiğinizde, bir rgba değerinin faydası daha belirgindir. Bu, sayfanızdaki öğeler için arka plan renkleri seçerken akılda tutulması gereken iyi bir şeydir.

Şeffaf Modül Arka Planları

Divi 2.4'te modüllerin Gelişmiş Tasarım sekmelerinde artık bir Arka Plan Rengi ayarı vardır. Bu, farklı modüller için farklı şeyler anlamına gelir. Örneğin, bir Harekete Geçirici Mesaj modülünün arka plan rengi, modülün tüm kabının arka plan rengini kontrol ederken, bir akordeon modülünün arka plan rengi, tek tek geçişlerin arka plan rengini kontrol eder. İşte birkaç örnek.

Kaydırıcı Slaytlar için Şeffaf Arka Planlar Kullanın

Aşağıdaki örnekte, kaydırıcımdaki her slayt için saydam arka plan renkleri kullandım. Daha sonra şeffaflık nedeniyle gösterilebilecek bölüme bir arka plan resmi ekledim.

Yapışkan Bir Renk Paleti Oluşturmak için Şeffaf Modül Arka Plan Renklerini Kullanın

Arka plan rengi olan bir bölüme arka plan rengine sahip modüller eklerken, bu iki rengin birlikte iyi çalışmasını sağlamak zor olabilir. Ve bu renklerin güzel çalışmasını sağladığınızda, arka plan renginizi değiştirdiğinizde ne olur?

Bunların birlikte çalışmasını sağlamanın kolay bir yolu, modülde yarı saydam bir arka plan rengi kullanmaktır. Kesit renginden biraz daha koyu olmasını istiyorsanız yarı şeffaf bir siyah kullanın. Kesit renginden biraz daha açık olmasını istiyorsanız yarı şeffaf beyaz kullanın. Bu, uyumlu arka plan renkleri seçme sorununu ortadan kaldırır ve gelecekte bölüm arka planınızı güncellemeyi çok daha kolaylaştırır. Bu örneklerde %25 siyah ve %25 beyaz kullandım.

Tam Şeffaflık

İletişim Modülü, şeffaf bir arka plan rengiyle iyi çalışan bir modüle iyi bir örnektir. Tam şeffaflık kullandığınızda ve Divi'nin yeni kenarlık seçeneklerini kullanarak kenarlık eklediğinizde bile harika görünüyor. Aşağıdaki örnekte, arka planın bir kısmının görünmesi için yarı saydam bir kenarlık rengi bile kullandım.

Modüllerinizin Arka Plan Görüntüsünden Uzak Durmasına Yardımcı Olmak için Saydam Bir Arka Plan Rengi Ekleyin

Çoğu zaman her iki dünyanın da en iyisini isteriz. Bu dünyalar genellikle metin ve görüntüdür. Ne yazık ki bu iki şey her zaman birlikte iyi çalışmaz, ancak alfa renk seçiciler sayesinde bu ikilemi hızlı bir modül arka plan rengiyle çözmek kolaydır. İçeriğin modülün kenarlarına çarpmaması için aşağıdaki her modüle 40 piksel özel dolgu eklediğimi unutmayın.

Bu Örneği Bir Adım Daha İleriye Taşıyalım

Yukarıdaki örnekte, üç modül için de aynı alfa değerini kullandım. Bunu tam genişlikte bir satıra çevirdiğimde, sütun oluklarını kaldırdığımda ve alfa değerlerini karıştırdığımda ne olacağını görelim.

Gezinme Başlığınızda Tam veya Yarı Saydam Arka Plan Renkleri Kullanın

Artık gezinme arka plan renklerinize şeffaflık ekleyebilirsiniz. Başlık gezinmenizi nasıl özelleştireceğiniz hakkında daha fazla bilgi edinin.

Sütunların Bile Arka Plan Rengi Olabilir!

Bir sütunda birden fazla modülünüz varsa ve hepsinin bir arka plan renginin üzerine oturmasını istiyorsanız, bir sütuna arka plan rengi vermek gerçekten kullanışlıdır. Her modüle bir arka plan rengi vermek yerine, içinde bulundukları sütunu basitçe özelleştirebilirsiniz. Bu yazının şeffaflıkla ilgili olduğu göz önüne alındığında, güzel bir görüntü bindirmesi oluşturmak için yarı saydam sütun arka planlarını nasıl kullanabileceğinize dair bir örnek.

Bu görünümü elde etmek için, bölüme paralaks arka plan görüntüsü verdim, 2. sütuna yarı saydam arka plan rengine sahip iki sütunlu bir satır ekledim ve sağ sütuna ekstra nefes için biraz özel dolgu ile basit bir metin modülü yerleştirdim. oda.

Satırı tam genişlikte yapmak, sütun olukları kaldırmak ve satır/bölüme sıfır dolgu değerleri vermek, bu düzene tamamen yeni bir görünüm kazandırabilir.

Canlı Demo

Galeri, Mağaza ve Portföy Modülü Vurgulu Yer Paylaşımlarını Özelleştirin

Galeri resimlerinin, portföy projelerinin ve mağaza ürünlerinin vurgulu yerleşimini özelleştirmek, yeni alfa seçicilerle kolayca yapılabilir. Kaplamaların markanızın vurgu rengiyle eşleşmesini istediğinizi varsayalım, artık vurgulu durumunuz için yarı saydam bir kaplama rengi seçebilirsiniz.

Divi'deki alfa seçiciler, web sitenizin tasarımı üzerinde büyük bir etki yaratabilecek başka bir küçük eklentidir. Divi 2.4'teki tüm yeni özelliklerle birleştiğinde, daha sonra ne yaratacağınızı görmek için gerçekten heyecanlıyız. Güncellemeyi derinlemesine inceleme şansınız olduysa, yorumlara kendi örneklerinizi eklediğinizden emin olun.