Divi 5'teki farklı kesme noktalarında öğeler nasıl yeniden sıralama

Duyarlı tasarım, ölçeklendirme düzenlerinden daha fazlasını gerektirir, aynı zamanda cihazlar arasında içerik yığınlarının nasıl kontrol edilmesini gerektirir. Masaüstünde yapılandırılmış bir tasarım, kenar çubukları veya ikincil öğeler, temel içeriği görüntüleyerek mobilde kafa karıştırıcı bir sipariş olabilir. Divi 5, önceden oluşturulmuş duyarlı sütun yapıları ve hassas sipariş kontrolleri sunan yeni Flexbox sistemi ile ele alır.

Bu yazıda, öğeleri yeniden sıralamanın neden önemli olduğuna, Divi 5'in FlexBox araçlarının onu nasıl basitleştirdiğine ve farklı kesme noktalarında düzenleri yeniden yapılandırma adımlarını nasıl yürüttüğüne bakacağız.

Neden öğeleri yeniden sıralamak istersiniz?

Bir düzen masaüstünden mobil cihazlara geçtiğinde, istifleme siparişi her zaman amaçlanan deneyiminizi yansıtmaz. Dengeli üç sütunlu masaüstü tasarımı, sol sütunun her zaman önce geldiği dikey bir yığın içine çökebilir ve kullanıcıların asla göremeyeceği sayfanın çok aşağısında bir harekete geçme, kayıt formu veya iletişim bilgilerini itebilir.

YouTube kanalımıza abone olun

Divi 5'in FlexBox sistemi, öğeleri her kesme noktasında görsel olarak yeniden sıralamanıza izin vererek bunu düzeltir. Bir CTA'yı doğrudan mobil cihazlarda başlığın altına taşıyabilir, bir fiyatlandırma tablosunun üzerine referanslar getirebilir veya uzun içerikten önce iletişim bilgilerini vurgulayabilirsiniz. Tarayıcının varsayılan istifleme mantığına takılmak yerine, hiyerarşiye karar verirsiniz. Bu, en önemli içeriğinizin her zaman en önemli olduğu yerde görünmesini sağlar.

Divi 5'in Flexbox'ı nasıl yeniden sıralamayı kolaylaştırır?

Divi 5, öğelerin kesme noktaları arasında nasıl istiflendiğini doğrudan kontrol eder. Doğal olarak adapte olan düzenleri ayarlamak için önceden oluşturulmuş esnek sütun yapılarını kullanabilir, ardından her ekran boyutunda sütun yapılarını ve sütun siparişlerini ince ayarlayın.

Flexbox, alana göre ayarlanan parlak bir kap gibi davranır. İçerik istifleme yerine rastgele, her cihazdaki siparişi kontrol edersiniz.

Divi 5 ayrıca iç içe ve karmaşık düzenleri iyi idare eder. İçerik veya kodlama kopyalamadan her kesme noktasında satır yapılarını, sütun boyutlarını ve modül sırasını değiştirebilirsiniz.

Ayrıca otomatik olarak dikey hizalamayı ve konumlandırmayı yönetir, içeriğinizin maksatlı, tamamen duyarlı ve rastgele düzenlenmemiş görünmesini sağlar.

Divi 5'te Duyarlı Yeniden Düzenleme için Adım Adım Kılavuz

Yeni Flexbox sistemini kullanarak Divi 5'teki öğeleri tam olarak nasıl yeniden sıralayabileceğinize bir göz atalım. Aşağıdaki adımlar, sütun yapılarını kurarak ve sırayı farklı kesme noktalarında ayarlayarak size girer, böylece düzenler her cihazda net ve tutarlı kalır.

1. Yedi özel kesme noktanızı ayarlayın

Divi 5 size üç yerine yedi kesme noktası verir. Her bir piksel değerini değiştirebilirsiniz, böylece siteniz herhangi bir cihazda görünür.

