Mysia WiseCp Tema - Dokümantasyon - Müşteri Logoları Bileşeni

Müşteriler Bileşeni Nedir?

FonPageBuilder Müşteriler bileşeni; partnerleriniz, müşterileriniz, desteklediğiniz uygulamalar v.s. gibi öğeleri sergileyebilmenize yarayan özel bir eklentidir. Müşteriler bileşeni ile kullanım amacınıza uygun logo ve linkleri kolayca ekleyebilir, çeşitli efektler verebilir ve karusel slaydı olarak gösterebilirsiniz.

Müşteriler 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.
Müşteriler - Ögeler
: Ekle düğmesine tıklayarak birden fazla Müşteri Ögesi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz.
Müşteri Öge Düzenleme Penceresi:
- Resim: Müşteri Logosunu "Ortam Yöneticisi" aracılığıyla seçin veya yükleyin.
- Başlık: Başlık eklemek istiyorsanız bir başlık metni girebilirsiniz.
- Link: Logoya tıklandığında kullanıcıları bir web sayfasına yönlendirmek istiyorsanız bir url adresi girin.

Müşteriler Stil Ayarları

Müşteri logosunu barındıran her bir kutu için uygulanacak olan stil ayarlarını buradan yönetebilirsiniz. Farklı kombinasyonlarla temanıza bağlı kalmadan, tamamen kendinize özgü içerik gösterim stilleri oluşturabilirsiniz.

Görsel CSS Filtresi
: Müşteri logo görseline uygulamak istediğiniz css filtresini seçin.
- Yok: Herhangi bir css filtresi uygulanmaz.
- Gri Tonlama: Logo görseline gri tonlama css filtresi uygulamak için seçin. filter:grayscale(x).
- Saydamlık: Logo görseline saydamlık css filtresi uygulamak için seçin. filter:opacity(x).
- Bulanıklık: Logo görseline bulanıklık css filtresi uygulamak için seçin. filter:blur(x).
Gri Tonlama Filtre Değeri (%)
: Logo görseline uygulamak istediğiniz gri tonlama filtresinin değerini girin. Bu alan "Görsel CSS Filtresi" alanından "Gri Tonlama" seçeneği seçildiğinde gösterilir. filter:grayscale(10%)
Saydamlık Filtre Değeri (%)
: Logo görseline uygulamak istediğiniz saydamlık filtresinin değerini girin. Bu alan "Görsel CSS Filtresi" alanından "Saydamlık" seçeneği seçildiğinde gösterilir. filter:opacity(10%)
Bulanıklık Filtre Değeri (%)
: Logo görseline uygulamak istediğiniz bulanıklık filtresinin değerini girin. Bu alan "Görsel CSS Filtresi" alanından "Bulanık" seçeneği seçildiğinde gösterilir. filter:blur(10%)
Üzerinde Efekti
: Müşteri logo kutusu üzerine gelindiğinde uygulamak istediğiniz efekti seçin.
- Yok: Herhangi bir css efekti uygulanmaz.
- Ölçeklendir: Logo görseli belirtilen oranda büyültülür veya küçültülür. transform:scale(x).
- Yukarı Taşı: Logo görseli belirtilen oranda yukarı hareket eder. transform:translateY(x).
Ölçeklendirme Değeri
: Logo görselininin orijinal boyuta göre ölçeklendirmek istediğiniz değeri seçin. Değer 1 değerinden küçükse görsel küçültülür, büyükse görsel bu aranda büyültülür. transform:scale(1.2)
Yukarı Taşıma Değeri
: Logo görselininin kaç piksel yukarı hareket ettirileceğini belirtin. transform:translateY(10px)
Üzerindeyken Filtreyi Kaldır
: Logo görselinin üzerine gelindiğinde uygulanan CSS filtresinin kaldırılıp kaldırılmayacağını belirtin.
Kenarlık Kullan
: Müşteri Logo kutusu için kenarlık kullanmak istiyorsanız bu seçeneği etkinleştirin.
Kenarlık
: Müşteri Logo kutusu 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
Kenar Yuvarlatma
: Müşteri Logo kutusunun köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Müşteri Logo kutusuna 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 Seçenekleri

Başlığı Göster
: Müşteri logo kutusu içerisinde müşteri başlığını girebileceğiniz alan gösterilir. Müşteri ögesi içerisinde girdiğiniz başlık site önyüzünde logo altında görünecektir.
Başlık Font Özellikleri
: Müşteri Logo kutusu başlığına ait font özelliklerini buradan ayarlayabilirsiniz. Bu alan, "Başlığı 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
Link Hedefi
: Müşteri ögesi içerisinde girdiğiniz linklerin site önyüzünde yeni pencerede mi yoksa mevcut pencerede mi açılacağını belirtin.
- _self : Aynı Tarayıcı Penceresi
- _blank : Yeni Tarayıcı Penceresi
Sütun Sayısı
: Müşteri logosu kutularının yatay düzlemde kaç sütunda gösterileceğini (bir satırda kaç logo) responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz.
Karusel Kullan
: Müşteri logolarınız için karusel slaydı oluşturmak isterseniz bu seçeneği aktifleştirin.
Yönlendirme Kontrolleri
: Müşteriler karusel slaydında "Önceki" ve "Sonraki" ok işaretlerinin gösterilip gösterilmeyeceğini seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir. Bkz. Görsel - 1 Nolu Ögeler:
Sayfalandırma
: Müşteriler karusel slaydının altında kaç adet slayt olduğunu gösteren "Dairesel Sayfalandırma" ögesinin gösterilip gösterilmeyeceğini seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir. Bkz. Görsel - 2 Nolu Öge:
Otomatik Oynatma
: Müşteriler karusel slaydının otomatik olarak başlatılıp başlatılmayacağını seçin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
Üzerine Geldiğinde Duraklat
: Müşteriler karusel slaydının fare ile üzerine gelindiğinde slaydı duraklatmak istiyorsanız etkinleştirin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.
Döngü
: Müşteriler karusel slaydının sürekli tekrar edecek şekilde kesintisiz kaymasını istiyorsanız etkinleştirin. Bu alan, "Karusel Kullan" seçeneği etkinleştirilmişse gösterilir.

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. Müşteriler 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-clients-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