---
title: "Element styling"
description: "Elementlerin görsel görünümünü yapılandırın — dolgu, kenarlıklar, efektler, tipografi, durumlar ve proje genelindeki stiller."
---

Sağ paneldeki **Design** sekmesi, her elementin görsel görünümünü kontrol eder. Kullanılabilir özellikler element türüne göre değişir, ancak çoğu element ortak styling seçeneklerini paylaşır.
## Boyut ve boşluk \{#size-and-space\}

:::link
Ana makale: [Eleman konumlandırma](manage-paywall-ui-elements)
:::
### Görünürlük \{#visibility\}

**Visibility** açma/kapama düğmesi, öğenin ekranda görünüp görünmeyeceğini belirler.
* Show **Show** (varsayılan): Öğe her zaman görünürdür.
* Conditional **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](onboarding-element-visibility).
* Hide **Hide**: Öğe her zaman gizlidir. Bir öğeyi silmeden flow'dan geçici olarak kaldırmak için bunu kullanın.
### Boyutlandırma \{#sizing\}

Her elementin **Width** ve **Height** kontrolleri üç modda çalışır:

* **Fill**: Üst öğedeki tüm kullanılabilir alana yayılır
* **Hug**: Elementin içeriğine göre küçülür
* **Fixed**: Boyutlar için tam piksel değeri belirlenir

### Aralık \{#spacing\}

**Spacing** bölümünde iki katmanlı bir kutu modeli görüntülenir:

* **Margin**: Öğe ile komşuları arasındaki boşluk. Üst kapsayıcının sınırlarını, değeri ne olursa olsun, aşamaz.
* **Padding**: Öğenin kenarlığı ile içeriği arasındaki boşluk.

Her kenar için değeri ayrı ayrı ayarlayabilirsiniz.

:::note
Metin öğelerinde yalnızca margin bulunur. Ekranlarda yalnızca padding bulunur. Her ikisi de kapsayıcılar ve alt içeriğe sahip diğer öğeler için kullanılabilir.
:::
## Doldur \{#fill\}

**Fill** bölümü, öğenin arka planını kontrol eder. Dört farklı dolgu türü mevcuttur: düz renk, gradyan, resim ve video.

Bu özelliği tüm ekranın ana görseli / videosu olarak ayarlamak için kullanın.
* **Düz renk** Solid color. Renk seçiciyi kullanın, hex değeri girin veya [proje genelinde bir renk stili](#color-styles) atayın. Arka planı yarı saydam yapmak için **opaklık** değerini ayarlayın.
* **Gradyan** Gradient. İki veya daha fazla renk duraklamasıyla gradyan dolgu ekleyin. Geçişi ayarlamak için duraklamaları sürükleyin, yönünü kontrol etmek için gradyan açısını değiştirin.

* **Image** Image veya **Video** Video. Elementin arka planı olarak bir [resim / video](custom-media) ayarlayın.
## Kenarlık \{#border\}

Kenarlıklar varsayılan olarak kapalıdır. Eklemek için sağ panelde **Border** yanındaki Plus simgesine tıklayın. Kenarlığı kaldırmak için **Border** başlığının yanındaki Close 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](#color-styles) atayın. Kenarlığı yarı saydam yapmak için **opacity** değerini ayarlayın.
* **Width**: Piksel cinsinden kenarlık kalınlığı.

## Köşeler \{#corners\}

**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** Per Corner: Her köşe için ayrı ayrı yarıçap belirlemek üzere etkinleştirin
## Efektler \{#effects\}

Bir veya daha fazla görsel efekt eklemek için **Effects** yanındaki artı düğmesine Plus 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ü Show açıp kapatın.

## Animasyon \{#animation\}

Animasyonlu bir efekt eklemek için **Animation** öğesinin yanındaki Plus 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 \{#preview-the-animation\}

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** 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ü](paywall-layout-and-products#screen-actions) açın (ekran katmanının yanındaki üç nokta simgesi) ve **Play Animation** seçeneğini belirleyin.
## Görünüm \{#appearance\}

* **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) \{#typography-properties-text-elements\}

Metin öğelerinde aşağıdaki denetimleri içeren bir **Typography** bölümü görüntülenir:
### Font \{#font\}

:::link
Ayrıca bakın: [Özel fontlar](using-custom-fonts-in-paywall-builder)
:::

Font açılır menüsüne Font select tıklayarak font seçiciyi açın. İki sekme içerir:

* **Styles**: Projenizde kayıtlı [metin stillerini](#text-styles) listeler. Tüm tipografi ayarlarını tek seferde uygulamak için bir stil seçin.
* **Fonts**: Kullanılabilir tüm font ailelerini listeler. İhtiyacınız olanı bulmak için arama yapın veya kaydırın.
### Boyut ve kalınlık \{#size-and-weight\}

* **Weight**: Açılır menüden bir yazı tipi kalınlığı seçin
* **Size**: Açılır menüden bir boyut seçin ya da özel bir değer girin
### Renk \{#color\}

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](#reusable-styles) birini seçin. Metni yarı saydam yapmak için opaklık kaydırıcısını ayarlayın.
### Hizalama \{#alignment\}

İki grup hizalama kontrolü:

* **Yatay**: Sol Align left, Orta Align center veya Sağ Align right
* **Dikey**: Üst Align top, Orta Align middle veya Alt Align bottom
### Dekorasyon \{#decoration\}

* **None** None: Dekorasyon yok (varsayılan)
* **Underline** Underline: Metne alt çizgi ekler
* **Strikethrough** Strikethrough: Metne üstü çizgi ekler
### Kırpma \{#truncation\}

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.

:::note
Bir metin öğesi seçtiğinizde, canvas üzerinde öğenin hemen üstünde bir **satır içi araç çubuğu** da görünür. Bu araç çubuğu, sağ panelde aşağı kaydırmadan yazı tipi, kalınlık, boyut ve hizalama ayarlarına hızlıca erişmenizi sağlar.
:::

## Duruma özgü ayarlar (etkileşimli öğeler) \{#state-specific-settings-interactive-elements\}

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 \{#selectable-states\}

:::link
Ana makale: [Seçilebilir öğeler](flow-selectable-elements)
:::

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** 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** set conditions seçeneğine tıklayın; örneğin zorunlu bir alan boş olduğunda.
### Giriş alanı durumları \{#input-states\}

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 \{#other-state-bearing-elements\}

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

- **[İlerleme göstergesi adımları](builder-loaders-and-progress-bars#step-states)** — her adım için üç durum: **Completed**, **Current** ve **Upcoming**.
- **[Carousel dots](builder-containers#dots)** — iki renk varyantı: etkin olmayan noktalar için **Color** ve geçerli slaydın noktası için **Active Color**.
## Yeniden kullanılabilir stiller \{#reusable-styles\}

Sol kenar çubuğundaki **Styles** Styles paneli, flow'unuz genelinde geçerli olacak yeniden kullanılabilir stiller tanımlamanıza olanak tanır. İ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 \{#text-styles\}

:::link
Ana makale: [Metin içeriği](onboarding-text)
:::

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** Styles panelini açın ve **Text** sekmesini seçin.
2. **Plus 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 \{#color-styles\}

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** Styles panelini açın ve **Colors** sekmesini seçin.
2. **Plus 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 \{#dark-mode\}

:::link
Ana makale: [Karanlık mod](paywall-dark-mode)
:::

Gerekirse, her renk stiline iki varyant ekleyebilirsiniz — biri açık mod Light mode için, diğeri karanlık mod Dark mode 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](builder-ui#view-controls-bottom-toolbar) **tema değiştirici** düğmesini Dark mode kullanın.