Prusa WiseCp Tema - Dokümantasyon

Başlık Bileşeni Nedir?

Başlıklar, herhangi bir web sayfasının en önemli parçalarından biridir. Metin içeriklerini bölmeye, yapı oluşturmaya ve okunabilirliği artırmaya yardımcı olurlar.

FonPageBuilder Başlık Bileşeni ile sayfanıza simge de seçebileceğiniz ve istediğiniz şekilde biçimlendirebileceğiniz harika başlıkları kolayca ekleyebilirsiniz.

Başlık 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.

İçerik Ayarları

Başlık
: Sitenizdeki aktif her bir dil için Başlık metnini girin.
Bu alanda istediğiniz herhangi bir ürün grubundaki belirli bir ürünün fiyatını göstermek için {{domain:com:register}} veya {{hosting:15}} vb. şeklinde kısakodlar kullanabilirsiniz. Kısakodlar hakkında detaylı bilgi için lütfen Kısa Kodlar Dokumantasyonuna gözatın.
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 Link:
: Başlığa tıklanıldığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin. Link kullanmak istemiyorsanız boş bırakabilirsiniz.
Simge Göster
: Başlık ile birlikte bir simge göstermek istiyorsanız bu seçeneği etkinleştirin.
Simge
: Başlık ile birlikte göstermek istediğiniz FontAwesome simgesini seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Simge Konumu
: Simgenin başlığa göre konumunu seçin.
- Önce: Simge başlıktan önce gösterilir.
- Sonra: Simge başlıktan sonra gösterilir.

Bileşen Seçenekleri

Başlık Rengi
: Başlık rengini seçebilirsiniz.
Başlık Font Özellikleri:
: Başlığınız için font özelliklerini 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
Başlık Gölge
: Başlığınıza metin gölgesi eklemek istiyorsanız gölge stilini ayarlayın. text-shadow
- X Konum: Başlık metin gölgesi için X ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
- Y Konum: Başlık metin gölgesi için Y ekseni konumunu piksel (px) ibaresi olmadan girin. Örn: 5
- Bulanıklık: Başlık metin gölgesi için Bulanıklık (blur) değerini piksel (px) ibaresi olmadan girin. Örn: 10
- Renk: Başlık metin gölgesi rengini seçin. RGBA formatında seçerek saydamlığı ayarlayabilirsiniz.
Başlık Margin (Dış Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için kenar boşluğunu (margin) kullanın. Başlık sınırının dışına responsive olarak her bir ekran çözünürlüğü için (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.
Başlık Padding (İç Boşluk)
: Tutarlı aralıklarla duyarlı içerik oluşturmak için dolguyu (padding) kullanın. Başlık sınırının içine responsive olarak her bir ekran çözünürlüğü için (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.
Simge Rengi
: Başlık ile birlikte göstermek istediğiniz simgenin rengini ayarlayın. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
İçerik Hizalama
: Başlık bileşeninin sayfanızda bulunduğu alanda nasıl hizalanacağını seçin. Responsive olarak her bir ekran çözünürlüğü için hizalama seçeneklerini belirleyebilirsiniz.
- Sol: Başlık bileşeni içeriği sola hizalanır.
- Sağ: Başlık bileşeni içeriği sağa hizalanır.
- Orta: Başlık bileşeni içeriği ortalanmış olarak hizalanı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. Başlık 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-heading-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.