Customize Components

Bu sayfayı, web widget'ınızın yerleşimini ve görsel yapısını oluşturmak için kullanın.

Bu sayfa, builder’ın temel konularını kapsar. Tüm element kataloğu için şuna bakın: Widget Elements Reference. Buton ve görsel davranışları için şuna bakın: Click Actions Atama.

Hızlı iş akışı

1

Temel stili ayarlayın

Widget görünüm ayarlarıyla başlayın.

Şunları ayarlayın:

• genişlik

• border radius

• arka plan rengi

• border kalınlığı

• border rengi

2

İhtiyacınız olan elementleri ekleyin

Elementleri soldaki panelden canvas’a sürükleyin.

Başta yapıyı sade tutun. Yalnızca widget'ın gerçekten ihtiyaç duyduğu öğeleri ekleyin.

3

Seçili elementi özelleştirin

Stil ve ayarları düzenlemek için sağ paneli kullanın.

Tipik değişiklikler arasında metin, boşluk, renkler, border'lar ve konumlandırma yer alır.

4

Çok adımlı akışlar için view'lar ekleyin

şunu kullanın: View Ekle widget birden fazla ekran gerektirdiğinde.

Bu, form → teşekkür ekranı ya da puanlama → geribildirim gibi akışlarda faydalıdır.

5

Identifier ve aksiyonlar ekleyin

Aksiyonları yapılandırmadan önce ana elementlere net identifier'lar verin.

Ardından gerekirse butonlara veya görsellere aksiyon atayın.

Editor’ü anlayın

Builder dört ana alana sahiptir:

• Sol panel: kullanılabilir elementler

• Canvas: widget önizlemesi ve yerleşim alanı

• Sağ panel: seçili element için stil ve ayarlar

• More menü: taşıma, kopyalama veya gelişmiş HTML ayarlarını açma

Widget builder

View ayarları

İçerik eklemeden önce widget'ın ana stilini tanımlayın.

şunu kullanın: View Settings şunları kontrol etmek için:

• genişlik

• border radius

• arka plan rengi

• border kalınlığı

• border rengi

Bu ayarlar, tek bir elementi değil, tüm container'ı etkiler.

View Settings

Doğru genişliği kullanın

Web widget'larında aynı view ayarları mobil, tablet ve masaüstü önizlemelerinde uygulanır. Yanlış genişlik değerleri, küçük ekranlarda yerleşimi bozabilir.

Daha stabil bir yerleşim için widget genişliğini 250 px.

Elementleri ekleyin ve yönetin

Elementleri iki şekilde ekleyebilirsiniz:

• soldaki panelden sürükleyip bırakma

• şunu kullanma: + butonu ve elementi sola ya da sağa yerleştirme

Temel ihtiyaçlarla başlayın. Ardından tasarımı geliştirin.

Yaygın element grupları:

• içerik: metin, görsel, GIF, video

• form: input, text area, checkbox, radio button, select box

• aksiyon: button, copy button, countdown

• geri bildirim: rating, emoji feedback, slider feedback

Tam liste ve en iyi kullanım senaryoları için şuna bakın: Widget Elements Reference.

Seçili bir elementi düzenleyin

Bir element seçtiğinizde, sağ panel kullanılabilir ayarlarını gösterir.

Yaygın kontroller şunlardır:

• boşluk

• border

• köşeler

• metin

• gölge

• görünüm

• konum

• efektler

Element ayarları

More menü'yü kullanın

Hızlı yerleşim işlemlerine ihtiyaç duyduğunuzda, bir element üzerindeki üç nokta menüsüne tıklayın.

Kullanılabilir aksiyonlar:

• Yukarı Taşı

• Aşağı Taşı

• Kopyala

• HTML

şunu kullanın: HTML yalnızca görsel editor istediğiniz yerleşim için yeterli olmadığında.

More menü

HTML ayarları

Birden fazla view ile çalışın

şunu kullanın: View Ekle çok adımlı widget'lar oluşturmak için.

Örnekler:

• form → başarı ekranı

• puanlama → geribildirim formu

• teklif → kupon gösterimi

Her view'ı tek bir adıma odaklayın.

View Ekle

Identifiers

Her elementin bir identifier kodu vardır.

Identifier'lar şu alanlar için önemlidir:

• takip

• click actions

• action conditions

• analiz

Rastgele varsayılanlar yerine kısa ve net isimler kullanın.

İyi örnekler:

• submit_button

• email_input

• rating_score

• hero_image

Actions'ları yapılandırmadan önce identifier'ları ayarlayın. Bu, kurulumu sonradan yönetmeyi çok daha kolay hale getirir.

Aksiyonlar ve doğrulamalar

Bu sayfa yerleşim ve yapıya odaklanır.

Davranış için ayrı kurulum sayfaları kullanın:

• Click Actions Atama buton ve görsel aksiyonları için

• Widget Elements Reference element'e özel yönlendirme için

Pratikte:

• widget'ı oluşturmak için bu sayfayı kullanın

• mantığı hazırlamak için identifier'ları kullanın

• yapı hazır olduktan sonra aksiyonları ekleyin

En iyi uygulamalar

Widget'ları okunabilir tutun

• Her widget için tek bir hedefle başlayın.

• Mümkün olduğunda daha az element kullanın.

• Metni kısa tutun.

• Tutarlı boşluk kullanın.

• Hem mobil hem masaüstünde önizleme yapın.

• Ek view'lar yalnızca akış bunları gerektirdiğinde oluşturun.

Sonraki adım

Yerleşimi tamamladıktan sonra:

1. identifier'ları gözden geçirin

2. butonlara veya görsellere click actions atayın

3. her view'ı önizleyin

4. widget'ı kaydedin