Prusa WiseCp Tema - Dokümantasyon - Form Oluşturucu Bileşeni

Form Oluşturucu Bileşeni Nedir?

FonPageBuilder’ın dinamik Form Oluşturucu bileşeni, sürükle-bırak kolaylığıyla web sitenize, ihtiyacınıza özel formlar eklemenizi sağlar. Birkaç basit adımda farklı input türlerini (metin, e-posta, telefon, vb.) seçebilir, form alanlarını özelleştirebilir ve site önyüzünden yapılan gönderimler için ayarlanabilir bir e-posta şablonu ile belirlenen alıcılara anında bildirim gönderebilirsiniz. Esnek yapısıyla kullanıcı dostu bir deneyim sunan FormBuilder, gelişmiş form oluşturma işlemini herkes için pratik hale getirir. Basit iletişim formlarından, karmaşık anketlere, iş başvuru formlarına kadar ihtiyaçlarınız doğrultusunda bir çok farklı form oluşturabilirsiniz.

Form Oluşturucu Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

Bileşen Adı
: Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Form Alanları

Form Alanı etiketi karşısında yer alan Ekle düğmesine tıklayarak birden fazla Form Alanı ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi, düzenleyebilir, sıralayabilir ve silebililirsiniz. Form Alanı öge düzenleme penceresinde yer alan alanların detaylı kullanım dokümantasyonu aşağıdadır:

Ortak Form Alanı Ayarları
: Tüm form alanı tipleri için ortak form alanı ayarları.
- Form Alanı Tipi: Geçerli form alanının tipini seçin.
  1. Metin Kutusu: Formunuza bir metin kutusu alanı ekler. <input type="text" />
  2. E-Posta: Formunuza bir e-posta alanı ekler. <input type="email" />
  3. Telefon: Formunuza bir telefon alanı ekler. <input type="tel" />
  4. Parola: Formunuza bir parola alanı ekler. <input type="password" />
  5. Metin Alanı: Formunuza bir metin alanı ekler. <textarea></textarea>
  6. Seçim Düğmesi: Formunuza bir seçim düğmesi alanı ekler. <input type="radio" />
  7. Onay Kutusu: Formunuza bir onay kutusu alanı ekler. <input type="checkbox" />
  8. Seçim Listesi: Formunuza bir seçim listesi alanı ekler. <select></select>
  9. Tarih: Formunuza bir tarih alanı ekler. <input type="date" />
  10. Saat: Formunuza bir saat alanı ekler. <input type="time" />
  11. Sayı: Formunuza bir sayı alanı ekler. <input type="number" />
  12. Başlık: Formunuza ayırıcı bir Başlık alanı ekler. <h1,h2,h3,h4,h5,h6></h1,h2,h3,h4,h5,h6>
- Form Alanı Adı: Form alanı için benzersiz bir form alanı adı girin.
  FORM ALANI ADI ADLANDIRMA KOŞULLARI:
  
  Form alanı adı, form gönderildiğinde sunucuya gönderilen veriyi tanımlayan değişken adıdır. Tarayıcıda görünmez ve programatik olarak form verisinin işlenmesi için kullanılır. Form alanı adları PHP’de değişken adlandırma kurallarına benzer şekilde belirlenir;
  
  Benzersiz olmalı. Aynı form içinde aynı isimde başka bir form alanı olmamalıdır.
  
  Sadece İngilizce karakterler ve küçük harfler kullanılmalı.
  
  Kelimeler arasında boşluk veya özel karakter kullanılmamalı; kelimeler tire (-) ile ayrılmalı.
  
  Anlamlı ve kısa olmalı, örneğin first-name veya user-email gibi.
  
  Sadece formdaki belirli bir bilgiyi temsil etmeli, çok genel olmamalı (örneğin data yerine user-email gibi).
- Form Alanı Etiketi: Form alanına ait sitenizdeki aktif her bir dil için bu alanı tanımlayan bir etiket girin.
  
  FORM ALANI ETİKETİ:
  
  Form alanı etiketi kullanıcının göreceği açıklama ya da tanımlayıcı metindir. Kullanıcının formu doldururken hangi bilgiyi sağlaması gerektiğini ifade eder. Görsel açıdan form alanının üzerinde veya yanında bulunur ve metin uzunluğunda herhangi bir kısıtlama yoktur. Örneğin: "E-posta Adresiniz", "Telefon Numaranız", "Adresiniz".
