Prusa WiseCp Tema - Dokümantasyon

Video Bileşeni Nedir?

FonPageBuilder Video bileşeni ile sayfalarınıza, Youtube, Youtube Shorts, Vimeo ve MP4 video parçalarını kolayca ekleyebilirsiniz.

Video 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. Bu bileşen özelinde buraya gireceğiniz başlığı site önyüzünde video başlığı olarak gösterebilirsiniz ve istediğiniz şekilde biçimlendirebilirsiniz.
Bileşen Adını Göster
: Bileşen Adı alanında girdiğiniz metni Video Başlığı olarak göstermek istiyorsanız Evet Seçeneğini seçin.
Bileşen Adı Stil Ayarları
: Başlığı göstermeyi seçtiğinizde başlık stilini biçimlendirebileceğiniz alanları gösterir. Bu alanlar zorunlu değildir, boş bırakılabilir.
- 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 başlık rengini seçin. Bu alan Uyarı Kutusu Stili olarak Light (Açık/Aydınlık) Stil seçildiğinde gösterilir.
- Başlık Font Özellikleri: Uyarı Kutusu 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
- Bileşen Adı Margin (Dış Boşluk): Başlık ile video arasındaki mesafeyi ayarlayın.
  - Üst: Başlık üst margin (kenar boşluğu) değerini girin.
  - Alt: Başlık alt margin (kenar boşluğu) değerini girin.

Youtube Medya Ayarları

Video Tipi
: Eklemek istediğiniz video kaynağı türünü seçin (Youtube).
Video URL
: Eklemek istediğiniz youtube videosuna ait url adresini girin.

ÖNEMLİ NOT!

Buraya doğrudan video adresini girmelisiniz. Youtube Embed kodunu girMEyin. Site önyüzünde otomatik olarak video embed edilecektir. Tarayıcınızda https://youtube.com sitesine gidin. Eklemek istediğiniz videoyu bulun ve izlemek üzere tıklayrak video sayfasını açın. Tarayıcınızın "Adres Çubuğundaki" video url adresini kopyalayıp buraya yapıştırın. Örn: https://youtube.com/watch?v=VIDEOKODU.
Video Başlığı (Youtube)
: Sitenizdeki aktif her bir dil için Youtube Video Başlığını girin. Bu başlık site önyüzünde gösterilmez. Embed kodu ve ilgili videolar özelliği için kullanılmaktadır.
İlgili Videoları Göster
: Video oynatıldıktan sonra sadece kendi kanalındaki ilgili videoları göstermek için Eveti seçin.
Youtube Çerezlerini Kapat
: Gösterim davranış takibi yapmak için kullanılan çerezler olmadan gizliliği sağlayan Youtube modunu açın. Sitenizin GDPR değerini arttırabilir.
YouTube Shorts Ekle
: Eklediğiniz video bir Youtube Short Videosu ise bu seçeneği etkinleştirin.
Görünüm Oranı
: Youtube Shorts videosunun görünüm oranını seçin. Varsayılan Youtube Shorts videoları 9:16 (Dikey Dikdörtgen) görünüm oranına sahiptir. Sayfa mizanpajınıza uygun olarak görünüm oranını değiştrebilirsiniz. Bu alan, "Youtube Shorts Ekle" seçeneği etkinleştirilmişse gösterilir.

Vimeo Medya Ayarları

Video Tipi
: Eklemek istediğiniz video kaynağı türünü seçin (Vimeo).
Video URL
: Eklemek istediğiniz vimeo videosuna ait url adresini girin.

ÖNEMLİ NOT!

Buraya doğrudan video adresini girmelisiniz. Vimeo Embed/Paylaş kodunu girMEyin. Site önyüzünde otomatik olarak video embed edilecektir. Tarayıcınızda https://vimeo.com sitesine gidin. Eklemek istediğiniz videoyu bulun ve izlemek üzere tıklayrak video sayfasını açın. Tarayıcınızın "Adres Çubuğundaki" video url adresini kopyalayıp buraya yapıştırın. Örn: https://vimeo.com/VIDEOKODU.
Sahibi Göster (Vimeo)
: Video sahibini gösterir. Tüm videolarda desteklenir fakat video sahibinin izin vermesi gereklidir.
Sessiz Video (Vimeo)
: Video yüklendiğinde videoyu sessize alır. Görüntüleyenler oynatıcı üzerinden ses tercihlerini ayarlamaya devam edebilirler. Arkaplan videoları veya Chrome ve Safari gibi bazı tarayıcılardaki otomatik oynatma sınırlamasını geçmek için kullanılabilir.
Sahip profil Resmini Göster (Vimeo)
: Video sahibinin profil resmini gösterir. Tüm videolarda desteklenir fakat video sahibinin izin vermesi gereklidir.
Video Başlığını Göster (Vimeo)
: Video başlığını gösterir. Tüm videolarda desteklenir fakat video sahibinin izin vermesi gereklidir.

MP4 Medya Ayarları

Video Tipi
: Eklemek istediğiniz video kaynağı türünü seçin (MP4).
Video URL
: "Ortam Yöneticisi" aracılığıyla kendi sunucunuzda barındırdığınız MP4 formatındaki videonuzu yükleyin/seçin.
Poster Resmi
: Video yüklenene kadar yertutucu (pplaceholder) olarak gösterilecek video poster görselini "Ortam Yöneticisi" aracılığıyla yükleyin/seçin. Zorunlu değildir.
Kontrolleri Göster
: MP4 video oynatıcısındaki video denetim düğmelerinin gösterilip gösterilmeyeceğin, seçin.
Döngü (Loop)
: Video sona erdiğinde tekrar başlatılıp başlatılmayacağını seçin.
Sessiz Video (Mute)
: Videoyu sessiz olarak sunmak istiyorsanız seçin. Mobil gösterim için idealdir.
Otomatik Başlat (Autoplay)
: Videonun otomatik olarak başlatılıp başlatılmayacağını seçin. Not: Mobil cihazlarda Safari/Google Chrome gibi tarayıcılarda özel tarayıcı politikaları gereği videolar otomatik oynatılmayabilir. Bunun için "Sessiz Video" seçeneğini etkinleştirmeniz tavsiye edilir. Mobil cihazlarda, sessiz videolar otomatik olarak oynatılabilirler.

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. Video 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-video-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.