Görev çubuğunuzdaki Elipsis menüsünü tıklayın ve BreakPoint geçiş anahtarlarını bulun. Her birinin varsayılan aralıkları vardır, ancak bu numaraları kitlenize daha iyi uyacak şekilde değiştirebilirsiniz.

Telefon (767px'in altında), telefon genişliğinde (860px'in altında), tablet (980px'in altında), tablet genişliğinde (1024px'in altında), masaüstü (981px'in üzerinde), geniş ekran (1280px'in üzerinde) ve ulusal genişliğinde (1440px'in üzerinde) göreceksiniz.

Onları açtıktan sonra, görev çubuğunuzda küçük simgeler görünür. Sitenizin bu ekran boyutuna hemen nasıl baktığını görmek için herhangi bir simgeyi tıklayın.

Her simgeyi tıklamak ve testinizde sınırlı olmak yerine, tuvalinizin kenarını alıp sola veya sağa sürükleyebilirsiniz. Tasarımınız çekerken küçülür veya genişler ve düzeninizin farklı genişliklerde nasıl değiştiğini gösterir.

Tuvali 300px'e sürükleyin ve üç sütunlu masaüstü düzeninizi tek bir mobil yığın haline getirin. 1200px'e geri çekin ve içeriğinizin tekrar yayıldığını görün. Önizleme modlarını değiştirmeniz veya tarayıcı pencerenizi yeniden boyutlandırmanız gerekmez.

2. Esnek kontrollere erişin

Sağ taraftaki Ayarlar panelini açmak için herhangi bir satırın Ayarlar simgesini tıklayın. Bu panelin üst kısmındaki Tasarım sekmesine gidin. Düzen menüsünün altında, Divi 5'in tüm FlexBox kontrollerini bulacaksınız. Varsayılan olarak, Flex düzen stili altında seçilir.

Mevcut düzeninize uygulanmıyorsa, bir tıklama ile esnemek için değiştirebilirsiniz.

Düzen yön alanını bulmak için aşağı kaydırın. Bu, sütunların görünme sırasını ve yolunu belirleyecektir (yan yana veya üstü ve üstü).

Aşağıda hizalama ve dağıtım kontrolü için haklı içerik seçenekleri verilmiştir. Bu arada, konumlandırma seçeneklerinin hemen altında hizalama öğeleri seçenekleri görünür.

3. Her ekran boyutu için ince ayar düzen yapısı

FlexBox kontrolleriniz artık etkindir, ancak masaüstü düzenleri daha küçük ekranlar için yapısal ayarlamalara ihtiyaç duyabilir. Üç sütunlu bir düzen, bir masaüstünde güzel bir şekilde çalışabilir, ancak bir tablette ezici ve kalabalık olabilir, bunun yerine 2 × 2 ızgara gerektirir, hatta bir ızgara için sadece yer olan bir mobil cihazda daha fazla.

Neyse ki, kontrollerinizin sağ üst kısmındaki cihaz simgeleri, düzeninizi farklı ekranlarda önizlemenize ve her kesme noktası için Flexbox ayarlarına ince ayar yapmanıza olanak tanır. Bu, tasarımı iyi görünecek ve her cihazda iyi çalışacak şekilde ayarlamanızı sağlar.

Tablet kesme noktasına geçin ve Sütun Yapısı Değiştir düğmesini tıklayın. Mevcut kurulum yerine, 2 × 2 simetrik bir düzen seçin. Bu, her satırda daha az kart göstererek görünümü daha az ezici hale getirir. Dengeli bir görünüm için gerektiği gibi dikey ve yatay boşlukları ayarlayın. Ardından CTA sütununu seçin, sütun sınıfını boyutlandırma ayarları altında Fullwidth olarak ayarlayın ve “Doldurmak için Büyütün” yi seçin.

Tablet sürümünüz artık aynı anda iki kart göstererek bu tek tip görünümü koruyor. Harekete geçirici mesaj düğmesi, alttaki satırda güzel bir şekilde oturur ve masaüstü düzeninize benzer şekilde öne çıkmasını sağlar. Bu güncelleme, birlikte kalabalık çok fazla seçeneğin dağınık hissini önleyen daha temiz, daha davetkar bir deneyim yaratmaya yardımcı olur.

Mobil için, tek sütunlu bir yapıya geçmek için Sütun Yapısı Değiştir seçeneğini kullanın. FlexBox kontrollerinde, düzen yönünü sütun tersine ayarlayın. İçeriğiniz için en iyi görünen boşluğu ayarlayın.

4 Sütunları kesme noktaları boyunca yeniden sıralayın

Sipariş değerlerini kullanmak, esnek kaplarınızın çocuk öğelerinizin (genellikle sütunlar) sırasını çeşitli ekran boyutlarında manuel olarak karar vermenin harika bir yoludur. Satır Ayarları'ndaki Sipariş sekmesi, her sütuna tarayıcıya “Bu sütunu konum 1, bu pozisyon 2'de göster” diyen bir sayı verir. Önce daha düşük sayılar görünür ve daha yüksek sayılar en son görünür. Bu kadar basit.

Diğer değerlerden bağımsız olarak belirli içeriği önce görünmeye zorlamak için “0” veya “-1” gibi negatif sayıları bile kullanabilirsiniz.

Her kesme noktası kendi sipariş sistemini destekler ve cihazlar arasında eleman konumlandırma üzerinde tam kontrol sağlar.

Pratik bir örneğe bir göz atalım: Masaüstünde Sütun 1'i seçin ve siparişini 1 olarak ayarlayın. Sütun 2'yi seçin ve siparişini “2” olarak ayarlayın ve aynı şeyi sütun (lar) için yapın. Masaüstü düzeniniz doğal olarak soldan sağa akar ve harekete geçirici bir çağrı ile biter.

Tabletlerde ve cep telefonlarında siparişi özelleştirme

Şimdi, cihaz geçişini kullanarak tablet kesme noktasına geçin. Ve sütun siparişlerini değiştirin:

Sütun 6'yı (harekete geçirici mesaj) orta satırda görünecek şekilde “3” olarak ayarlayın. Sütun 1 ve 2, Sütun 3 olarak 4 ve geri kalanı istendiği gibi bırakın. Tablet kullanıcıları, değer teklifinden hemen sonra harekete geçirici mesajınızı görür ve ardından destekleyici ayrıntılar görür.

Ardından, cihaz geçişini kullanarak mobil cihazlara geçin. CTA sütununun siparişini “3” olarak değiştirin ve ilk iki sütunun siparişini olduğu gibi bırakın. Sütunun geri kalanını tablet düzenlemesine benzer şekilde yapın.

İçeriğinizin altında yatan kaynak sırası aynı kalır, ancak CTA masaüstü düzenini etkilemeden son konumdan üçüncü sıraya geçer. Bu şekilde, içeriğinizi çoğaltmadan veya yeniden yapılandırmadan bölümlerin farklı kesme noktalarında nasıl göründüğünü kontrol edebilirsiniz.

Divi 5 ile her şeyin nasıl istiflendiğini kontrol edin

Divi 5'in yeni FlexBox sistemi, içeriğin cihazlar arasında nasıl yığıldığı konusunda kesin bir kontrol sağlar. Yedi özelleştirilebilir kesme noktası ve canlı tuval ölçeklendirmesiyle, düzenleri herhangi bir ekran boyutunda gerçek zamanlı olarak önizleyebilir ve ayarlayabilirsiniz.

Tarayıcının varsayılan istifleme sırasına güvenmek yerine, kenar çubuklarının, CTA'ların ve anahtar içeriğin nerede göründüğüne tam olarak karar verirsiniz. Flexbox, ekstra geçici çözümler veya kod olmadan her cihazda hiyerarşiyi ve netliği korumanızı sağlar.