Herkese merhabalar bugünkü yazımız da WordPress mobil uyumlu yapma hakkında bahsedeceğiz , wordpress mobil uyumlu yapmayı bir kaç alt başlıkta inceleyeceğiz çünkü sitenizin teması gutenberg blokları yada elementor builder gibi araçlar kullanıyor olabilir her birisi için ayrıca çözümlerimizi paylaşacağız.
WordPress Mobil Uyumlu Yapma Kodu
WordPress sitenizde mobil ekrana geçiş yaptığınız da ekranda taşan bazı kısımlar yada gereğinden daha büyük yazı fontlarınız varsa bunları mobil css ayarlama kodları ile yapabilirsiniz. Mobil css ayarları için kullanacağız kod şu şekildedir :
@media (max-width:800px) {
.buyuk-gozuken-baslik {
font-size:15px !important;
} }
Bu kodu kullanmak için öncelikle değiştirmek istediğiniz kısmın class yani sınıf ismine ihtiyacınız olucak , bu ismi öğrenmek için sayfada ilgi alanın üstüne gelip sağ tıklayın ve açılan menüde “İncele” ye tıklayınız.
Bu örnekte de gördüğünüz gibi yazı başlığımız masaüstü için 55px olarak ayarlanmış ancak mobil ekranlar için ek bir ayar yapılmamış şimdi ise yukarda verdiğimiz kodu kullanarak bu başlığı küçültelim, bu kodu harici css dosyanıza yada style etiketleri arasına yazabilirsiniz.
Kodumuzu ekledikten sonra böyle bir sonuç alacağız, max-width:800px ile 800px’ten küçük her ekranda kodumuzun çalışmasını gerektiğini belirttik ve font-size yani font büyüklüğümüzü 55px’ten 15px’e küçültmüş olduk.
Bu örnekte yapmış olduğumuz düzenleme font-size ile ilgiliydi ancak bu kodu kullanarak div’lerinizin genişliğini ayarlayabilir, istediğiniz kısmı display:none kullanarak mobile kapatabilirsiniz örnekler tabiki bununla sınırlı değil mobil için yapmak istediğiniz tüm düzenlemeleri bu şekilde yapabilirsiniz.
Elementor Mobil Uyumlu Yapma
Elementor sayfa inşa aracını kullanarak inşa ettiğiniz siteleriniz için mobil ayarlarını yapmanız için ister yukarıda verdiğimiz kodu isterseniz de şimdi vereceğimiz tekniği kullanarak Elementor uyumlu temalarınız da mobil ayarlarını yapın.
Elementor ile sayfamıza bir adet başlık ekledik ve font büyüklüğümüzü de 40px olarak ayarladık fakat mobilde 20px gözükmesini istiyoruz bunun için ilk olarak sol alt kısımda bulunan Duyarlı Mod butonuna dokunuyoruz.
Üst kısımada açılan panelden telefon simgesine dokunuyoruz ve mobil moda geçiyoruz, ardından tekrardan başlığımızı üstüne tıklıyoruz.
Başlığımıza mobil için yeni bir boyut değeri veriyoruz ve artık hazır. Mobil için başlığımız farklı bir boyutta gözükecek ve ekranda taşma sorunları yaratmayacaktır. Bu yöntemi elementor içerisindeki tüm elementler de kullanabilirsiniz.
Eğer bu konuda yeterli bilgiye sahip değilseniz uygun fiyatlı WordPress teknik destek hizmetimizden yararlanmak için bizimle iletişime geçebilirsiniz.