Editor X: Sayfa Yapısı Hakkında (Üst, Alt ve Kardeş Ögeler)

3 dakikalık okuma
Editor X platformu, ajanslara ve serbest çalışanlara yönelik yeni platformumuz Wix Studio'ya geçiş yapıyor.Wix Studio hakkında daha fazla bilgi edinin (Yalnızca İngilizce)
Editor X'te site sayfaları temel olarak kapsayıcıların içine ögelerin yerleştirilmesiyle yapılandırılır. Bir metin ögesinin bir etkileşim kutusu içine yerleştirilmesi buna örnek olarak verilebilir. Bu işlem sayfa ögeleri ile üst kapsayıcılar arasında modern HTML ve CSS kavramlarından türetilen bir ilişki oluşturur. 
Bu makalede bu ilişkiyi ve duyarlı bir site oluşturmak için nasıl kullanılacağını öğreneceğiz:

Ögeler Arasındaki Üst-Alt İlişkileri

Bir ögeyi sayfa bölümü, üst bilgi veya tekrarlayıcı gibi bir kapsayıcının içine yerleştirdiğinizde öge bu kapsayıcıya iliştirilir ve aralarında bir üst-alt ilişkisi oluşur. Örneğin, logonuzu üst bilgiye iliştirdiğinizde otomatik olarak en yakın kenara yanaştırılır ve üst bilginin "alt ögesi" haline gelir.  
CSS biçimlendirmesine benzer şekilde, üst kapsayıcının tasarımı (yani boyut, konum, dolgu gibi özellikleri) alt ögelere aynı şekilde yansır. Örneğin, üst kapsayıcıya dolgu eklediğinizde alt ögeler küçülerek bu değişikliğe uyum sağlar.
Not:
Yığın oluşturduğunuzda ögeler dikey sıralamanın bozulmaması için otomatik olarak üst kapsayıcı işlevi gören bir esnek kutunun içine yerleştirilirler.
İpucu:
Öge boyutlandırma hakkında daha fazlasını okumak için buraya tıklayın. 

Sayfa Yapısını Oluşturma

Sitenizin tasarımını planlarken katmanlı bir yapı oluşturarak başlamanız önemlidir. Önce üst kapsayıcıları oluşturmanızı, ardından alt ögeleri doğru konuma sürükleyip bırakarak eklemenizi öneririz. 

Sayfanızın Katmanları

Editor X'te oluşturduğunuz sayfa yapısı Katmanlar panelinde şema halinde gösterilir. Sitenizin yapısını oluşturan katmanlar şunlardır:
  • Sayfa: Katmanlar panelinde sayfanızın arka plan rengini düzenleyebilir ve dolgu ekleyebilirsiniz. Bu ayarlara erişmek için Sayfa'nın yanındaki Daha Fazla Göster simgesine tıklayın.
  • Bölümler: Her sayfa en az bir bölümden oluşur. İhtiyacınız kadar dikey ve yatay bölüm ekleyebilirsiniz. Ayrıca birden çok sayfada görünen şema bölümler oluşturabilirsiniz. 
  • Kapsayıcılar: Duyarlı bir site yapısı oluşturmak ve her şeyin yerli yerinde kalmasını sağlamak için ögeleri kapsayıcıların içine yerleştirin. Temel bir boş kutu kullanabilir veya Yığın, Düzenleyici ve Tekrarlayıcı gibi akıllı düzen araçları ekleyebilirsiniz. 
  • Ögeler: Bunlar Ekle panelinden eklediğiniz Metin, Düğme, Form gibi sayfa ögeleridir. Her ekran boyutunda aynı sırada ve konumda kalmalarını sağlamak için tekil ögeleri üst kapsayıcıya yanaştırabilir ve çoklu ögelerden yığın oluşturabilirsiniz.  
Önemli:
Izgaralar hiyerarşik modelin bir parçası olmasalar da ögelerinizin boyutlandırılması ve konumlandırılması üzerinde etkilidirler. Daha Fazla Bilgi

Ögelerin Üst Kapsayıcısını Değiştirme

Bir alt ögenin yeni bir üst kapsayıcıya taşınmasına "üst kapsayıcı değiştirme" adı verilir. Üst kapsayıcısını değiştirmek için ögeyi sürükleyip başka bir üst kapsayıcının içine bırakmanız yeterlidir. 

Ögelerin Sayfa Hiyerarşisindeki Yerini Bulma

Sayfanızdaki her bölüm, kapsayıcı ve öge hiyerarşideki konumunu gösteren bir gezinti menüsüne sahiptir. Bu gezinti menüsüne tıklayarak sayfanızın katmanları arasında kolayca geçiş yapabilirsiniz. 

Kardeş Ögeleri Yapılandırma

Kardeş ögeler aynı üst kapsayıcıyı paylaşan ögelerdir. Örneğin, aşağıdaki kapsayıcının içindeki metin ve düğme kardeş ögelerdir: 
Kardeş ögeleriniz Yığın, Düzenleyici veya Tekrarlayıcı gibi esnek kapsayıcılar içinde olduklarında birbirlerinin boyutunu ve konumunu etkileyebilirler. Bu ilişkiyi daha küçük ekran boyutlarında ögelerin üst üste gelmesini engelleyecek şekilde tasarlamak duyarlı bir site oluşturma açısından faydalı olabilir.  
Aşağıdaki örnekte kardeş ögeler arasında otomatik olarak oluşturulan boşlukları görebilirsiniz:

Tüm Kesme Noktalarına Uygulanan Yapısal Değişiklikler

Katmanlar panelinizde sayfanızdaki ögeler, kapsayıcılar ve bölümler arasındaki ilişkiyi (hiyerarşiyi) görebilir ve gerektiğinde müdahale edebilirsiniz.
Sayfa hiyerarşisi sitenizin HTML yapısının bir parçası olduğu için sitenizde yaptığınız değişiklikler tüm kesme noktalarına uygulanır. Örneğin, bir alt ögeyi üst kapsayıcıdan ayırdığınızda bu ayırma işlemi tüm kesme noktalarına yansır. 
İpucu:
"Tüm kesme noktalarında tasarım" hakkında daha fazla bilgi edinmek için buraya tıklayın.

Bu içerik yardımcı oldu mu?

|