---
title: Genel Bakış
description: ikas Studio ile adım adım tema bölüm ve bileşenlerini oluşturmayı öğreten örnekler.
icon: LayoutGrid
---

Bu bölümde, ikas Studio'nun temel özelliklerini pratik örnekler üzerinden adım adım öğreneceksiniz. Her örnek, gerçek bir e-ticaret senaryosunu ele alarak bölüm ve bileşenlerin nasıl oluşturulduğunu, yapılandırıldığını ve birbirleriyle nasıl etkileşime girdiğini gösterir.

<Callout type="info" title="Anlatım akışı">
Her adım sayfası, önce tüm işlemlerin uygulandığı bir video ile başlar. Videoyu izledikten sonra alt kısımda yer alan yazılı anlatımda aynı adımlar detaylı olarak açıklanır ve araya önemli bilgiler, ipuçları ve uyarılar eklenir. Önce videoyu izleyerek genel akışı kavramanızı, ardından yazılı içerikle birlikte adımları uygulamanızı öneriyoruz.

Önceki örneklerde detaylı olarak anlatılmış adımlar, sonraki örneklerde kısa ve özet şekilde aktarılır. İlk kez karşılaşılan bir kavram veya işlem olduğunda ise o adımda detaylı açıklama yapılır. Bu yüzden temel örnekleri sırasıyla inceleyip uygulamanız önerilmektedir.
</Callout>

<Callout type="info" title="Stil değerleri">
Örneklerde kullanılan stil değerleri (renk, boyut, aralık vb.) doküman içerisinde belirtilmemiştir. Anlatım esnasında uygulanan stiller, oluşturulan bölüm ve bileşenlerin yapısının net şekilde anlaşılabilmesi amacıyla wireframe yaklaşımıyla seçilmiştir. Uygulama esnasında videolarda girilen değerleri birebir uygulayabilir veya oluşturacağınız temaya özel kurgulayacağınız tasarım detaylarına uygun stilleri kullanarak devam edebilirsiniz.
</Callout>

<Callout type="warning" title="Varsayılan yazı stili">
Örneklerdeki tasarım güncellemeleri, **Global Değerler** altındaki **Yazı Stilleri** kısmından `font-size` değeri `14px` olan ve varsayılan yazı tipi ayarlanmış bir yazı stili ile yapılmaktadır. Eklediğiniz yazı elementlerinin boyutu veya görünümü örneklerden farklıysa kendi projenizde varsayılan yazı stilinizi ayarladığınızdan emin olun. 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>

---

<Cards className="grid-cols-3">
  <CardInline icon={<TagIcon />} title="Ürün Listesi" href="/tr/docs/ikas-studio/basic-examples/product-list">
    Ürün listesi bölümü oluşturma.
  </CardInline>
  <CardInline icon={<PanelTopIcon />} title="Header" href="/tr/docs/ikas-studio/basic-examples/header">
    Header bölümü oluşturma.
  </CardInline>
  <CardInline icon={<PackageIcon />} title="Ürün Detay" href="/tr/docs/ikas-studio/basic-examples/product-detail">
    Ürün detay bölümü oluşturma.
  </CardInline>
</Cards>