Oyunlaştırma Elementlerini Özelleştirmek için CustomCSS Nasıl Kullanılır?
Popup oluşturucumuzda oyunlaştırma öğelerimizin, özellikle piyango topu ve çark tekerleği renklerini nasıl özelleştireceğiniz konusunda size rehberlik edeceğiz.
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 popup oluşturucumuz içinde nasıl özelleştireceğiniz konusunda size rehberlik edeceğiz.
Adım 1: Elementi Tanımlama ve Seçme
Stil Adımına Git
Popup'ınıza eklemek istediğiniz oyunlaştırma elementini seçin. Daha sonra Popupsmart'ın popup oluşturucusundaki "Stil" adımına gidin.
Gelişmiş Sekmesini Aç
Editörde "Gelişmiş" sekmesini bulun. Gelişmiş özelleştirme seçeneklerine erişmek için üzerine tıklayın.
Elementi Tanımla
Gelişmiş özelleştirme 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-win yani çarkıfelek öğesini nasıl özelleştireceğinizi göstereceğiz.
Element ID'yi Kopyala
Elementi tanımladıktan sonra, özelleştirme için spin-to-win element ID'sini kopyalayın.
Adım 2: Özel CSS Stillerini Uygulamak
CSS Alanını Bul
Oyunlaştırma öğesinin ID'sini kopyaladıktan sonra, custom CSS kodunuzu eklemek için bir metin alanı bulacaksınız.
CSS Kodunu Ekle
CSS kodunuzu belirtilen alana yazın veya yapıştırın. Doğru stil için CSS kural setine uyduğunuzdan emin olun:
Çarkıfelek özelleştirmesi için, element ID ve renk adını değiştirerek aşağıdaki kodu kullanabilirsiniz:
pre code:not(.hljs):not([class*=language-]) { background: #f8f8f8; line-height: 1.5; display: block; overflow-x: auto; padding: 1rem !important; color: inherit; border-radius: 2px; }
.spin-to-win-p_csqbb7aoq0o0{ --spinToWinLeafColors1:#787670; --spinToWinLeafColors2:#787670; --spinToWinLeafColors3:#787670; --spinToWinLeafColors4:#787670; }
Piyango topu özelleştirmesi için, element ID ve renk değerlerini değiştirerek bu kodu kullanın:
#lottery-ball-ct0g8fzx37c0 { --lotteryBallBallColors1: #111; --lotteryBallBallColors2: #1111; --lotteryBallBallColors3: #111; --lotteryBallBallColors4: #C73000; --lotteryBallBallColors5: #F8E7AE; --lotteryBallBallColors6: #FF9473; --lotteryBallBallColors7: #ED7B57; --lotteryBallBallColors8: #892D11; }
Benzersiz Element ID'leri
Her elemanın benzersiz bir element ID'si vardır. Element ID'yi gerekli satıra kopyalamaya dikkat edin.
Denemeler Yapın
İ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.
Değişiklikleri Önizle
Seçilen öğeyi nasıl etkilediklerini görmek için popup oluşturucuda değişiklikleri gerçek zamanlı olarak önizleyebilirsiniz.
Kaydet ve Yayınla
CSS'nizin doğru biçimlendirildiğinden emin olun. Tüm ayarları tamamladıktan sonra popup'ınızı kaydedin ve yayınlayın. Popup'ınızın web sitenizde görünür olması için durum anahtarını açmayı unutmayın.
Açılır pencerenize özel CSS ekleme hakkında başka sorularınız mı var? Bize Ulaşın!
Bu rehber nasıl?