Elementor web sitenizi mobil cihazlara daha duyarlı hale getirin

Mobil duyarlı bir web sitesi, herhangi bir çevrimiçi işletmenin hayati bir parçasıdır.

Google, mobil sayfa yükleme hızını herhangi bir web sitesinin arama sıralamasının temel belirleyicisi olarak kullanıyor. Bunun temel nedeni küresel web trafiğinin yarısından fazlasının mobil trafikten gelmesidir.

Bu nedenle hem sitenizin sağlığı hem de Google arama motorunda daha iyi sıralanmanız için mobil uyumlu bir web sitesi kaçınılmazdır. Elementor sayfa oluşturucuyla mobil uyumlu bir web sitesini nasıl oluşturabileceğimize odaklanacağız

• Elementor'un duyarlı web sitesi tasarımı nedir?
• Mobil, Masaüstü ve Sekme ayarları nasıl yapılır
• Mobil ekranınızda Başlığı ayarlayın
• Mobil Cihazlar için dolguyu veya Kenar Boşluklarını ayarlayın
• Her sütunu yatay olarak oluşturduğunuzda tüm cihazlarda harika bir şekilde uyum sağlar
• Arka plan resmini mobil/masaüstü görünümüne göre değiştirin
• Masaüstü/mobil görünümde herhangi bir bölümün görünürlüğünü değiştirme
• Sütun sırasını değiştirme
• Alternatif bir bölüm oluşturun
• Sütun genişliğini ayarla
• Çözüm

Elementor'un duyarlı web sitesi tasarımı nedir?

Duyarlı bir düzen, tüm içeriği her ekran boyutuna göre otomatik olarak ölçeklendirerek yenilikçi bir şekilde çalışır. İzleyicilerinizin içeriğinizi herhangi bir çaba harcamadan görebilmesi için mobil ekrandaki görselleri ve içeriği otomatik olarak yeniden boyutlandırır.

Çoğumuz mobil duyarlı olduğu iddia edilen bir tema satın alırız; Ancak temanızın tasarımı mobil ekranda tamamen bozulduğunda işler sinir bozucu olabilir.

Elementor sayfa oluşturucunun kullanarak web sitesi tasarımınızı sıfırdan oluşturabileceğiniz, mobil duyarlı bir çözüm geliştirdik . Bu mobil duyarlı araçların yardımıyla, web sitenizin düzeninin herhangi bir köşesinde, özellikle tipografi, dolgu, Kenar Boşluğu ve mobil hizalamada ince ayar yapabilirsiniz. Ayrıca Mobil’de sütun ayarlarını ve sıralamasını değiştirebileceksiniz.

Artık mobil görünüm moduna geçerek sayfanızın mobil ayarını düzenleyebilir ve mobil düzene göre ayarlamak için aşağıdaki seçenekleri kontrol edebilirsiniz.

1. Herhangi bir Başlığın mobil ekranda çok büyük görünüp görünmediğini kontrol edin.
2. İçeriğin dolgusunu veya içeriğin yanlarındaki boşluğu kontrol edin
3. Sayfa sütunu hizalamasını kontrol edin, nasıl mükemmel görünüyor; ortalanmış, sağ veya sol
4. Sütunların doğru sırada görünüp görünmediğini veya değiştirmeniz gerekip gerekmediğini kontrol edin.

Şimdi daha derine inelim ve Elementor Sayfa oluşturucuyla işlerin nasıl yürüyeceğini öğrenelim.

Mobil, Masaüstü ve Sekme ayarları nasıl yapılır

Neredeyse tüm düzenlenebilir özelliklerde Mobil, Masaüstü ve Sekme ayarlarını yapma seçeneği bulunur. Menünün altındaki duyarlı moda tıklarsanız

Mobil ekranınızda Başlığı ayarlayın

Bazen masaüstü sitemizde kalın ve belirgin bir başlık isteriz ve bu başlık masaüstü ekranda gayet güzel görünür, ancak Mobil görünümü açtığınızda başlık tüm ekranı kaplar ve sığmaz gibi görünür.

Sekme ve Mobil'deki herhangi bir metin öğesinin metin boyutunu ayarlayabilirsiniz. Mobil ekranda harika görünen ve ekrana daha iyi sığacak şekilde mobil başlıklar için farklı metin boyutları da ayarlayabilirsiniz. Bu demo sayfasında, masaüstü sitede harika görünen, mobil ekranda ise tüm ekranı kaplayan bir Başlık oluşturdum.

Başlık sütununun düzenleme seçeneğine tıklarsam, masaüstünde ve ayrıca mobil ekranda iyi görünen başlık boyutunu ayarlayabildiğim tipografi bölümüne gidebilirim. Her ikisini de ayrı ayrı kontrol edebiliyorum. Masaüstü site görünümümde başlık boyutu 49 piksel, ancak Mobil görünümde bu boyut sığmıyor

Yeniden ayarlamak için mobil duyarlı mod > stil > tipografi > piksel boyutunu mobil ekrana kolayca sığacak şekilde 30'a ayarla seçeneğine tıklayacağım.

