Mobil cihazda divi sütununun birikmesi sırasını nasıl ayarlanır
Divi, masaüstünden hücresel ekrana geçerken sütununuzu belirli bir şekilde biriktiren (veya sipariş eden) duyarlı bir kafes üzerine inşa edilmiştir. Sütun sırayla soldan sağa istiflenir. Dolayısıyla, masaüstünde üç sütun varsa, sol sütun (ilk) önce cep telefonuna istiflenir ve ardından aşağıdaki sütun 2 ve 3’ü izler. Bu mantıklıdır ve çoğu web sitesi için genellikle gereklidir. Ancak bazen masaüstünde iyi görünen bazı tasarımlar, mobil cihazlarda tutarsız içerik sırasını yapar. Bu durumda, mobil cihazlarda daha tutarlı bir kullanıcı deneyimi oluşturmak için sütun sırasını değiştirmeniz gerekir.
Bugün size mobil cihazdaki Divi sütun düzenlemesinin sırasını değiştirmenin iki yolunu göstereceğim. Birincisi, DIVI’daki “Aktif Disabtive” özelliğini kullanarak mobil cihazlar için özel içeriğin alternatif bir sürümünün oluşturulmasını içerir. İkinci yol, sütununuza mobil cihazdaki diziyi gösteren sınıflar eklemek için özel bir CSS kullanmaktır. Başlayalım! YouTube kanalı abonelik içeriğimizi yeni bir sayfada oluşturmak, Divi Builder’ı kullanmak ve Visual Builder’ı başlatmak için tıklayın.
Hücresel için daha iyi bir düzen, daha tutarlı bir içerik düzeni elde etmek için satırlarınızdan birinde sütunun bileşimini değiştirmektir. Mobil 1’de sütun oluşturma sırasını değiştirmenin iki yolu: Divi “Aktif Disabtive” özelliğinin “Aktif Disabute” özelliğini kullanarak mobil cihazdaki sütun oluşturma sırasını değiştirin Divi, içeriğinizin çeşitli sürümlerini mobil, tabletler ve masaüstü ekranlar. Birkaç tıklama ile herhangi bir cihazdaki içerik bölümünü gizleyebilir veya görüntüleyebilirsiniz. Bu örnek için, masaüstünde kalmak için ikinci satırı tutmalıyız, ancak mobil cihazda saklamalıyız. O zaman sadece cep telefonunda görülmesi için farklı ikinci bir satır çizgisi yapmalıyız. Visual Builder’ı kullanarak, ikinci satırı çoğaltın. Yeni kopya satırını düzenlemeden önce ayarları ikinci sıradaki açın.
Genel satır ayarlarının altında, cep telefonları ve tabletlerdeki satırları devre dışı bırakmayı kontrol edin. Şimdi kaydetmek ikinci sıra mobil cihazlarda gizlenecektir. Ayrıca, kolon dizisinin cep telefonunda olması için istediğimiz üçüncü yeni çizginin düzenini değiştirmemiz gerekiyor. Metin modülünün içeriğini ikinci sütuna sürükleyin ve görüntü modülünü ilk sütuna sürükleyin. Şimdi üçüncü satır için genel satır ayarlarını girin ve masaüstündeki satırı devre dışı bırakmak için kutuyu işaretleyin.
Şimdi kaydedin sonuçlarınızı kontrol edin. Üçüncü sütunun masaüstünde devre dışı bırakıldığını ve daha sonra mobil cihazda etkinleştirildiğini göreceksiniz. Bu, hücreselde daha tutarlı bir düzen oluşturur. İşte burada! Belirli içerik parçalarını devre dışı bırakma ve etkinleştirme yeteneği ile, her türlü mizanpajı kolayca değiştirebilir/yeniden düzenleyebilirsiniz. Ayrıca, görsel oluşturucu sayfanızı gördüğünüzde Divi, hangi içeriğin devre dışı bırakıldığını tanımlayabilmeniz için sayfadaki gizli içeriği kolayca soldurur. Sütunları ve satırları gizlemek için “aktif olmayan etkin” özelliğini kullanmak güvenli bir bahis. Ancak, bunu çok fazla yaparsanız ve/veya çok fazla içeriğiniz varsa, sayfaları düzenleme kafa karıştırıcı olabilir. İçeriği güncellerken, içeriği yalnızca bir sürümde değil, tüm sürümlerde güncellemeniz gerekir. İçeriği devre dışı bırakır ve etkinleştirirse, sizin için doğru çözüm değildir, CSS sınıfını kullanarak içeriğinizi hücresel olarak sipariş etmenin başka bir yolu vardır. 2. Bir cep telefonu üzerinde sütun biriktirme sırasını değiştirme CSS sınıfını kullanarak bunu yapmak için bazı özel CSS kullanacağız, böylece sütunumuza hücresel ekrandaki isteklerinize göre sıralayacak bir sınıf ekleyebiliriz. WordPress Dashboard, Open Divi → Tema Özelleştirici → Ek CSS ekleyin ve aşağıdaki CSS’yi ekleyin: @media All ve (maksimum genişlik: 980px) {
/*** Bir esnek kutuya satır sarmal ***/
.custom_row {
Ekran: -Webkit -Box;
Ekran: -moz -Box;
Ekran: -ms -flexbox;
Ekran: -webkit -flex;
Ekran: Flex;
-Webkit-Flex-Swrap: Wrap; / * Safari 6.1+ */
Flex-Wrap: sar;
}
/*** Esnek kutu satırında sütun sırasını belirleyecek özel sınıflar ***/
.-Mobile-On-Mobile {
-Webkit-Sipariş: 1;
Sipariş: 1;
}
.-Mobile-on-Mobile {
-Webkit-Sipariş: 2;
Sipariş: 2;
}
.-Mobile-on-Mobile {
-Webkit-Sipariş: 3;
Sipariş: 3;
}
.-Mobile-On-Mobile {
-Webkit-Sipariş: 4;
Sipariş: 4;
}
/*** Son sütuna marj ekleyin ***/
.Custom_row: son çocuk .et_pb_column: son çocuk {
Marj-Alt: 30px;
}
}
Kaydet ve Yayınlayın Yeni eklediğiniz CSS’yi görünce, tüm CSS’nin yalnızca mobil cihazlar için CSS kullanacak medya sorguları içerdiğini unutmayın (980px’den az büyük ekran boyutunda). Ayrıca “Özel Line” adlı birinci sınıfı da göreceksiniz. Bu sınıf, cep telefonundaki sütun oluşturma sırasını değiştirmek istediğiniz satıra eklenecektir. Sonraki 4 sınıf (“Mobil’de Birincisi”, “Mobile’da İkincisi”, “Mobile’da Üçüncü” ve “Hücreselde Dördüncü”) onun için belirtilen sipariş özellikleri ve sayıları vardır. Bu sınıflar, hücreselde görüntülenmek istediğiniz siparişi belirlemek için “özel” satırınızdaki sütuna eklenecektir. Şimdi CSS aldıktan sonra, bu sınıfları sayfalarımıza uygulayalım. Talimatları izleyerek iki satırınız olduğundan emin olun. Ayrıca, hücresel veya masaüstünde herhangi bir çizgiyi devre dışı bırakmadığınızdan emin olun. Bu örnek için, cep telefonundaki ikinci sıradaki sütun dizisini değiştireceğiz. Aşağıda, elde etmek istediğimizin bir örneğidir.
Visual Builder’ı kullanarak, ikinci sıra için satır ayarlarını açın.
Satır ayarlarında, CSS sekmesinin altındaki aşağıdakileri ekleyin: CSS sınıfı metin kutusuna “Custom_row” ekleyin. (Satırınızı esnek bir kutuya sarın) CSS Sınıf 1 sütun sütunu sütununa “Mobile” ekleyin (bu, Sütun 1 dizisini cep telefonunda saniye görüntülemek için değiştirir. Sınıf adı hatırlamayı kolaylaştırmalıdır. ) CSS Sınıf Metin Kutusu Sütun 2’ye “Önce Hücresel” ekleyin (Bu, Sütun 2’nin sırasını hücresel olarak ilk olarak değiştirir.) Not: Her sütuna bir sipariş sınıfı eklemek önemlidir. Şimdi sonuçlara bakalım . Cep telefonuna ikinci sıra sütunun nasıl değiştirildiğine dikkat edin Birinci satırla aynı görüntülenir. Bu bir görüntü akışı oluşturur → Metin → Görüntüler → Tutarlı metin.
Daha önce yaptığınız gibi aynı adımları izleyin. Satır ayarlarınızda, CSS sekmesinin altında, “Custom_Row” sınıfını satıra ekleyin ve sipariş sınıfınızı (“ilk kez”, “ikinci-mobile”, “üçüncü-mobile”) ekleyin Her sütun. Her şeyin belirli bir sipariş değeri olması için sütunlarınızın her birine bir sınıf eklediğinizden emin olmayı unutmayın. İşte burada! Seçenek yöntemi Her bir cihaz için farklı bir düzen oluşturmanız ve/veya cep telefonundaki sütun sırası dışında içeriği değiştirmeyi planlamanız gerekiyorsa, düzeninizi ayarlamak için “devre dışı bırakılmış” divi özelliğini kullanmanız gerekir. Sütunu yalnızca içeriği değiştirmeden hücresel olarak yeniden düzenlemeniz gerekiyorsa ve içeriğin devre dışı bırakılan/etkinleştirilmiş birkaç sürümünü dengelemek istemiyorsanız, CSS yöntemini kullanabilirsiniz. SEO düşünceleri yıllar boyunca arama motorlarının sayfada devre dışı bırakılan veya gizlenmiş içeriği nasıl işlediğine dair birçok tartışmaya sahiptir. Belirli cihazlar için içerik gizleyebilmenize rağmen, içerik hala Google tarafından taranabilir. Bu, yinelenen bir içerik olarak düşünülebilir ve “aktif devre dışı bırakma” özelliğinin kullanılmasının sayfa sıralamanız üzerinde olumsuz bir etkisi olacağını düşündürebilir. Ancak, Google gibi arama motorları, duyarlı düzen nedenleri nedeniyle içeriğin gizlenip gizlenmediğini belirlemede oldukça iyidir. Kısacası Google, farklı cihazlar için içeriği çoğaltıp kopyalayıp yutmadığınızı bilir ve bu nedenle sizi cezalandırmayacaktır. İçeriği kötü nedenlerle gizlemediğiniz sürece, içeriğin kullanımı güvenlidir. Son zihin, sütunun bileşimini değiştirebilir çok yararlı ve bazen gereklidir. Hepimiz, mobil cihazlardaki içerik akışının tutarlılığından ödün vermeden masaüstü ekranı için benzersiz bir tasarım düzeni oluşturma yeteneğine ihtiyacımız var. “Aktif Disabidating” özelliğini kullanma
