Studio Editor: Sayfa Yapısı Hakkında (Üst, Alt ve Kardeş Ögeler)
3 dakikalık okuma
Bu makalede
- Ögeler arasındaki üst-alt ilişkileri
- Sayfa yapısı oluşturma
- Sayfadaki katmanlar
- Ögelerin üst kapsayıcısını değiştirme
- Bir ögenin hiyerarşideki yerini bulma
- Kardeş ögeleri yapılandırma
- Kesme noktalarında yapısal değişiklikler
Site sayfalarını yapılandırırken temel olarak yaptığınız şey ögeleri bölümlerin, kapsayıcıların ve düzen araçlarının içine yerleştirmektir. Örneğin, bir metni bir kapsayıcı kutunun içine yerleştirebilirsiniz. Bu işlem metin ile kapsayıcı kutu arasında modern HTML ve CSS kavramlarından türetilen bir ilişki oluşturur.
Bu makalede ögeler arasındaki üst-alt ilişkileri ve sayfa katmanları dahil olmak üzere sayfa yapısı hakkında daha fazla bilgi edinebilirsiniz.
Ögeler arasındaki üst-alt ilişkileri
Bir kapsayıcının veya düzen aracının içine yerleştirdiğiniz bir öge o kapsayıcıya veya düzen aracına "iliştirilir". Bu bir üst-alt ilişkisi oluşturur. Örneğin, üst bilgiye logo eklediğinizde oluşan ilişkide logo 'alt' ve üst bilgi 'üst' olur.
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. Ögeleri boyutlandırma hakkında daha fazla bilgi edinin
Bilmenizde fayda var:
- Eklediğiniz yeni ögeler otomatik olarak üst ögenin üst ve sol/sağ tarafına "yuvalanır". Alt ögenin konumunu manuel olarak ayarlamak için otomatik yuvalamayı devre dışı bırakabilirsiniz
- Yığın haline getirdiğiniz ögeler üst öge işlevi gören bir esnek kutunun içine yerleştirilirler.
Sayfa yapısı 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.
Sayfadaki katmanlar
Studio Editor'da oluşturduğunuz yapı Katmanlar paneline yansıtılır. Sitenizin yapısını oluşturan katmanlar şunlardır:
- Sayfa: Katmanlar panelinde sayfanızın arka plan rengini düzenleyebilir ve dolgu ekleyebilirsiniz. İlgili ayarlara erişmek için sayfa adının yanındaki Diğer Eylemler simgesine
tıklayın. - Bölümler: Her sayfa en az bir bölümden oluşur. Müşterinizin ihtiyaçları doğrultusunda istediğiniz kadar bölüm oluşturabilirsiniz. Çoğu bölümde düzen araçları (ör. hücreler, yığınlar, vb.) ve kapsayıcılar bulunur.
- Kapsayıcılar ve düzen araçları: Ögeleri kapsayıcıların içine yuvalayarak konumlarını korumalarını sağlayabilir ve kolayca duyarlı yapılar oluşturabilirsiniz. Ayrıca, kapsayıcılar yerine tekrarlayıcılar ve esnek kutular gibi düzen araçları ekleyebilirsiniz.
- Ögeler: Bunlar Ekle panelinden eklediğiniz metinler, düğmeler, medya dosyaları gibi sayfa ögeleridir. Her ekran boyutunda aynı sırada ve konumda kalmalarını sağlamak için tekil ögeleri üst kapsayıcıya yuvalayabilir veya birden fazla ögeyi içine alan bir yığın oluşturabilirsiniz.
Ögelerin üst kapsayıcısını değiştirme
Bir alt ögenin üst kapsayıcısını değiştirebilirsiniz. Bunun için ögeyi sürükleyip başka bir üst kapsayıcıya iliştirmeniz yeterlidir.
Bir ögenin hiyerarşideki yerini bulma
Sayfanızdaki herhangi bir bölüme, kapsayıcıya ve ögeye tıkladığınızda hiyerarşideki konumunu gösteren bir içerik haritası yolu görünür. Bu içerik haritası yoluna tıklayarak sayfanızın katmanları arasında kolayca geçiş yapabilirsiniz.
Kardeş ögeleri yapılandırma
Aynı üst kapsayıcıyı paylaşan ögelere "kardeş ögeler" adı verilir. Örneğin, aşağıdaki örnekte kapsayıcının içinde yer alan metin ve vektör sanatı ögeleri kardeş ögelerdir:
Yığınlar ve tekrarlayıcılar gibi belirli düzen araçlarında yer alan kardeş ögeler birbirlerinin boyutunu ve konumunu etkileyebilirler. Duyarlı bir site oluştururken, daha küçük ekran boyutlarında ögelerin üst üste binmesini önlemek için bu ilişkiyi doğru şekilde tasarlamanız önemlidir.
Aşağıdaki örnekte kardeş ögeler arasında otomatik olarak oluşturulan boşlukları görebilirsiniz:
Kesme noktalarında yapısal değişiklikler
Katmanlar paneli bir sayfadaki içeriğin hiyerarşisini (bölümler > kapsayıcılar/düzen araçları > ögeler) gösterir ve ihtiyacınıza göre değişiklikler yapmanıza olanak sağlar.
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 öge ile üst ögeyi (ör. metin ile kapsayıcıyı) birbirinden ayırdığınızda, bu ayırma işlemi tüm kesme noktalarına yansır. Farklı kesme noktalarında tasarım hakkında daha fazla bilgi edinin