WP Bakery Page Builder'in container'i/row'u full width yapma özelliği ilk çıktığından beri 0,5-1 değerinde CLS sorunu oluşturuyor. Çünkü JS ile inline olarak dinamik CSS atayarak yapıyor. DOM'dan sonra JS'ler çalıştırıldığı için milisaniyelik olarak container'in full width olmayan hali yükleniyor ve ardından JS ile dinamik inline stiller eklenip full width'e dönüşüyor. Buna çözüm olarak WP Bakery Page Builder'de row'u full width yapmak için ilgili özelliği kullanmak yerine ihtiyaç üzerine yazdığım özel CSS kodlarını kullanabilirsiniz. Aynı sorunla karşılaşan ve CLS'i çözmek isteyen olursa işine yarayabilir.
KODLAR:
/** Full Width Container **/
/* Homepage Main Slider */
body.home .main-container > .container,
body.home .main-container > .container .vc_row:first-of-type,
body.home .main-container > .container .wpb_row:first-of-type,
body.home .main-container > .container .wpb_column:first-of-type,
body.home .main-container > .container .vc_column-inner:first-of-type,
body.home .main-container > .container .wpb_wrapper:first-of-type,
body.home .swiper-slide {
min-width: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
Bilgilendirmeler:
1) Bu kodları yazdığım sitede main etiketinin altındaki container'den sonra sadece ilk gelen row ve column'u full width yapmak istediğim için :first-of-type kullandım. Siz başka bir row veya column'a uygulamak isterseniz WP Bakery Page Builder'den özel class verip .element.custom-class şeklinde uygulayabilirsiniz.
2) .swiper-slide'i kaldırabilirsiniz veya slider bileşeniniz varsa onu yazabilirsiniz. Sitedeki slider'ı da full width yapmak istediğim için yazdım. Eğer .swiper-slide satırındaki seçicileri kaldırırsanız bir üstündeki satırın sonunda bulunan virgülü kaldırın. Aksi taktirde geçersiz söz diziminden (syntax) dolayı bu CSS kodlarının hiçbirisi çalışmaz.
3) Buradaki kodlar sadece anasayfada çalışır. Tüm sayfalarda çalışması için "body.home" kısmını kaldırabilirsiniz. Sadece belirli sayfa türünde çalışması için "body.single.single-post" veya "body.archive.woocommerce-page" vb. kullanabilirsiniz. Sadece belirli sayfada çalışması içinse "body.page-id-xxxxx" kullanmalısınız ("xxxxx" yerine sayfanın id numarası).
/* Sadece tekil yazı sayfalarında çalışır */
body.single.single-post .main-container > .container,
/* Sadece Woocommerce arşiv sayfalarında çalışır */
body.archive.woocommerce-page .main-container > .container,
4) Temanız .main-container adlı class'a sahip bir HTML etiketi içermeyebilir. Bu durumda ".main-container" kısmını kaldırabilirsiniz veya main etiketi mevcutsa tüm kodlardaki ilgili kısmı aşağıdaki gibi kullanabilirsiniz:
body.home main > .container,