Widget'lar

Sayfanın köşesinde küçük bir pencere. İçeriğe müdahale etmez ve her türlü site düzenine uyar. Genişletilmiş sürüme sahip köşede banner’ın aksine, stilleri, sayfa kenarı mesafelerini veya z-index özelliğinin değerini değiştirmenize izin vermiyor.

1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, Seçenek Ekle düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar.

2. Her seçenek için açılır listeden widget türü seçin.

3. Ayarları belirtin:

   • Konum – Widget'ın site sayfasındaki konumu. Kullanılabilir seçenekler: Sol üstte, Sağ üstte, Sol altta ve Sağ altta.

   • Renk Teması: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın.

   • Başlık: Widget'ın başlık metni. Başlık, widget'in diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu yalnızca Varioqub’un genişletilmiş sürümünde ayarlayabilirsiniz.

   • Metin: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar.

   • Bağlantı adı – üzerine tıkladığınızda başka bir sayfaya geçeceğiniz bağlantının metni.

   • Bağlantı adresi – Bağlantılara tıklandığında geçişin yapılacağı sayfanın URL adresi.

   • Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün): Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre.

4. Widget'ın sitenizde yerleşimini ön görüntülemek için Deney kontrolü penceresini kullanın.

5. Kaydet ve çalıştır düğmesine basın.

Animasyonlu açılır pencere. Ekranın üst veya alt kısmına yerleştirilebilir. Kullanıcının dikkatini düğmeye çekmek için Pulse efektini kullanın.

1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, Seçenek Ekle düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar.

2. Her seçenek için açılır listeden widget türü seçin.

3. Ayarları belirtin:

   • Konum – Widget'ın site sayfasındaki konumu. Kullanılabilir seçenekler: Ekranın üst kısmında, Ekranın alt kısmında.

   • Renk Teması: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın.

   • Başlık: Widget'ın başlık metni. Varsayılan olarak başlık, widget'ın diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu ayarlamak için Manuel Stil Ayarlaması’nı kullanın.

   • Metin: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar.

   • Bağlantı adı – üzerine tıkladığınızda başka bir sayfaya geçeceğiniz düğmenin metni.

   • Bağlantı adresi – düğmeye tıklandığında giçişin yapılacağı sayfanın URL adresi.

   • Dikkat çekmek için düğme efekti – bağlantı içeren düğme animasyonu. Mevcut seçenekler: Efektsiz, Pulse.

   • Animasyon hızı: Widget görüntüleme animasyonunun hızı. Mevcut seçenekler: Hızlı, Orta, Yavaş ve Animasyon yok.

   • Banner görüntüleme zamanlayıcısı (saniye) – Sayfa yüklendikten sonra widget'in gösterileceği ana kadar saniye cinsinden zaman.

   • Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün): Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre.

   • z-index CSS özelliğinin değeri: Sayfadaki diğer katmanlara göre widget'ın konumunu belirler.

     Sayfa düzeni öğelerinden bazılarında kendi z-index özelliği belirtilmişse ve bu değer widget'ın varsayılan değerinden büyükse, widget bu öğe tarafından örtülecektir. Bu durumda, widget'ın tüm öğelerin üstünde olması için z-index değerini artırın.

   • Manuel stil ayarlaması: Stilleri manuel olarak ayarlamak, widget'ı sitenizin tarzına uygun hale getirmenizi sağlar. Böyle bir widget genel stilden ayrılmaz ve daha uyumlu görünür.

     Dikkat

     Stil düzenlemesi için yalnızca aşağıda sunulan CSS sınıfları kullanılabilir. Diğer stillerin değiştirilmesi, tüm sayfanın görünümünü değiştirebilir. Bu ayarları değiştirmek için CSS bilgisi gereklidir.

   Düzenlenebilir CSS sınıfları

   • .ymab-integration-banner-body – banner’ın boyut stilleri ve sayfaya ilk konum stilleri.
   • .ymab-integration-banner-body-visible – göründükten sonra, sayfaya göre banner konumunun stili.
   • .ymab-integration-banner-main – banner’ın iç kısmının temel stilleri.
   • .ymab-integration-banner-text-block – banner metin bloğunun genel stilleri (başlık ve başlığın altındaki metin).
   • .ymab-integration-banner-title – başlık stilleri.
   • .ymab-integration-banner-text – başlığın altındaki metnin stilleri.
   • .ymab-integration-banner-button-block – banner düğme bloğunun genel stilleri (bağlantı içeren düğmeler ve Kapat düğmeleri).
   • .ymab-integration-banner-button-link – bağlantı içeren düğme stilleri.
   • .ymab-integration-banner-close – Kapat düğmesinin stilleri.

   Örnek: CSS aracılığıyla görsel ekleme

   ''Ekran genişliğinde banner'' tipi widget’te ana metinden sonra bir görüntü eklemek için aşağıda verilen CSS kod örneğini kullanın. Bunun için ::after sınıfının .ymab-integration-banner-title sözde öğesi kullanılır.

   Kod:

   .ymab-integration-banner-title::after {
     content: "";
     display: block;
     width: 70px;
     height: 80px;
     position: absolute;
     right: 0;
     top: 0;
     background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig');
     background-size: cover;
     background-position: center;
     justify-self: center;
   }
   .ymab-integration-banner-text-block{
       position: relative;
   }
   

   Sonuç:

   

