Masaüstünden WordPress Sitelerinin Mobil Sürümü Nasıl Görüntülenir

WordPress sitenizin mobil sürümünü masaüstü önizlemesinde incelemek, basit ama önemli bir görevdir.

Sitenizin daha küçük ekranlarda nasıl göründüğünü kontrol etmenizi sağlar, aksi takdirde gözden kaçırabileceğiniz düzen sorunlarını veya tasarım kusurlarını tespit etmenize yardımcı olur.

Yıllar boyunca, sitelerinin mobil cihazlarda harika görünmesini ve iyi çalışmasını sağlamak için birçok web sitesi sahibiyle çalıştık. Ayrıca WPBeginner sitesinde yeni sayfalar ve gönderiler oluştururken mobil uyumlu tasarımlara öncelik veriyoruz.

Fark ettiğimiz bir zorluk, doğru araçlar olmadan masaüstünde mobil sürümü kontrol etmenin zor olabilmesidir.

Neyse ki, WordPress'in Tema Özelleştiricisi ve Google Chrome'un DevTools Cihaz Modu, hızlı bir şekilde önizlemenize ve ayarlamalar yapmanıza olanak tanır.

Bu kılavuzda, masaüstünden WordPress sitelerinin mobil sürümünü görüntülemek için her iki yöntemi de size adım adım anlatacağız.

Mobil Düzeninizi Neden Önizlemelisiniz

Web sitesi ziyaretçilerinizin %50'sinden fazlası sitenize cep telefonlarını kullanarak erişecek ve yaklaşık %3'ü tablet kullanacaktır.

Bu, mobil cihazlarda harika görünen bir siteye sahip olmanın çok önemli olduğu anlamına gelir.

Aslında mobil o kadar önemlidir ki Google artık web sitesi sıralama algoritması için mobil öncelikli bir dizin kullanıyor. Bu, Google'ın dizine eklemek için sitenizin mobil sürümünü kullanacağı anlamına gelir. WordPress SEO için nihai rehberimizi okuyarak daha fazla bilgi edinebilirsiniz.

duyarlı bir WordPress teması kullansanız bile, sitenizin mobilde nasıl göründüğünü kontrol etmeniz gerekir. Mobil kullanıcıların ihtiyaçlarına göre optimize edilmiş, önemli açılış sayfalarının farklı sürümlerini oluşturmak isteyebilirsiniz.

Çoğu mobil önizlemenin tamamen mükemmel olmayacağını unutmamak önemlidir, çünkü çok sayıda farklı mobil ekran boyutu ve tarayıcı vardır. Son testiniz her zaman sitenizi bir mobil cihazda görüntülemek olmalıdır.

Sonraki bölümlerde, WordPress web sitenizin mobil sürümünü bir masaüstünde nasıl görüntüleyebileceğinize bakacağız.

Masaüstü tarayıcıları kullanarak sitenizin mobilde nasıl göründüğünü test etmek için 2 farklı yöntemi ele alacağız. Herhangi bir bölüme atlamak için aşağıdaki bağlantılara tıklayabilirsiniz:

• Yöntem 1: WordPress Tema Özelleştiriciyi Kullanma
• Yöntem 2: Google Chrome'un DevTools Cihaz Modunu Kullanma
• Bonus İpucu: WordPress'te Mobil Özel İçerik Oluşturma
• Video Eğitim
• Sıkça Sorulan Sorular

Başlayalım!

Yöntem 1: WordPress Tema Özelleştirici'yi Kullanma

WordPress tema özelleştiricisini kullanarak WordPress sitenizin mobil sürümünü önizleyebilirsiniz.

WordPress kontrol panelinize giriş yapın ve Görünüm » Özelleştir ekranına gidin.

Bu, WordPress tema özelleştiricisini açacaktır.

Kullandığınız temaya bağlı olarak, sol taraftaki menüde biraz farklı seçenekler görebilirsiniz.

Ekranın alt kısmında, mobil simgesine tıklayın.

