---
title: Yazı bileşeni oluşturma
description: Ürün detay bölümü için yazı bileşeni oluşturma.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/creating-text-component.mp4" autoPlay muted loop controls />

## Bileşen oluşturma

**Elementler** kısmından bir **Yazı** element'i ekleyin ve üzerine sağ tıklayarak **Stili Temizle** seçeneğini uygulayın. Ardından tekrar sağ tıklayarak **Bileşen Oluştur**'u seçin. Açılan modaldan bileşenin **ikonunu** ve **adını** girip **Kaydet**'e basın.

Bu işlem sizi bileşeni güncelleyebileceğiniz detaya yönlendirir.

## Bileşene veri ekleme

İçerisindeki yazı element'ini seçin ve sağ üst kısımda bulunan **Veri Ekle** butonuna tıklayın. Açılan modaldan **Yazı** tipini seçerek **Kaydet**'e basın.

Ardından sağ kısımdaki **Tipografi** altında bulunan **Style** alanına tıklayın ve **Veri Ekle** seçeneğini seçin. Açılan modaldaki bilgileri güncelleyebilirsiniz, ancak bu aşamada herhangi bir değişiklik yapmadan ilerleyeceğiz.

<Callout type="info" title="Veri ekleme yöntemi">
Bu işlem, veri ekleme mantığı ile aynıdır. Ancak **Veri Ekle** modalından **Font Style** tipini seçmek yerine ilgili veri alanıyla eşleşen alandan bu eklemeyi yapmak, aynı zamanda o kısma veriyi doğrudan bağlamamızı kolaylaştıran bir yöntemdir. Dilerseniz bu veri tipini **Veri Ekle** modalından da ekleyerek ilgili kısma veri olarak bağlayabilirsiniz.
</Callout>

<Callout type="info" title="Yazı stilleri">
Yazı stilleri hakkında daha detaylı bilgi için [Yazı Stilleri](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/global-values/text-styles) sayfasını inceleyebilirsiniz.
</Callout>

Ardından aynı grup içinde bulunan **Color** alanına tıklayarak bir renk verisi oluşturun ve yazı element'ine bağlanmasını sağlayın. Artık bu bileşen için 3 veri tipi oluşturmuş oldunuz ve bu bileşeni kullanacağınız tüm kısımlarda bu verileri değiştirerek kullanmanız mümkün olacaktır.

Geri diyerek sayfa görünümüne dönebilirsiniz.

## Bileşeni sayfa seviyesinden kaldırma

Oluşturduğunuz yazı bileşeni **Katmanlar** kısmının en üstünde görüntülenir. Bu kısımdan oluşturarak ilerlediğimiz için bileşen otomatik olarak buraya eklenmiş olur.

<Callout type="warning" title="Sayfa seviyesinde bileşen">
Sayfalar bölümlerden oluşur ve bileşenlerin sayfa seviyesinde durması doğru değildir. Bu nedenle bileşeni bu kısımdan silebilirsiniz.
</Callout>

## Bileşenleri ekleme ve yapılandırma

Bölüm altında yer alan **Bileşen Ekle** butonuna tıklayarak yazı bileşenini seçin. Sağ kısımdaki yazı verisine `product` > `name` değerini bağlayın. **Font Style** kısmından **Custom Style** seçerek aşağıdaki stilleri güncelleyin:

- `font-size`
- `font-weight`

Yeni bir yazı bileşeni daha ekleyerek `product` > `brand` > `name` verisini bağlayın ve aşağıdaki stilleri güncelleyin:

- `font-size`
- `line-height`
- `color`

Bir yazı bileşeni daha ekleyerek `product` > `description` verisini bağlayın ve aşağıdaki stilleri güncelleyin:

- `font-size`
- `line-height`

## Bileşen sırasını düzenleme

Sağ kısımdaki **Katmanlar** bölümündeki bileşen listesinden sürükle-bırak yaparak bileşenlerin sırasını istediğiniz şekilde düzenleyebilirsiniz.