- Yer Tutucusu: Form alanı yer tutucu olarak (placeholder) kullanmak istediğiniz metni sitenizdeki her bir aktif dil için buraya girebilirsiniz. Bu seçenek eğer Form Alanı Tipi Başlık, Radio, Checkbox değilse ve Bileşen Seçeneklerinden Kayan Etiketler seçeneği aktif değilse gösterilir.
- Simge Göster: Form alanı içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin.
- Simge: Form alanı simgesi olarak kullanmak istediğiniz FontAwesome simgesini seçin.
- Form Alanı Genişliği: Form içerisinde bu form alanının kaplayacağı sütun boyutunu seçin. Yatay düzlemde bir satır farazi olarak 12 sütuna bölünmüştür. Sütun genişliğini responsive olarak her bir ekran çözünürlüğü için seçebilirsiniz.
- Zorunlu Alan mı?: Form alanının kullanıcı tarafından doldurulmasını zorunlu kılmak ve bu alan doldurulmadan formun gönderilmemesini istiyorsanız bu seçeneği etkinleştirin.
- Zorunlu Yıldız İşaretini Göster?: Form alanı etiketinin yanında (etiketler gizli ise form alanı yer tutucusunun yanında) bu alanın zorunlu bir alan olduğunu belirten yıldız (*) işaretinin gösterilmesini istiyorsanız bu seçeneği etkinleştirin. Bu alan Zorunlu Alan mı? seçeneği "Evet" ise gösterilir.
Textarea (Metin Alanı) Ayarları
: Metin Alanı (textarea) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- Minimum Karakter: Metin alanında formun gönderilebilmesi için kullanıcın girmesi gereken en az karakter sayısını girin.
- Maksimum Karakter: Kullanıcıların metin alanına girebileceği maksimum karakter sayısını girin.
- Metin Alanı Yüksekliği: Metin alanının yüksekliğini piksel cinsinden px ibaresi olmadan belirtin.
- Metin Alanını Boyutlandır: Metin alanının kullanıcılar tarafından boyutlandırılıp boyutlandırılamayacağını belirtin.
Select (Seçim Listesi) Ayarları
: Seçim Listesi (select) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- Seçim Listesi Seçenekleri: Yeni seçenekler eklemek için Ekle & Düzenle düğmesine tıklayın.
- Tekrarlanabilir Seçim Listesi Seçenekleri: Açılan modal penceredeki tablonun sağ üst köşesinde bulunan düğmesi aracılığıyla seçim listenize yeni ögeler ekleyebilir, düzenleyebilir veya silebilirsiniz.
  - Form Alanı Etiketi: Seçenek listesi için kullanıcıya gösterilecek metni girin
  - Seçenek Değeri: Bu seçeneğe ait form arkaplanında gönderilmesini istediğiniz değeri girin
  - Varsayılan Seçenek mi?: İlgili seçeneğin form üyklendiğinde varsayılan olarak seçili halde gelmesini istiyorsanız bu seçeneği etkinleştirin
Checkbox (Onay Kutusu) Ayarları
: Onay Kutusu (checkbox) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- Yan Yana Göster: Onay Kutusu ögelerinin yatay olarak yan yana gösterilmesini istiyorsanız bu seçeneği etkinleştirin.
- Etiketi Gizle: Form Alanı Etiketi kısmında girdiğiniz etiketi gizlemek ve sadece onay kutularını göstermek istiyorsanız bu seçeneği etkinleştirin.
- Onay Kutusu Seçenekleri: Yeni seçenekler eklemek için Ekle & Düzenle düğmesine tıklayın.
- Tekrarlanabilir Onay Kutusu Seçenekleri: Açılan modal penceredeki tablonun sağ üst köşesinde bulunan düğmesi aracılığıyla formunuza yeni onay kutusu ögeleri ekleyebilir, düzenleyebilir veya silebilirsiniz.
  - Form Alanı Etiketi: Onay Kutusunun sağında kullanıcıya gösterilecek metni girin
  - Seçenek Değeri: Bu seçeneğe ait form arkaplanında gönderilmesini istediğiniz değeri girin
  - Varsayılan Seçenek mi?: İlgili seçeneğin form üyklendiğinde varsayılan olarak seçili halde gelmesini istiyorsanız bu seçeneği etkinleştirin
