FonPageBuilder Ekip Bileşeni Son Güncelleme: 04-07-2026
Ekip Bileşeni Nedir?
FonPageBuilder Ekip Bileşeni; şık ve dikkat çekici bir şekilde web sitenize kolayca ekip üyelerinizi / çalışma arkadaşlarınızı eklemenizi sağlar. Yönetim (organizasyon) şeması oluşturmak için kullanabileceğiniz gibi, güçlü ekibinizi tanıtmak amacıyla da kullanabilirsiniz. İsterseniz ekip üyelerinizi karusel slaydı olarak da gösterebilirsiniz.
Ekip 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ı
Ekip Bileşeni İçerik Ayarları bölümündeki Ekip - Ögeler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla Ekip Üyesi 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.
Ekip Öge Düzenleme Penceresi:
- Üye Adı: Ekip Üyesinin Adını girin. Örn: Ali Candan
- Ünvan/Pozisyon: Sitenizdeki aktif her bir dil için ekip üyesinin görevini / ünvanını girin.
- Üye Resmi: Ekip üyenize ait profil fotoğrafını "Ortam Yöneticisi" aracılığıyla seçin veya yükleyin.
- Sosyal Linkler: Ekip üyesine ait sosyal ağ linklerini ve/veya iletişim linklerini ekleyebilirsiniz. Tablo başlığı son sütununda yer alan düğmesine tıklayarak birden fazla sosyal iletişim linki ekleyebilirsiniz.
- Simge: Eklemek istediğiniz sosyal profil bağlantısı için bir simge seçin. Örn: facebook için veya e-posta adresi için
- Link: Ekip üyenizin sosyal ağ profil linkini girin. Örn: facebook için
https://facebook.com/profil-adresiveya e-posta içinmailto:ekipuyeniz@eposta-adresi.com
Bileşen Seçenekleri
- Stil: Ekip bileşeninin sayfanızda hangi stilde gösterilmesini istediğinizi seçin.
STİL ÖNİZLEMELERİ
Ekip Bileşeni gösterim stili demolarını görüntülemek için Ekip Stilleri sayfasını ziyaret edebilirsiniz.
- Kaplama Tipi: Ekip Üyesi içerik kutusu üzerine gelindiğinde kutu içeriği üstünde bir kaplama (overlay) gösterilir. Gösterilecek olak kaplama arkaplan tipini buradan seçebilirsiniz. NOT: Kaplama özelliği tüm Ekip Stilleri için uygulanabilir olmayabilir.
- Tek Renk: Tek renkten oluşan bir kaplama gösterilir.
- Gradient (Çift Renk): Gradient (Çift Renk Geçişli) bir kaplama gösterilir.
- Kaplama Rengi: Kaplama Tipi olarak "Tek Renk" seçeneği seçildiğinde gösterilir.
Ekip Üyesi Arkaplan 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 kaplamanın altında kalan içerikler (görsel vb.) görünür olmayacaktır. Örn:
rgba(0,0,0,0.9) - Kaplama Gradient: Kaplama Tipi olarak "Gradient (Çift Renk)" seçeneği seçildiğinde gösterilir.
Kaplama gradient renklerinin rgba formatında olmasına ve opaklık değerinin 1'den düşük olmasına dikkat edin. Aksi taktirde kaplamanın altında kalan içerikler (görsel vb.) görünür olmayacaktır. Örn:
rgba(0,0,0,0.9)- 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 Hedefi: Ekip üyelerine ait sosyal medya iletişim simgelerine tıklanıldığında ilgili profil linkinin aynı tarayıcı penceresinde mi yeni tarayıcı penceresinde mi açılacağını seçin.
- _self : Aynı Tarayıcı Penceresi
- _blank : Yeni Tarayıcı Penceresi
- Sütun Sayısı: Yatay düzlemde bir satırda kaç adet ekip üyesinin gösterileceğini responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz.
- Karusel Kullan: Ekip Üyeleri için karusel slaydı oluşturmak isterseniz bu seçeneği aktifleştirin.
- Yönlendirme Kontrolleri: Ekip Üyeleri 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: Ekip Üyeleri 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: Ekip Üyeleri 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: Ekip Üyeleri 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ü: Ekip Üyeleri 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
@widgetIdibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Ekip 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-team-widgetcss 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.