Mobil Cihazlar için dolguyu veya Kenar Boşluklarını ayarlayın

Dolguları ayarlarken, boyutu genel ekran boyutuna göre tutacağından EM veya yüzde olarak ayarlanan değerler yerine Piksel cinsinden değerlerin kullanılmaması önerilir.

Masaüstü sitesinde iyi görünen, sağda ve solda 70 piksellik dolgu kullandığımızı görebilirsiniz; Ancak bu ayar için mobil görünüm tam bir karmaşadır.

Dolguyu her iki tarafta 17 piksele yeniden ayarlayabiliriz, sonra tamamen iyi olduğu ortaya çıkar.

Alternatif olarak, hem masaüstü hem de mobil görünümde ekranı ayarlamanıza gerek kalmadan içeriğinizin bir kutuda görüntüleneceği tüm sütun ayarını 750 piksele ayarlayabilirsiniz; kutunun içindeki içeriği otomatik olarak ayarlayacaktır.

Her sütunu yatay olarak oluşturduğunuzda tüm cihazlarda harika bir şekilde uyum sağlar

Tasarımcıların en çok tercih ettiği sütunu yatay olarak oluşturduktan sonra bölümleri çoğaltabilir ve zamandan tasarruf edebilirsiniz. Her seferinde bir bölüm oluşturun ve işler yolunda giderse zamandan tasarruf etmek için yeniden kullanın.

Arka plan resmini mobil/masaüstü görünümüne göre değiştirin

Bazı arka plan resimleri masaüstü görünümünde iyi görünür, ancak görüntünün mobil ekrandaki kadar büyük görünmeme olasılığı vardır. Bu yüzden yaratıcı düşünün ve mobil ekranda farklı bir resim seçin. Farklı bir mobil görünüm seçmek için bölüm > stil sekmesine tıklayın > cihaz simgesine tıklayın ve mobil görünümü seçin. Artık hangi görseli seçerseniz seçin, yalnızca mobil görünümde görünecektir.

Masaüstü/mobil görünümde herhangi bir bölümün görünürlüğünü değiştirme

Ayrıca cihaza göre herhangi bir bölümün veya sütunun görünürlüğünü de kontrol edebilirsiniz.

Bazen içeriğimizi veya görsellerimizi iki veya üç bölüm veya farklı sütunlar halinde gösteriyoruz ancak Mobil'de göstermeyi sevmiyoruz. Bu nedenle Elementor, mobil görünümde görüntülenmesini istemediğiniz bölümü gizleyebilir.

> Bölüm ayarları > gelişmiş >duyarlı seçeneğine gidin. Orada farklı olasılıklar veya görsel tercihler göreceksiniz; tercihinize göre masaüstünde bölümü gizleyebilir, sekmede gizleyebilir veya Mobil'de gizleyebilirsiniz.

Sütun sırasını değiştirme

Sütun sırasını ayarlar kısmından da değiştirebilirsiniz. Git; bölüm ayarları> Gelişmiş>Duyarlı> Sütunu ters çevir ve evet'e tıklayın.

Alternatif bir bölüm oluşturun

Mobil ve masaüstü görünümünde alternatif bölümler oluşturun. Bazen kaydırıcı bölümü Mobil'de masaüstündeki kadar kullanışlı görünmeyebilir, dolayısıyla kaydırıcı bölümünü kullanmak yerine başka bir bölümü kullanabilirsiniz. Bunu Gelişmiş sekmesine gidin > görüntülemek istemediğiniz bölümün görünürlüğünü açıp/kapatarak ve üzerine alternatif bir görsel ekleyerek yapabilirsiniz.

Sütun genişliğini ayarla

Mobil görünümde görüntülediğinizde tüm sütun bölümleri %100 genişliğe sahip olur. Ancak Mobil'de sütun genişliğine göre genişlik değiştirilebilir. İki sütununuz varsa her bölümün maksimum genişliğini %50 olacak şekilde ayarlayabilirsiniz.

Çözüm

Elementor, tüm ekran boyutlarındaki duyarlı sütun düzenini kontrol etmek için tüm güçlü özelliklerle birlikte gelir. Her bölümü görüntüleme modu seçimine göre yeniden ayarlamanıza olanak tanır. Mobil uyumlu bir web sitesine sahip olmak kaçınılmazdır çünkü Google algoritması en çok mobil uyumlu web sitelerinin sıralamasını dikkate alır. Duyarlı web siteleri yalnızca daha iyi SEO elde etmek için gerekli değildir, aynı zamanda daha fazla trafik almanız da gerekir çünkü trafiğin %80'inden fazlası mobil görüntülemelerden gelir.

Artık Elementor sayfa oluşturucu, kullanıcılarının çok fazla çaba harcamadan mobil uyumlu bir site oluşturmasına olanak tanıyan özel özelliklerle birlikte geliyor. Umarım makalemi faydalı bulursunuz ve Elementor kullanarak duyarlı bir web sitesinin nasıl oluşturulacağı konusunda tüm yanıtlarınızı alırsınız.