Radio (Seçim Düğmesi) Ayarları
: Seçim Düğmesi (radio) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- Yan Yana Göster: Onay Kutusu ögelerinin yatay olarak yan yana gösterilmesini istiyorsanız bu seçeneği etkinleştirin.
- Etiketi Gizle: Form Alanı Etiketi kısmında girdiğiniz etiketi gizlemek ve sadece radio düğmelerini göstermek istiyorsanız bu seçeneği etkinleştirin.
- Onay Kutusu Seçenekleri: Yeni seçenekler eklemek için Ekle & Düzenle düğmesine tıklayın.
- Tekrarlanabilir Onay Kutusu Seçenekleri: Açılan modal penceredeki tablonun sağ üst köşesinde bulunan düğmesi aracılığıyla formunuza yeni onay kutusu ögeleri ekleyebilir, düzenleyebilir veya silebilirsiniz.
  - Form Alanı Etiketi: Radio düğmesinin sağında kullanıcıya gösterilecek metni girin
  - Seçenek Değeri: Bu seçeneğe ait form arkaplanında gönderilmesini istediğiniz değeri girin
  - Varsayılan Seçenek mi?: İlgili seçeneğin form üyklendiğinde varsayılan olarak seçili halde gelmesini istiyorsanız bu seçeneği etkinleştirin
Number (Sayı) Ayarları
: Sayı (number input) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- En Düşük Sayı: Kullanıcının girebileceği en küçük sayısal değeri belirler. Örneğin, 1 olarak ayarlandığında (min="1") kullanıcı sadece 1 veya daha büyük bir sayı girebilir.
- En Yüksek Sayı: Giriş olarak kabul edilen en büyük sayıyı belirler. Örneğin, 10 olarak ayarlandığında (max="10") 10’dan büyük bir değer girilmesi mümkün olmaz.
- Sayı Arttırma Adımı: Kullanıcının değer girişi yaparken hangi adımlar arasında geçiş yapacağını tanımlar. Bu öznitelik, hem giriş alanında hem de yukarı/aşağı ok tuşları ile değer değiştirildiğinde uygulanır. Örneğin, step="5" ayarlandığında değerler 5 artarak değişir (0, 5, 10, 15, 20...).
Başlık Alanı Ayarları
: Form alanlarınızı birbirinden ayırmak ve / veya form içerisinde başlıklar kullanmak istiyorsanız bu seçeği kullanabilirsiniz. Başlık (heading) türündeki form alanı için ilgili seçenekleri burada yapılandırabilirsiniz.
- Başlık Tipi: Açılır listeden başlığın hangi html öğesi ile (H1,H2,H3,H4,H5,H6) gösterileceğini seçin.
- Başlık Font Özellikleri: Form başlığı için font özelliklerini ayarlayın.
  - Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  - Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  - Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  - Yazı Stili:
    - : Altı Çizili - text-decoration: underline
    - : Eğik (Italic) - font-style: italic
    - : Büyük Harf - text-transform: uppercase
  - Yazı Hizalama (Başlık):
    - : Sola Hizalanmış - text-align: left
    - : Ortalanmış - text-align: center
    - : Sağa Hizalanmış - text-alin: right
  - Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight

Bileşen Seçenekleri

