Mobil Cihazlarda Divi'nin Sütun Yığın Sırası Nasıl Ayarlanır

Divi, masaüstünden mobil ekranlara geçerken sütunlarınızı belirli bir şekilde istifleyen (veya sıralayan) duyarlı bir ızgara üzerine kurulmuştur. Sütunlar soldan sağa doğru sıralanır. Bu nedenle, masaüstünde üç sütununuz varsa, soldaki (ilk) sütun önce mobilde, ardından 2 ve 3 numaralı sütunlar altında yığılır. Bu mantıklıdır ve genellikle çoğu web sitesi için gerekli olan şeydir. Ancak bazen masaüstünde harika görünen belirli tasarımlar, mobil cihazlarda tutarsız bir içerik sıralaması oluşturur. Bu durumda, mobil cihazlarda daha tutarlı bir kullanıcı deneyimi oluşturmak için sütunların sırasını değiştirmeniz gerekecektir.

Bugün size Divi'nin sütun yığınlama sırasını mobil cihazlarda değiştirebileceğiniz iki yol göstereceğim. İlki, Divi'deki “Devre Dışı Bırak” özelliğini kullanarak özellikle mobil cihazlar için içeriğin alternatif bir sürümünü oluşturmayı içerir. İkinci yol, sütunlarınıza Mobil'de sıralarını belirleyen sınıflar eklemek için özel CSS kullanmaktır.

Başlayalım!

İçeriği Oluşturma

Youtube Kanalımıza Abone Olun

Yeni bir sayfada Divi Builder'ı kullanmak için tıklayın ve Visual Builder'ı başlatın.

Görsel oluşturucudan 2 sütunlu (1/2 – 1/2) bir düzen seçin.

Satırınızın içindeki ilk sütuna bir görüntü modülü ekleyin.