Ardından sitenizin mobil cihazlarda nasıl göründüğüne dair bir önizleme göreceksiniz.

Mobil sürümü önizlemenin bu yöntemi, blogunuzu henüz oluşturmayı bitirmediğinizde veya bakım modunda olduğunda özellikle kullanışlıdır.

Artık web sitenizde değişiklikler yapabilir ve bunları yayına almadan önce nasıl göründüklerini kontrol edebilirsiniz.

Yöntem 2: Google Chrome'un DevTools Cihaz Modunu Kullanma

Web sitesinin mobil sürümünü görüntüleme konusundaki bir sonraki yöntem Google Chrome tarayıcısını kullanmaktır.

Google Chrome tarayıcısı, herhangi bir web sitesinde çeşitli kontroller yapmanıza olanak tanıyan, mobil cihazlarda nasıl göründüğünü önizleme dahil, bir dizi geliştirici aracına sahiptir.

Masaüstünüzde Google Chrome tarayıcısını açın ve kontrol etmek istediğiniz sayfayı ziyaret edin. Bu, sitenizdeki bir sayfanın önizlemesi veya hatta rakibinizin web sitesi olabilir.

Ardından, sayfaya sağ tıklamanız ve 'İncele' seçeneğini seçmeniz gerekir.

Ekranın sağ tarafında veya altında yeni bir panel açılacaktır.

Şuna benzer görünecektir:

Geliştirici görünümünde, sitenizin HTML kaynak kodunu, CSS'sini ve diğer ayrıntıları görebileceksiniz.

Ardından, mobil görünüme geçmek için 'Cihaz Araç Çubuğunu Aç/Kapat' düğmesine tıklamanız gerekir.

Web sitenizin önizlemesinin mobil ekran boyutuna küçüldüğünü göreceksiniz.

Web sitenizin genel görünümü de mobil görünümde değişecektir. Örneğin, menüler daralacak ve ek simgeler menünün sağı yerine soluna taşınacaktır.

Sitenizin mobil görünümünün üzerine fare imlecini getirdiğinizde, bu bir daireye dönüşecektir. Bu daireyi fare ile hareket ettirerek mobil bir cihazdaki dokunmatik ekranı taklit edebilirsiniz.

Ayrıca, mobil ekranı yakınlaştırmak veya uzaklaştırmak için 'Shift' tuşunu basılı tutabilir, ardından fareyi tıklayıp hareket ettirebilirsiniz.

Sitenizin mobil görünümünün üzerinde bazı ek seçenekler göreceksiniz.

Bu ayarlar birkaç ek şey yapmanıza olanak tanır. Sitenizin farklı türdeki akıllı telefonlarda nasıl görüneceğini kontrol edebilirsiniz.

Örneğin, bir iPhone gibi bir mobil cihaz seçebilir ve sitenizin orada nasıl göründüğünü görebilirsiniz.

Sitenizin performansını hızlı veya yavaş 3G bağlantılarında da simüle edebilirsiniz. Döndürme simgesini kullanarak mobil ekranı döndürebilirsiniz.

Bonus İpucu: WordPress'te Mobil Özel İçerik Oluşturma

Web sitenizin duyarlı bir tasarıma sahip olması, mobil ziyaretçilerin web sitenizde kolayca gezinebilmesi için önemlidir.

Ancak, yalnızca duyarlı bir siteye sahip olmak yeterli olmayabilir. Mobil cihazlardaki kullanıcılar genellikle masaüstü kullanıcılarından farklı şeyler ararlar.

Birçok premium tema ve eklenti, masaüstünde farklı, mobilde farklı görünen öğeler oluşturmanıza olanak tanır. Ayrıca, açılış sayfalarınızı mobil görünümde düzenlemek için sayfa oluşturucu eklentisi gibi SeedProd kullanabilirsiniz.

Potansiyel müşteri oluşturma formlarınız için mobil cihazlara özel içerikler oluşturmayı düşünmelisiniz. Mobil cihazlarda bu formlar, ideal olarak yalnızca bir e-posta adresi olmak üzere minimum bilgi istemelidir. Ayrıca iyi görünmeli ve kapatılması kolay olmalıdır.

