Popup Arka Plan Rengini Değiştirme
Web sitenizde benzersiz ve kişiselleştirilmiş bir kullanıcı deneyimi sağlamak istiyorsanız, açılır pencere arka plan rengini ayrı ayrı değiştirmeyi deneyebilirsiniz.
Bu kılavuzda, masaüstü cihazlarda gösterilecek popup'ın bir bloğunun arka plan rengini nasıl değiştireceğimizi ve custom CSS kullanarak mobil popup'ta nasıl farklı bir renk kullanacağımızı göreceğiz.
Başlamadan Önce
- Page ID ile cihaz türü arasında boşluk olmamalıdır.
- "Block" ile önceki tanımlar arasında bir boşluk olmalıdır.
- Cihaz türünü belirtmezseniz, değişiklikler tüm cihaz türleri için uygulanır.
Arka Plan Renklerini Nasıl Değiştirirsiniz
Page ID'yi Al
Sol kolonun arka plan rengini yalnızca masaüstü cihazlar için değiştirerek başlayalım. Bunun için popup'ınıza sağ tıklayın, açılan menüden İncele seçeneğini tıklayın ve "data-page-id" ile "data-device-type" property'lerini kopyalayın. Ardından, bir octothorp (#) ile başlayarak blok ID'nizi girin.
Masaüstü Rengini Ayarla
Sonra "background-color:" yazın ve istediğiniz rengi yazarak devam edin, örneğin "background-color:black".
Mobil ID'yi Al
Şimdi, mobil popup'ın arka plan rengini değiştirelim. Mobil popup'ınızı görmek için mobil cihaz simgesine tıklayın, daha sonra popup'a sağ tıklayın ve data-page-id ile data-device-type yazın. Örneğin "[data-page-id="79552a7a"][data-device-type='mobile']".
Mobil Rengini Ayarla
Arka plan rengini değiştirmek istediğimiz için tekrar "background-color:" yazacağız ve bu örnekte, aşağıdaki resimde görüldüğü gibi kırmızıyı seçeceğiz.
Örnek CSS Kodu
Bu tür bir değişiklik için, page ve block ID'yi 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; }
[data-page-id="79552a7a"][data-device-type='desktop'] #block-4l7gz0sar4k {
background-color:black;
}
[data-page-id="79552a7a"][data-device-type='mobile'] {
background-color:red;
}Unutmayın
CSS'nizin doğru biçimlendirildiğinden emin olun. Tüm ayarları tamamladıktan sonra popup'ı kaydedin ve yayınlayın. Popup'ınızı web sitenizde görünür hale getirmek için durum toggle'ını açmayı unutmayın.
Popup'ınıza custom CSS ekleme hakkında başka sorularınız mı var? Bize Ulaşın!
Bu rehber nasıl?