Mobil Cihazlar için Divi Düzeninizi Nasıl Optimize Edebilirsiniz?

Web sitelerinin mobil cihazlar için optimize edilmesi gerektiğini hepimiz biliyoruz. Aslında, web tasarımının stratejisi “önce mobil” düşünmeye kaymıştır. Bu, dünya çapında cep telefonu kullanan 4 milyardan fazla insan olduğu düşünüldüğünde anlamlıdır.

Divi'nin görsel oluşturucusu, mobil cihazlar için web siteleri oluşturmak için kullanışlı bir tasarım aracıdır. Hiçbir şey yapmanıza gerek kalmadan tablete ve akıllı telefona uyum sağlayan birçok yapısal özelliğe sahiptir. Bunun da ötesinde, tüm bölümler, satırlar ve modüller için masaüstü, tablet ve akıllı telefon için özel duyarlı ayarlar belirleyebilirsiniz. Bu size mobil tasarımınız üzerinde çok fazla güç verir.

Bu gönderi, Divi'de bulunan seçenekleri anlamanıza yardımcı olmak içindir, böylece bu ayarlamaları mobil cihazlarda güvenle yapabilirsiniz. Ve bu bilgiye sahip olmak, projenizin başlangıcında mobil tasarımı sonradan yamalamak yerine “önce mobil” düşünmenize yardımcı olacaktır.

Bu gönderide paylaşılan teknikler aşağıdakileri yapmanıza yardımcı olacaktır:

• Bölümler ve satırlar arasındaki dikey boşluğu kontrol edin
• Tanıtım yazılarını (veya herhangi bir modülü) mobil cihazlarda tam genişlikte yapın, ancak masaüstünde değil
• Mobil cihazlarda istenmeyen sütun aralığını ayarlayın
• Mobil cihazlar için optimize etme düğmeleri

Başlayalım.

Başlamak için Gerekenler

Başlamak için aşağıdakilere ihtiyacınız olacak:

• Divi Teması (yüklü ve etkin)
• Çilingir Hakkında Sayfa Düzeni yüklenen yeni bir sayfa

Gizlice Bakış

İşte oluşturacağımız tablet ve akıllı telefon tasarımına bir göz atın.

Yapılan değişikliklerin minimum düzeyde olduğunu, ancak kullanılan tekniklerin kendi düzenlerinizde nasıl daha gelişmiş değişiklikler yapacağınız konusunda doğru şekilde düşünmenize yardımcı olacağını unutmayın.

Bölümler ve Satırlar Arasındaki Varsayılan Boşluğu 0 Olarak Ayarla

Varsayılan olarak Divi, satırlar ve bölümler arasındaki varsayılan aralığınızı ayarlar. Tema özelleştirici > Genel Ayarlar > Düzen Ayarları'na giderseniz, varsayılan bölüm yüksekliğinin 4'e ayarlandığını görürsünüz; bu, bölüm başına 50 piksel üst ve alt dolguya eşittir. Satır yüksekliği, satır başına 30 piksel üst ve alt dolguya eşit olan 2'ye ayarlanır. Bu varsayılanları korumak ve ardından düzeninizi özelleştirirken her birini ayrı ayrı değiştirmek zorunda kalmak yerine, hem bölümünüz hem de satır yüksekliğiniz için 0 değeri atayarak yeni bir başlangıç ​​yapabilirsiniz. Bu, varsayılan üst ve alt dolgunuzu 0 piksel yapacaktır. Bu şekilde mizanpajınızı düzenlemeye gittiğinizde, özel boşluk eklerken neyle uğraştığınız konusunda daha iyi bir fikre sahip olacaksınız.

Aynı şeyi Mobil ekranlar için de yapabilirsiniz. Tema Özelleştirici > Mobil Stiller'e gidin ve bölüm ve satır yüksekliklerinizi de 0'a ayarlayın.

Mizanpajınıza Bölümler ve Satırlar Arasına Özel Boşluk Ekleyin