Daha fazla ayrıntı için, WordPress'te bir açılış sayfası oluşturma kılavuzumuza bakabilirsiniz.

Mobil özel açılır pencereler ve potansiyel müşteri oluşturma formları oluşturmanın bir başka harika yolu OptinMonster kullanmaktır. Pazardaki en güçlü WordPress açılır pencere eklentisi ve potansiyel müşteri oluşturma aracıdır.

OptinMonster, mobil kullanıcılara karşı masaüstü kullanıcılara farklı kampanyalar göstermenize olanak tanıyan özel cihaz hedefleme görüntüleme kurallarına sahiptir. En iyi dönüşümleri elde etmek için bunu OptinMonster'ın coğrafi hedefleme özelliği ve diğer gelişmiş kişiselleştirme özellikleriyle birleştirebilirsiniz.

Daha fazla bilgi için nasıl dönüştüren mobil pop-up'lar oluşturacağınız konusundaki rehberimize göz atabilirsiniz.

Video Eğitim

Gitmeden önce, masaüstünden WordPress sitelerinin mobil sürümünü nasıl görüntüleyeceğinizle ilgili video eğitimimize göz atmak isteyebilirsiniz.

WPBeginner'a Abone Olun

Sıkça Sorulan Sorular

Sitenizin mobil düzenini önizleme hakkında okuyucularımız tarafından sıkça sorulan bazı sorular şunlardır.

Bu masaüstü önizlemeleri gerçek mobil cihazlarla tam olarak eşleşecek mi?

Her zaman değil. Açık düzen sorunlarını yakalamak için faydalı olsa da, bu masaüstü tabanlı araçlar yalnızca ekran boyutlarını, tarayıcı davranışını ve ağ koşullarını taklit edebilir.

Performans tuhaflıklarını veya dokunma hareketleri gibi donanıma özgü etkileşimleri yakalayamayabilirler.

Bu nedenle, yayına geçmeden önce gerçek dünya kullanılabilirliğini doğrulamak için her zaman telefonlar ve tabletler dahil olmak üzere gerçek cihazlarda test etmenizi öneririz.

Sitemi masaüstümden mobil görünümde düzenleyebilir miyim?

Evet, WordPress, Özelleştirici'de mobil modu önizlerken veya Elementor, SeedProd ve Beaver Builder gibi sayfa oluşturucuları kullanırken içeriği düzenlemenize olanak tanır.

Mobil önizlemeye geçtiğinizde şunları yapabilirsiniz:

• Daha küçük ekranlar için dolgu, kenar boşlukları ve yazı tipi boyutlarını ayarlayın.
• Belirli öğeleri yalnızca mobilde gizleyin veya gösterin (büyük resimler veya yalnızca masaüstü bannerları gibi).
• Dokunmatik etkileşimler için tasarlanmış menüleri ve widget'ları test edin.

Çoğu oluşturucu, masaüstü veya tablet sürümlerini etkilemeden düzenleri özelleştirebilmeniz için cihaza özel ayarlar sağlar.

WordPress mobil görünümümü giriş yapmadan nasıl kontrol edebilirim?

Canlı sitenin ziyaretçiler için nasıl göründüğünü görmek istiyorsanız, bu yöntemleri deneyin:

• Sitenizi gizli bir tarayıcı penceresinde açın ve geliştirici araçlarının cihaz modunu kullanın.
• Responsive Design Checker gibi çevrimiçi duyarlı tasarım denetleyicilerini kullanın.

Bu araçlar, giriş kimlik bilgileri gerektirmeden sitenizi farklı çözünürlüklerde görüntülemenizi sağlar.

Umarım bu makale, sitenizin mobil düzenini nasıl önizleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, WordPress sitesini mobil uygulamaya dönüştürmek için en iyi eklentiler hakkındaki uzman seçimlerimize bakmak ve mobil uyumlu bir web sitesi oluşturma yolları hakkında bilgi edinmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.