4. Widget'ın sitenizde yerleşimini ön görüntülemek için Deney kontrolü penceresini kullanın.

5. Kaydet ve çalıştır düğmesine basın.

Sitedeki en belirgin tam sayfa widget'i. Böyle bir banner, bağlantıya tıklamak veya pencereyi kapatmak zorunda kalacak olan kullanıcı tarafından kesinlikle fark edilecektir.

1. Metin veya biçimlendirme için birkaç seçeneği kontrol etmeniz gerekiyorsa, Seçenek Ekle düğmesine basın. Ayar için başka bir deneysel seçenek oluşacaktır. Seçenekler deney sırasında birbirinin yerini alacaklar.

2. Her seçenek için açılır listeden widget türü seçin.

3. Ayarları belirtin:

   • Renk Teması: Widget'ın, koyu veya açık olmak üzere, renk türü seçeneği. Web sitenizin renk şemasına göre seçim yapın.

   • Başlık: Widget'ın başlık metni. Varsayılan olarak başlık, widget'ın diğer öğelerine göre daha büyük bir yazı tipi ile yazılır. Boyutunu ayarlamak için Manuel Stil Ayarlaması’nı kullanın.

   • Metin: Widget'ın ana metnidir. Başlığın altında yer alır ve widget'ın özünü açıklar.

   • Bağlantı adı – üzerine tıkladığınızda başka bir sayfaya geçeceğiniz düğmenin metni.

   • Bağlantı adresi – düğmeye tıklandığında giçişin yapılacağı sayfanın URL adresi.

   • Animasyon hızı: Widget görüntüleme animasyonunun hızı. Mevcut seçenekler: Hızlı, Orta, Yavaş ve Animasyon yok.

   • Kapanıştan sonra yeniden görüntüleme zaman aşımı (gün): Kullanıcının widget'ı kapatması durumunda widget'ın yeniden görüntüleneceği gün cinsinden süre.

   • z-index CSS özelliğinin değeri: Sayfadaki diğer katmanlara göre widget'ın konumunu belirler.

     Sayfa düzeni öğelerinden bazılarında kendi z-index özelliği belirtilmişse ve bu değer widget'ın varsayılan değerinden büyükse, widget bu öğe tarafından örtülecektir. Bu durumda, widget'ın tüm öğelerin üstünde olması için z-index değerini artırın.

   • Manuel stil ayarlaması: Stilleri manuel olarak ayarlamak, widget'ı sitenizin tarzına uygun hale getirmenizi sağlar. Böyle bir widget genel stilden ayrılmaz ve daha uyumlu görünür.

     Dikkat

     Stil düzenlemesi için yalnızca aşağıda sunulan CSS sınıfları kullanılabilir. Diğer stillerin değiştirilmesi, tüm sayfanın görünümünü değiştirebilir. Bu ayarları değiştirmek için CSS bilgisi gereklidir.

   Düzenlenebilir CSS sınıfları

   • .ymab-integration-fullscreen-body: Tam ekran widget'ının sayfaya göre boyutu ve ilk konumu stilleri.
   • .ymab-integration-fullscreen-main: Tam ekran widget'ının iç kısmının ana stilleri.
   • .ymab-integration-fullscreen-main-visible: Tam ekran widget'ının göründükten sonra sayfaya göre konumunun stili.
   • .ymab-integration-fullscreen-close – × (Kapat) düğme stilleri.
   • .ymab-integration-fullscreen-block – banner metin bloğu (başlık ve başlığın altındaki metin) ve bağlantı içeren düğme için ortak stiller.
   • .ymab-integration-fullscreen-title – başlık stilleri.
   • .ymab-integration-fullscreen-text – başlığın altındaki metnin stilleri.
   • .ymab-integration-fullscreen-button-link – bağlantı içeren düğmenin stilleri.

   Örnek: CSS aracılığıyla görsel ekleme

   Widget türü ''Tam sayfa banner''’de ana metnin ardından bir görsel eklemek için aşağıda verilen CSS kod örneğini kullanın. Bunun için ::after sınıfının .ymab-integration-fullscreen-text sözde öğesi kullanılır.

   Kod:

   .ymab-integration-fullscreen-text::after {
     content: "";
     display: block;
     width: 110px;
     height: 120px;
     background-image: url('https://avatars.mds.yandex.net/get-lpc/1220100/7b110c0f-1d2c-4330-8dd2-ca4de3e8acb5/orig');
     background-size: cover;
     background-position: center;
     margin-top: 1em;
     justify-self: center;
   }
   

   Sonuç:

   

4. Widget'ın sitenizde yerleşimini ön görüntülemek için Deney kontrolü penceresini kullanın.

5. Kaydet ve çalıştır düğmesine basın.