WPBakery Page Builder (eski adıyla Visual Composer) ile hazırladığınız sayfalarda bazı elementleri yalnızca mobil cihazlarda, yalnızca tablette veya yalnızca masaüstünde göstermek ya da gizlemek isteyebilirsiniz. Bu rehberde tüm yöntemleri adım adım açıklıyoruz.
Neden Element Gizleme İhtiyacı Doğar?
- Masaüstünde büyük hero banner göster, mobilde daha küçük ve hafif bir versiyon göster
- Mobil kullanıcılara dekoratif ve ağır elementleri gösterme — sayfa hızını artır
- Tablette farklı sütun düzeni kullan
- Masaüstünde sidebar göster, mobilde gizle
- Mobil için optimize edilmiş alternatif menü veya buton göster
Yöntem 1: WPBakery Yerleşik CSS Sınıfları (En Yaygın)
WPBakery, responsive gizleme için hazır CSS sınıfları sunar. Bu sınıfları herhangi bir Row, Column veya element’in Extra class name alanına ekleyerek kullanabilirsiniz.
Gizleme Sınıfları
- vc_hidden-xs → Mobil telefon ekranlarında gizle (767px ve altı)
- vc_hidden-sm → Küçük tablet ekranlarında gizle (768px – 991px)
- vc_hidden-md → Orta boy ekranlarda gizle (992px – 1199px)
- vc_hidden-lg → Büyük masaüstü ekranlarında gizle (1200px ve üzeri)
Nasıl Uygulanır?
- Gizlemek istediğiniz Row veya Column elementine tıklayın
- Düzenleme (kalem) simgesine tıklayın — element ayarları açılır
- Design Options veya Extra class name alanını bulun
- İlgili CSS sınıfını girin
- Kaydedin
Kombinasyon Örnekleri
- Sadece mobilde gizle:
vc_hidden-xs - Mobil ve küçük tablette gizle:
vc_hidden-xs vc_hidden-sm - Sadece masaüstünde gizle:
vc_hidden-lg vc_hidden-md - Her yerde gizle (test için):
vc_hidden-xs vc_hidden-sm vc_hidden-md vc_hidden-lg
Yöntem 2: WPBakery Responsive Options Sekmesi
WPBakery 5.0 ve üzeri sürümlerde Row düzenleme penceresinde görsel arayüz mevcuttur:
- Row düzenleme penceresini açın
- Responsive Options sekmesine tıklayın
- Her cihaz boyutu için ayrı sütun genişliği, görünürlük ve hizalama ayarlayın
- Visibility açılır menüsünden Hidden seçeneğini belirleyin
Yöntem 3: Özel CSS ile Tam Kontrol
Daha esnek ve spesifik kontrol için temanızın Custom CSS bölümüne özel sınıflar ekleyebilirsiniz:
/* Sadece mobilde göster, masaüstünde gizle */
.sadece-mobil {
display: none !important;
}
@media (max-width: 767px) {
.sadece-mobil {
display: block !important;
}
}
/* Sadece masaüstünde göster, mobilde gizle */
.sadece-masaustu {
display: block !important;
}
@media (max-width: 991px) {
.sadece-masaustu {
display: none !important;
}
}
/* Sadece tablette göster */
.sadece-tablet {
display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
.sadece-tablet {
display: block !important;
}
}Custom CSS’i ekledikten sonra element’in Extra class name alanına sadece-mobil, sadece-masaustu veya sadece-tablet yazmanız yeterli.
Yöntem 4: Elementor ile Karşılaştırma
WPBakery kullanıyorsanız ve responsive kontrol zorluğu yaşıyorsanız Elementor’un responsive gizleme arayüzü daha kullanıcı dostudur — her element için Device Visibility seçeneği doğrudan panelde görünür.
Sık Yapılan Hatalar
- Row yerine Column’a sınıf eklemek: Row gizlenmezse Column gizlense de Row boş alan bırakır — doğru elementi seçtiğinizden emin olun
- CSS çakışması: Tema veya başka bir eklenti aynı sınıfı farklı tanımlıyor olabilir — tarayıcı DevTools ile kontrol edin
- Cache sorunu: CSS değişikliği cache’e alındıysa görünmeyebilir — cache temizleyin
Test Etme
- Chrome DevTools: F12 → Device Toolbar (Ctrl+Shift+M) → farklı cihaz boyutlarını simüle edin
- Firefox Responsive Design Mode: F12 → Responsive Design Mode
- Simülatör yanında gerçek cihazda da test etmeyi unutmayın
Sonuç
WPBakery’de responsive gizleme için en güvenilir yöntem yerleşik CSS sınıflarıdır (vc_hidden-xs vb.). Tema güncellemelerinden etkilenmez ve anında uygulanır. Daha fazla kontrol için özel CSS sınıfları oluşturabilir, görsel arayüz için Responsive Options sekmesini kullanabilirsiniz.
