Elementor web sitenizi mobil cihazlara daha duyarlı hale getirin

Mobil uyumlu 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ında anahtar belirleyici olarak kullanmaktadır. Bunun nedeni, küresel web trafiğinin yarısından fazlasının mobil trafikten gelmesidir.

Bu nedenle mobil uyumlu bir web sitesi hem sitenizin sağlığı hem de Google arama motorunda daha üst sıralarda yer alması için kaçınılmazdır. Elementor sayfa oluşturucu ile nasıl mobil uyumlu bir web sitesi

• Elementor'un duyarlı web sitesi tasarımı nedir
• Mobil, Masaüstü ve Sekme ayarları nasıl yapılır?
• Mobil ekranınızdaki Başlığı Ayarlayın
• Mobil cihazlar için dolgu veya Kenar Boşluklarını ayarlama
• Her sütunu yatay olarak oluşturun ve tüm cihazlarda harika bir şekilde ayarlanır.
• Arka plan resmini mobil / masaüstü görünümüne göre değiştirme
• Masaüstü / mobil görünümdeki 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 ayarlama
• Sonuç

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 çalışır. Görüntüleyenlerin içeriğinizi herhangi bir çaba harcamadan görebilmeleri için mobil ekrandaki görüntüleri ve içeriği otomatik olarak yeniden boyutlandırır.

Birçoğumuz da mobil duyarlı olduğunu iddia eden bir tema satın alıyoruz; ancak, temanızın tasarımı mobil ekranda tamamen bozulduğunda işler sinir bozucu olabilir.

Bu tür durumların üstesinden gelmek için, Elementor sayfa oluşturucunun duyarlı düzen araçlarını kullanarak web sitesi tasarımınızı sıfırdan oluşturabileceğiniz mobil uyumlu bir çözüm bulduk. Bu mobil duyarlı araçların yardımıyla, özellikle tipografi, dolgu ve Kenar Boşluğu ve mobil hizalama olmak üzere web sitenizin düzeninin herhangi bir köşesini değiştirebilirsiniz. Ayrıca, Sütun ayarlarını değiştirebilecek ve Mobil'de sipariş verebileceksiniz.

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

1. Mobil ekranda herhangi bir Başlığın ç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ütun sırasını kontrol edin, doğru sırada görünüyorlarsa veya değiştirmeniz gerekiyorsa.

Şimdi daha derinlemesine inceleyelim ve Elementor Sayfa oluşturucu ile işlerin nasıl işleyeceğini öğrenelim.

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

Neredeyse tüm düzenlenebilir özellikler Mobil, Masaüstü ve Sekme ayarlarını yapma seçeneğine sahiptir. menünün altındaki duyarlı moda tıklarsanız

Mobil ekranınızdaki Başlığı Ayarlayın

Bazen masaüstü sitemizde cesur ve göze çarpan bir başlık istiyoruz ve masaüstü ekranında mükemmel görünüyor, ancak Mobil görünümü açtığınızda, başlık tüm ekranı alıyor ve uygun görünmüyor.

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

Başlık sütununun düzenleme seçeneğini tıklatırsam, masaüstünde ve mobil ekranda iyi görünen başlık boyutunu ayarlayabildiğim tipografi bölümüne gidebilirim. İkisini ayrı ayrı kontrol edebilirim. Masaüstü site görünümüm için başlık boyutu 49 piksel, ancak Mobil görünümde sığmıyor

Yeniden ayarlamak için, mobil duyarlı mod> stil> tipografi> piksel boyutunu mobil ekrana kolayca sığacak şekilde 30'a ayarlayacağım.

Mobil cihazlar için dolgu veya Kenar Boşluklarını ayarlama

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

Dolguyu masaüstü sitesinde iyi görünen 70 piksel sağ ve sol olarak kullandığımızı görebilirsiniz; ancak bu ayarın mobil görünümü tam bir karışıklıktır.

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

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

Her sütunu yatay olarak oluşturun ve tüm cihazlarda harika bir şekilde ayarlanır.

Yatay olarak, tasarımcıların en çok tercih ettiği bir sütun oluşturduktan sonra, bölümleri çoğaltabilir ve zaman kazanabilirsiniz. Her seferinde bir bölüm oluşturun ve zaman kazanmak için iyi giderse yeniden kullanın.

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

Bazı arka plan resimleri masaüstü görünümünde iyi görünüyor, ancak görüntü mobil ekranda olduğu kadar büyük görünmüyor olabilir. Bu nedenle, yaratıcı düşünün ve mobil ekranda farklı bir görüntü 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. Şimdi, hangi resmi seçerseniz seçin, yalnızca mobil görünümde görünür.

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

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

Bazen içeriğimizi veya resimlerimizi iki veya üç bölümde veya farklı sütunlarda görüntüleriz, ancak Mobil cihazda görüntülemek istemeyiz. Bu nedenle Elementor, mobil görünümde görüntülemek 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; bölümü masaüstünde gizleyebilir, sekmeye gizleyebilir veya tercihinize bağlı olarak Mobil'de gizleyebilirsiniz.

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

Sütun sırasını ayarlar bölümünden de değiştirebilirsiniz. Git; bölüm ayarları> Gelişmiş> Duyarlı> Ters sütun 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ünmüyor, bu nedenle kaydırıcı bölümünü kullanmak yerine başka bir bölümü kullanabilirsiniz. Bunu, Gelişmiş sekmesine git> görüntülemek istemediğiniz bölümün görünürlüğünü açıp kapatarak ve üzerine alternatif bir görüntü ekleyerek yapabilirsiniz.

Sütun genişliğini ayarlama

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

Sonuç

Elementor , tüm ekran boyutlarının duyarlı sütun düzenini kontrol etmek için tüm güçlü özelliklerle birlikte gelir. Görünüm modu seçimine göre her bölümü yeniden ayarlamanıza olanak tanır. Mobil uyumlu bir web sitesi tutmak kaçınılmazdır çünkü Google algoritması en çok mobil uyumlu web sitelerini sıralamayı düşünü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.

Şimdi Elementor sayfa oluşturucu, kullanıcılarının çok çaba harcamadan mobil uyumlu bir site oluşturmasına olanak tanıyan özel özelliklerle birlikte geliyor. Umarım makalemi yararlı bulursunuz ve Elementor kullanarak duyarlı bir web sitesi nasıl oluşturulacağına dair tüm cevaplarınızı alırsınız.