FonPageBuilder Ürün Sihirbazı Bileşeni Son Güncelleme: 04-07-2026

Ürün Sihirbazı Bileşeni Nedir?

FonPageBuilder Ürün Sihirbazı (Product Wizard) bileşeni; ziyaretçilerinizin ihtiyaçlarına en uygun ürünü veya paketi bulmalarına yardımcı olan, çok adımlı ve interaktif bir rehber bileşenidir. Her adımda kullanıcıya sorular yöneltilir, verilen yanıtlara göre paketlere puan eklenir ve tüm adımlar tamamlandığında en yüksek puanı alan paket önerilir.

Bileşen iki farklı görünüm modunda kullanılabilir; sayfaya doğrudan yerleştirilebilir (Sayfa İçi) ya da bir düğmeyle açılan Bootstrap modal penceresi olarak gösterilebilir (Modal). Her iki modda da tam dil desteği, özelleştirilebilir vurgu rengi ve tüm düğme metinleri sunulmaktadır.

• İki Görünüm Modu: Sayfa içine gömülü (Inline) veya düğmeyle tetiklenen modal pencere (Modal) olarak kullanılabilir.
• Puan Tabanlı Öneri Sistemi: Her seçenek, belirlenen paketlere belirli puanlar ekler; tüm adımlar tamamlandığında en yüksek puana sahip paket otomatik olarak önerilir.
• Dinamik Paket Kartları: Önerilen paket; adı, fiyatı, özellikleri ve satın alma bağlantısıyla birlikte otomatik olarak görüntülenir.
• Tam Özelleştirme: Vurgu rengi, tüm düğme metinleri, sonuç ekranı metinleri ve sihirbazın maksimum genişliği özgürce ayarlanabilir.
• Çoklu Dil Desteği: Soru başlıkları, açıklamalar, seçenek metinleri ve arayüz etiketleri sitenizin tüm aktif dilleri için ayrı ayrı girilebilir.

Ürün Sihirbazı 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.

Seçenekler

• Görünüm Modu
  : Sihirbazın sayfada nasıl görüntüleneceğini belirler.

  • Sayfa İçi (Inline): Sihirbaz, bileşenin eklendiği sütuna doğrudan yerleştirilir. Ziyaretçi sayfayı yüklediğinde sihirbaz hemen görünür olur.
  • Modal: Sihirbaz gizlenir; sayfada yalnızca bir tetikleyici düğme gösterilir. Ziyaretçi düğmeye tıkladığında sihirbaz Bootstrap modal penceresi içinde açılır.
• Maksimum Genişlik
  : Sihirbaz ana taşıyıcısının maksimum genişliğini px veya % cinsinden girin. Örneğin: 680px veya 80%. Boş bırakılırsa 100% olarak uygulanır. NOT: Bu alan yalnızca Görünüm Modu Sayfa İçi seçildiğinde gösterilir.
• Tetikleyici Düğme Metni
  : Modal pencereyi açan düğmenin üzerinde gösterilecek metni her bir aktif dil için girin. Örnek: Hosting ihtiyacımı belirle. NOT: Bu alan yalnızca Görünüm Modu Modal seçildiğinde gösterilir.
• Tetikleyici Düğme CSS Sınıfı
  : Modal pencereyi açan düğmeye uygulanacak Bootstrap 5 CSS sınıflarını girin. Varsayılan değer: btn btn-default btn-lg. Farklı bir renk veya boyut kullanmak için örneğin btn btn-primary btn-lg girebilirsiniz. NOT: Bu alan yalnızca Görünüm Modu Modal seçildiğinde gösterilir.
• Tetikleyici Düğme Hizalaması
  : Tetikleyici düğmenin yatay hizalamasını belirler.

  • Sol: Düğme sola hizalanır.
  • Orta: Düğme ortaya hizalanır (varsayılan).
  • Sağ: Düğme sağa hizalanır.

  NOT: Bu alan yalnızca Görünüm Modu Modal seçildiğinde gösterilir.
• Vurgu Rengi
  : Sihirbazın genel vurgu rengini seçin. Bu renk; ilerleme çubuğu, aktif adım noktaları, seçili seçenek çerçevesi ve birincil düğmeler gibi bileşenin öne çıkan ögeleri için kullanılır. Varsayılan değer: #4f46e5.
