---
title: Elementler
description: Elementlerin ve elementler kullanılarak oluşturulan bölüm ve bileşenlerin kullanımları.
icon: SquarePlus
---

Elementler kısmı, **İçerik** ve **Tasarım** modlarında farklı kapsamlarda çalışır.

- <span className="inline-flex shrink-0 align-middle"><SquareMousePointerIcon className="size-5" /></span> **İçerik modunda** yalnızca sayfaya yeni bölüm eklenmesine izin verilir. Element düzeyinde bir işlem yapılamaz.

- <span className="inline-flex shrink-0 align-middle"><LayersIcon className="size-5" /></span> **Tasarım modunda** ise kapsam genişler; bölüm ve bileşen oluşturmak için kullanabileceğiniz tüm elementleri görüntüleyebilir ve kullanabilirsiniz.

<Callout type="warning" title="Sayfa yapısı ve bölümler">
Sayfalar bölümlerden oluşur. Tasarım modunda bölüm dışında temel elementlerin doğrudan sayfa katmanlarına eklenmesine izin verilir ancak bölüm olmayan hiçbir element canlıya yansımaz. Bunun sebebi, istediğiniz yapıyı hızlıca oluşturup ardından bölüme dönüştürebilmeniz içindir.
</Callout>

## Elementler

Elementler dört ana başlık altında toplanır:

### Düzen

Bu elementler çerçeveler kullanılarak oluşturulmuştur ve hızlı düzen oluşturmaya yardımcılardır. Çerçevelerin HTML çıktısı `div` etiketi olarak yansır ve üzerinde `background-color`, `padding`, `gap` gibi özellikler bulunabilir. Kendi yapınızı sıfırdan oluşturmak isterseniz bu stilleri temizlemeyi unutmayın.

- <span className="inline-flex shrink-0 align-middle"><SquareIcon className="size-5" /></span> **Çerçeve**
- <span className="inline-flex shrink-0 align-middle"><Grid2x2Icon className="size-5" /></span> **Izgara**
- <span className="inline-flex shrink-0 align-middle"><Columns2Icon className="size-5" /></span> **2 Sütun**
- <span className="inline-flex shrink-0 align-middle"><Rows2Icon className="size-5" /></span> **2 Satır**

<Callout type="info" title="Kapsayıcı element">
Çerçeve elementi kapsayıcı bir elementtir, içerisine başka elementler eklenebilir ve dinamik listeler bağlanabilir.
</Callout>

### Temel

- <span className="inline-flex shrink-0 align-middle"><TypeIcon className="size-5" /></span> **[Yazı](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/text)**
- <span className="inline-flex shrink-0 align-middle"><ImageIcon className="size-5" /></span> **[Görsel](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/image)**
- <span className="inline-flex shrink-0 align-middle"><VideoIcon className="size-5" /></span> **[Video](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/video)**
- <span className="inline-flex shrink-0 align-middle"><VectorSquareIcon className="size-5" /></span> **[Icon](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/ikas/icon)**
- <span className="inline-flex shrink-0 align-middle"><MousePointerClickIcon className="size-5" /></span> **Button** — Çerçeve ve yazı elementi kullanılarak stillendirilmiş bir şablondur.
- <span className="inline-flex shrink-0 align-middle"><FrameIcon className="size-5" /></span> **[Iframe](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/iframe)**

### Gelişmiş

- <span className="inline-flex shrink-0 align-middle"><ScanIcon className="size-5" /></span> **[Slider](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/ikas/slider)**
- <span className="inline-flex shrink-0 align-middle"><ScanIcon className="size-5" /></span> **[Sonsuz Kaydırıcı](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/ikas/infinite-scroller)**
- <span className="inline-flex shrink-0 align-middle"><ScanIcon className="size-5" /></span> **[Marquee](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/ikas/marquee)**
- <span className="inline-flex shrink-0 align-middle"><ScanIcon className="size-5" /></span> **ikas Hızlı Öde** — ikas tarafından hazırlanmış bir bileşendir. `product` ve `quantity` özellikleri ile müşteriyi doğrudan ödeme adımına yönlendirir.

### Form

- <span className="inline-flex shrink-0 align-middle"><TextCursorInputIcon className="size-5" /></span> **[Input](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/input)**
- <span className="inline-flex shrink-0 align-middle"><CalendarIcon className="size-5" /></span> **[Date](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/date)**
- <span className="inline-flex shrink-0 align-middle"><AlignLeftIcon className="size-5" /></span> **[Textarea](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/textarea)**
- <span className="inline-flex shrink-0 align-middle"><SquareCheckBigIcon className="size-5" /></span> **[Checkbox](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/checkbox)**
- <span className="inline-flex shrink-0 align-middle"><SquareArrowDownRightIcon className="size-5" /></span> **[Select](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/attribute/html/select)**

<Callout type="info" title="Stili temizleme">
Elementlere sağ tıklayıp **Stili Temizle** seçeneğini kullanarak tüm stilleri temizleyebilirsiniz.
</Callout>

<Video src="/media/ikas-studio/content-and-design/elements-01.mp4" autoPlay muted loop controls caption="Elementler kısmının genel görünümü" />

## Şablonlar

Şablonlar iki ana başlık altında toplanır.

- <span className="inline-flex shrink-0 align-middle"><BoxIcon className="size-5" /></span> **Bölümler** — Bileşenler ve elementler kullanılarak inşa edilirler.
- <span className="inline-flex shrink-0 align-middle"><ComponentIcon className="size-5" /></span> **Bileşenler** — Elementler kullanılarak inşa edilirler.

Bölümler ve bileşenler tekrar tekrar kullanılmak üzere tema geliştiricileri tarafından tasarlanır.

<Video src="/media/ikas-studio/content-and-design/elements-02.mp4" autoPlay muted loop controls caption="ikas tarafından hazırlanan bazı bölüm ve bileşen örnekleri" />