Zorunlu Alan Hata Mesajı
: Form içerisindeki herhangi bir zorunlu alan kullanıcı tarafından doldurulmadığında / seçilmediğinde gösterilmesini istediğiniz hata mesajını, sitenizdeki aktif her bir dil için girin.
Form Başarıyla Gönderildi Mesajı
: Form herhangi bir sorun olmadan gönderildiğinde kullanıcıya gösterilmesini istediğiniz başarı mesajınızı, sitenizdeki aktif her bir dil için girin.
Form Gönderilemedi Mesajı
: Form gönderimi herhangi bir nedenden dolayı gönderilemediğinde kullanıcıya gösterilmesini istediğiniz hata mesajınızı, sitenizdeki aktif her bir dil için girin.
Etiketleri Gizle
: Formunuzda form etiketlerini gizlemek istiyorsanız bu seçeneği etkinleştirin. Bu seçeneği etkinleştirildiğinizde Form alanlarının ne ile ilgili olduğunun anlaşılabilmesi için "Form Alanı Yer Tutucusu" (placeholder) alanının dolduruduğunuzdan emin olun.
Kayan Etiketler
: Form üzerinde ilgili form alanına tıklandığında form etiketinin animasyona kaymasını istiyorsanız bu seçeneği kullanın. Kayan etiketler ile ilgil daha detaylı bilgi ve örnekler için lütfen Bootstrap Floating Labels dokumantasyonuna gözatın.
Yönlendirmeyi Etkinleştir
: Form başarıyla gönderildikten sonra kullanıcıları başka bir sayfaya (Örneğin özel bir Teşekkür Sayfası) yönlendirmek istiyorsanız bu seçeneği etkinleştirin.
Yönlendirme Linki
: Form başarıyla gönderildikten sonra kullanıcıları yönlendirmek istediğiniz sayfa linkini sitenizdeki aktif her bir dil için buraya girebilirsiniz.
Captcha Göster
: Formunuzda Captcha güvenlik kodu alanının gösterilip gösterilmeyeceğini seçin.
NOT: Site Güvenlik Ayarlarınızdaki Captcha Güvenlik bölümünden İletişim Formu için Captcha etkinleştirilmişse bu seçenek geçersiz kılınır. Ayarlar -> Güvenlik Ayarları -> Captcha Güvenlik bölümündeki Güvenlik ayarlarınız dikkate alınır.
Politika Onay Kutusunu Etkinleştir
: Form altında kullanıcıların sitenizin kullanım koşullarını kabul ettiğine dair politika onay kutusunun gösterilip gösterilmeyeceğini belirtin.
NOT: Site Ayarlarınızda Kişisel Veri Yönetimi etkinleştirilmişse bu seçenek geçersiz kılınır. Müşteriler -> Kişisel Veri Yönetimi (KVKK) -> Ayarlar bölümündeki ayarlarınız dikkate alınır.

E-Posta Şablonu Ayarları

Alıcının E-Postası
: Form ile gönderilen başvuruları alacak olan e-posta adresini girin. Bu alan zorunludur. Birden fazla alıcı eklemek için e-posta adreslerini virgül ile ayırın.
E-Posta Konusu
: E-Posta konusunu burada belirtin. Bu alan zorunludur. Oluşturduğunuz form alanı adlarını süslü parantez içerisinde kullanarak dinamik verilerine erişebilirsiniz. Örn: {{email}} girerseniz kullanıcının email form alanında girdiği veri otomatik olarak eklenir. Ayrıca {{sitename}} değişkeni ile site adınızı ekleyebilirsiniz.
E-Posta İçeriği
: Form e-posta gövdenizi burada ayarlayın. Düzenleyicide herhangi bir CSS sitili v.b. eklemeyin. Sadece Form Alanı Adı kısmında belirttiğiniz benzersiz form alanı adlarınızı çift süslü parantez içerisinde yazın, örneğin: {{form-alani-adi}}.

Gönder Düğmesi Ayarları

Düğme Metni
: Sitenizdeki aktif her bir dil için düğmede gösterilmesini istediğiniz düğme metnini girin. Örneğin: Gönder (Send).
Düğme Metni Font Özellikleri
: Düğme metni için font özelliklerini ayarlayın.
- Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
- Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
- Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
- Yazı Stili:
  - : Altı Çizili - text-decoration: underline
  - : Eğik (Italic) - font-style: italic
  - : Büyük Harf - text-transform: uppercase
- Yazı Hizalama (Başlık):
  - : Sola Hizalanmış - text-align: left
  - : Ortalanmış - text-align: center
  - : Sağa Hizalanmış - text-alin: right
- Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
Düğme Tipi
: Düğme tipini seçin.
Düğme Stili
: Düğme stilini seçin.
Düğme Şekli
: Düğme şeklini seçin.
Düğme Boyutu
: Düğme boyutunu seçin.
Tam Geniş Düğme
: Düğme bulunduğu alan içerisinde tam genişlikte (100%) blok olarak gösterilir.
Düğme Konumu
: Form düğmesinin formdaki konumunu belirtin. Düğme, Formun altında sağda, solda veya ortalanmış olarak gösterilebilir.
Simge Göster
: Düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin.
Simge
: Düğme simgesi olarak kullanmak istediğiniz FontAwesome simgesini seçin.
Simge Konumu
: Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin.

DÜĞME STİLİ YAPILANDIRMA İPUÇLARI:

Düğme düzenleme penceresindeki form alanlarının detaylı dokümantasyonu için lütfen Düğme (Button) Bileşeni dokümantasyonuna gözatın.

Stil Ayarları

