Prusa WiseCp Tema - Dokümantasyon - Animasyonlu/Vurgulu Başlık Bileşeni

Animasyonlu/Vurgulu Başlık Bileşeni Nedir?

Dinamik Tipografi ile Ziyaretçilerinizin Dikkatini İlk Saniyede Yakalayın!

Fonpagebuilder Animasyonlu/Vurgulu Başlık Bileşeni; statik başlıkları etkileşimli birer görsel şölene dönüştürmek için tasarlanmıştır. Tek bir başlık alanında birden fazla mesaj iletmenize veya önemli kelimeleri el yazısı doğallığında vurgulamanıza olanak tanır.

Teknik Özellikler ve Kullanım Kılavuzu

Üç Parçalı Yapı: Başlangıç Metni + Odak Metin + Bitiş Metni kombinasyonu ile tam cümle kontrolü.
Layout Seçenekleri: Metinleri ister yan yana tek satırda, istersen parçalı şekilde alt alta dizme imkanı.
Akıllı Genişlik (CLS Dostu): Kelimeler değişirken sayfanın zıplamasını engelleyen otomatik genişlik hesaplama teknolojisi.
SVG Dinamik Çizim: Vurgulama modunda, kelime uzunluğuna göre kendini ayarlayan akıllı stroke-dash kontrolü.
Responsive Uyum: Masaüstü, tablet ve mobil ekranlar için ayrı hizalama ve boyutlandırma desteği.

Animasyonlu / Vurgulu 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.

DEMO

Tüm Animasyonlu / Vurgulu Başlık bileşeni varyasyonlarına ait demolar için BURAYA tıklayın.

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.
Başlık Stili
: Bu bileşen, tasarım hedeflerinize göre iki ana çalışma modu sunar:
- Animasyonlu Metin (Dönen): Bu mod, belirlediğiniz anahtar kelimelerin bir döngü içerisinde sürekli değişmesini sağlar. Bir başlangıç ve bitiş metni arasında, virgülle ayırdığınız kelimeler (örn: hızlı, güvenli, şık) seçtiğiniz efektle sırayla ekrana gelir.
- Vurgulama (Şekil/Çizim): Önemli bir kelimeyi veya cümleyi, sanki o an bir kalemle çiziliyormuş gibi belirginleştirir. Seçilen "Odak Metin"in etrafına veya altına SVG tabanlı akıllı şekiller çizilir.
Başlık Yerleşim Düzeni
: Başlık parçalarının nasıl dizileceğini seçin. NOT: Bu seçenek sadece Animasyonlu Metin (Dönen) modunda gösterilir ve kullanılır.
- Yan Yana (Varsayılan): Başlangıç Metni + Odak Metin + Bitiş Metni formundan oluşan tüm cümle tek bir satırda yanyana gösterilir.
- Her Parça Yeni Satırda: Başlangıç Metni, Odak Metin ve Bitiş Metni her biri yeni bir satırda (alt alta) gösterilir.
- Sadece Son Parça Yeni Satırda: Başlangıç Metni + Odak Metin aynı satırda Bitiş Metni ise yeni bir satırda (altta) gösterilir.

İçerik Ayarları

Başlangıç Metni
: Sabit olarak gösterilecek olan cümlenin ilk parçasını girin. Sitenizdeki aktif her bir dil için ayrı ayrı girmelisiniz.
Değişen Kelimeler
: Sitenizdeki aktif her bir dil için animasyon uygulanacak olan odak kelimelerinizi virgül ile ayırarak girin. Örn: hızlı, modern, şık. "Biz [hızlıyız, güçlüyüz, yanınızdayız]." gibi çoklu mesaj iletmek istediğiniz alanlar. NOT: Bu seçenek sadece Animasyonlu Metin (Dönen) modunda gösterilir ve kullanılır.
Vurgulanacak Metin
: Sitenizdeki aktif her bir dil için vurgulamak istediğiniz kelime(ler)i girin. Örn: harika. "Tasarımın [kalbi] burada atıyor." gibi tek bir kelimeye odak çekmek istediğiniz yerler. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Bitiş Metni
: Sabit olarak gösterilecek olan cümlenin son parçasını girin. Sitenizdeki aktif her bir dil için ayrı ayrı girmelisiniz.

Bileşen Seçenekleri

Animasyon Türü
: Kelimelerin geçiş efektini seçin. NOT: Bu seçenek sadece Animasyonlu Metin (Dönen) modunda gösterilir ve kullanılır.
Kullanabileceğiniz Mevcut Efektler:
- Panjur (Blinds)
- Kırpma (Clip)
- Döndürme (Flip)
- Sönme (Fade)
- Yükleniyor Çubuğu (Loading Bar)
- İtme (Push)
- Ölçekleme (Scale)
- Kaydırma (Slide)
- Daktilo (Typing)
- Dalgalanma (Wave)
Vurgu Şekli
: Odak metin vurgulama svg şeklini seçin. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Kullanabileceğiniz Mevcut Efektler:
- Arkaplan Dolgusu
- Daire
- Çarpı
- Diyagonal Çizgi
- Üstü Çizili
- Kare/Dikdörtgen
- Alt ve Üst Çizgi
- Alt Çizgi:
- Çift Alt Çizgi
- Karalama Alt Çizgi
- Zigzag Alt Çizgi
- Dalga
Animasyonlu/Vurgulanmış Metin Rengi
: Yalnızca animasyonlu/vurgulu olan odak metninin regini seçin.
Animasyonlu/Vurgulanmış Metin Yazı Tipi
: Yalnızca animasyonlu/vurgulu olan odak metninin 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ı Genişliği: Başlık metninin kalınlığını seçin - font-weight
Animasyon Hızı/Süresi
: Vurgu şekline ait animasyonun ne kadar süreceğiniz belirtin. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Animasyon Tekrar Sayısı
: Vurgu şekline ait animasyonun kaç tek tekrarlanacağını belirtin. 1 ile 10 arası bir değer seçebileceğiniz gibi sürekli tekrarlanması için "Sonsuz" seçeneğini seçebilirsiniz. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Çizgi Kalınlığı
: Vurgu şeklinin çizgi kalınlığını px cinsinden (px ibaresi olmadan burada belirtebilirsiniz. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Kenar Yuvarlaklığı
: Vurgu şeklinin bitiş köşe kenarlarının yuvarlatılmış olarak mı yoksa düz olarak mı gösterilmesini istediğinizi seçin. Evet seçeneğinde çizgilerin bitiş köşeleri yuvarlatılır. NOT: Bu seçenek sadece Vurgulama (Şekil/Çizim) modunda gösterilir ve kullanılır.
Başlık Tipi
: Tüm cümlenin hangi başlık html ögesi (H1, H2, H3, H4, H5, H6) ile gösterileceğini seçin.
Genel Metin Rengi
: Cümlenin sabit parçalarının (başlangıç ve bitiş metinleri) hangi renkte gösterilmesini istediğinizi seçin.
Genel Yazı Tipi
: Cümlenin sabit parçalarının (başlangıç ve bitiş metinleri) 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ı Genişliği: Başlık metninin kalınlığını seçin - font-weight
Dış Boşluk (Margin)
: 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.
İç Boşluk (Padding)
: 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.
İçerik Hizalama
: Tüm cümlenin sayfada nasıl hizalanacağını responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz. Metni (tüm cümleyi) sola, sağa veya ortalanmış şekilde hizalayabilirsiniz

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.