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 Koşullu görünürlük bölümüne bakın.
• Hide: Öğe her zaman gizlidir. Bir öğeyi flow’dan silmeden geçici olarak kaldırmak için kullanın.

Doldurma

Fill bölümü, bir öğenin arka planını belirler. Tüm ekranı doldurmak için bunun yerine ekran arka planını ayarlayın.

Bir doldurma, bir veya daha fazla katmandan oluşur. Her katman aşağıdaki türlerden birine sahiptir:

• Düz renk : Renk seçiciyi kullanın veya bir hex değeri girin. Arka planı yarı saydam yapmak için opaklık değerini ayarlayın.
• Gradyan : İki veya daha fazla renk durağı. Geçişi ayarlamak için durağı sürükleyin, açıyı Direction kaydırıcısıyla belirleyin. Bir durağı değiştirmek için Stops altındaki ilgili satırı düzenleyin. Durak eklemek için gradyan çubuğuna veya Stops yanındaki simgesine tıklayın. Katman satırındaki kaydırıcı, tüm duraklardaki opaklığı aynı anda değiştirir.
• Görsel veya Video : Arka plan olarak bir görsel veya video.

Katmanları yönetmek için:

• Katman eklemek için Fill yanındaki simgesine tıklayın.
• Katmanın türünü değiştirmek için renk örneğine tıklayın ve bir tür seçin.
• Katmanların sırasını değiştirmek için satırlarını sürükleyin.
• Katmanı kaldırmak için satırındaki simgesine tıklayın.

Üst katman alttakileri örter; bu nedenle bir resmin üzerindeki yarı saydam katman onu renklendirir. Giriş alanları ve tarih/saat seçiciler yalnızca alt katmanı gösterir.

Bir katmanı diğer öğelerde yeniden kullanmak veya karanlık bir versiyonunu oluşturmak için renk stili olarak kaydedin. Bir resmi tint’iyle birlikte yeniden kullanmak için tek, çok katmanlı bir stil oluşturun.

Kenarlık

Kenarlıklar varsayılan olarak kapalıdır. Bir kenarlık eklemek için sağ panelde Border seçeneğinin 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 veya bir hex değeri girin. Bunun yerine bir renk stili uygulamak için Styles sekmesinden seçin. Kenarlık, bir stilin resim ve video katmanlarını yoksayar.
• 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
• 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ük simgesine tıklayı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 açılır menüsüne tıklayarak yazı tipi seçiciyi açın. İki sekme içerir:

• Styles: Projenizde kaydedilmiş metin stillerini listeler. Tüm tipografi ayarlarını tek seferde uygulamak için bir stil seçin.
• Fonts: Kullanılabilir 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.

Mevcut tipografi ayarlarını yeni bir metin stili olarak kaydetmek için sekmelerin yanındaki simgesine tıklayın. Öğe bundan sonra yeni stili kullanır.

Boyut ve ağırlık

• Weight: Açılır menüden bir yazı tipi ağırlığı seçin
• Size: Açılır menüden bir boyut seçin veya özel bir değer girin

Renk

Renk örneğine tıklayın, ardından bir hex değeri girin ya da paleti kullanın. Bunun yerine bir renk stili uygulamak için Styles sekmesinden seçim yapın. Metin, yalnızca bir stilin düz renk katmanlarını gösterir.

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 (sınav seçenekleri, ürünler, sekmeler, geçiş düğmeleri ve onay kutuları) varsayılan olarak iki durum sunar:

• Default: Öğenin normal görünümü
• Selected: Kullanıcı bu seçeneği seçtiğinde ortaya çıkan görünüm. Aktif seçimi vurgulamak için dolgu, kenarlık rengi ve metin rengi gibi özellikleri geçersiz kılabilirsiniz

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

Bir flow genelinde metin ve renk özelliklerini tutarlı tutmak için bunları yeniden kullanılabilir stiller olarak kaydedin. Bir stili düzenlediğinizde, onu kullanan her öğe ve ekran güncellenir.