Bu kullanım örneği öğreticisi için, örnek olarak Çilingir Hakkında Sayfa Düzeni'ni kullanacağım. Düzeni sayfaya aktardığınızda, yeni aralık varsayılanlarının bölümlerinizi ve satırlarınızı çok daha yakın hale getirdiğini ve böylece içeriğin fazla boşluk bırakmadan birbirinin üzerine yığıldığını göreceksiniz.

Artık bölümlerimizin ve satırlarımızın her birine özel dolgumuzu ekleyebiliriz. İlk olarak, layout'un üst bölümü için bölüm ayarlarına bir göz atalım.

6vw'lik bir üst dolgu ile özel bir dolgunun ayarlandığına dikkat edin. Bu, sayfadaki kalan tüm bölümler için de varsayılan olarak kullanılabilecek güzel bir alan miktarıdır. Bu yüzden 6vw'lik ücretsiz bir alt dolgu eklemenizi öneririm. Ardından, bu stil seçeneğini sayfadaki diğer bölümlerinize kolayca yapıştırabilmeniz için özel dolguyu panonuza kopyalayın.

6vw uzunluk değeri, dolgunun tarayıcı pencerenizin genişliğiyle akıcı bir şekilde ölçeklenmesini sağlar, böylece mobil cihazlar için gerçekten özel bir değer ayarlamanıza gerek kalmaz. Bu, mobil cihazlarda da zamandan tasarruf etmenin ve istenmeyen alandan kurtulmanın harika bir yoludur.

Şimdi bölümlerinizin geri kalanına sağ tıklayın ve her birine özel dolguyu yapıştırın.

Artık bölümleriniz, tarayıcı boyutlarınıza göre ölçeklenen yeni bir özel aralığa sahip olacak.

Aynı işlemi satırlarımız için de yapabiliriz. Sayfanın ana başlığının bulunduğu ilk bölümdeki en üst satırı açmak için tıklayın. Ardından 3vw'lik bir üst ve alt dolgu ekleyin (bölüm aralığımızın değerinin yarısı). Ardından özel dolguyu kopyalayın.

Şimdi yeni özel dolguyu düzen boyunca her satırınıza yapıştırın. Mizanpaj tasarımınıza bağlı olarak, bazı satırların özel dolgularını koruması gerekir, bu nedenle özel dolgunuzu her satıra yapıştırırken bunun farkında olun. Biraz boşluktan kurtulmak istiyorsanız, tüm satırlarınızı yalnızca 3vw'lik bir alt dolguya sahip olacak şekilde ayarlayabilirsiniz.

Satırlarınız ve bölümleriniz arasındaki boşluk vw uzunluk birimi ile, boşluk tarayıcınız ile ölçeklendikçe sayfanızın uzunluğu küçülür.

Mobil Cihazda Sütun Marjını Ayarlayın

Sütunlar arasındaki boşluk, oluk genişliği tarafından kontrol edilir. Seçtiğiniz oluk genişliğine bağlı olarak Divi, sütunlar arasında akıllı ve uygun bir şekilde bir derece boşluk ekler. Çoğunlukla, bu oluk genişliği seçeneğinden yararlanmak istersiniz. Html/css kullanarak sıfırdan bir sütun yapısı oluşturmak zorunda kaldıysanız, bunun ne kadar baş ağrısı olabileceğini bilirsiniz.

