Kategoriler
active arrowHesap
active arrowBaşlangıç
active arrowKampanya Oluşturucu
active arrowGelişmiş Tasarım Özelleştirme
active arrowE-posta Kampanyası Özelleştirme
active arrowSegmentasyon ve Hedefleme
active arrowAnaliz
active arrowShopify
active arrowE-posta Pazarlama ve CRM Entegrasyonları
active arrowWeb Sitesi Platformları ve CMS Entegrasyonları
active arrowPopup'ınızın Genel Gelişmiş Ayarları Nasıl Değiştirilir?
active arrowPopup Kampanyalarıma Custom CSS Ekleyebilir Miyim?
active arrowCustom CSS Kullanarak Popup'un Kolon Grid Boyutu Nasıl Değiştirilir?
active arrowElementlere Custom CSS Ekleme
active arrowCustom CSS ile Kapatma Butonunun Boyutunu ve Yerini Düzenleme
active arrowPopup Arka Plan Rengini Değiştirme
active arrowOyunlaştırma Elementlerini Özelleştirmek için CustomCSS Nasıl Kullanılır?

Oyunlaştırma Elementlerini Özelleştirmek için CustomCSS Nasıl Kullanılır?

Oyunlaştırma Elementlerini (Gamification Elements) isteklerinize ve ihtiyaçlarınıza göre özelleştirmenin ne kadar kolay olduğunu biliyor musunuz?

Burada, oyunlaştırma öğelerimizin, özellikle de piyango topu ve çarkların renklerini nasıl özelleştireceğiniz konusunda size rehberlik edeceğiz.

Adım 1: Elementi Tanımlama ve Seçme

1. Popup'ınıza eklemek istediğiniz oyunlaştırma elementini seçin. Daha sonra Popupsmart'ın açılır pencere oluşturucusundaki "Stil" adımına gidin.

2. “Gelişmiş Stil” sekmesini seçin.

advanced section of a popup

3. Gelişmiş Stil sekmesinde, popup'ınızı oluşturan öğelerin bir listesini göreceksiniz. Değiştirmek istediğiniz oyunlaştırma elemanını tanımlayın. Örnek olarak, size spin-to-wiin yani çarkıfelek öğesini nasıl özelleştireceğinizi göstereceğiz.

4. Elementi tanımladıktan sonra, özelleştirme için spin-to-win element ID'yi kopyalayın.

popup selection

Adım 2: Özel CSS Stillerini Uygulamak

1. Oyunlaştırma öğesinin ID'sini kopyaladıktan sonra, custom CSS kodunuzu eklemek için bir metin alanı bulacaksınız.

custom css for gamification

2. CSS kodunuzu belirtilen alana yazın veya yapıştırın. Doğru stil için CSS kural setine uyduğunuzdan emin olun:

css codes for spin to wheel popup

Bu tür bir değişiklik için, element ID ve color name değiştirerek aşağıdaki kodu kullanabilirsiniz:

  
  .spin-to-win-p_csqbb7aoq0o0{
    --spinToWinLeafColors1:#787670;
    --spinToWinLeafColors2:#787670;
    --spinToWinLeafColors3:#787670;
    --spinToWinLeafColors4:#787670;
    }
‍💡 Not: Piyango topu öğenizi özelleştirmek için aynı adımları takip edebilirsiniz. Dikkatli olun; her elemanın benzersiz bir element ID'si vardır. Element ID'yi gerekli satıra kopyalamanız gerekir.
css codes for lottery ball popup

Bu tür bir değişiklik için, element ID ve color name değiştirerek aşağıdaki kodu kullanabilirsiniz:

  
    #lottery-ball-ct0g8fzx37c0 {
      --lotteryBallBallColors1: #111;
      --lotteryBallBallColors2: #1111;
      --lotteryBallBallColors3: #111;
      --lotteryBallBallColors4: #C73000;
      --lotteryBallBallColors5: #F8E7AE;
      --lotteryBallBallColors6: #FF9473;
      --lotteryBallBallColors7: #ED7B57;
      --lotteryBallBallColors8: #892D11;
    }

‍3. İstenilen görsel efekti elde etmek için yazı tipi boyutu, renk, arka plan ve daha fazlası gibi çeşitli CSS özellikleriyle denemeler yapın.

4. Seçilen öğeyi nasıl etkilediklerini görmek için popup builder'da değişiklikleri gerçek zamanlı olarak önizleyebilirsiniz.

💡 Not: CSS'nizin doğru biçimlendirildiğinden emin olun. Tüm ayarları tamamladıktan sonra, popup'ınızı kaydedin ve yayınlayın.

‍

Açılır pencerenize özel CSS ekleme hakkında başka sorularınız mı var? Bize Ulaşın!