Divi Duyarlı Kesme Noktası Nasıl Belirlenir ve Tasarımınızı Medya Sorguları ile Ayarlama
Duyarlı web tasarımı bugün bir zorunluluktur. Bugün dünyada aktif olan 8 milyardan fazla mobil cihaz var. Ve her zaman yüksek olan akıllı telefonların ve tabletlerin büyüme oranı ile, belki de bazı ziyaretçiler sitenizi en azından ilk başta değil, masaüstünde asla görmezler. Bu yüzden cep telefonlarında ilk izlenimi yapmak çok önemlidir ve dikkatimizi gerektirir. Neyse ki, Divi teması duyarlıdır ve tüm cihazlarda iyi çalışan pürüzsüz ızgara düzeni ve medya sorgularının bir kombinasyonunu kullanır. Divi 2.6’nın yayınlanmasından bu yana, DIVI, belirli stil öğelerini masaüstü, tablet ve akıllı telefona göre kolayca görmenizi ve ayarlamanızı sağlayan temayı ve Divi Builder’ı ayarlamada duyarlı bir düzenleme kontrolüne sahiptir.
Divi sizin için ağır işin çoğunu yapsa da, ayarlama yaparken belirli ekran boyutları için duyarlı tasarımınızda yapılması gerekebilir. Bu nedenle, kendinizi Divi’ye duyarlı kesme noktasına aşina olmak önemlidir – sitenizin düzeninin belirli ekran boyutlarına uyacak şekilde değiştiği nokta. Bugün Divi’ye duyarlı kesme noktasını bulmanıza ve tasarımınızı mükemmelleştirmek için CSS’nizde bir medya sorgusunu nasıl kullanacağınızı göstermenize yardımcı olacağım. Hatta size gelecekteki değişiklik için referans olarak kullanabileceğiniz Divi medya sorgularının bir listesini bile vereceğim. Ama önce Divi’nin duyarlı düzenleme kontrolüne bakalım.
Divi Builder’ın Duyarlı Düzenleme Kontrolünü kullanarak Divi’nin duyarlı düzenleme kontrolünü kullanmadıysanız, bu başlamak için iyi bir yerdir. Divi, sitenizin üç ana cihazda (masaüstü, tablet ve cep telefonu) nasıl oluşturulduğunu görmenizi kolaylaştırdı. Temada tasarım değişiklikleri yaparken yararlı olan temanın ayarlanmasından görebilirsiniz. Çubuk tarafının altındaki aygıt simgesini tıklamanız sadece temayı ayarlayabilirsiniz. Ayrıca, her bir modülün divi üreticisinden nasıl oluşturulduğunu da görebilirsiniz. Herhangi bir modül ayarını gördüğünüzde, Göz simgesini tıklayın ve her ekran boyutundaki içeriği görüntülemek için farklı bir aygıtı tıklayın.
yazı tipi boyutu: 30px;
}
}
“Tümüne” ödeme, medya türünü tanımlar ve “(maksimum genişlik: 980px)”, CSS braketlerinin uygulanması gereken cihazın genişliğini belirleyen bir medya özelliğidir. Bu örnekte, H1 yazı tipinin boyutu yalnızca 980px veya daha düşük bir ekranda 30px olacaktır.
Her cihaz için genel genişlik aralığı aşağıdaki gibidir: Büyük masaüstü: standart masaüstünün üstüne 1405px: 1100px ile 1405px dizüstü bilgisayar ve tablet arasında büyük: 980px ve 1100px arasında tablet: 768 piksel ve 980 piksel akıllı phone ve küçük Tabletler: 320 piksel ve 768 piksel arasında; Akıllı telefon: 320 piksel ve 480 piksel arasında; Aşağıda, Divi temasında kullanılan ana medya sorgularının bir listesi verilmiştir. Bunu özel CSS’niz için kullanışlı bir şablon olarak kullanabilirsiniz. /*** Duyarlı stiller büyük masaüstü ve üstü ***/
@Media All and (min-width: 1405px) {
}
/*** Duyarlı Stiller Standart masaüstü ***/
@Media All and (min-width: 1100px) ve (maksimum genişlik: 1405px) {
}
/*** Duyarlı stiller tablet ve altında ***/
@Media All and (Max-Width: 980px) {
}
/*** Duyarlı Stiller Yalnızca Tablet ***/
@Media All and (min genişliği: 768px) ve (maksimum genişlik: 980px) {}
/*** Duyarlı Stiller Yalnızca Akıllı Telefon ***/
@Media All and (Max-Width: 767px) {
}
/*** Duyarlı Stiller Portre Akıllı Telefon ***/
@Media All and (Max-Width: 479px) {
}
Tasarımınızı medya sorgularıyla ayarlamak, her cihaz için hedeflenen özel CSS eklemek için Divi’nin varsayılan medya sorgularını kullanabilirsiniz. Bunun için özelleştirici temasını kullanmanızı öneririm. Bu, temanıza CSS özelliği eklemenizi ve her cihazın sonuçlarını tek bir yerde gerçek zamanlı olarak görmenizi sağlar.
WordPress kontrol panelinizden, Divi → Ayarlama Teması’nı açın.
Ardından, yan çubuğun altındaki ek CSS seçin.
Bu örnek için, bir başlık ve her birinin altındaki düğme modülü ile dört modülü ile oluşturulan yapay bir sayfam var.
Diyelim ki düğmeyi yalnızca bir akıllı telefonda genişletmek istediğinizi varsayalım. Bunu yapmak için, akıllı telefonları hedefleyen aşağıdaki medya sorgularını kopyalayın: @Media All and (Max-Width: 480px) {
} Ardından, medya braketlerimde yeni düğme stili için istediğiniz CSS’yi ekleyin: @Media All and (Max-Width: 480px) { .et_pb_module.et_pb_button {Ekran bloğu;
}
}
Ardından medya sorgularını ek CSS metin kutusuna yapıştırın.
Artık değişiklikleri görmek için tema ayarının yanındaki çubuğun altındaki cihaz simgesini tıklayarak cihazın görünümü arasında geçiş yapabilirsiniz.
Akıllı telefon cihazı ekranındaki düğmenin genişliğindeki değişikliklere dikkat edin.
Targe bir tarayıcı geliştiricisi kullanarak daha spesifik bir genişlik. Bazı tasarımlar için, Divi’nin varsayılan kesme noktası yeterince spesifik değildir. Bazen geçici bir durdurma noktası ve kendi medya sorgularınız eklemeniz gerekir. Örneğin, gölgelikinizin 980px divi’de kırılmasını beklemek yerine 1000 piksel genişlikte ayarlamalara ihtiyaç duyduğunu görebilirsiniz. Bu tür bir ayar yapmak için, geçici durdurma noktasını belirlemek için bir tarayıcı geliştiricisi kullanabilirsiniz. Chrome kullanıyorsanız, duyarlı ve özel bir cihazı test etmenizi sağlayan bir aracı vardır. Bu araca erişmek için ekranda sağ tıklayın ve görünen gerilme menüsünün öğelerini kontrol et’i seçin. Küçük aygıt araç çubuğu simgesini tıklayın. Ardından, cihazın görünümünü değiştirmek veya özel genişliği ayarlamak için üstteki menüyü kullanın. Üstesinden gelmek için ihtiyacınız olan sorunları hedeflemeniz gereken tam genişlik ile birlikte göstermek için ekran boyutunu bile sürükleyebilirsiniz. Geçici durdurma noktasını belirledikten sonra, özel CSS değişiklikleriniz için medya sorgusunu yapın. Örneğin, H1 yazı tipi boyutunuzu 780px ile 1000 piksel arasında 30px olarak değiştirmeniz gerekiyorsa, aşağıdaki medya sorgularını yapacak ve özel CSS’nize ekleyeceksiniz:
@Media All and (min-width: 780px) ve (maksimum genişlik: 1000px) { H1 { yazı tipi boyutu: 30px; }
}
İşte burada!Duyarlı web siteleri için ihtiyacınız olan son düşüncelerin çoğu zaten Divi’de.Ancak, sitenizin tasarımına bağlı olarak, Divi Divi varsayılan ortam sorgularını kullanırken, durdurma noktasına daha fazla özel CSS eklemeniz gerekebilir.Ve eğer yeterli değilse, her zaman bir tarayıcı geliştiricisi kullanarak ihtiyacınız olan kesme noktasını bulabilirsiniz.Orada birçok araç var.Firefox’un kullanabileceğiniz duyarlı bir tasarım modu vardır.Safari kullanırsanız, yeni bir duyarlı tasarım modu da var. Umarım yorumlarda sizden haber almayı umuyorum!