Varsayılan olarak, satırlarınız için cilt payı genişliği 3 değerine ayarlanmıştır (bu, sütunlar arasında %5.5'lik bir sağ kenar boşluğunu temsil eder).

Çilingir Hakkında Sayfa Düzeni'nin ikinci bölümündeki satıra bir göz atın. 1/4 1/4 1/2 sütun yapısına sahip olduğuna dikkat edin. Satırın oluğu 2'ye ayarlanır (bu, sütunlar arasında %3'lük bir sağ marjı temsil eder).

Tablette, görüntülerin ızgara düzenini korumak için iki 1/4 sütun yan yana kalacaktır.

Akıllı telefonda, her şeyin üst üste istiflenmesi gerekeceğinden, oluk genişliği gerçekten devreye girmiyor. Artık yatay boşluk bırakmaya gerek yok.

Izgarayı oluşturan resimler, mobil cihazlarda istiflendiğinde 30 piksellik bir kenar boşluğuyla bölünen iki sütundadır. Bu fazladan küçük alan aslında 1'den büyük bir oluk genişliğine sahip tüm sütunlara uygulanan 30 piksellik bir alt kenar boşluğudur.

Bu alt kenar boşluğu, çoğu durumda içeriği mobil cihazlarda bölmenin uygun bir yolu olarak kullanışlıdır. Ancak bazen akıllı telefonda ihtiyacınız olmayan küçük bir boşluk ekleyebilir.

Bunu düzeltmenin bir yolu, resimlerin alt kenar boşluklarını 30 piksel alt kenar boşluğunu hesaba katacak şekilde ayarlamaktır. Şu anda her görüntünün alt marjı %12'dir. Tek yapmanız gereken, ilk sütundaki ikinci resim dışındaki tüm resimler için akıllı telefonda alt kenar boşluğunu 30 piksel olarak değiştirmek.

Mobil cihazlarda ilk sütun zaten 30 piksel alt kenar boşluğuna sahip olacağından, ilk sütundaki ikinci resmi 0 piksel alt kenar boşluğuna sahip olacak şekilde ayarlayın.

Veya bu kenar boşluğundan tamamen kurtulmayı tercih ederseniz, satır ayarlarınızda aşağıdaki CSS parçacığını Sütun 1'e ekleyebilirsiniz.

margin-bottom: 0px !important;

Bu, o sütunun alt kenar boşluğundan kurtulacaktır.

Bir adım daha ileri gitmek için, resimlerimin her biri için alt kenar boşluğu değerini 0 piksele (akıllı telefon ekranında) ayarlayabilirim, böylece resimler boşluk bırakmadan istiflenir ve akıllı telefonlarda kaydırma süresinden tasarruf edilir.

Mobilde Tam Genişlikte Bulanıklıklar Oluşturma

Düzenimizin bir sonraki bölümünde, her birinde bir tanıtım yazısı bulunan üç sütunlu bir satır var. Satırın özel genişliği 1440 pikseldir. Teknik olarak, bu, 1440 piksellik bir maksimum genişlik değeridir, böylece satır, büyük tarayıcı boyutlarında 1440 pikselden fazla genişlemeyecektir. Daha küçük tarayıcılarda, satır %80 genişliğe sahip olacak ve güzel bir şekilde ölçeklenecektir. Başka bir deyişle, 1440 piksel genişliğe ulaşana kadar satırın genişliği bölümün genişliğinin %80'i olacaktır.

Tablet ve akıllı telefonda, üç sütun %100 genişliktedir ve üst üste yığılır, ancak yine de %80 satır genişliği tarafından kapsanırlar.

Mobilde biraz yer kazanmak için, bu tanıtım yazılarının bölümünüzün tüm genişliğini kapsamasını isteyebilirsiniz, böylece her iki tarafta da boşluk kalmaz.

Bunu yapmak için, sıramızı kurma şeklimizi yeniden düşünmemiz gerekiyor. 1440 piksel özel genişliğe sahip olmak yerine özel genişliği %100 olarak değiştirin. "Bu satırı tam genişlikte yap" seçeneğini de seçebilirsiniz, ancak satırı tam genişliğe ayarlarsanız (2 oluk genişliğiyle), satırınızın genişliğinin aslında %94 olacağını ve size marjın %3'ünü bırakacağını unutmayın. sıranın her tarafı. Hepsinin matematiğini basitleştirmek için, %100'lük özel bir genişlik kullanmak en iyisidir.

Buradaki ana amaç, içeriğimizin/belirsizliğin tablet ve akıllı telefondaki tüm sayfa genişliğini kapsayabilmesi için önce mobili düşünmektir. Ancak mevcut düzen, masaüstündeki tasarımda gerçekten tam genişlikte bir satır gerektirmediğinden, satıra dolgu ekleyerek bu alanın bir kısmını geri kazanabilirsiniz. %80 genişliğe yayılan bir satırı geri almak istiyorsak, her iki tarafa %10 dolgu eklememiz gerekir (%10 + %10 = %20 ve %100 – %20 = %80). Bu, içeriğinizin sayfanın %80'ine yayılmasını sağlayacaktır.

Artık tablet ve akıllı telefondaki dolguyu %0'a ayarlayabiliriz, böylece tanıtım yazıları/içerik sayfanın tüm genişliğine yayılacaktır.

Üst üste yığıldıklarından emin olmak için, ilk iki tanıtım yazısı için -30 piksellik özel bir alt kenar boşluğu ekleyebilirsiniz. Bu, onları sütun tarafından eklenen 30 piksellik alt kenar boşluğunun üzerine itecek ve mobil cihazlarda güzel ve temiz bir tasarım için kutu gölgesini gizleyecektir.

Mobil için Bölücü Yüksekliğini Özelleştirme

Bölücü yükseklikleri, düzenlerimizin çoğunda önemli bir tasarım rolü oynar. Ancak mobil cihazlarda da tutarlı bir tasarım tutmak önemlidir. Mobil cihazlar için ayırıcı yüksekliğini özelleştirmenize yardımcı olacak birkaç teknik vardır.

İlk olarak, bir vw uzunluk birimi ile boyunuzu ayarlamayı düşünmelisiniz. Çilingir Hakkında Sayfası düzeninin, üç tanıtım yazısı içeren bölümün hemen altındaki bölümüne bakın. Bu düzende üst bölücü yüksekliğine bakarsanız 18vw olarak ayarlandığını fark edeceksiniz.

Bu, tablet ve akıllı telefon için ek değerler ayarlamak zorunda kalmadan ayırıcının tarayıcı pencerenizle mükemmel şekilde ölçeklenmesini sağlayacaktır. Bir piksel değerine ayarlamak, bölücünün bir araya gelmesine veya farklı tarayıcı genişliklerinde genişlemesine neden olur, çünkü yükseklik bölücünün genişliği ile asla değişmeyecektir. Tablet ve mobil cihazlar için ek px değerleri ekleyebilirsiniz, ancak tarayıcıyı ayarlarken tasarım farklı yüksekliklere atlayacağından çözüm biraz dalgalıdır. Kısacası vw kullanmak, tasarımınızın tüm tarayıcı boyutlarında tamamen aynı kalmasını sağlarken, px değeri tasarımın hareket etmesine ve zıplamasına neden olacaktır.

Bu, tasarımı mobil için özelleştirmek üzere ek ayarlar ekleyemeyeceğiniz anlamına gelmez. Aslında, mobil için çok daha temiz bir düzeni tercih edebilirsiniz. Tek yapmanız gereken, bölücü yüksekliğini daha az yüksekliğe ve muhtemelen daha az yatay tekrara sahip olacak şekilde ayarlamaktır.

Örneğin, daha düz bir tasarım ve daha yumuşak bir geçiş elde etmek için yatay tekrarı 0,3 olan akıllı telefon için 10vw'lik bir bölücü yüksekliği ekleyebilirsiniz.

Veya ayırıcıdan tamamen kurtulmak için akıllı telefonda boyunuzu 0'a ayarlayın.

Mobilde Düğmeleri Özelleştirme

Mobil cihazlarda bu düğmelerin kolayca tanınmasını ve tıklanabilir olmasını istersiniz. Bu nedenle, mobil cihazlarda düğmeleri küçültmek yerine, tıklanabilir alanı mobil ekranınızın daha geniş bir genişliğine yayılacak şekilde ayarlamak isteyebilirsiniz. Örneğin, sola hizalanmış küçük bir düğme, sitenize göz atmak için bir başparmak kullanan sağ elini kullananlar için tıklamak kadar kolay olmayacaktır. Kullanıcı ona ulaşmak zorunda kalacaktı. Bunun bir çözümü, düğmelerinizin mobil cihazlarda tam genişlikte olduğundan emin olmaktır.

Düğmelerinizin boyutunu mobil cihazlarda Divi'de birkaç farklı şekilde ayarlayabilirsiniz. Bunu yapmanın en basit yolu, düğmenize bazı özel dolgular eklemektir.

Çilingir Hakkında Sayfası düzenini kullanarak, üst bölüme gidin ve akıllı telefonda aşağıdaki özel dolguya sahip olmak için düğme ayarlarını yapın:

Özel Dolgu (Akıllı Telefon): 1em Üst, 1em Alt, 2em Sol, 2em sağ

em değeri, akıllı telefonda şu anda 20 piksele ayarlanan düğme metni boyutunun boyutuyla ilgilidir. Yani 1em, 20px'e eşit olacaktır. Yani düğmenin üstü ve altı 20 piksel olacaktır. 2em, 40 piksele (2 kez 20 piksel) eşittir, bu nedenle düğmenin sağında ve solunda 40 piksellik bir dolgu olacaktır.

Mobil cihazlarda işlerin biraz daha düzgün ve öngörülebilir olmasını sağlamak için metin boyutunuzu vw uzunluk birimine ayarlayabilirsiniz. Bu, doğru boyutu elde etmek için biraz deneme yanılma gerektirecektir, çünkü her şey yazı tipinize ve sahip olduğunuz düğme metninin miktarına bağlıdır.

Düğme metni boyutunu aşağıdaki gibi ayarlayın:

Düğme Metin Boyutu (Akıllı Telefon): 5.6vw

Dolgu zaten em ile ayarlandığından (metin boyutuna göre), düğmenin hem metni hem de dolgusu tarayıcının boyutuna göre ölçeklenir. Ayrıca düğme metninin asla farklı bir satıra bölünmemesini sağlayacaktır.

Görsel oluşturucu önizlemesinde metnin gerçekten büyük göründüğü konusunda paniğe kapılmayın. Bunun nedeni, metnin boyutunu belirlemek için önizleme kutusunun genişliğini değil, tarayıcınızı kullanmasıdır. Bu, tüm vw uzunluk birimleri için geçerlidir, bu nedenle sonuçları görmek için bunu canlı sitede ayrı bir pencerede test etmeye dikkat edin.

Artık düğmeniz daha fazla yer kaplıyor ve bu tasarım için sola hizalanmış olmasına rağmen neredeyse ortalanmış görünüyor. Ancak emin olmak için modülü her zaman ortalanmış olarak değiştirebilirsiniz.

Düğmenizin genişliğini mobil cihazlarda artırmanın bir başka hızlı çözümü, düğmenizi yalnızca mobil cihazlarda blok öğesi olarak ayarlamaktır. Bunu yapmanın en iyi yolu, bir özel css parçacığı eklemektir. Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdakileri ekleyin:

@media (max-width: 479px) {
.block {
     display: block !important; 
     text-align: center;
     }
}

Bu, sınıfın eklendiği herhangi bir öğeye "display:block" ve "text-align:center" ekleyecek bir CSS Sınıfı ("blok" olarak adlandırılır) oluşturur. Ancak bu yalnızca maksimum 479 piksellik ekranlarda gerçekleşir, bu da cep telefonları için güzel bir Divi kesme noktasıdır.

Şimdi düğme modülü ayarlarınıza geri dönün ve gelişmiş sekmesinin altına CSS Sınıfı “bloğunu” ekleyin.

Şimdi canlı sitedeki sonucu kontrol edin. Kesme noktasındaki düğme değişikliğine dikkat edin.

Aynı efekti elde etmek için bu düğme sınıfını düzendeki mavi düğmeye de ekleyebilirsiniz.

Şimdi tablet ve akıllı telefon için son tasarımımıza bakalım.

Metin Boyutu, Satır Uzunluğu ve Satır yüksekliği

Optimum okunabilirlik için metin boyutu, satır uzunluğu ve satır yüksekliğinin doğru dengesinin ne olduğu konusunda çok sayıda araştırma var.

Genel olarak, 16px'in mobil cihazlar için gitmeniz gereken kadar küçük olduğu görülüyor. Satır yüksekliği, metninizin boyutuna bağlı olarak 1,4em (yazı tipi boyutunun %140'ı) ile 2em (yazı tipi boyutunun %200'ü) arasında olmalıdır. Daha büyük metin boyutu daha büyük bir satır yüksekliğine sahip olmalıdır. Dolayısıyla 16px, 1,6em'lik bir satır yüksekliği ile iyi çalışır, oysa 18px'lik bir yazı tipi boyutu 1,8em ile daha iyi görünebilir. Konuyu anladın. Bu makaleyi wordpress editöründe yazarken, yazı tipinin 13px ve satır yüksekliği 1.5em olduğunu fark ettim. Ve gözlük reçetemin sınırlarını zorladığını söylemeliyim.

Satır uzunluğu, belirli bir metin satırında izin verilen karakter miktarıdır. Çoğu için rahat bir satır uzunluğu satır başına yaklaşık 45-85 karakterdir.

Bu değerleri belirlemek için size kesin bir en iyi uygulama vermeyeceğim, ancak size ne yapacağınız konusunda genel bir fikir verebilirim.

Örnek olarak düzenimizi kullanalım. Gövde metni boyutu 18 piksel olarak ayarlanmıştır. Bu boyut çoğu telefonda işe yarayabilir, ancak bazıları için bu, çoğu okuyucu için rahat olandan daha kısa bir satır uzunluğuna yol açabilir. Mobil önizlemede satır uzunluğu yaklaşık 43 karakterdir.

Metin boyutunu satır yüksekliği 1,75em olacak şekilde 16px olarak değiştirelim. Bu, satır uzunluğumuzu daha rahat bir uzunluk gibi görünen yaklaşık 50 karaktere koyuyor. Ancak daha küçük telefonlarda bu, muhtemelen çok küçük olan yaklaşık 37 karaktere kadar küçülebilir.

Bu nedenle, bu satır uzunluğunu biraz artırmak için 14 piksel veya 15 piksel metin boyutunu deneyebilirsiniz. Ancak biz yaşlı insanlar 14 pikseli çok iyi göremeyebiliriz, bu nedenle birkaç karakterlik satır uzunluğu riskine değmeyebilir.

Satır yüksekliği sadece okunabilirlik için değil, aynı zamanda sayfanın uzunluğunu azaltmak için de önemlidir. Satırlar arasındaki boşluk, bazı sayfalarda önemli miktarda boş alan oluşmasına neden olabilir ve metnin okunması için çok fazla kaydırma yapılmasına neden olabilir.

Son düşünceler

Genel olarak, Divi düzenleri, minimum çabayla mobil cihazlarda güzel bir şekilde işlenir. Ancak bazen sitenizi özellikle mobil cihazlar için optimize etmek mantıklıdır. Sayfanın uzunluğunu azaltmak ve kaydırmayı en aza indirmek için aşırı dikey boşluktan kurtulmak ve/veya satır ve bölümlerin genişliğini artırmak isteyebilirsiniz. Daha iyi dönüşümler için düğmelerin boyutunu da artırmak isteyebilirsiniz.

Umarım bu ipuçları Divi'yi daha iyi anlamanıza yardımcı olur ve sizi optimum mobil tasarım için herhangi bir düzende ayarlamalar yapmaya hazırlar.

Yorumlarda sizden haber bekliyorum.

Şerefe!