> For the complete documentation index, see [llms.txt](https://user.netmera.com/netmera-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://user.netmera.com/netmera-user-guide/netmera-user-guide-tr/cok-kanalli-etkilesim/widgetlar/widget-olusturma/widget-duzenini-tasarlama.md).

# Widget düzenini tasarlama

Bu sayfayı bir widget’ın düzenini, görünümlerini ve görsel yapısını oluşturmak için kullanın.

Önce widget’ın görsel yapısıyla başlayın. Ardından etkileşimleri ve doğrulamayı ekleyin.

Widget türü, yerleşim ve kapsayıcı ayarları için bkz [Widget ayarlarını yapılandırın](/netmera-user-guide/netmera-user-guide-tr/cok-kanalli-etkilesim/widgetlar/widget-olusturma/widget-ayarlarini-yapilandirma.md). Tüm öğe kataloğu için bkz. [Widget öğeleri referansı](/netmera-user-guide/netmera-user-guide-tr/cok-kanalli-etkilesim/widgetlar/widget-olusturma/widget-ogeleri-referansi.md).

### İş akışı oluşturma

1. Görünüm stilini belirleyin ve gerekli öğeleri ekleyin.
2. Tuvaldeki her öğeyi düzenleyin ve biçimlendirin.
3. Çok adımlı akışlar için görünümler ekleyin.
4. Eylemleri yapılandırmadan önce tanımlayıcıları ayarlayın.

### Düzenleyiciyi anlama

Oluşturucunun dört ana bölümü vardır:

#### Sol panel

Mevcut öğeleri bulmak için sol paneli kullanın. Widget’ın hedefine göre içerik, form, eylem veya geri bildirim öğelerini seçin.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FbivgQayBoOK6RUWudggv%2FEkran%20Resmi%202026-08-13%2011.59.18.png?alt=media&amp;token=634eaa47-8c93-4c73-b013-7a7e800e9cd5" alt="Widget builder left panel"><figcaption><p>Öğeleri sol panelden seçin.</p></figcaption></figure>

#### Tuval

Öğeleri yerleştirmek ve widget düzenini önizlemek için tuvali kullanın.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FvbHhv12rOWrLhF4ch6GI%2FEkran%20Resmi%202026-08-13%2011.59.52.png?alt=media&amp;token=11d50b91-f88d-4f4c-b1aa-9aa0dd626824" alt="Widget builder canvas"><figcaption><p>Öğeleri tuvalde düzenleyin.</p></figcaption></figure>

#### Sağ panel

Seçili öğeyi yapılandırmak için sağ paneli kullanın.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FPsmNCyXJfZqNPnDkMcr1%2FEkran%20Resmi%202026-08-13%2012.00.04.png?alt=media&amp;token=1d17731b-c34b-43e5-bf53-9c80523562c5" alt="Widget builder right panel"><figcaption><p>Seçili öğenin ayarlarını düzenleyin.</p></figcaption></figure>

#### Diğer menü

Bir öğeyi taşımak veya çoğaltmak için üç nokta menüsünü kullanın. Açın **HTML** yalnızca görsel düzenleyici gerekli düzeni oluşturamadığında.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2Fwpy1ZFKpe6oLHqykwBur%2FEkran%20Resmi%202026-08-13%2012.00.43.png?alt=media&amp;token=f54c949f-b3e8-49ad-9b28-aeb02e2ebf4e" alt="Element more menu"><figcaption><p>Taşıma, çoğaltma veya HTML seçeneklerini açın.</p></figcaption></figure>

### Öğeleri ekleyin ve yönetin

Öğeleri sol panelden tuvale sürükleyin.

Temel öğelerle başlayın. Destekleyici öğeleri yalnızca kullanıcıların hedefi tamamlamasına yardımcı olduklarında ekleyin.

Yaygın öğe grupları:

* içerik: metin, görsel, GIF, video
* form: giriş alanı, metin alanı, onay kutusu, radyo düğmesi, seçim kutusu
* eylem: düğme, kopyalama düğmesi, geri sayım
* geri bildirim: puanlama, emoji geri bildirimi, kaydırıcı geri bildirimi

Tam liste ve kullanım rehberi için bkz. [Widget öğeleri referansı](/netmera-user-guide/netmera-user-guide-tr/cok-kanalli-etkilesim/widgetlar/widget-olusturma/widget-ogeleri-referansi.md).

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FdJJ0ZFibn3xzBC8OBtJN%2FEkran%20Resmi%202026-08-13%2012.02.18.png?alt=media&amp;token=2b4dddb2-0277-4da0-aa07-c201cadc1126" alt="Available widget elements"><figcaption><p>İhtiyacınız olan öğeyi tuvale sürükleyin.</p></figcaption></figure>

### Seçili bir öğeyi düzenleyin

Sağ panelde kullanılabilir ayarlarını açmak için bir öğe seçin.

Yaygın kontroller şunlardır:

* **Boşluk**: öğenin içindeki ve çevresindeki boşluğu kontrol eder.
* **Kenarlık**: kenarlığın rengini, genişliğini ve stilini belirler.
* **Köşeler**: öğenin köşe yarıçapını ayarlar.
* **Metin**: içeriği, yazı tipini, boyutu, rengi ve hizalamayı değiştirir.
* **Gölge**: öğenin arkasına derinlik katar.
* **Görünüm**: öğenin ne zaman ve nasıl görüneceğini kontrol eder.
* **Konum**: öğenin yerleşimdeki konumunu belirler.
* **Efektler**: animasyonlar veya geçişler gibi görsel efektler ekler.

Efektleri ince ayarlamadan önce düzeni biçimlendirin. Bu, tasarımın okunabilir ve tutarlı kalmasını sağlar.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FG1XLJlwxnc1Kp26kiZfM%2FEkran%20Resmi%202026-08-13%2013.18.16.png?alt=media&amp;token=4f5cf628-dea0-4aa4-ab5e-b63479afe2b1" alt="Element settings panel"><figcaption><p>Seçili öğenin stilini ve konumunu yapılandırın.</p></figcaption></figure>

### Birden fazla görünümle çalışın

Kullanın **Görünüm ekle** çok adımlı widget’lar oluşturmak için. Her görünüm, aynı widget içinde ayrı bir ekran gibi çalışır.

Örnekler:

* form, ardından başarı ekranı
* puanlama, ardından geri bildirim formu
* teklif, ardından kuponun gösterilmesi

Her görünümü tek bir adıma odaklı tutun. İlerlemeye geçmeden önce kullanıcılara net bir eylem sunun.

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FNG2atks4iTb773DNmL2Y%2FEkran%20Resmi%202026-08-13%2013.18.52.png?alt=media&amp;token=f3fd9ac2-59ba-429a-aaaa-5cbb9c3fc5c4" alt="Add View control"><figcaption><p>Çok adımlı bir widget akışı oluşturmak için görünümler ekleyin.</p></figcaption></figure>

### Tanımlayıcılar

Her öğenin bir tanımlayıcı kodu vardır. Bunu, eylemlerde, koşullarda ve raporlamada o öğeye başvurmak için kullanın.

Tanımlayıcılar, izleme, tıklama eylemleri, eylem koşulları ve olay analizi için önemlidir.

Rastgele varsayılanlar yerine kısa ve açıklayıcı adlar kullanın.

{% hint style="info" %}
Eylemleri yapılandırmadan önce tanımlayıcıları ayarlayın. Bu, kurulumu daha sonra yönetmeyi kolaylaştırır.
{% endhint %}

<figure><img src="https://1655476697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FHzI2RKhyewnhbPYyEXP6%2FEkran%20Resmi%202026-08-13%2013.20.04.png?alt=media&amp;token=207485bc-0b01-4008-9b0f-89d63b814335" alt="Element identifier example"><figcaption><p>Öğeleri sonraki davranışlarla ilişkilendirmek için tanımlayıcıları kullanın.</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://user.netmera.com/netmera-user-guide/netmera-user-guide-tr/cok-kanalli-etkilesim/widgetlar/widget-olusturma/widget-duzenini-tasarlama.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.