Formu tasarlama

Sami B2B Onboarding’deki Appearance ayarları, formun tamamının görünümünü değiştirir: yazı tipi, boyut, genişlik, alan stili ve renkler. Tek bir form için geçerlidirler; bu nedenle her formunuzun kendi görünümü olabilir ve temanızı hiçbir zaman değiştirmezler.

Appearance ayarlarını açın

1. Formu açın

   Forms bölümüne gidin ve formun yanındaki Edit düğmesine tıklayın. Oluşturucu açılır.

2. Appearance bölümünü açın

   Soldaki rayda Appearance öğesine tıklayın. Panel aşağıdaki tüm ayarları listeler ve siz değiştirdikçe ortadaki önizleme de değişir.

   

   Her Appearance ayarı önizlemeyi hemen değiştirir.

3. Kaydedin

   Form istediğiniz gibi göründüğünde kaydetme çubuğundaki Save düğmesine tıklayın. Form yayındaysa alıcılar yeni görünümü formu bir sonraki açışlarında görür.

Appearance ayarları

Ayar	Neyi değiştirir	Varsayılan
Font	Formun tamamının yazı tipi. Select font panelini açar.	Theme default
Font size scale	Formdaki tüm metnin boyutu; temanızın boyutunun %80’inden %130’una kadar, %5’lik adımlarla.	%100
Width	Formun en geniş boyutu; px (320 ila 1200) veya içinde bulunduğu alanın % değeri (30 ila 100) cinsinden. Form ortalanır ve küçük ekranlarda daralır.	640 px
Layout	Default alanları doğrudan sayfaya yerleştirir. Boxed formu, iç boşluğu ve kenarlığı olan kendi kartına koyar.	Default
Style	Her alan kutusunun görünümü. Bkz. Alan stilleri.	Classic
Field spacing	Alanlar arasındaki boşluk: Comfortable veya Compact.	Comfortable
Color scheme	Formun arka plan, metin ve düğme renkleri. Bkz. Renkler.	Default
CSS class	Formunuza kendi sınıf adınızı ekler; böylece temanızdaki stiller onu hedefleyebilir, örneğin wholesale-form.	Boş

Width ayarını px ile % arasında değiştirdiğinizde değer yeniden 640 px veya %100’den başlar.

Yazı tipi seçme

1. Yazı tipi listesini açın

   Appearance içinde Font kutusuna tıklayın. Select font paneli açılır.

2. Bir yazı tipi bulun

   Search kutusuna yazın veya kaydırın. Listede iki grup vardır:

   • System fonts: Theme default, temanızın zaten kullandığı yazı tipi; ardından System UI, Helvetica, Arial, Georgia, Times New Roman ve Monospace. Bunlar için fazladan hiçbir şey yüklenmez.
   • Other fonts: yaklaşık 1.000 web yazı tipi. Her biri kendi yazı tipiyle gösterilir. Mağaza vitrininizde Google Fonts’tan yüklenirler; bu, sayfanın yüklenmesini biraz yavaşlatabilir.

3. Yazı tipini ve kalınlığını seçin

   Bir yazı tipine tıklayın. Önizleme hemen değişir. Yazı tipi birkaç kalınlıkta geliyorsa panelin altındaki Weight listesinden birini seçin; örneğin Regular, Bold veya Italic. Done düğmesine tıklayın.

   Font altındaki not, seçtiğinizi doğrular; örneğin Bold. Loads from Google Fonts on the storefront.

Alan stilleri

Her biri örnek bir Company name alanı olarak çizilmiş sekiz stilin tamamını görmek için Style kutusuna tıklayın. Formdaki her alana uygulamak için birine tıklayın.

Stil	Alanın görünümü
Material filled	Etiketi üstte, içinde yer alan gri bir kutu.
Material outlined	Etiketi üst kenarında duran kenarlıklı bir kutu.
Classic	Hafif gölgeli ve yuvarlatılmış köşeli yumuşak gri bir kutu. Varsayılan.
Classic rounded	Classic; tek satırlık kutular tamamen yuvarlak.
Flat	Köşeleri köşeli ve gölgesiz gri bir kutu.
Flat rounded	Flat; tek satırlık kutular tamamen yuvarlak.
Line	Yanıtın altında yalnızca bir çizgi.
Line rounded	Line ile aynı görünür: Alt çizginin yuvarlanacak köşesi yoktur.

