Mobil cihazlar için divi düzeninizi nasıl optimize edersiniz
Hepimiz biliyoruz ki web siteleri hücresel için optimize edilmesi gerektiğini. Aslında, web tasarım stratejisi “ilk mobil” düşüncesine geçti. Bu, dünya çapında cep telefonu kullanan 4 milyardan fazla insanın olduğunu düşünmek mantıklı. Visual Divi Maker, hücresel için web siteleri oluşturmak için yararlı bir tasarım aracıdır. Hiçbir şey yapmadan tabletlere ve akıllı telefonlara uyum sağlayan birçok varsayılan yapısal özelliğe sahiptir. Buna ek olarak, masaüstü bilgisayarlar, tabletler ve akıllı telefonlar için özel duyarlı ayarları tüm parça, çizgiler ve modüller için ayarlayabilirsiniz. Bu, hücresel tasarımınıza çok fazla güç sağlar.
Bu yazı, bu ayarlamaları güvenle hücresel olarak yapabilmeniz için Divi’de mevcut seçenekleri anlamanıza yardımcı olmayı amaçlamaktadır. Ve bu bilgiye sahip olmak, daha sonra hücresel tasarımları yamalamak yerine, projenizin başında “önce mobil” düşünmenize yardımcı olacaktır. Bu yazıda paylaşılan teknikler aşağıdakileri yapmanıza yardımcı olacaktır:
Parçalar ve sıralar arasındaki dikey mesafe kontrolü
Hücresel olarak tam genişliğe ulaşmak için bir açıklama (veya herhangi bir modül) oluşturun, ancak masaüstünde değil
Cep telefonundaki istenmeyen sütunun mesafesini ayarlayın
Hücresel için düğmeleri optimize etme
Başlayalım.
Başlamak için neye ihtiyacınız var, aşağıdakilere ihtiyacınız var:
Divi teması (yüklü ve aktif)
Yüklü sayfanın düzeni hakkında bir çilingir ile yeni sayfa
Aşağıdaki Sneak Peek, yapacağımız bir tablet ve akıllı telefon tasarım ekranıdır.
Şimdi kendi tarafınıza sağ tıklayın ve her birine özel bir yatak yapıştırın. Artık rolünüz, tarayıcınızın boyutuna göre uyarlanmış yeni bir özel alana sahip olacak. Aynı şeyi hatlarımız için de yapabiliriz. Sayfanın ana başlığını içeren ilk bölümde üst satırı açmak için tıklayın. Ardından üst ve alt dolguyu 3VW (boşluk aralığının yarısının yarısı) ekleyin. Ardından özel dolguyu kopyalayın.
Şimdi yeni özel dolguyu tüm düzenlerdeki satırlarınızın her birine yapıştırın. Düzen tasarımınıza bağlı olarak, bazı satırların özel dolguyu koruması gerekir, bu nedenle her satıra özel dolgu eklerken buna dikkat edin. Biraz alandan kurtulmak istiyorsanız, tüm hatlarınızı yalnızca daha düşük bir yatağa sahip olacak şekilde ayarlayabilirsiniz. Çizgilerinizi ve parçalarınızı ayarlayan VW uzunluğu birimi ile, sayfanızın uzunluğu mesafe ölçeği ile paraya uygun olarak küçülür. senin tarayıcın. Kolon marjını sütunlar arasındaki hücresel mesafe olarak ayarlayın Olukların genişliği ile kontrol edilir. Seçtiğiniz oluğun genişliğine bağlı olarak, Divi akıllı olacak ve sütunlar arasındaki mesafeyi rahatça ekleyecektir. Çoğu için, bu oluk genişliği seçeneğini kullanmak istiyorsunuz. Bir zamanlar HTML/CSS kullanarak baştan bir sütun yapısı yapmanız gerekiyorsa, ne kadar baş döndürücü olduğunu bilirsiniz. Varsayılan olarak, satırınız için oluğun genişliği 3 değerine ayarlanır (sütun arasında% 5,5’lik doğru marjı temsil eder). Sayfa düzeni hakkında iki çilingirdeki çizgiye bakın. 1/4 1/4 1/2 sütun yapısı olduğunu unutmayın. Sıralı Talang 2 ayarlanmıştır (sütun arasında% 3 sağ marjı temsil eder). Tablette, resim için kutunun düzenini korumak için iki 1/4 sütun yan yana kalacaktır.
Bir akıllı telefonda, olukların genişliği gerçekten bir rol oynamaz çünkü her şey birbiriyle istiflenmelidir. Yatay boşluklara gerek yok. Bir kafes oluşturan görüntü, mobil cihazda istiflendiğinde 30 piksel kenar boşluğuna bölünen iki sütundadır. Bu ekstra küçük alan aslında 1’den daha büyük bir oluk genişliğine sahip tüm sütunlara uygulanan marj altında 30 pikseldir. Alt marj, birçok durumda hücresel içeriği parçalamak için kolay bir yol olarak yararlıdır. Ancak bazen bir akıllı telefonda ihtiyacınız olmayan biraz alan ekleyebilir. Düzeltmenin bir yolu, marj altındaki 30 pikselliği hesaplamak için aşağıdaki resim marjını ayarlamaktır. Şu anda her görüntünün marj altında%12’si vardır. Yapmanız gereken tek şey, ilk sütundaki ikinci görüntü hariç tüm görüntüler için bir akıllı telefonda alt kenar boşluğunu 30px olarak değiştirmektir. İlk sütun cep telefonunda zaten 30 piksel bir alt kenar bulunduğundan, ilk sütunda ikinci görüntüyü ayarlayın. Aşağıda 0px var.
Veya bu marjdan hiç kurtulmayı tercih ederseniz, satır ayarlarınızda aşağıdaki CSS parçalarını Sütun 1’e ekleyebilirsiniz. Marj-Alt: 0px! Önemli; Bu, sütun için daha düşük kenar boşluğunu ortadan kaldıracaktır. Daha ileri gitmek için, görüntülerimin her biri için daha düşük marj değerini 0px’e (akıllı telefon ekranında) ayarlayabilirim, böylece görüntünün uzaysız istiflenmesi ve bir akıllı telefonda kaydırma süresi kaydedilmesi. Düzenimizin bir sonraki bölümünde hücresel olarak tam geniş bir bulanıklık yapın, her sütunda açıklama içeren üç sıra sütun vardır. Satırın özel genişliği 1440 pikseldir. Teknik olarak, bu maksimum genişlik değeri 1440 pikseldir, böylece satır büyük bir tarayıcı boyutunda 1440px’in üzerinde genişlemez. Daha küçük bir tarayıcıda, sıra% 80 genişlik ve iyi bir ölçek alacaktır. Başka bir deyişle, sıranın genişliği, parçanın genişliğinin% 80’i 1440px genişliğine kadar olacaktır. Tabletlerde ve akıllı telefonlarda, üç sütun% 100 genişliğe sahiptir ve birbirlerinin üstüne yığılmıştır, ancak yine de% 80 sıra genişliği ile sınırlıdır. Hücreselden tasarruf etmek için, her iki tarafta da yer olmaması için bu açıklamanın tam genişliğinize ulaşmasını isteyebilirsiniz. Bunu yapmak için, çizgilerimizi düzenleme şeklimizi yeniden düşünmemiz gerekir. Özel genişliğe 1440 piksel olmak yerine, geleneğin genişliğini%100 olarak değiştirin. Ayrıca “Tam Genişlik Satır” seçeneğini seçebilirsiniz, ancak çizgiyi tam genişliğe ayarlarsanız (2 oluk genişliği ile), sıra genişliğinizin aslında% 94 olacağını ve size kenar boşluklarının% 3’ünü bırakacağını unutmayın. hattın her iki tarafı. Her şeyin matematiğini basitleştirmek için%100 özel genişlik kullanmak daha iyi olurdu. Buradaki temel amaç, ilk önce hücresel hakkında düşünmektir, böylece içerik/bulanıkımız tablet ve akıllı telefondaki sayfaların tüm genişliğine ulaşır. Ancak, mevcut düzen, masaüstündeki tasarımda gerçekten geniş bir çizgiye ihtiyaç duymadığından, hatta dolgu ekleyerek alanın bir kısmını yeniden kazanabilirsiniz. % 80 genişliğin bir satırını geri almak istiyorsak, her iki tarafa% 10 dolgu eklememiz gerekir (% 10 +% 10 =% 20 ve% 100 -% 20 =% 80). Bu, içeriğinizin sayfaların% 80’ine ulaşmasını sağlayacaktır. Şimdi tablet ve akıllı telefondaki dolguyu% 0 olarak ayarlayabiliriz, böylece açıklama/içerik sayfanın tam genişliğine ulaşır. Birbirleriyle yığıldıklarından emin olmak için, ilk iki açıklama için -30px’lik özel bir alt marj ekleyebilirsiniz. Bu, sütun tarafından eklenen kenar altındaki 30 piksel üzerinde aşağı itecek ve cep telefonunda iyi bir temiz tasarım için kutunun gölgesini gizleyecektir. Bölücünün yüksekliğini bölücünün hücresel yüksekliği için ayarlamak, birçok düzenimizde önemli bir tasarım rolü oynar.Ancak bir cep telefonunda da tutarlı bir tasarım sürdürmek önemlidir.Bölme sahibinin yüksekliğini hücresel için ayarlamanıza yardımcı olacak birkaç teknik vardır.İlk olarak, yüksekliğinizi VW uzunluk birimleriyle ayarlamayı düşünmelisiniz.Üç açıklamalı bölümün hemen altındaki sayfa hakkındaki çilingir düzenine bakın.Bu düzende üst bölücünün yüksekliğine bakarsanız, bunun 18VW olarak ayarlandığını göreceksiniz. Bu, tabletler ve akıllı telefonlar için ek değerler ayarlamak zorunda kalmadan bölücünün tarayıcı pencerenizle mükemmel olmasını sağlayacaktır. Piksel değerine ayarlamak, bölücünün tarayıcının farklı bir genişliğine entegre olmasına veya uzanmasına neden olur, çünkü yükseklik asla bölücü genişliği ile değişmez. Tabletlere ve hücresellere ek bir PX değeri ekleyebilirsiniz, ancak çözüm oldukça kararsızdır, çünkü tarayıcıyı ayarladığınızda tasarım farklı bir yüksekliğe atlar. Kısacası, VW kullanmak tasarımınızın tüm tarayıcı boyutlarında tamamen aynı kalmasını sağlayacaktır, PX değeri tasarımın hareket etmesine ve atlamasına neden olacaktır. Bu, hücresel için tasarımı ayarlamak için ek ayarlar ekleyemeyeceğiniz anlamına gelmez. Aslında, hücresel için çok daha temiz bir düzeni tercih edebilirsiniz. Yapmanız gereken tek şey, bölücünün yüksekliğini daha az yüksekliğe ve belki de daha az yatay tekrarlama olacak şekilde ayarlamaktır. Örneğin, daha düz bir tasarım ve daha pürüzsüz bir geçiş elde etmek için 0.3 yatay tekrarla akıllı telefonlara 10VW bölücü yüksekliği ekleyebilirsiniz. Veya bölücüyü ortadan kaldırmak için bir akıllı telefonda yüksekliğinizi 0 olarak ayarlayın. Mobil cihazdaki cep telefonundaki düğmeyi ayarlayın, düğmenin kolayca tanınmasını istersiniz ve tıklanabilir. Bu nedenle, mobil cihazlarda daha küçük bir düğme yapmak yerine, cep telefonu ekranınızda daha geniş hale getirmek için tıklanabilecek alanı ayarlamak isteyebilirsiniz. Örneğin, küçük ve düz bir düğme, sitenize göz atmak için bir başparmak kullanarak sağ el kullanıcı tarafından tıklanan kadar kolay olmayacaktır. Kullanıcılar bunu başarmalı. Bunun için bir çözüm, düğmenizin cep telefonunda tam genişliğe sahip olduğundan emin olmaktır. Cep telefonundaki düğmenin boyutunu Divi’de birkaç farklı şekilde ayarlayabilirsiniz. Bunu yapmanın en basit yolu, düğmenize bazı özel pedler eklemektir. Çilingir hakkında sayfa düzenini kullanarak, üste gidin ve düğme ayarlarını akıllı telefonda aşağıdaki özel rulmanlara sahip olacak şekilde ayarlayın: Özel Dolgu (akıllı telefon): 1em üst, 1em alt, 2em sol, 2em sağ EM değeri, bir akıllı telefonda şu anda 20 piksel olarak ayarlanan düğme metninin boyutu ile ilgilidir. Yani 1em 20 piksel ile aynı olacak. Yani düğmenin üstü ve alt kısmı 20 piksel olacaktır. 2EM 40 piksel (2 kez 20 piksel) eşittir, böylece düğmede sağ ve solda 40 piksel dolgu olacaktır. Her şeyin biraz daha pürüzsüz çalışması ve cep telefonunda tahmin edilebilmesi için metninizin boyutunu VW uzunluk birimine ayarlayabilirsiniz. Bu, her şey yazı tipinize ve sahip olduğunuz düğme metnine bağlı olduğundan, doğru boyutu elde etmek için birkaç deney ve hata gerektirecektir. Lütfen düğme metninin boyutunu aşağıdaki gibi ayarlayın: Metin Boyutu Düğmesi (Akıllı Telefon): 5.6VW Dolgu EM ile (metin boyutuna göre) ayarlandığından, hem metin hem de dolgu düğmesi tarayıcı boyutu ile gözden düşecektir. Bu aynı zamanda düğme metninin asla farklı satırlara girmemesini sağlayacaktır. Metin görsel yapımcılarda çok büyük göründüğü için panik yapmayın. Bunun nedeni, metnin önizleme kutusunun genişliğini değil, boyutunu belirlemek için tarayıcınızı kullanmasıdır. Bu, tüm VW uzun birimleri için geçerlidir, bu nedenle sonuçları görmek için doğrudan sitedeki ayrı bir pencerede test etmeye dikkat edin. Şimdi düğmeniz daha fazla alan gerektiriyor ve bu tasarım için düz bırakılsa bile neredeyse ortada görünüyor. Ancak, emin olmak için ortalanacak modülü her zaman değiştirebilirsiniz. Cep telefonundaki düğme genişliğinizi artırmak için bir başka hızlı çözüm, düğmenizi yalnızca cep telefonunda bir blok öğesi olarak ayarlamaktır. Bunu yapmanın en iyi yolu özel CSS parçaları eklemektir. Tema Ayarını Aç> Ek CSS ve aşağıdakileri ekleyin: @Media (Max-Width: 479px) { .engellemek { Ekran: Blok! Önemli; Metin-align: merkez; } } Bu, sınıf tarafından eklenen öğelere “Ekran: Blok” ve “Text-Aign: Center” ekleyecek olan CSS sınıfını (“Block” olarak adlandırılır) oluşturur.Ancak bu sadece cep telefonları için iyi bir kesme noktası divi olan en fazla 479px olan bir ekranda olur.Şimdi düğme modülünüzün ayarlarına geri dönün ve Gelişmiş sekmesinin altına CSS sınıfı “bloğu” ekleyin.
Şimdi sitedeki sonuçları doğrudan kontrol edin.Kesme noktasındaki düğmedeki değişikliklere dikkat edin.
Aynı efekti elde etmek için Düzendeki mavi düğmeye düğme sınıfını da ekleyebilirsiniz.Şimdi tabletler ve akıllı telefonlar için son tasarımımıza bakalım.
Metin boyutu, satır uzunluğu ve hattın yüksekliği Metnin boyutu, satırın uzunluğu ve optimum okunabilirlik için satırın doğru yüksekliği hakkında birçok çalışma vardır. Genel olarak, 16px’in mobil cihazlar için ihtiyacınız olduğu kadar küçük olduğu görülüyor. Satır yüksekliği, metninizin boyutuna bağlı olacak 1.4EM (yazı tipi boyutunun% 140’ı) ve 2EM (yazı tipi boyutunun% 200’ü) arasında olmalıdır. Daha büyük metin boyutu daha büyük bir çizgi yüksekliğine sahip olmalıdır. Bu nedenle, 16px 1.6EM’lik bir çizgi yüksekliği ile iyi çalışacakken, 18px yazı tipi boyutu 1.8EM ile daha iyi görünebilir. Bunun ne anlama geldiğini anlıyorsun. Bu makaleyi WordPress editörü üzerine yazdığımda, 1.5EM satır yüksekliğine sahip 13px yazı tipini fark ettim. Ve söylemeliyim ki gözlük tariflerimin sınırlarını zorluyor. Satırın uzunluğu, belirli bir metin satırında izin verilen karakter sayısıdır. Çoğu için konforlu çizginin uzunluğu sıra başına 45-85 karakterdir. Size en iyi uygulamayı bu değerleri belirleme hakkını vermeyeceğim, ancak size ne yapacağınıza dair genel bir resim verebilirim. Düzenimizi örnek olarak kullanalım. İçeriğin boyutu 18px olarak ayarlanır. Bu boyut çoğu telefonda iyi çalışabilir, ancak bazı telefonlar için kanalın uzunluğunun çoğu okuyucu için rahattan daha kısa neden olabilir. Hücresel önizlemedeki satırın uzunluğu yaklaşık 43 karakterdir.
Metnin boyutunu 1,75EM’de bir çizgi yüksekliği ile 16 piksel olarak değiştirelim. Bu, hatlarımızın uzunluğunu daha rahat bir uzunluk gibi görünen yaklaşık 50 karakter yerleştirir. Ancak daha küçük bir cep telefonunda, bu çok küçük olabilecek yaklaşık 37 karaktere küçülebilir. Bu nedenle, hattın uzunluğunu hafifçe artırmak için 14px veya 15px metin boyutunu deneyebilirsiniz. Ancak biz ebeveynler 14px’i iyi göremeyebilir, böylece çizginin uzunluğundan birkaç karakter riski ile karşılaştırılamayabilir. Önemli bir satırın yüksekliği sadece okunabilirlik için değil, aynı zamanda sayfanın uzunluğunu azaltmak içindir. Satırlar arasındaki mesafe birkaç sayfaya önemli ölçüde boşa harcanan alan ekleyebilir ve metni okumak için çok fazla rulo ile sonuçlanacaktır. Genel olarak son zihin, Divi’nin düzeni biraz çaba sarf ederek mobil cihazlarda iyi gösterilecek. Ancak bazen sitenizi özellikle hücresel için optimize etmek mantıklıdır. Aşırı dikey boşlukları ortadan kaldırmak ve/veya sayfanın uzunluğunu azaltmak ve ruloları en aza indirmek için satır ve parçaların genişliğini arttırmak isteyebilirsiniz. Daha iyi dönüşüm için düğmenin boyutunu artırmak isteyebilirsiniz. Umarım bu ipuçları Divi’yi daha iyi anlamanıza ve optimal hücresel tasarım için herhangi bir düzende ayarlamalar yapmaya hazırlamanıza yardımcı olacaktır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
