Bileşenleri Özelleştir

Bu sayfayı widget'ın düzenini ve görsel yapısını oluşturmak için kullanın.

Bu sayfa, editörün temel özelliklerini kapsar. Tüm element kataloğu için bkz. Widget Elements Reference. Buton ve görsel davranışları için bkz. Tıklama Aksiyonlarını Atayın.

Hızlı iş akışı

1

Temel stili ayarlayın

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

Şunları ayarlayın:

• genişlik

• köşe yuvarlaklığı

• arka plan rengi

• kenarlık genişliği

• kenarlık rengi

2

İhtiyacınız olan elementleri ekleyin

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

İlk aşamada yapıyı sade tutun. Yalnızca hedefiniz için gereken bölümleri ekleyin.

3

Seçili elementi özelleştirin

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

Yaygın değişiklikler arasında metin, boşluk, renkler, kenarlıklar ve konumlandırma yer alır.

4

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

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

Bu, form → teşekkür ekranı veya puanlama → geribildirim gibi akışlar için kullanışlıdır.

5

Tanımlayıcılar ve aksiyonlar ekleyin

Aksiyonları yapılandırmadan önce kilit elementlere net tanımlayıcılar verin.

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

Editörü anlayın

Builder'ın dört ana alanı vardır:

• Sol panel: mevcut elementler

• Canvas: widget önizleme ve düzen alanı

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

• More menü: taşıma, çoğaltma 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

• köşe yuvarlaklığı

• arka plan rengi

• kenarlık genişliği

• kenarlık rengi

Bu ayarlar, yalnızca tek bir elementi değil, genel konteyner'ı etkiler.

View Settings

Elementleri ekleyin ve yönetin

Elementleri iki şekilde ekleyebilirsiniz:

• soldaki panelden sürükleyip bırakın

• kullanın + butonunu ve elementi sola veya sağa yerleştirin

Önce temel unsurlarla başlayın. Ardından tasarımı detaylandırın.

Yaygın element grupları:

• content: metin, görsel, GIF, video

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

• action: buton, kopyalama butonu, countdown

• feedback: rating, emoji geribildirimi, slider geribildirimi

Tam liste ve en iyi kullanım senaryoları için bkz. Widget Elements Reference.

Seçili bir elementi düzenleyin

Bir element seçtiğinizde, sağ panelde kullanılabilir ayarları görüntülenir.

Yaygın kontroller şunları içerir:

• boşluk

• kenarlık

• köşeler

• metin

• gölge

• görünüm

• konum

• efektler

Element ayarları

More menü'yü kullanın

Hızlı düzen işlemlerine ihtiyaç duyduğunuzda bir elementin üzerindeki üç nokta menüsüne tıklayın.

Kullanılabilir aksiyonlar:

• Move Up

• Move Down

• Duplicate

• HTML

şunu kullanın: HTML yalnızca görsel editör istediğiniz düzen için yeterli olmadığında.

More menü

Birden fazla view ile çalışın

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

Örnekler:

• form → success screen

• rating → geribildirim formu

• offer → kuponu gösterme

Her view'ı tek bir adıma odaklı tutun.

Add View

Identifiers

Her elementin bir tanımlayıcı kodu vardır.

Tanımlayıcılar şunlar için önemlidir:

• izleme

• tıklama aksiyonları

• aksiyon koşulları

• analiz

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

İyi örnekler:

• submit_button

• email_input

• rating_score

• hero_image

Aksiyonları yapılandırmadan önce tanımlayıcıları ayarlayın. Bu, kurulumu daha sonra yönetmeyi çok daha kolay hale getirir.

Aksiyonlar ve doğrulamalar

Bu sayfa, düzen ve yapıya odaklanır.

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

• Tıklama Aksiyonlarını Atayın buton ve görsel aksiyonları için

• Widget Elements Reference elemente özel yönlendirme için

Pratikte:

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

• mantığı hazırlamak için tanımlayıcı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.

• Mobil ve masaüstünde önizleme yapın.

• Ek view'ları yalnızca akış bunları gerektiriyorsa oluşturun.

Sırada ne var

Düzeni tamamladıktan sonra:

1. tanımlayıcıları gözden geçirin

2. butonlara veya görsellere tıklama aksiyonları atayın

3. her view'ı önizleyin

4. widget'ı kaydedin