Yuvarlatılmış stillerde, Long text gibi birkaç satırlı kutular tamamen yuvarlak olmak yerine yumuşak yuvarlatılmış köşelerini korur.

Her kart, bir alanın o stilde nasıl göründüğünü gösterir.

Renkler

Color scheme satırı, hazır on şemayı gösterir: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark ve Midnight. Her örnek, arka plan, metin ve düğme renklerini gösterir. Kullanmak için birine tıklayın.

• Default, sayfanın kendi renklerini alır; böylece form temanızla uyumlu olur. Bu renkleri değiştirmek için temanızın ayarlarını değiştirin.
• Diğer her şema, formun arkasına kendi arka planını boyar. Düğmeler ve adım işaretleri, şemanın düğme rengini alır.

Kendi renklerinizi oluşturun

1. Şemayı açın

   Örneklerin altındaki Edit scheme düğmesine tıklayın. Seçtiğiniz şema için Editing paneli açılır; örneğin Editing Warm Sand.

2. Renkleri değiştirin

   Renk seçiciyi açmak için bir renge tıklayın. Kare içinde ve renk şeritlerinde sürükleyin, bir onaltılık kod yazın veya tarayıcınız sunuyorsa ekranınızdan renk seçmek için damlalığı kullanın. Ayarlayabileceğiniz renkler:

   Renk	Neyi boyar
   Background	Formun arkası.
   Text	Etiketler, başlıklar ve yanıtlar.
   Solid button background	Submit application gibi ana düğmeler ve adım işaretleri.
   Solid button label	Bu düğmelerin üzerindeki metin.
   Outline button	Back gibi çerçeveli düğmelerin kenarlığı.

   Background, Text ve Outline button için Theme color yazabilir; bu, formun orada temanızın rengini kullandığı anlamına gelir.

   Bir rengi değiştirdiğiniz anda şema Custom olur ve satıra bir Custom örneği eklenir. Bu renkler yalnızca bu form için geçerlidir. Temanızın kendi renk şemaları değişmez.

   

   Herhangi bir rengi değiştirin; form kendi Custom şemasını alır.

3. Kapatın veya sıfırlayın

   Renklerinizi korumak için paneli kapatın. Temanızın renklerine geri dönmek için panelin altındaki Remove color scheme düğmesine tıklayın: Form Default şemasına döner.

Logonuzu ekleyin

Logo, formun üst bilgisinde, başlığının üstünde yer alır.

1. Üst bilgiyi açın

   Rayda Elements öğesine tıklayın, ardından listenin en üstündeki Header öğesine tıklayın.

2. Logoyu yükleyin

   Show store logo ayarını açın, ardından Upload image düğmesine tıklayın ve dosyayı seçin. Dosya, 1 MB veya daha küçük bir .jpg, .png ya da .svg görseli olmalıdır. En iyi uyum, yaklaşık 200×60 px boyutudur.

   Sonradan değiştirmek için Replace image düğmesine tıklayın. Kaldırmak için Remove düğmesine tıklayın.

3. Kaydedin

   Kaydetme çubuğundaki Save düğmesine tıklayın.

Tasarımı kontrol etme

Oluşturucudaki önizleme formunuzu mağaza vitrininizin kullandığı kodla çizer; dolayısıyla gördüğünüz düzen, alan stili, aralık ve şema, alıcıların alacağı şeydir.

• Her iki ekran boyutunu da kontrol etmek için önizlemenin üstündeki Desktop preview ve Mobile preview düğmelerini kullanın.
• Temanıza bıraktığınız ayarlar, yani yazı tipi için Theme default ve renkler için Default, mağaza vitrininde temanızın yazı tipini ve renklerini alır. Bunları görmek için araç çubuğundaki Preview (göz düğmesi) öğesine tıklayın. Formun mağazanızdaki sayfasını, en son kaydedildiği haliyle yeni bir sekmede açar.

Sonraki adımlar

• Formunuzu oluşturma: her alanın genişliğini, etiketini ve yer tutucusunu ayarlayın.
• Alıcı gönderdikten sonra: alıcıların bu formdan sonra gördüğü teşekkür ekranını yazın.
• Mağazanıza form ekleme: tamamlanmış formu bir sayfaya, bir tema bölümüne veya HTML kabul eden her yere koyun.