Gelişmiş Duyarlı Düzenleme için Divi'nin Yerleşik Özel CSS Girişleri nasıl kullanılır?

Divi, web sitenizin stilini masaüstünde, tablette veya telefon ekranında (CSS'yi bilmeden) ayarlamayı son derece kolaylaştıran yerleşik duyarlı tasarım düzenlemesine sahiptir. Divi'nin yerleşik duyarlı düzenlemesinin bir parçası, özel CSS kullanarak daha gelişmiş duyarlı tasarım değişiklikleri yapmak için basitleştirilmiş bir yöntem içerir. Bu, medya sorguları içeren harici bir stil sayfasına güvenmekten çok daha uygundur. Hatta, duyarlı tasarımın tahminlerinin çoğunu ortadan kaldırarak, cihaz ekranlarının her biri için gerçek zamanlı olarak CSS'de ayarlamalar yapabilirsiniz.

Bu eğitimde, Divi'nin yerleşik tasarım seçeneklerinde bulunmayan gelişmiş tasarım rötuşları yapabilmeniz için özel CSS kullanarak uygun duyarlı tasarım değişikliklerinin nasıl yapıldığını göstereceğim.

Başlayalım.

Duyarlı Düzenleme için Divi'nin Yerleşik Kesme Noktaları

Divi, Divi Builder'daki herhangi bir öğenin ayarlarında yerleşik olarak bulunan üç genel duyarlı kesme noktasına (tarayıcının genişliğine göre tasarımın değiştiği noktalar) sahiptir. Bu üç kesme noktası, öncelikle masaüstü, tablet ve telefon ekranları için belirli tasarım ayarlarını kolaylaştırmak içindir.

Divi'nin masaüstü, tablet ve telefon ekranları için üç ana duyarlı kesme noktası aşağıdaki gibidir:

• Masaüstü: 981 piksel ve üzeri
• Tablet: 980 piksel ile 768 piksel arasında
• Mobil: 767px ve altı

Bu üç kesme noktası, yalnızca gelişmiş özel CSS için değil, Divi oluşturucudaki tüm duyarlı tasarım sekmelerinde aynıdır. Bu nedenle, duyarlı tasarım sekmelerini her dağıttığınızda, bu sekmeler altında yapılan herhangi bir stil, bu üç ana duyarlı kesme noktası aralığında görüntülenecektir.

Ayrıca cihaz ekranları için bu genel kesme noktalarının Divi Teması yapısında yerleşik olan tek kesme noktaları olmadığını belirtmekte fayda var. Divi'nin duyarlı kesme noktalarını belirleme hakkındaki makalemizde bunlar hakkında bilgi edinebilirsiniz.

Divi'nin Özel CSS Giriş Kutularını Anlama

Divi oluşturucu içinde bir öğeyi (bölüm, satır veya modül) özelleştirdiğinizde, her tasarım seçeneği o öğenin belirli bir bölümüne karşılık gelir (veya hedefler). Örneğin, bir metin modülünü düzenlerken, yerleşik ayarları kullanarak o modülün herhangi bir bölümünü hedefleyebilirsiniz (örn. Başlık 2 Yazı Tipi, Sol Doldurma, vb.).

Benzer şekilde, gelişmiş Özel CSS giriş kutularını kullanarak bir Divi öğesini (bölüm, satır veya modül) özelleştirdiğinizde, her bir giriş kutusu o Divi öğesinin tamamına veya belirli bölümlerine karşılık gelir (veya hedeflenir). Kullanılabilir Özel CSS kutularının sayısı, stillendirdiğiniz öğeye bağlı olarak farklılık gösterecektir. Bir metin modülünde yalnızca üç özel CSS öğesi giriş kutusu (öncesi, ana ve sonrası) olabilir, ancak harekete geçirici mesaj modülünde başlık, açıklama ve düğme için ek kutular bulunur. Bunun nedeni, modülün, o modül öğesi içinde hedeflenebilecek daha fazla parçaya sahip olmasıdır.

Harekete Geçirici Mesaj modülü için kullanılabilen farklı özel CSS giriş kutularının bir örneği aşağıda verilmiştir.

Her özel CSS giriş kutusu, öğe içindeki belirli bir CSS sınıfını hedefler. Belirli bir öğe için hedeflenen sınıfı görmek için öğenin üzerine gelin ve soru işareti simgesini tıklayın. Orada CSS sınıfının hedeflendiğini göreceksiniz.

Bu nedenle, giriş kutusundaki CSS snippet'inize bir CSS sınıfı eklemeniz gerekmez. Bunu yaparsanız, kod çalışmayacaktır.

Bunun yerine, zaten hedeflenen sınıfa uygulanmasını istediğiniz kutuya doğrudan CSS özelliklerini ekleyin.

Duyarlı Tasarım Kesme Noktalarına Özel CSS Nasıl Eklenir

Herhangi bir css giriş kutusu için üç ana duyarlı tasarım kesme noktasına erişmek için öğenin üzerine gelin ve tablet simgesine tıklayın. Ardından üç duyarlı tasarım sekmesini göreceksiniz.

Artık tek yapmanız gereken, üç cihaz ekranından (masaüstü, tablet ve telefon) herhangi birine CSS eklemek için sekmeleri kullanmaktır.

Örneğin, tablet ve telefonda modülün tüm genişliğini kapsayacak ancak masaüstünde değil, bir Harekete Geçirici Mesaj için promosyon düğmesine sahip olmak istediğinizi varsayalım. Promosyon Düğmesi giriş kutusunun altındaki tablet sekmesini seçip “display: block;” eklersiniz.

Tablet sekmesini seçtiğinizde Divi Builder Görünüm Modunun, tasarımınızın gerçek zamanlı olarak nasıl görüneceğini daha iyi görebilmek için Tablet Görünüm Moduna (768 piksel genişlik) geçtiğine dikkat edin.

Daha Küçük Cihaz Varsayılan Olarak Daha Büyük Cihazların CSS'sini Devralır

Varsayılan olarak, tablet sekmesine uygulanan kod, telefon ekranı tarafından da devralınır. Bunu bize hatırlatmaya yardımcı olmak için Divi, tablet ekranına eklenen kodun aynısı ile giriş kutusuna gri yer tutucu kodu ekler.

Telefon ekranının tablet ekranını devralmasının nedeni, arka uçtaki tablet ekranı için gerçek kesme noktasının (medya sorgusu) "maks. genişlik: 980 piksel;" olarak ayarlanmış olmasıdır. yani telefon ekranı 980 pikselden küçük olduğu için tablete eklenen kod telefona da uygulanacaktır. Yani telefona farklı bir stil uygulamak istiyorsanız, telefon sekmesi giriş kutusuna ek kod eklemeniz gerekecektir.

NOT: Telefon ekranına Özel CSS de eklerseniz, Divi arka uçtaki tablet için medya sorgusunu akıllıca 768 piksel ile 980 piksel (veya maksimum genişlik: 980 piksel ve minimum genişlik: 768 piksel) arasındaki daha kesin aralığa değiştirir.

Arka Uçta Özel CSS Ne Uygulanır?

Her üç duyarlı sekmeye (masaüstü, tablet ve telefon) özel CSS eklediğimizi varsayalım.

Masaüstünde butonu modülün sağ alt köşesine konumlandırıyoruz.

Tablette, masaüstü kodunu geçersiz kılıyoruz ve düğmeyi modülün tam genişliğine yayıyoruz.

Telefonda, tablet CSS'sini geçersiz kılıyoruz ve ekranı normale döndürüyoruz.

CSS'yi arka uçta incelersek, Divi'nin kodu aşağıdaki medya sorgularıyla düzenlediğini görebiliriz, böylece yapmanız gerekmez:

Masaüstü:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tablet:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefon

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSS Divi'de nasıl saklanır?

Divi'nin yerleşik hız optimizasyonlarının bir parçası olarak, Divi Builder içindeki tüm stiller (özel CSS dahil) birleştirilir, küçültülür ve daha hızlı sayfa yükleme için statik bir CSS dosyası olarak saklanır. Bu nedenle, bir alt tema aracılığıyla özel CSS ekleme ihtiyacını atlamak istiyorsanız, sitenizi yavaşlatma konusunda endişelenmenize gerek kalmadan yerleşik duyarlı CSS girişlerinden yararlanabilirsiniz.

Daha fazla bilgi için Divi sitenizi nasıl hızlandıracağınızla ilgili yazımıza göz atın.

Son düşünceler

Umarım bu gönderi, web sitenizde uygun duyarlı tasarım değişiklikleri yapmak için Divi'nin yerleşik özel CSS giriş kutularından nasıl yararlanacağınızı biraz daha iyi anlamanıza yardımcı olur.

Çoğu insan için tasarımınıza özel CSS eklemek için gelişmiş sekmeye gitmeye gerek kalmayacak. Divi'de yerleşik olarak o kadar çok seçenek vardır ki, ileri düzey kullanıcılar bile nadiren özel CSS kullanmaya ihtiyaç duyacaktır. Ancak, gelişmiş stile ihtiyacınız olduğunda zaman gelirse, Divi'de yapmanın ne kadar kolay olduğunu bilmek yardımcı olur.

Divi'nin özel CSS girişleriyle ilgili deneyiminiz nedir?