Sağ paneldeki Design sekmesi, her öğenin görsel görünümünü kontrol eder. Kullanılabilir özellikler öğe türüne göre değişir, ancak çoğu öğe ortak stil seçeneklerini paylaşır.

Design sekmesini tamamen atlayın.

AI Editör’e “paywalle koyu, premium bir his ver” deyin; tüm öğeleri bir anda yeniden biçimlendirir — dolgu renkleri, köşeler, yazı tipi ve boşluklar dahil.

Explore the AI Editor›

Görünürlük

Visibility (Görünürlük) düğmesi, öğenin ekranda görünüp görünmeyeceğini belirler.

• Show (varsayılan): Öğe her zaman görünürdür.
• Conditional: Öğe yalnızca belirli koşullar sağlandığında görünür. Daha fazla bilgi için bkz. Koşullu görünürlük.
• Hide: Öğe her zaman gizlidir. Bir öğeyi flow’dan silmeden geçici olarak kaldırmak için bunu kullanın.

Dolgu

Fill bölümü, öğenin arka planını kontrol eder. Fill, her biri düz renk, degrade, görsel veya video olabilen bir katman yığınıdır. Katman eklemek için Fill’in yanındaki simgesine tıklayın, katmanın türünü ayarlamak için renk kutusuna tıklayın, yığındaki sırasını değiştirmek için katmanı sürükleyin ve kaldırmak için simgesine tıklayın. Listenin en üstündeki katman, alttakilerin üzerine boyandığından, bir görselin üzerindeki yarı saydam bir katman onu renklendirir.

Bu özelliği, tüm ekranın hero görseli / videosu olarak kullanın.

• Düz renk . Renk seçiciyi kullanın, bir hex değeri girin veya proje genelinde bir renk stili atayın. Arka planı yarı saydam yapmak için opaklık değerini ayarlayın.
• Gradyan . İki veya daha fazla renk durağıyla gradyan dolgu ekleyin. Geçişi ayarlamak için durağı sürükleyin, yönü kontrol etmek için gradyan açısını değiştirin. Katmanın satırındaki kaydırıcı, tüm durakların opaklığını aynı anda ölçeklendirir.

• Image veya Video . Elementin arka planı olarak bir görsel / video ayarlayın.

Kenarlık

Kenarlıklar varsayılan olarak kapalıdır. Eklemek için sağ panelde Border yanındaki simgesine tıklayın. Kenarlığı kaldırmak için Border başlığının yanındaki simgesine tıklayın.

Kenarlık eklendiğinde şu ayarları yapılandırabilirsiniz:

• Color: Renk seçiciyi kullanın, hex değeri girin veya proje genelinde bir renk stili atayın. Kenarlığı yarı saydam yapmak için opacity değerini ayarlayın.
• Width: Piksel cinsinden kenarlık kalınlığı.

Köşeler

Corners bölümü, köşe yuvarlaklığını (yuvarlak köşeler) kontrol eder.

• Radius slider: Dört köşenin tamamı için aynı yarıçapı ayarlar
• Per-corner toggle : Her köşe için ayrı ayrı yarıçap belirlemek üzere etkinleştirin

Efektler

Bir veya daha fazla görsel efekt eklemek için Effects yanındaki artı düğmesine tıklayın:

• Drop shadow: Elementin arkasında bir gölge
• Inner shadow: Elementin sınırları içinde bir gölge
• Background blur: Arka planı bulanıklaştırır
• Layer blur: Elementi ve alt öğelerini bulanıklaştırır

Aynı element üzerine birden fazla efekt ekleyebilirsiniz. Bir efekti geçici olarak devre dışı bırakmak için görünürlüğünü açıp kapatın.

Animasyon

Animasyonlu bir efekt eklemek için Animation öğesinin yanındaki düğmesine tıklayın. Şu an için yalnızca Pulse animasyonu mevcut — element dikkat çekmek amacıyla ritmik biçimde büyüyüp küçülür.

Pulse animasyonunu aşağıdaki parametrelerle yapılandırabilirsiniz:

Parametre	Açıklama
Ölçek miktarı (%)	Öğenin orijinal boyutuna göre ne kadar büyüdüğü
Süre (ms)	Tek bir animasyon döngüsünün uzunluğu
Döngüler arası gecikme (ms)	Tekrarlar arasındaki duraklama
Gölge rengi	Nabız atan gölge efektinin rengi
Gölge boyutu (px)	Nabız atan gölgenin boyutu

Animasyonu önizleme

Builder varsayılan olarak statik ekranlar gösterir — animasyonlar siz etkinleştirene kadar hareketsiz kalır. İki yöntem:

• Cihaz önizlemesinin üstündeki Toggle animations düğmesine tıklayın. Ekranın animasyonlarını açar veya kapatır — açıldıktan sonra siz tekrar tıklayana kadar sürekli çalışır. Düğme yalnızca aktif ekranda en az bir animasyon olduğunda görünür.
• Ekranın bağlam menüsünü açın (ekran katmanının yanındaki üç nokta simgesi) ve Play Animation seçeneğini belirleyin.

Görünüm

• Opacity: %0 (şeffaf) ile %100 (opak) arasında değer alır
• Rotation: Öğeyi döndürmek için derece cinsinden bir değer girin

Tipografi özellikleri (metin öğeleri)

Metin öğelerinde aşağıdaki denetimleri içeren bir Typography bölümü görüntülenir:

Yazı Tipi

Yazı tipi seçici açmak için yazı tipi açılır menüsüne tıklayın. İki sekme bulunur:

• Styles: Projenizin kayıtlı metin stillerini listeler. Tüm tipografi ayarlarını bir anda uygulamak için bir stil seçin.
• Fonts: Mevcut tüm yazı tipi ailelerini listeler. İhtiyacınız olanı bulmak için arama yapın veya kaydırın. Yerleşik yazı tipleri cihazlar arasında farklı görünebilir — tutarlı bir görünüm için özel yazı tipi yükleyin.

Boyut ve kalınlık

• Weight: Açılır listeden bir font kalınlığı seçin
• Size: Açılır listeden bir boyut seçin ya da özel bir değer girin

Renk

Renk seçiciyi açmak için renk kutucuğuna tıklayın. Hex değeri girin, paleti kullanın veya yeniden kullanılabilir stillerden birini seçin. Metni yarı saydam yapmak için opaklık kaydırıcısını ayarlayın.

Hizalama

İki grup hizalama kontrolü:

• Yatay: Sol , Orta veya Sağ
• Dikey: Üst , Orta veya Alt

Dekorasyon

• None : Dekorasyon yok (varsayılan)
• Underline : Metne alt çizgi ekler
• Strikethrough : Metne üstü çizgi ekler

Kırpma

Metnin Maks. Satır ayarını aşması durumunda kırpma özelliğini etkinleştirerek metni belirli bir noktada kesin. Bu özellik özellikle birden fazla dili desteklerken işe yarar: çevrilen bir metin orijinalden uzunsa, kırpma düzenin bozulmasını önler.

Duruma özgü ayarlar (etkileşimli öğeler)

Etkileşimli öğeler birden fazla görsel durumu destekler. Böyle bir öğe seçtiğinizde, sağ panelde States bölümü belirir. Her durum için farklı görsel özellikler ayarlamak üzere durumlar arasında geçiş yapın.

Her durum, dolgu, kenarlık, tipografi rengi, opaklık ve daha fazlası gibi görsel özellikleri ayrı ayrı geçersiz kılabilir.

Seçilebilir durumlar

Seçilebilir bir gruba ait öğeler (quiz seçenekleri, ürünler, sekmeler, deneme süresi toggle’ları) varsayılan olarak iki durum sunar:

• Default: Öğenin normal görünümü
• Selected: Kullanıcı bu seçeneği seçtiğindeki görünüm. Aktif seçimi vurgulamak için fill, kenarlık rengi ve metin rengi gibi özellikleri özelleştirin Seçilebilir bir öğeyi etkileşimde bulunulamaz durumdayken stillemek için üçüncü bir durumu elle ekleyin. States settings bölümünü açın ve Disabled state ekleyin.

Disabled durumu koşula bağlıdır. Bunu seçin ve çalışma zamanında öğenin ne zaman devre dışı kalacağını tanımlamak için Set conditions seçeneğine tıklayın; örneğin zorunlu bir alan boş olduğunda.

Giriş alanı durumları

Giriş alanları ek durumlar sunar:

• Default: Normal, odaklanmamış görünüm
• Active: Alan odaklanmış ve giriş yapmaya hazır
• Invalid: Girilen değer doğrulamayı geçemiyor
• Disabled: Alan etkileşime kapalı

Durum taşıyan diğer öğeler

Birkaç öğe, standart Varsayılan / Seçili / Devre Dışı düzeninin dışında duruma özgü stil sunar:

• İlerleme göstergesi adımları — her adım için üç durum: Completed, Current ve Upcoming.
• Carousel dots — iki renk varyantı: etkin olmayan noktalar için Color ve geçerli slaydın noktası için Active Color.

Yeniden kullanılabilir stiller

Sol kenar çubuğundaki Styles paneli, tüm flow’unuzda geçerli olacak yeniden kullanılabilir stiller tanımlamanızı sağlar. İki tür stil mevcuttur: metin stilleri ve renk stilleri. Karanlık mod desteğini etkinleştirmek için renk stillerini kullanmanız gerekir.

Metin stilleri

Metin stilleri, tipografi ayarlarının tamamını barındırır — font ailesi, kalınlık, boyut, satır yüksekliği, hizalama ve dekorasyon. Her flow şablonu varsayılan ön ayarlarla gelir; dilediğiniz özel stiller de oluşturabilirsiniz.

Metin stili oluşturmak için:

1. Styles panelini açın ve Text sekmesini seçin.
2. Create style seçeneğine tıklayın.
3. Bir ad girin ve tipografi ayarlarını yapılandırın.
4. Create seçeneğine tıklayın.

Bir metin stili uygulamak için bir metin öğesi seçin ve Typography bölümündeki yazı tipi açılır menüsünden stili seçin.

Renk stilleri

Renk stilleri, flow’unuzun her yerinde başvurabileceğiniz adlandırılmış renklerdir. Her renk stilinin bir adı (örneğin “Primary text” veya “Brand”), bir hex değeri ve kaç öğenin bu stile başvurduğunu gösteren bir kullanım sayısı vardır.

Renk stili oluşturmak için:

1. Styles panelini açın ve Colors sekmesini seçin.
2. Create style seçeneğine tıklayın.
3. Bir ad girin ve renk seçin. Bir renk stilini güncellediğinizde, ona başvuran tüm öğeler otomatik olarak güncellenir.

Karanlık mod

Gerekirse, her renk stiline iki varyant ekleyebilirsiniz — biri açık mod için, diğeri karanlık mod için. SDK, cihazın mevcut renk şemasına göre doğru varyantı otomatik olarak uygular. Oluşturucuda koyu modu önizlemek için alt araç çubuğundaki tema değiştirici düğmesini kullanın.