Prusa WiseCp Tema - Dokümantasyon - Numaralı Blok Bileşeni

Numaralı Blok Bileşeni Nedir?

Numaralı Blok Bileşeni, güzel ve dikkat çekiçi şekilde biçimlendirebileceğiniz sayı ve metin içeren bir blok görüntüler. Genellikle ürünlerin özelliklerini veya diğer herhangi bir sayı/puan tabanlı içerikler için Numaralı Blok bileşeni çok kullanışlıdır. SP Page Builder'ın Blok Numarası eklentisiyle, sayfanıza güzel bir blok numarası ekleme ve şekillendirme konusunda tam kontrole sahipsiniz.

FonPageBuilder Numaralı Blok Bileşeni ile sayfanızda istediğiniz alana güzel ve etkileyici numaralı bloklar ekleyebilir ve bileşen içeriğini bçimlendirme konusunda tam kontrole sahip olabilirsiniz.

Numaralı Blok 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.

Bileşen Seçenekleri

Numara
: Blok içeriğinde göstermek istediğiniz numarayı girin. Örn: 01
Numara Yazı Boyutu
: Numara için yazı boyutunu piksel cinsinden (px ibaresi olmadan) girin. Örn: 30
Numara Konumu
: Numaranın içeriğe göre hangi konumda olacağını seçin.
- Üst: Numara içeriğin üstünge konumlandırılacaktır. Numara ve İçerik dikey düzlemde gösterilir(Sütun).
- Sol: Numara içeriğin solunda konumlandırılacaktır. Numara ve İçerik yatay düzlemde gösterilir(Satır).
- Sağ: Numara içeriğin sağında konumlandırılacaktır. Numara ve İçerik yatay düzlemde gösterilir(Satır).
İçerik Hizalama
: Numaralı Blok içeriğinin nasıl hizalanacağını seçin. Bu alan, "Numara Konumu" olarak Üst seçeneği seçildiğinde gösterilir.
- Sol: Numara ve içerik sola hizalanır.
- Orta: Numara ve içerik ortalanmış olarak hizalanır.
- Sağ: Numara ve içerik sağa hizalanır.
Dikey İçerik Hizalama
: Numaralı Blok içeriğinin dikey düzlemde nasıl hizalanacağını seçin. Bu alan, "Numara Konumu" olarak Sol veya Sağ seçeneği seçildiğinde gösterilir.
- Üst: Tüm içerikler dikey olarak üstte hizalanır. align-items:start
- Orta: Tüm içerikler dikey olarak ortalanarak hizalanır. align-items:center
- Alt: Tüm içerikler dikey olarak altta hizalanır. align-items:end
Numara Renk Tipi
: Numaranın normal durum ve hover (üzerine gelinme) durumu için renk stilini seçin.
- Düz: Numara metnini düz (flat) renk olarak göstermek istiyorsanız seçin.
- Gradient: Numara metnini gradient (çift renk geçişli) olarak göstermek istiyorsanız seçin.
Numara Rengi
: Bileşenin normal ve hover (üzerine gelinme) durumları için Numara metninin rengini seçin. Bu alan, "Numara Renk Tipi" olarak Düz seçeneği seçildiğinde gösterilir.
- Normal: Bileşenin normal durumu için numara metni rengini seçin.
- Üzerinde: Bileşenin hover (üzerine gelinme) durumu için numara metni rengini seçin.
Numara Gradient
: Bileşenin normal ve hover (üzerine gelinme) durumları için Numara metninin gradient renk geçişini belirleyin. Bu alan, "Numara Renk Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.
- Başlangıç Rengi: Gradient başlangıç rengi
- Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
- Bitiş Rengi: Gradient bitiş rengi
- Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
- Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
- Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
Arkaplan Tipi
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesinin arkaplan renk stilini seçin.
- Düz: Numara arkaplanını düz (flat) renk olarak göstermek istiyorsanız seçin.
- Gradient: Numara arkaplanını gradient (çift renk geçişli) olarak göstermek istiyorsanız seçin.
Numara Arkaplan Rengi
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesinin arkaplan rengini seçin. Bu alan, "Arkaplan Tipi" olarak Düz seçeneği seçildiğinde gösterilir.
- Normal: Bileşenin normal durumu için numara taşıyıcı öğesinin arkaplan rengini seçin.
- Üzerinde: Bileşenin hover (üzerine gelinme) durumu için numara taşıyıcı öğesinin arkaplan rengini seçin.
Numara Gradient Arkaplan
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesinin arkaplan gradient renk geçişini belirleyin. Bu alan, "Arkaplan Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.
- Başlangıç Rengi: Gradient başlangıç rengi
- Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
- Bitiş Rengi: Gradient bitiş rengi
- Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
- Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
- Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
Numara Kenarlığı
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesinde bir çerçeve (kenarlık) kullanmak istiyorsanız, her bir durum için kenarlık değerlerini ayarlayın.
- Genişlik: Kenarlık kalınlığını piksel (px) ibaresi olmadan girin. Örn: 1 border-width
- Stil: Kenarlık stilini seçin.
  - Yok - border-style:none
  - Düz - border-style: solid
  - Noktalı - border-style: dotted
  - Kesikli - border-style: dashed
  - Çift - border-style: double
  - Oluk - border-style: groove
  - Çıkıntı - border-style: ridge