Resim Ayarları altında, bir resim yükleyin ve ekleyin. (unsplash.com'dan 770 x 433 resim kullanıyorum)

Ardından, satırınızın ikinci sütununa bir metin modülü ekleyin.

Genel Metin Ayarları altında, metninizi İçerik metin kutusuna ekleyin.

Kaydetmek

Şimdi, ilk satırı bir resim içeren ve ikinci satırı metin içeren 2 sütunlu bir satırınız olmalıdır. Aşağıdaki resimde sizin için sütunları etiketledim.

Görsel oluşturucudan, satırı çoğalt simgesini tıklayarak satırı aynı 2 sütunla çoğaltın.

İkinci satırınızda (az önce oluşturduğunuz yinelenen satır), görüntü modülünü ikinci sütuna ve metin modülünü ilk sütuna sürükleyin.

Her satırdaki resim ve metin konumlarını bu şekilde değiştirmek, içeriğinizi web sayfanızda göstermenin yaratıcı ve etkili bir yolu olabilir. Ancak, sütunlar mobilde yığıldığında da bir sorun yaratır. Tarayıcınızın genişliğini 980 pikselin altına (mobil cihazlar için kesme noktası) küçültürken, her satırın içeriği soldan sağa doğru istiflenir. Bu, satırınızın ilk sütununun ikinci sütunun üstüne yığılacağı anlamına gelir. Mobil cihazlarda içerik akışını tutarlı tutmak istiyorsanız bu bir soruna neden olabilir. Mevcut düzende, mobildeki içerik akışı aşağıdaki sırayla yığılır:

Sütun 1 (Resim)
Sütun 2 (Metin)
Sütun 1 (Metin)
Sütun 2 (Resim)

Mobil cihazlar için daha iyi bir düzen, daha tutarlı bir içerik düzeni elde etmek için satırlarınızdan birindeki sütunların yığılma sırasını değiştirmek olacaktır.

Mobil Cihazda Sütun Yığın Sırasını Değiştirmenin İki Yolu

1: Divi'nin “Devre Dışı Bırak” Özelliğini Kullanarak Mobilde Sütun Yığın Sırasını Değiştirme

Divi'nin “Devre Dışı Bırak” özelliği, içeriğinizin telefon, tablet ve masaüstü ekranlarında farklı sürümlerini oluşturmanıza olanak tanır. Birkaç tıklamayla herhangi bir cihazda içerik bölümlerini gizleyebilir veya gösterebilirsiniz.

Bu örnek için, ikinci satırı masaüstünde görünür tutmamız, ancak mobil cihazlarda gizlememiz gerekiyor. Daha sonra sadece mobilde görünecek şekilde ikinci satırın farklı bir versiyonunu oluşturmamız gerekiyor.

Visual Builder'ı kullanarak ikinci satırı çoğaltın.

Yeni kopyalanan satırı düzenlemeden önce, ikinci satırdaki Satır Ayarları'nı açın.

Genel Satır Ayarları altında, telefon ve tablette satırı devre dışı bırakmak için işaretleyin.

Kaydetmek

Şimdi ikinci sıra mobil cihazlarda gizlenecek. Ardından, yeni üçüncü satırımızın düzenini, sütunların sırasının mobilde nasıl olmasını istediğimize göre değiştirmemiz gerekiyor.

Metin modülü 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ına gidin ve satırı masaüstünde devre dışı bırakmak için kutuyu işaretleyin.

Kaydetmek

Şimdi sonuçlarınızı kontrol edin. Üçüncü sütunun masaüstünde devre dışı bırakıldığını ve ardından mobil cihazlarda etkinleştirildiğini fark edeceksiniz. Bu, mobil cihazlarda daha tutarlı bir düzen oluşturur.

Bu kadar!

İçeriğin belirli bölümlerini devre dışı bırakma ve etkinleştirme özelliğiyle, her tür düzeni kolayca değiştirebilir/yeniden sıralayabilirsiniz.

Ayrıca, Visual Builder'dan sayfanızı görüntülerken Divi, hangi içeriğin devre dışı bırakıldığını belirleyebilmeniz için sayfada gizlenen içeriği uygun şekilde soldurur.

Sütunları ve satırları gizlemek için "Devre Dışı Açık" özelliğini kullanmak güvenli bir bahistir. Ancak, bunu çok fazla yaparsanız ve/veya çok fazla içeriğiniz varsa, sayfayı düzenlemek kafa karıştırıcı olabilir. Ayrıca, içerik güncellemeleri yaparken içeriği yalnızca bir sürümde değil tüm sürümlerde güncellemelisiniz.

İçeriği devre dışı bırakmak ve etkinleştirmek sizin için doğru çözüm değilse, içeriğinizi CSS sınıflarını kullanarak mobil cihazlarda sipariş etmenin başka bir yolu vardır.

2. CSS Sınıflarını Kullanarak Mobilde Sütun Yığın Sırasını Değiştirme

Bunu yapmak için bazı özel CSS kullanacağız, böylece sütunlarımıza onları mobil ekranda istediğiniz gibi sıralayacak bir sınıf ekleyebiliriz.

Ardından wordpress Panonuzdan Divi → Tema Özelleştirici → Ek CSS'ye gidin ve aşağıdaki CSS'yi ekleyin:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Kaydet ve Yayınla

Az önce eklediğiniz CSS'ye baktığınızda, CSS'nin tamamının yalnızca mobil cihazlar için css'i kullanacak bir medya sorgusu içerdiğine dikkat edin (980 pikselden küçük ekran boyutlarında).
Ayrıca “özel sıra” adı verilen birinci sınıfı da fark edeceksiniz. Bu sınıf, mobilde sütun yığınlama sırasını değiştirmek istediğiniz satıra eklenecektir.

Sonraki 4 sınıfın ("mobilde birinci", "mobilde ikinci", "mobilde üçüncü" ve "mobilde dördüncü") bir sipariş özelliği ve kendisine atanan bir sayı değeri vardır. Bu sınıflar, mobilde görüntülenmesini istediğiniz sırayı belirlemek için "özel" satırınızdaki sütunlara eklenecektir.

Artık CSS'imizi yerleştirdiğimize göre, bu sınıfları sayfamıza uygulayalım.

Yönergeleri izleyerek iki satırınızı oluşturduğunuzdan emin olun. Ayrıca, mobil veya masaüstünde herhangi bir satırın devre dışı bırakılmadığından emin olun.

Bu örnek için, mobilde ikinci satırdaki sütunların sırasını değiştireceğiz. İşte başarmak istediğimiz şeyin bir örneği.

Visual Builder'ı kullanarak ikinci satırın satır ayarlarını açın.

Satır Ayarında, CSS sekmesinin altına aşağıdakileri ekleyin:

CSS Sınıfı metin kutusuna "custom_row" ekleyin. (satırınızı esnek bir kutuya sarar)

Sütun 1 CSS Sınıfı metin kutusuna "mobilde ikinci" ekleyin (Bu, mobilde ikinci görüntülenecek şekilde sütun 1'in sırasını değiştirir. Sınıf adı bunu hatırlamayı kolaylaştırmalıdır. )

Sütun 2 CSS Sınıfı metin kutusuna "mobilde ilk" ekleyin (Bu, 2. sütunun sırasını mobilde ilk görüntülenecek şekilde değiştirir.)

Not: Her sütuna bir sıralama sınıfı eklemek önemlidir.

Şimdi sonuçlara bakalım. Mobil cihazlarda, ikinci satır sütunlarının ilk satırla aynı şekilde görüntülenecek şekilde nasıl değiştirildiğine dikkat edin. Bu, tutarlı bir resim → metin → resim → metin akışı oluşturur.

CSS Sınıflarını Kullanarak Herhangi Bir Düzenin Sütun Yığın Sırasını Değiştirme

Aynı yöntemi kullanarak herhangi bir sütun düzeninin sırasını değiştirebilirsiniz. Özel CSS'nin birinci, ikinci, üçüncü ve dördüncü yerleşim değerlerini eklemenizi sağladığını unutmayın. Örneğin, dörtte bir buçuk dörtte bir düzeninin sırasını şu şekilde değiştirmek isterseniz:

Sadece daha önce yaptığınız adımları izleyin. Satır ayarlarınızda, CSS sekmesi altında, satıra "custom_row" sınıfını ekleyin ve sipariş sınıfınızı ("mobilde birinci", "mobilde ikinci", "mobilde üçüncü") ekleyin. sütunlarınızın her birine. Sütunlarınızın her birine bir sınıf eklediğinizden emin olun, böylece hepsinin belirlenmiş bir sıra değeri olur.

Bu kadar!

Tercih edilen yol

Her cihaz için ayrı düzenler oluşturmanız gerekiyorsa ve/veya mobilde sütun sırasına ek olarak içeriği değiştirmeyi planlıyorsanız, düzenlerinizi özelleştirmek için Divi'nin “Devre Dışı Açık” özelliğini kullanmanız gerekir.

İçeriği değiştirmeden yalnızca mobilde sütunları yeniden sıralamanız gerekiyorsa ve içeriğin birden fazla devre dışı/etkin sürümüyle uğraşmak istemiyorsanız, CSS yönteminden yararlanabilirsiniz.

SEO Hususları

Arama motorlarının bir sayfada devre dışı bırakılmış veya gizlenmiş içeriği nasıl ele aldığı konusunda yıllar boyunca çok fazla tartışma olmuştur. Belirli cihazlar için içeriği gizleyebilirsiniz, ancak içerik yine de Google tarafından taranabilir. Bu, yinelenen içerik olarak kabul edilebilir ve "Devre Dışı Bırak" özelliğinin kullanılmasının sayfa sıralamanızı olumsuz etkileyeceğini düşündürebilir. Ancak, Google gibi arama motorları, içeriğin duyarlı düzen nedenleriyle gizlenip gizlenmediğini belirlemede oldukça iyidir. Kısacası Google, içeriği farklı cihazlar için kopyalayıp kopyalamadığınızı bilir ve bunun için sizi cezalandırmaz. İçeriği kötü niyetli nedenlerle gizlemediğiniz sürece kullanımı güvenlidir.

Son düşünceler

Sütunların yığılma sırasını değiştirebilmek son derece kullanışlıdır ve bazen gereklidir. Hepimizin mobilde 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. Divi'nin “Devre Dışı Bırak” özelliğini kullanarak her cihaz için tamamen farklı düzenler oluşturabilirsiniz. Ayrıca, birkaç satırlık özel CSS ile, mobil cihazlar için istediğiniz şekilde sıralamak için satırlarınıza ve sütunlarınıza kolayca sınıflar ekleyebilirsiniz.

Umarım bu gönderi, mobil ekranlarınız üzerinde daha fazla kontrol sahibi olmanıza yardımcı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!