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): Ekran açıldığında öğe görünür olur.
• Conditional: Öğe yalnızca belirli koşullar sağlandığında görünür olur. Daha fazla bilgi için bkz. Koşullu görünürlük.
• Hide: Öğe, bir Show element aksiyonu tarafından gösterilene kadar gizli kalır. Bir öğeyi silmeden flow’dan 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

Animation yanındaki düğmesine tıklayarak animasyon efekti ekleyin. Builder, öğeyi dikkati çekmek amacıyla ritmik şekilde büyütüp küçülten Pulse animasyonunu ekler. Farklı bir efekt kullanmak için Type alanından istediğinizi seçin.

Animasyon türleri

Her türün kendine özgü ayarları vardır. Zamanlama ayarları tüm türler için aynıdır.

Tür	Ne yapar	Ayarlar
Pulse	Element büyüyüp küçülür.	Scale amount (%): elementin ne kadar büyüyeceği.
Radial fill waves	Elementin şeklinin dolu bir kopyası arkasından büyüyerek solar.	Scale amount (%): her dalganın elemente göre ne kadar büyüyeceği. Wave size (px): her dalganın elementin kenarından ne kadar öteye ulaşacağı. Wave color. Button pulse: her dalgayla birlikte elementi de Pulse amount (%) kadar ölçekler.
Radial outline waves	Radial fill waves ile aynıdır, ancak her dalga bir ana hattır.	Radial fill waves ile aynıdır.
Glow	Elementin etrafında yumuşak bir hale oluşur ve solar.	Glow size (px): halenin en parlak noktada ne kadar uzağa ulaşacağı. Glow color.
Shake	Element sola ve sağa hareket eder.	Distance (px): elementin her iki yana ne kadar hareket edeceği.
Wiggle	Element sola ve sağa eğilir.	Angle (°): elementin her iki yana ne kadar eğileceği.
Bounce	Element yukarı zıplayıp aşağı iner.	Height (px): elementin ne kadar yükseğe zıplayacağı.
Breathe	Element solar ve geri gelir.	Fade amount (%): elementin en soluk anında ne kadar solacağı.
Color shift	Elementin dolgusu başka bir renge döner ve geri gelir.	Shift color.
Border flash	Elementin kenarında bir kenarlık parlar ve solar. Oynatılırken elementin kendi kenarlığının yerini alır.	Flash width (px): kenarlığın en parlak anında ne kadar geniş olacağı. Kenardan içe doğru büyür. Flash color.
Shimmer	Elementin dolgusu üzerinde bir ışık bandı kayar.	Shimmer width (%): bandın genişliği, elementin oranına göre. Shimmer angle (°): kayma yönü, bir degradenin açısı gibi okunur. 90° soldan sağa gider. Shimmer color.

Bazı türler, öğenin düzenine veya dolgu rengine bağlıdır. Öğe bu koşulları karşılamadığında, builder Animation ayarlarında bir not gösterir ve flow animasyon olmadan yayımlanır:

• Radial fill waves ve Radial outline waves: Öğenin sabit genişlik ve yüksekliğe sahip olması ve kenar boşluğu bulunmaması gerekir.
• Color shift: Öğenin düz renk dolgusu veya dolgu olmaması gerekir.
• Shimmer: Öğenin düz renk dolgusu olması gerekir.

Zamanlama ayarları

Parametre	Açıklama
Süre (ms)	Tek bir animasyon döngüsünün uzunluğu
Döngüler arası gecikme (ms)	Tekrarlar arasındaki duraklama
Gecikmeli göster (ms)	İlk döngüden önceki duraklama
Kolaylaştırma	Animasyonun nasıl hız kazanıp yavaşladığı: Linear, Ease In, Ease Out, Ease In Out, Elastic (taşar ve yerleşir) veya Bounce (birkaç sekmeyle durur). Yeni bir Pulse, Custom olarak gösterilen önceden ayarlanmış bir eğri kullanır.

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

Satır sınırı ve otomatik küçültme

Metnin düzeni bozmasını önlemek için Limit lines özelliğini açın ve Max Lines değerini ayarlayın. Belirlenen satır sayısını aşan metin üç nokta (…) ile kesilir.

Uzun metni kesmek yerine sığdırmak için Auto shrink özelliğini açın. Metin, satır sınırına veya sabit yüksekliğine sığana kadar her lokalizasyonda küçülür. Çevirilerin orijinalden uzun çıktığı yerlerde, örneğin ürün kartı başlıklarında veya buton etiketlerinde kullanın.

• Auto shrink, Limit lines açık olduğunda ya da metnin Fixed yüksekliği ve Fixed size düzeni olduğunda kullanılabilir.
• Metin, font boyutunun en fazla %10’una kadar küçülür. Yine de sığmayan metin kesilir.
• Ayarladığınız font boyutu değişmez. Önizleme, metnin bir cihazda göründüğü boyutu gösterir.

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.