• Geri Düğmesi Metni
  : Önceki adıma dönmek için kullanılan düğmenin metnini her bir aktif dil için girin. Varsayılan: Geri.
• İleri Düğmesi Metni
  : Bir sonraki adıma geçmek için kullanılan düğmenin metnini her bir aktif dil için girin. Varsayılan: Devam Et.
• Sonuç Düğmesi Metni
  : Tüm adımlar tamamlandığında sonuç ekranına geçişi sağlayan düğmenin metnini her bir aktif dil için girin. Varsayılan: Sonucu Gör.
• Yeniden Başlat Düğmesi Metni
  : Sonuç ekranında sihirbazı baştan başlatmak için kullanılan düğmenin metnini her bir aktif dil için girin. Varsayılan: Testi Yeniden Başlat.
• Sonuç Rozeti Metni
  : Sonuç ekranında önerilen paketin üzerinde gösterilen rozet metnini her bir aktif dil için girin. Varsayılan: Analiz Tamamlandı.
• Sonuç Başlığı
  : Sonuç ekranında önerilen paketin üstünde yer alan büyük başlık metnini her bir aktif dil için girin. Varsayılan: Sizin için en uygun plan.
• Sonuç Alt Başlığı
  : Sonuç başlığının hemen altında gösterilecek açıklama metnini her bir aktif dil için girin. Varsayılan: Verdiğiniz yanıtlara göre aşağıdaki paketi öneriyoruz.

İçerik Ayarları

• Paketler
  : Sihirbazın sonunda öneri olarak gösterilmesini istediğiniz paketleri bu alandan seçin. Seçtiğiniz her paketin bir kimlik numarası (ID) bulunur; bu ID'leri daha sonra Soru Seçeneklerindeki Paket Skorları alanında kullanacaksınız. Seçebileceğiniz maksimum paket sayısı 10'dur.
• Sorular (Adımlar)
  : Sihirbazın her bir adımına karşılık gelen soruları bu bölümden yönetirsiniz. Sorular (Adımlar) başlığının karşısındaki Ekle düğmesine tıklayarak yeni bir soru ekleyebilirsiniz. Eklediğiniz her sorunun başlığının karşısındaki simgeler aracılığıyla soruyu; düzenleyebilir, sıralayabilir ve silebilirsiniz.

Soru Düzenleme Penceresi:

• Soru Başlığı
  : Bu adımda ziyaretçiye yöneltilecek soruyu her bir aktif dil için girin. Örnek: Ne tür bir web sitesi kuruyorsunuz? Bu metin sihirbaz arayüzünde kalın ve büyük punto ile gösterilir.
• Soru Açıklaması
  : Soru başlığının hemen altında yer alan, soruyu destekleyen kısa açıklama metni. Her bir aktif dil için girilebilir. Boş bırakılırsa gösterilmeyecektir. Örnek: İhtiyaçlarınıza en uygun sunucu kaynaklarını belirleyebilmemiz için projenizin türünü seçin.
• Soru (Adım) Seçenekleri
  : Bu adımda ziyaretçiye sunulacak seçenekleri yönetirsiniz. Her soru için birden fazla seçenek eklenebilir. Her bir seçenek şu alanlardan oluşur:

  • Simge: Seçenek kartında gösterilecek FontAwesome simgesini seçin. Örnek: fa-solid fa-server.
  • Başlık: Seçenek kartının ana metnini her bir aktif dil için girin. Örnek: Blog / Kişisel Web Sitesi.
  • Açıklama: Başlığın altında küçük punto ile gösterilen destekleyici metni her bir aktif dil için girin. Örnek: Portföy, kişisel blog veya CV sayfası. Boş bırakılırsa gösterilmeyecektir.
  • Paket Skorları: Bu seçenek işaretlendiğinde hangi pakete kaç puan ekleneceğini belirler. paketId:skor formatında girin; birden fazla paket için virgülle ayırın. Örnek: 15:5,187:0,195:1. Paket ID'lerini yukarıdaki Paketler alanından seçtiğiniz paketlerden öğrenebilirsiniz. Önerilen skor aralığı 0–10 arasındadır.

Bileşen Stil Ayarları

• 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. Flipbox (Dönen Kutu) 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-text-html-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.