Form Alanı Stil Ayarları
: Form içerisindeki input alanlarının stilini buradan ayarlayabilirsiniz. Boş bırakırsanız varsayılan form alanı stil seçenekleri kullanılır.
- Form Alanı Mesafesi: Her bir form alanı arasındaki mesafe için 1 ile 5 arasında bir değer girin (row gap).
- Metin Rengi: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için metin rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Arkaplan: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için arkaplan rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Yer Tutucusu Metin Rengi: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için yer tutucu (placeholder) metin rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Padding (İç Boşluk): Form alanları için üst, sağ, alt ve sol padding değerlerini belirleyin. Bu alanlar, her bir yönde iç boşluk (padding) miktarını piksel cinsinden ayarlamanıza olanak tanır, böylece öğeniz içinde metin veya diğer içerikler belirtilen boşluklarla çevrelenir. Değerleri yalnızca sayı olarak girin, örneğin: 10 (px cinsinden). Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Kenarlık Genişliği: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için kenarlık genişliğini piksel cinsinden (px ibaresi olmadan) girin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Kenarlık Rengi: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için kenarlık rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Kenar Yuvarlatma: Form alanlarının yuvarlak köşeli olmasını istiyorsanız burada kenarları yuvarlatabilirsiniz.
- Gölge: Form alanlarına gölge eklemek istiyorsanız gölge stilini ayarlayın. box-shadow
  - X Konum: Kutu gölgesi için X ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  - Y Konum: Kutu gölgesi için Y ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
  - Bulanıklık: Kutu gölgesi için Bulanıklık (blur) değerini piksel (px) ibaresi olmadan girin. Örn: 10
  - Renk: Kutu gölgesi rengini seçin. RGBA formatında seçerek saydamlığı ayarlayabilirsiniz.
Form Alanı Etiketi Stil Ayarları
: Form içerisindeki input etiketlerinin (label) stilini buradan ayarlayabilirsiniz. Boş bırakırsanız varsayılan form alanı etiket stil seçenekleri kullanılır.
- Renk: Form alanı etiket rengini seçin.
- Font Özellikleri: Form alanı etiketi için font özelliklerini ayarlayın.
  - Yazı Boyutu: Başlık yazı boyutunu seçin - font-size
  - Satır Yüksekliği: Başlık satır yüksekliğini seçin - line-height
  - Harf Mesafesi: Başlık harfleri arasındaki mesafeyi seçin - letter-spacing
  - Yazı Stili:
    - : Altı Çizili - text-decoration: underline
    - : Eğik (Italic) - font-style: italic
    - : Büyük Harf - text-transform: uppercase
  - Yazı Hizalama (Başlık):
    - : Sola Hizalanmış - text-align: left
    - : Ortalanmış - text-align: center
    - : Sağa Hizalanmış - text-alin: right
  - Yazı Genişliği: Başlık metninin kalınlığını seçin - font-weight
Form Alanı Simgesi Stil Ayarları
: Form içerisindeki input simgelerinin stilini buradan ayarlayabilirsiniz. Boş bırakırsanız varsayılan form alanı simge stil seçenekleri kullanılır.
- Girdi Grubu Simgesi Rengi: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için simge rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
- Girdi Grubu Simgesi Arkaplan Rengi: Form alanlarının normal ve üzerine gelinme, odaklanma durumları için simge arkaplan rengini seçin. Checkbox, Radio ve Başlık form alanları bu seçenekten etkilenmez.
Checkbox & Radio Stil Ayarları
: Form içerisindeki onay kutusu (chekcbox) ve seçim düğmesi (radio) form ögelerinin stilini buradan ayarlayabilirsiniz.
- Onay Kutusu Renk: Aktif/Seçili Onay Kutusu (Checkbox) ögesi rengini seçin.
- Seçim Düğmesi Renk: Aktif/Seçili Seçim Düğmesi (Radio) ögesi rengini seçin.
Bileşen Stil Ayarları
: Bileşen taşıyıcısı için özel css sınıflarınızı veya kodlarınızı burada girebilirsiniz.
- Sınıf: Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
- Dahili Stil: Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Slayt Gösterisi Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-slideshow-widget css sınıfı altından inceleyebilirsiniz.
```
												
@widgetId .light-grey-rounded-box{
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 5px;
}
												
											
```

Bileşen Penceresi Kayıt Düğmeleri

Sayfayı Kaydet
: Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
Kaydet & Düzenle
: Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.