Studio Two Editor: Denetçi Paneliyle Çalışma

Herhangi bir ögenin, bölümün veya sayfanın özelliklerini Denetçi panelinden düzenleyin. Tek bir yerden ögelerin kesme noktalarında yeniden boyutlandırılmasını, tasarımı ayarlayın, hareket eklemeyi ve veri kaynağına içerik bağlamayı ayarlayın.

Tasarım sekmesinden bir ögenin kesme noktalarında nasıl göründüğünü ve davrandığını kontrol edin. Bu, Denetçi’de gördüğünüz ilk sekmedir ve boyut ve aralıktan renk, tipografi ve özel CSS’ye kadar her şeyi içerir.

Seçili ögeyi üst ögesiyle hizalamak için sekmenin üst kısmındaki simgelere tıklayın. Bu simgelerin altında bulunan bölümler seçtiğiniz ögeye bağlı olarak değişir:

• Boyut: Ögenin genişliğini ve yüksekliğini ayarlayın ve farklı ekranlarda nasıl yeniden boyutlandırılacağını belirleyin.
• Öge tasarımı: Renkler, kenarlık, köşeler, gölgeler ve tipografi dahil olmak üzere ögenin görünümünü ayarlayın. Ögeler birden fazla parçadan oluşturulduğunda (ör. menü) veya kendi üzerine gelme ve devre dışı durumları (ör. düğmesi), öncelikle stil vermek istediğiniz parçayı veya durumu seçin.
• Düzen (kapsayıcılar ve bölümler): Ögelerin üst içinde yerleşimini ayarlayın. Bir ızgara düzeni seçin, dolguyu ayarlayın ve taşan içeriğe ne olacağına karar verin. Dikey aralığı Otomatik'ten Manuel'e ayarlamak, ögelerin her kesme noktasında farklı bir aralıktaki aralıklarını değiştirmenize olanak sağlar.
• Pozisyon: Bir pozisyon türü seçin (ör. yapışkan, sabitlenmiş) ve ögenin ekran boyutu değiştiğinde yerinde kalmasını sağlamak için kenar boşluklarını ve yuvalamayı ayarlayın.
• Görünüm: Ögenin opaklığını ve dönüşünü ayarlayın.
• İmleç: Bir ögeye, bölüme veya sayfaya özel bir imleç ekleyin.
• Çapa: Ögeye doğrudan bağlantı vermek ve çapa URL'sini kopyalamak için bir çapa ekleyin.
• Özel CSS: Seçili öge için kendi CSS'nizi yazın.

Hareket sekmesinden ögelere ve bölümlere hareket ekleyin. Aynı ögeye farklı türlerde animasyonlar uygulayabilirsiniz. Örneğin, bir öge yüklenirken solarak kaybolabilir, ziyaretçinin imlecine tepki verebilir ve öge kaydırdıkça kayabilir.

İstediğiniz hareket türünü seçin:

• Giriş: Ögeye ilk yüklendiği anda animasyon uygulayın. Örneğin, genişletilmesini, solmasını veya belirli bir açıyla hareket etmesini sağlayabilirsiniz.

• Döngü: Ögeye belirli bir eylemle tetiklenmeyen bir sürekli döngü halinde animasyon uygulayın.

• Kaydır: Ziyaretçi sayfayı yukarı ve aşağı kaydırdıkça ögeye canlılık katın.

• Fare Efektleri: Ögenin bir animasyonla imleç hareketine tepki vermesini sağlayın.

• Tıklama: Ziyaretçi tıkladığında ögeye canlılık katın.

• Üzerinde Gezinme: Bir ziyaretçi ögenin üzerine geldiğinde ögenin animasyonunu uygulayın.
  Not: Düğmeler ve menüler gibi bazı ögeler yerleşik olarak bulunduğundan, başka bir üzerine gelme animasyonu ekleme seçeneğini görmezsiniz. Üzerindeyken durumunu özelleştirmek için Tasarım sekmesine gidin ve Durum'un altından Üzerindeyken'i seçin.

Ayarlar sekmesinden seçtiğiniz öge için gelişmiş davranışlar ayarlayın.

• Veri kaynakları: Bir sayfayı, bölümü veya kapsayıcıyı veri kaynağına bağlayın. Kaynaktaki ögeler ilgili kaynağın verilerini, eylemlerini ve işlevselliğini kullanabilir. Başlamak için kaynağı Bağla'ya tıklayın.

• Özellikler: Seçili ögenin içeriğini ve davranışını düzenleyin. Seçenekler ögeye bağlı olarak değişir. Örneğin, bir düğmeyi seçerken metni ve bağlantıyı özelleştirebilir veya devre dışı bırakabilirsiniz. Bir alana manuel olarak değer girmek yerine onu bir veri kaynağına bağlamak için alanın yanındaki Veriye bağla simgesine tıklayın ya da Aria'dan yardım almak için AI ile Ayarla seçeneğini kullanın.

• Erişilebilirlik: Yardımcı teknolojilerle ögenin kullanımını kolaylaştırın. Ögenin türüne bağlı olarak, rolünü ayarlayabilir, dekoratif olarak işaretleyebilir, erişilebilir bir ad ekleyebilir ve ekran okuyucuların güncellemeleri nasıl duyuracağını belirleyebilirsiniz.

• Gelişmiş:

  • Görünürlük koşulu: Bir veri kaynağından gelen koşul doğru/yanlış olduğunda ögeyi gizleyin.

  • Etkinlik işleyicileri: Ögeye tıklama veya üzerine gelme gibi bir şey olduğunda bir fonksiyonu yürütün. Düğmeler gibi belirli ögeler için olay işleyicileri kullanılabilir.

Daha fazla bilgi edinmek için aşağıdaki sorulara tıklayın.