Prusa WiseCp Tema - Dokümantasyon - Geri Sayım Bileşeni

Geri Sayım Bileşeni Nedir?

FonPageBuilder Geri Sayım Bileşeni, zamanlayıcı sıfıra geldikten sonra gerçekleşecek bir olayın geri sayımını ayarlamak istemeniz durumunda bir zamanlayıcı eklemenizi sağlar. Geri sayımınızı ay, saat, dakika ve saniye olarak görüntüleyebilirsiniz. Durdurmak için geri sayımın tarihini ve saatini eklemelisiniz, gerisi bileşen tarafından yapılacaktır.

Geri Sayım 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.
Geri Sayım Tarihi
: Geri sayım sayacının bitiş tarihini eklemelisiniz. Geri sayım, bu tarihte durdurulacaktır.
Geri Sayım Saati
: Geri sayım sayacının bitiş saatini eklemelisiniz. Geri sayım, bu saatte durdurulacaktır.
Bitiş Mesajı
: Geri sayım sayacı sayımı bitirdikten sonra kullanıcılara gösterilmesini istediğiniz mesajı buraya girin. Örn: Üzgünün bu etkinliğin süresi doldu.

Bileşen Seçenekleri

Geri Sayım Hizalama
: Geri Sayım bileşeninin sayfanızda bulunduğu alanda nasıl hizalanacağını seçin.
- Sol: Geri sayım sayacı sola hizalanır.
- Sağ: Geri sayım sayacı sağa hizalanır.
- Orta: Geri sayım sayacı ortalanmış olarak hizalanır.
Geri Sayım Rengi
: Geri sayım sayacındaki rakamların rengini seçin.
Geri Sayım Boyutu
: Geri sayım sayacındaki rakamların boyutunu piksel cinsinden (px ibaresi olmadan) girin.
Geri Sayım Metin Rengi
: Geri sayım sayacındaki "GÜN", "SAAT", "DAKİKA", "SANİYE" metinlerinin rengini seçin.
Geri Sayım Metin Boyutu
: Geri sayım sayacındaki "GÜN", "SAAT", "DAKİKA", "SANİYE" metinlerinin boyutunu girin.
Geri Sayım Metin Konumu
: Geri sayım sayacındaki "GÜN", "SAAT", "DAKİKA", "SANİYE" metinlerinin konumunu seçin.
- Üst: Geri sayım metni ("GÜN", "SAAT", "DAKİKA", "SANİYE"), rakamların üstünde gösterilir.
- Sol: Geri sayım metni ("GÜN", "SAAT", "DAKİKA", "SANİYE"), rakamların solunda gösterilir.
- Sağ: Geri sayım metni ("GÜN", "SAAT", "DAKİKA", "SANİYE"), rakamların sağında gösterilir.
- Alt: Geri sayım metni ("GÜN", "SAAT", "DAKİKA", "SANİYE"), rakamların altında gösterilir.
Ayraç Tipi
: Geri sayım rakam blokları arasında bir ayraç göstermek istiyorsanız buradan seçebilirsiniz.
- Yok: Herhangi bir ayraç gösterilmez.
- Nokta: Geri sayım rakam blokları arasında nokta (.) gösterilir.
- Virgül: Geri sayım rakam blokları arasında virgül (,) gösterilir.
- İki Nokta Üstüste: Geri sayım rakam blokları arasında iki nokta üstüste (:) gösterilir.
- Dikey Çizgi: Geri sayım rakam blokları arasında dikey çizgi (|) gösterilir.
- Yatay Çizgi: Geri sayım rakam blokları arasında yatay çizgi (-) gösterilir.
Ayraç Rengi
: Geri sayım sayacında gösterilmesini seçtiğiniz ayraç için bir renk seçin.

Geri Sayım Stil Ayarları

Geri Sayım Arkaplan Rengi
: Geri sayım bileşeni için arkaplan rengini seçin.
Margin (Dış Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için kenar boşluğunu (margin) kullanın. Geri sayım bileşeni sınırının dışına (margin) dış boşluk ekleyebilirsiniz. Bir tarafa (Örn. Sadece üst boşluk: 10px 0 0 0), tamamlayıcı kenarlara (Örn. sadece alt ve üst boşluk: 10px 0) veya dört kenara aynı anda (Örn:10px) boşluk ekleyin.
Padding (İç Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için dolguyu (padding) kullanın. Geri sayım bileşeni sınırının içine (padding) iç boşluk ekleyebilirsiniz. Bir tarafa (Örn. Sadece üst dolgu: 10px 0 0 0), tamamlayıcı kenarlara (Örn. sadece alt ve üst dolgu: 10px 0) veya dört kenara aynı anda (Örn:10px) dolgu ekleyin.
Kenarlık
: Geri sayım bileşeni için kenarlık stilini 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
Kenar Yuvarlatma
: Geri sayım bileşeninin köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Geri sayım bileşenine 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.

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. Geri Sayım 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-countdown-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.