Studio Editor: DOM Sıralaması ile Çalışma

5 dakikalık okuma
Site sayfalarının yapılanmasını ve düzenini temsil eden Belge Nesne Modeli (DOM), ögelerin sekme tuşuyla gezinme ve yüklenme sıralamasını belirler. Bir sitenin DOM sıralamasını düzenleyerek sitenin erişilebilirliğini ve performansını iyileştirebilir ve ziyaretçilere daha iyi bir kullanıcı deneyimi sunabilirsiniz.
Bu makalede bilgi edinebileceğiniz konular:
Bilmenizde fayda var:
Sitede yığınlar ve esnek kutular gibi daha karmaşık düzen araçları kullanılıyorsa, ögeleri DOM sıralamasına göre düzenlemek özellikle önemlidir.

DOM sıralamasının önemi

Bir sayfadaki ögelerin yüklenme, okunma ve sekme tuşuyla gezinme sırasını belirleyen DOM sıralaması, sitenin farklı yönleri üzerinde etkilidir:
  • Erişilebilirlik: Bazı ziyaretçiler sitenizde gezinmek için ekran okuyucu gibi yardımcı teknolojiler kullanabilir. DOM sıralaması bir sitedeki sekme tuşuyla gezinme sırasının yanı sıra ekran okuyucular tarafından okunma sırasını belirler. DOM ve erişilebilirlik hakkında daha fazla bilgi edinin
  • Performans: DOM, sitedeki ögelerin hangi sırayla yükleneceğini belirler. DOM sıralamasını ögelerin görsel sıralamasıyla eşleştirmek mantıklı bir yükleme deneyimi oluşturulması açısından önemlidir. DOM ve performans hakkında daha fazla bilgi edinin
  • SEO sıralamaları: Sitenin düzenli, uyumlu ve iyi organize edilmiş bir yapıda olması erişilebilirliği ve yüklenme performansını iyileştirebileceği gibi sitenin SEO sıralamasındaki yerini de iyileştirebilir.
Mantıklı bir DOM sıralaması tüm site ziyaretçilerine en iyi kullanıcı deneyimini sunmak açısından önemlidir. Örneğin, site menüsü önce gelmeli, ardından başlıktaki diğer ögeler, sayfa başlığı, sayfa içeriği vb. onu izlemelidir.

Otomatik DOM sıralaması

Otomatik DOM sıralaması bir sayfadaki ögelerin soldan sağa ve yukarıdan aşağıya doğru görsel sıralamasını esas alır. Öge eklediğinizde, hizaladığınızda ve yeniden boyutlandırdığınızda sıralama otomatik olarak yeniden düzenlendiği için sürekli olarak optimize edilmiş halde kalır.

Otomatik DOM sıralamasını devre dışı bırakma

Üzerinde çalıştığınız bir sitenin DOM sıralamasıyla ilgili bir sorun fark ederseniz, site genelinde devre dışı bırakabilirsiniz. Belirli ögelerle ilgili bir sorun varsa, duruma göre bölüm ve kapsayıcı özelinde, hatta bir bölüm içindeki ızgara hücrelerinde devre dışı bırakabilirsiniz.
Otomatik DOM sıralamasını devre dışı bırakmak için:

Ögelerin DOM sıralamasını manuel olarak değiştirme

Otomatik DOM sıralamasını kapattıktan sonra, ögelerin sayfada soldan sağa ve yukarıdan aşağıya doğru izlediği görsel sıraya uyacak şekilde manuel olarak güncelleyebilirsiniz.

DOM sıralamasını manuel olarak değiştirmek için:

  1. Editörün sol çubuğundaki Katmanlar simgesine  tıklayın.
  2. Mevcut seçenekleri düzenleyin:
    • Bir bölüm içindeki ögeler: 
      1. İlgili bölüme tıklayarak açın.
      2. Ögeleri doğru konuma sürükleyip bırakın.
    • Bölümler: 
      1. En üstteki bölümün üzerine gelin ve Diğer Eylemler simgesine  tıklayın.
      2. Düzenle'ye tıklayın.
      3. Öne Getir'e tıklayın.
      4. Panelde yukarıdan aşağıya tüm diğer bölümler için bu adımları tekrarlayın.
Bir sitenin Katmanlar paneli. Bir bölümün Düzenle sekmesine tıklanmış ve seçenekler görünüyor.

DOM sıralamasını yeniden düzenleme

Sitenizdeki bir bölümde, esnek kutuda, yığında veya sayfada bulunan ögelerin DOM sıralamasını tek tıklamayla yeniden düzenleyebilirsiniz. Sıralama işleminde ögelerin soldan sağa ve yukarıdan aşağıya doğru izlediği görsel sıra esas alınır. 

Sayfanın DOM sıralamasını yeniden düzenlemek için:

  1. Sol çubuktaki Sayfalar simgesine  tıklayın.
  2. İlgili sayfayı seçin.
  3. Diğer Eylemler simgesine  tıklayın.
  4. DOM Sıralamasını Yeniden Düzenle'ye tıklayın.
Bir sitenin Sayfalar paneli. İmleç bir sayfanın DOM sıralamasını yeniden düzenleme seçeneğine tıklıyor.

Ögelerin DOM sıralamasını yeniden düzenlemek için:

  1. Editörün sol çubuğundaki Katmanlar simgesine  tıklayın.
  2. İlgili bölümü, esnek kutuyu veya yığını seçin.
  3. Diğer Eylemler simgesine  tıklayın.
  4. DOM Sıralamasını Yeniden Düzenle'ye tıklayın.
Bir sitenin Katmanlar paneli. İmleç bir bölümün DOM sıralamasını yeniden düzenleme seçeneğine tıklıyor.

SSS

Sitelerdeki DOM sıralaması hakkında daha fazla bilgi edinmek için aşağıdaki sorulara tıklayın.