Prusa WiseCp Tema - Dokümantasyon - Eylem Çağrısı (CTA) Bileşeni

Eylem Çağrısı (CTA) Bileşeni Nedir?

Eylem Çağrısı (CTA - Call To Action), anında yanıt vermek veya anında satışı teşvik etmek için tasarlanmış herhangi bir metin için kullanılan bir pazarlama terimidir. Bir CTA çoğunlukla, bir kitleyi belirli bir şekilde hareket etmeye teşvik eden satış komut dosyalarına, reklam mesajlarına veya web sayfalarına dahil edilebilecek kelimelerin veya kelime öbeklerinin kullanımını ifade eder.

FonPageBuilder Eylem Çağrısı (CTA) bileşeni ile sayfalarınıza kolayca dikkat çekici ve yönlendirici alanlar ekleyebilirsiniz.

Eylem Çağrısı (CTA) 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.

Bileşen Seçenekleri

Arkaplan Tipi
: Eylem Çağrısı (CTA) Bileşeninin arkaplan tipini seçin.
- Yok
- Resim
- Renk
- Gradient
Arkaplan Resmi
: Eylem Çağrısı (CTA) için "Ortam Yöneticisi" aracılığıyla bir arkaplan resmi ekleyin veya yükleyin. Bu alan "Arkaplan Tipi" olarak Resim seçeneği seçildiğinde gösterilir.
Arkaplan Rengi
: Eylem Çağrısı (CTA) için arkaplan rengini seçin. Bu alan "Arkaplan Tipi" olarak Resim ve/veya Renk seçenekleri seçildiğinde gösterilir.
Arkaplan Gradient
: Eylem Çağrısı (CTA) için arkaplan rengini seçin. Bu alan "Arkaplan Tipi" olarak Gradient 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
Kaplama Tipi
: Eğer Eylem Çağrısı (CTA) bileşeni için bir arkaplan resmi seçtiyseniz içeriğin daha okunur olması için arkaplan resmi üzerinde bir kaplama (overlay) gösterebilirsiniz.
- Yok: Kaplama Gösterilmez.
- Tek Renk: Tek renkten oluşan bir kaplama gösterilir.
- Gradient (Çift Renk): Gradient (Çift Renk Geçişli) bir kaplama gösterilir.
Arkaplan Resmi Kaplama Rengi
: Kaplama Tipi olarak "Tek Renk" seçeneği seçildiğinde gösterilir.
Eylem Çağrısı 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 kaplama arkaplan resmi görünmeyecektir. Örn: rgba(0,0,0,0.9)
Eylem Çağrısı (CTA) 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
Padding (İç Boşluk)
: Eylem Çağrısı (CTA) kutusu içeriklerinin kutu kenarlarına olan mesafesini (padding - iç boşluk) belirtin.
Kenarlık Kullan
: Eylem Çağrısı (CTA) kutusu için kenarlık kullanmak istiyorsanız bu seçeneği etkinleştirin.
Kenarlık
: Eylem Çağrısı (CTA) 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
: Eylem Çağrısı (CTA) kutusunun köşelerini yuvarlatmak için kenar yuvarlatma değerini seçin. border-radius
Gölge
: Eylem Çağrısı (CTA) 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.

İçerik Ayarları

Başlık
: Sitenizdeki aktif her bir dil için Elyem Çağrısı (CTA) Başlığı olarak kullanmak istediğiniz metni girin.
Başlık Tipi
: Elyem Çağrısı (CTA) Başlığının hangi başlık html ögesi (H1, H2, H3, H4, H5, H6) ile gösterileceğini seçin.
Başlık Font Özellikleri
: Eylem Çağrısı (CTA) 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
Başlık Renk
: Eylem Çağrısı (CTA) başlığının metin rengini renk seçici aracılığıyla seçebilirsiniz.
İçerik
: Sitenizdeki aktif her bir dil için Eylem Çağrısı (CTA) içerisinde göstermek istediğiniz dikkat çekici ve etkileyici içerik metnini girin.
İçerik Font Özellikleri:
: Eylem Çağrısı (CTA) Kutusu içerik metnine ait font özelliklerini buradan ayarlayabilirsiniz. Boş bırakırsanız standart html ögesi stilleri 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
İçerik Renk
: Eylem Çağrısı (CTA) içeriğinin metin rengini renk seçici aracılığıyla seçebilirsiniz.
Simge Göster
: Eylem Çağrısı (CTA) içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin.
Simge
: Eylem Çağrısı (CTA) içerisinde göstermek istediğiniz simgeyi seçin. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Simge Yazı Boyutu
: Eylem Çağrısı (CTA) içerisinde göstermek istediğiniz simgenin yazı boyutunu piksel cinsinden (px) ibaresi olmadan ayarlayın. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Simge Renk
: Eylem Çağrısı (CTA) içerisinde göstermek istediğiniz simgenin rengini ayarlayın. Bu alan, "Simge Göster" seçeneği etkinleştirilmişse gösterilir.
Düğme - Konum
: Eylem Çağrısı (CTA) içerisinde göstermek istediğiniz düğmelerin konumunu seçin.
- Sağ: Eylem Çağrısı içeriği (simge, başlık, açıklama) solda, düğmeler ise sağda olacak şekilde yatay düzlemde gösterilir.
- Alt: Eylem Çağrısı içeriği (simge, başlık, açıklama) üstte, düğmeler ise altta olacak şekilde dikey düzlemde gösterilir.
Düğme - Öğeler
: Ekle düğmesine tıklayarak birden fazla Düğme Ö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.

DÜĞME STİLİ YAPILANDIRMA İPUÇLARI:

Eklediğiniz düğme için düğme düzenleme penceresindeki form alanlarının detaylı dokümantasyonu için lütfen Düğme (Button) Bileşeni dokümantasyonuna gözatın.

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. Eylem Çağrısı (CTA) 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-calltoaction-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.