Prusa WiseCp Tema - Dokümantasyon

Resim Bileşeni Nedir?

Görseller, bir web sayfasının ilgi uyandıran ve kullanıcı anlayışını ve deneyimini geliştiren en önemli unsurlarındandır.

FonPageBuilder Resim Bileşeni ile sayfanızda istediğiniz alana tekil olarak resim (görsel) ekleyebilir, görselinize stil ve efekt uygulayabilir, isterseniz LightBox (Açılır Pencere) ile açılabilir yapabilirsiniz.

Resim 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 eklenti özelinde "Bileşen Adını" site önyüzünde görsel için açıklama amaçlı kullanmak isteyebilirsiniz.
Bileşen Adını Göster
: Bileşen Adı alanında girdiğiniz metni site önyüzünde Resim Başlığı olarak göstermek istiyorsanız Evet seçeneğini seçin.
Bileşen Adı Konum:
Bileşen adının site önyüzünde hangi konumda gösterileceğini seçin. Bu alan, "Bileşen Adını Göster" seçeneği etkinleştirildiğinde gösterilir.
- Üst: Görselin üstünde gösterilir.
- Alt: Görselin altında gösterilir.
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. Bu alan, "Bileşen Adını Göster" seçeneği etkinleştirildiğinde gösterilir.
Başlık Rengi:
: Başlığı daha dikkat çekici bir renkte göstermek istiyorsanız başlık rengini seçin. Bu alan, "Bileşen Adını Göster" seçeneği etkinleştirildiğinde gösterilir.
Bileşen Adı Font Özellikleri:
: Başlığa ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız "Başlık Tipi" alanında seçtiğiniz html ögesinin stili uygulanır. Bu alan, "Bileşen Adını Göster" seçeneği etkinleştirildiğinde gösterilir.
- 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 görsel arasındaki mesafeyi ayarlayın. Bu alan, "Bileşen Adını Göster" seçeneği etkinleştirildiğinde gösterilir.
- Ü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.

Medya Ayarları

Resim
: Göstermek istediğiniz görseli "Ortam Yöneticisi" aracılığıyla seçin veya yükleyin.
Resim Alt Metni:
: Görsel için bir alternatif metin ekleyin. HTML'de <img> öğesi, bir görseli web sayfasında görüntülemek için kullanılır ve alt (alternative text) özniteliği, bu görselin açıklamasını sağlar. Örneğin: <img src="gorsel.jpg" alt="Dağ Manzarası" />
alt özniteliği birkaç önemli amaç için kullanılır:
1. Erişilebilirlik: Görme engelli kullanıcılar için ekran okuyucuları alt metnini okuyarak görselin içeriğini veya amacını anlatır.
2. Yedek Metin: Görüntü yüklenmezse veya erişilemezse, tarayıcı bu metni görüntüler.
3. SEO (Arama Motoru Optimizasyonu): Arama motorları, görsellerin içeriğini anlamak için alt metnini kullanır.
İçerik Hizalama
: Görselin bulunduğu alanda nasıl hizalanacağını seçin.
- Sol: Görsel sola hizalanır.
- Sağ: Görsel sağa hizalanır.
- Orta: Görsel ortalanmış olarak hizalanır.
Resim Genişliği
: Görselin responsive olarak her bir ekran çözünürlüğü için hangi genişlikte gösterilmesini istediğinizi belirtebilirsiniz. Herhangi bir değer belirtilmezse varsayılan görsel boyutu kullanılır ve responsive olarak max-width:100% özelliğine sahiptir. Bu, görselin en fazla bulunduğu alanın genişliği kadar genişliğe sahip olabileceği anlama gelir.
Resim Yüksekliği
: Görselin responsive olarak her bir ekran çözünürlüğü için hangi yükseklikte gösterilmesini istediğinizi belirtebilirsiniz. Herhangi bir değer belirtilmezse varsayılan görsel boyutu kullanılır ve responsive olarak height: auto özelliğine sahiptir. Bu, görsel yüksekliğinin genişliğine göre otomatik olarak ayarlanacağı anlamına gelir.
Kenarlık Kullan
: Görsel için kenarlık kullanmak istiyorsanız bu seçeneği etkinleştirin.
Kenarlık
: Görsel 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
Padding (İç Boşluk):
: Görsel ile kenarlık arasında kalan mesafeyi (padding) seçin.
Kenar Yuvarlatma
: Görsel bileşeninin köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Görsel çerçevesine 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.
Lightbox'ta Aç:
: Görsele tıklandığında, görseli bir Lightbox (açılır pencere) içinde açmak için bu seçeneği etkinleştirin.
Kaplama Tipi
: Kullanıcı fare işaretçisi ile Görsel bileşenin üzerine geldiğinde görselin üzerinde bir kaplama gösterilir. Gösterilecek olan kaplama arkaplanını buradan seçebilirsiniz. Bu alan, "Lightbox'ta Aç" seçeneği etkinleştirildiğinde gösterilir.
- Yok: Kaplama Gösterilmez.
- Tek Renk: Tek renkten oluşan bir kaplama arkaplanı seçebilirsiniz.
- Gradient (Çift Renk): Gradient (Çift Renk Geçişli) bir kaplama arkaplanı seçebilirsiniz.
Kaplama Rengi
: Kaplama Tipi olarak "Tek Renk" seçeneği seçildiğinde gösterilir.
Resim Bileşeni LigtBox Kaplaması için renk seçici aracı ile bir renk seçin. Kaplama renginin rgba formatında olmasına ve opaklık değerinin 1'den düşük olmasına dikkat edin. Aksi taktirde kaplama altında kalan görsel görünmeyecektir. Örn: rgba(0,0,0,0.9)
Kaplama Gradient
: Kaplama Tipi olarak "Gradient (Çift Renk)" 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
Link
: Görsele tıklanıldığında kullanıcıları yönlendirmek istediğiniz url adresini girin. Boş bırakılabilir. Bu alan, "Lightbox'ta Aç" seçeneği etkinleştirildiğinde gizlenir.

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. Resim 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-image-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.