Kodsuz mobil uygulama onboarding builder iki düzen katmanı sunar:

• Ekran düzeni: kapsayıcılar aracılığıyla genel dolgu ve ızgara.
• Eleman düzeni: eleman bazında boşluk, konum, kenarlıklar ve gölgeler.

Ekran düzeni

Bir ekranı iki şekilde düzenleyebilirsiniz:

• Ekran stili ayarlarını kullanarak
• Kapsayıcıları kullanarak

Ekran stili ayarları

Elemanlar ile ekran kenarı arasındaki mesafeyi azaltmak veya artırmak için:

1. Soldan ekranı seçin.
2. Sağdaki Styles sekmesine gidin.
3. Padding bölümünde üst, alt ve yatay dolguyu ayarlayın.

Kapsayıcılar

Yan yana metin ve görseller, kaydırılabilir galeriler veya modal pop-up’lar eklemek isteyebilirsiniz. Kapsayıcılar; sütunlar, satırlar, carousel’ler ve ortalanmış katmanlar oluşturmanıza olanak tanıyarak bunu kolaylaştırır.

Kapsayıcı eklemek için:

1. Sol üstteki Add düğmesine tıklayın.
2. Containers bölümüne gidin ve birini seçin:

• Columns: Ekranı yan yana içerik için dikey bölümlere ayırır (ör. iki sütunlu metin veya görsel+metin düzeni).
• Rows: Öğeleri tek bir yatay şeritte eşit aralıklarla sıralar.
• Carousel: Kullanıcıların bir dizi kart arasında kaydırmasını sağlar.
• Popup: İçeriği sayfanın üzerinde ortalanmış bir katmanda gösterir.

3. Eklemek istediğiniz elemanları oluşturun, ardından sol menüden kapsayıcıya sürükleyip bırakın.

Eleman düzeni

Her elemanı ayrı ayrı düzenlemek için:

1. Soldan elemanı seçin.
2. Sağdaki menüden Styles seçeneğine gidin.
3. Container bölümünde şunları ayarlayın:

• Offset: Elemanı yatay veya dikey olarak kaydırır.
• Position: Elemanın bağlantı noktasını belirler:
  • In content: Normal belge akışı
  • Attached: Sabit konum - görünüm alanında görünür kalır (ör. altta sabit düğme)
  • Attached on scroll: Görünüme kaydırıldıktan sonra sabitlenir (yapışkan davranış)
• Padding: Elemanın içeriği ile kenarlığı arasındaki iç boşluğu tanımlar.
• Background: Elemanın arkasına düz bir renk uygular. Eleman arka planınızın ekran arka planıyla eşleştiğinden emin olun (ör. çoğunlukla koyu ekranlara sahip onboarding’ler için gri veya siyah kullanın).
• Roundness: Elemanın köşe yarıçapını belirler.
• Border: Elemanın etrafına bir çizgi ekler ve kalınlığını belirtir.
• Border Color: Elemanın kenarlık rengini belirtir.
• Add shadows: Ayarlanabilir ofset, bulanıklık/yayılma ve renkle tek bir düşen gölge ekler.

Ekran arka planını özelleştirme

Arka plan yalnızca onboarding tasarımınızı değil, onboarding tam yüklenene kadar gösterilen yükleme ekranını da etkiler.

Onboarding arka planınızı bir renkle doldurabilir ya da görsel/video yükleyebilirsiniz:

1. Soldan ekranı seçin.
2. Sağdaki Styles sekmesine gidin.
3. Background bölümünde bir arka plan rengi seçin ya da görsel/video yüklemek için yükleme alanına tıklayın.

Medya yüklemelerinde desteklenen formatlar ve boyut gereksinimlerine uyun.