- Renk: Kenarlık rengini seçin. border-color
Numara Kenar Yuvarlatma
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesinin köşelerini yuvarlatmak istiyorsanız, her bir durum için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Bileşenin normal ve hover (üzerine gelinme) durumları için numara taşıyıcı öğesine gölge eklemek istiyorsanız, her bir durum için 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.

İçerik Ayarları

Başlık
: Sitenizdeki aktif her bir dil için Numaralık Blok bileşeni içeriğinde göstermek istediğiniz başlığı girin.
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 Rengi:
: Başlığı daha dikkat çekici bir renkte göstermek istiyorsanız, bileşenin normal ve hover (üzerine gelinme) durumları için başlık rengini seçin.
Başlık Font Özellikleri
: Numaralı Blok bileşeni başlığına ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız "Başlık Tipi" alanında seçtiğiniz html ögesinin stili uygulanır.
- 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
İçerik
: Sitenizdeki aktif her bir dil için Numaralık Blok bileşeni içeriğinde göstermek istediğiniz içerik metnini girin.
İçerik Metin Rengi:
: İçeriği daha dikkat çekici bir renkte göstermek istiyorsanız, bileşenin normal ve hover (üzerine gelinme) durumları için içerik metin rengini seçin.

Bileşen Stil Ayarları

Padding (İç Boşluk)
: Numaralı Blok Bileşeni içeriklerinin kutu kenarlarına olan mesafesini (padding - iç boşluk) belirtin.
Arkaplan Tipi
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan renk stilini seçin.
- Düz: Bileşen arkaplanını düz (flat) renk olarak göstermek istiyorsanız seçin.
- Gradient: Bileşen arkaplanını gradient (çift renk geçişli) olarak göstermek istiyorsanız seçin.
Arkaplan
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan rengini seçin. Bu alan, "Arkaplan Tipi" olarak Düz seçeneği seçildiğinde gösterilir.
- Normal: Bileşenin normal durumu için bileşen kutusu arkaplan rengini seçin.
- Üzerinde: Bileşenin hover (üzerine gelinme) durumu için bileşen kutusu arkaplan rengini seçin.
Arkaplan Gradient
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun arkaplan gradient renk geçişini belirleyin. Bu alan, "Arkaplan Tipi" olarak Gradient seçeneği seçildiğinde gösterilir.
- Başlangıç Rengi: Gradient başlangıç rengi
- Başlangıç Rengi Konumu: Gradient başlangıç renginin konumunu 0-100 arasında girin.
- Bitiş Rengi: Gradient bitiş rengi
- Bitiş Rengi Konumu: Gradient bitiş renginin konumunu 0-100 arasında girin.
- Gradient Tipi: Linear (Düz) veya Radial (Dairesel) gradient tipinden birini seçin
- Gradient Açısı: Gradient renk geçişinin yönünü belirtmek için 0-360° arasında bir değer girin
Kenarlık Kullan
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunda çerçeve kenarlığı göstermek istiyorsanız bu seçeneği etkinleştirin.
Kenarlık
: Bileşenin normal ve hover (üzerine gelinme) durumları için kenarlık stilini ayarlayın. Bu alan, "Kenarlık Kullan" seçeneği etkinleştirildiğinde gösterilir.
- Genişlik: Kenarlık kalınlığını piksel (px) ibaresi olmadan girin. Örn: 1 border-width
- Stil: Kenarlık stilini seçin.
  - Yok - border-style:none
  - Düz - border-style: solid
  - Noktalı - border-style: dotted
  - Kesikli - border-style: dashed
  - Çift - border-style: double
  - Oluk - border-style: groove
  - Çıkıntı - border-style: ridge
- Renk: Kenarlık rengini seçin. border-color
Kenar Yuvarlatma
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunun köşelerini yuvarlatmak istiyorsanız, her bir durum için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Bileşenin normal ve hover (üzerine gelinme) durumları için bileşen kutusunua gölge eklemek istiyorsanız, her bir durum için 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.
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. Numaralı Blok 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-number-box-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.