Beaver Builder ile Duyarlı bir web sitesi nasıl oluşturulur (ve neden yapmalısınız)
Web trafiğinin çoğunun, web sitelerinin geliştirilmesi ve tasarımında en iyi yeni uygulamaya yol açan kişisel bilgisayarlar yerine mobil cihazlardan geldiğini bilebilirsiniz. Ek olarak, Google hücresel testlerle hücresel standartları uygular. Testteki başarısızlığın arama sonuçları üzerinde bir etkisi olabilir. Oluşturduğunuz sitenin etkili bir şekilde rekabet etmesini istiyorsanız, site tamamen duyarlı olmalıdır. “Duyarlı”, web sitesinin iyi görünmesi ve sorunsuz bir şekilde çalışması ve kullanım standardını daha küçük bir ekranda ve hücresel bir tarayıcıda geçirmesi gerektiği anlamına gelir. Yalnızca masaüstü bilgisayarlarda tasarlanan ve test edilen siteler, sınırlı ekranlara sahip cihazlarda nadiren iyi kullanıcı deneyimi sağlar.
Bu yazıda, duyarlı tasarımdaki en iyi uygulamalardan bazılarını tartışacağız ve daha sonra Beaver Builder ile süreci nasıl düzene koyacağınızı göstereceğiz. Eklenti ve Beaver Builder temasının varsayılan duyarlı özelliklerine ek olarak, eklenti duyarlı düzenleme modu, sayfalarınızı büyük, orta ve küçük cihazlarda görüntülerken düzeni değiştirmenizi sağlar. Hadi çalışalım!
Cihaz boyutu. Her ekran boyutu ve çözünürlüğü için hayal edilebilecek farklı bir site sürümüne sahip olmak uygun değildir, bu nedenle tasarım ekranın genişliğine dayanma eğilimindedir: büyük (masaüstü), orta (tablet) ve küçük (mobil) .
Yerleşim. Beaver Builder, geniş bir ekrandaki sütun satırını, ekran boyutu azaltıldığında dikey olarak istiflenmiş bir sütuna otomatik olarak hareket ettirir. İstifleme sırasını değiştirebilir ve daha küçük ekran boyutlarında yataydan dikey oryantasyona daha iyi geçiş yapmak için düzenin diğer yönlerini değiştirebilirsiniz. Her ekran boyutunda çok fazla boş alan kullanmak çok önemlidir, ancak mobil cihazlarda, kullanıcıların sitenizin çeşitli bölümleriyle etkileşime girecek alanlara sahip olmasını sağlamak çok önemlidir.
Görünürlük. Mobil cihazlarda kullandığınız alan eksikliği göz önüne alındığında, bazen büyük ekran sürümünde görünen bazı öğeleri gizleyerek mobil cihazlarda kullanıcı deneyimini geliştirebilirsiniz. Tabii ki en önemli bilgileri kaydetmek istersiniz, ancak tam sitenin küçük ekran sürümüne herhangi bir değer katmayan görüntüler gibi öğeleri olabilir.
Duyarlı tasarım, düzeni ve alanı otomatik olarak ayarlayan araçlar olmadan çok fazla kodlama gerektirecektir. Beaver Builder’ın varsayılan duyarlı yeteneği Google’ın hücresel dostu testlerini karşılıyor, bu nedenle tek yapmanız gereken her ekran boyutunda kullanıcı deneyimini geliştirmek için ayarları değiştirmek.
Duyarlı bir web sitesi oluşturmak için doğru aracı seçmek, Duyarlı bir tasarımla Beaver Builder eklentisinin doğal uyumluluğu ve düzeninizi verimli bir şekilde değiştirme yeteneği hakkında konuştuk. Beaver Builder eklentisinin de birçok şeyi var. Üstbilginizi, altbilginizi ve kenar çubuğu alanı duyarlılığınızı kontrol etmek için WordPress siteniz için duyarlı temalar seçmeniz de önemlidir. Mevcut birçok WordPress teması var, ancak elbette kendi Beaver Builder temamızı sevmiyoruz, çünkü düzgün bir şekilde örtülü, hızlı bir şekilde yayınlandı ve Beaver Builder eklentisi ile tamamen entegre. İstediğiniz duyarlılık ve ayarlama, kunduz temalarına da, sayfa bölümünde genellikle temalar tarafından kontrol edilen duyarlı düzen yapmanın bir yolu sunuyoruz. 6 adımda Beaver Builder ile duyarlı bir web sitesi oluşturulur, burası Beaver Builder ile dostça bir WordPress web sitesi tasarlamanın ne kadar kolay olduğunu görüyorsunuz. Adım 1: Eklentiyi yükleyin ve ilk düzen şablonunu seçin, Beaver Builder eklentisinin bir kopyasını alın. Herhangi bir premium sürüm başarılı olacak, ancak profesyonel ve ajans paketi Beaver Builder temasıyla birlikte geliyor. Ne kullanırsanız kullanın, sitenizdeki Beaver Builder eklentisini yükleyin ve etkinleştirin.
Beaver Builder’da yeni bir sayfa düzenlemeye başladığınızda, aşağıdaki ekran görüntülerinde gösterildiği gibi isteğe bağlı olarak varsayılan düzen şablonunu seçebilirsiniz: Beaver Builder seçilecek 30’dan fazla düzen şablonu ile birlikte gelir. Yön sayfaları, özel endüstriyel tasarımlar (moda ve ajans siteleri gibi) ve ‘abonelik’ ve ‘hemen mevcut’ sayfalar dahil olmak üzere bazı içerik sayfaları) bulacaksınız. Tüm bu şablonlar başlangıçtan itibaren mobil cihazlarda tamamen duyarlı olacak şekilde tasarlanmıştır. Kendi sayfa tasarımınız varsa, düzeni ve modülleri düzen alanına sürüklemeye başlayın. Adım 2: Düzen şablonunu değiştirdikten veya istediğiniz düzenin temellerini tasarladıktan sonra Sayfa Düzenleme Kullanarak Sayfanızı Tasarlayın, mod girerek sayfa duyarlılığını kontrol edin. Beaver Builder’ın duyarlı düzenleme. Buna herhangi bir sayfada erişmek için araç menüsünü seçin ve duyarlı düzenlemeyi seçin veya “R” klavyesini kullanın:
Duyarlı düzenleme moduna girdikten sonra, sayfanızı daha küçük bir ekranda görebilirsiniz: Tabletler (orta genişlik) ve hücresel (küçük genişlik) arasında geçiş yapmak için sayfanın üst kısmındaki simgeleri kullanın:
Sayfayı düzenlerken, düzeninizin sonuçlarını görmek için bir ekran genişliğinden başka bir ekran genişliğine geçin. Bu sistem, büyük olasılıkla çoğu ziyaretçi tarafından görülecek olan site sürümündeki çabalara odaklanmanıza olanak tanır, ancak kullanıcıların diğer cihazlarda sorunsuz bir izleme deneyimine sahip olmalarını da sağlayabilirsiniz. Adım 3: Beaver Builder’ın yanıt verebilirlik ayarlarını nasıl ayarladığını, araç menüsünü açtığını ve Site genelinde yanıtlarla ilgili seçenekleri değiştirmek için Global Ayarları’nı tıklayıp tıklayıp tıklattığını daha fazla kontrol etmek istiyorsanız, Global Duyarlılık Ayarlarını ayarlayın: Bir seçenek, sitenizdeki duyarlı davranışı devre dışı bırakmaktır. Çoğu durumda, yanıt verme etkinleştirilmelidir. Bu aynı zamanda otomatik aralıkların etkinleştirilmesine izin vermek için iyi bir fikirdir. Çok yoğun veya çok uzak içerikten kaçınmak için kenar boşluğunu otomatik olarak ayarlamak ve daha küçük bir ekranda doldurma. Otomatik olarak devre dışı bırakılmış Penspasian ile daha fazla manuel ayar yapmanız gerekebilir. Ayrıca, özellikle buradayken durma noktasını ayarlayabilirsiniz. Orta aygıt kesme noktanız 900 piksel olarak ayarlanmışsa, örneğin, bundan daha geniş bir ekran sayfanızın geniş ekran sürümünü görüntüleyecektir. 900 pikselden daha az genişliğe sahip ancak hala küçük bir cihaz kesme noktasından daha büyük olan ekran, sayfanızın orta sürümünü görüntüler. Adım 4: Tweak Yazı tipi boyutu, tüm cihazlarınız dışındaki cihaz türüne göre, tüm cihazların tümünün duyarlı davranışlarını etkileyen cihaz türüne göre ayarlayın. Siteler, belirli sayfalarda veya yayınlarda duyarlı düzen için özel ayarları ayarlamanın birçok yolu vardır. Örneğin, her bir cihaz türü için farklı yazı tipi boyutları belirleyebilirsiniz. Bunu eylemde görmek için, metin içeren düzenlemek için öğeleri açın ve Stil sekmesini tıklayın: Tipografi bölümünde varsayılan yazı tipi boyutunu değiştirmek için yazı tipi kategorisini genişletin. Şimdi tipografinin yanındaki cihaz simgesini tıklayın ve orta boy bir düzenleyiciye (tablet) geçeceksiniz: Artık yalnızca orta ekran boyutları için geçerli olacak yazı tipleri için farklı boyutlar ayarlayabilirsiniz. Simgeyi tekrar tıklayın ve aynı şeyi küçük (hücresel) bir editörde yapabilirsiniz:
Burada, hatların yüksekliği ve tesviye gibi diğer yazı tipi ayarlarını da değiştirebilirsiniz ve değişiklikleriniz yalnızca gösterdiğiniz cihaz türünde görünür. Bu duyarlı düzenleme simgesini normal düzeninizde kullanmanın yanı sıra, tüm bu değişiklikleri duyarlı tasarım modunda da yapabilirsiniz, böylece değişiklikleri hemen görebilirsiniz. Adım 5: Tweak Beaver Builder sütun davranışları, karmaşık bir sütun düzeni yapmanıza olanak tanır ve ekranın daha küçük genişliği ile uyumlu olarak, Beaver Builder yatay sütunu önceden belirlenmiş birikim dizisindeki dikey sütuna taşır. Tekrar kontrol etmenizi öneririz ve bazen içerik akışının hala dikey oryantasyonda çalışmasını sağlamak için ayrı sütun birikiminin birikimini ayarlarız. İki sütunu görüntüleyen sayfa örneğine bakalım: varsayılan olarak, bu sayfanın hücresel sürümünde, kitap görüntüsü daha küçük ekrandaki metnin üzerindeki konuma geçer:
Oluşturma sırasını değiştirmek için sütundaki modüllerden birini seçin ve Sütun Düzenle> Sütun Ayarları’nı tıklayın. Ardından Gelişmiş sekmesini tıklayın ve istifleme seçeneğini bulun:
