Custom CSS Kullanarak Popup'un Kolon Grid Boyutu Nasıl Değiştirilir?
Popup'larınızı özelleştirmenin en iyi yolunu bulmaya hazır mısınız? Custom CSS kullanarak popup'ınızdaki kolon grid boyutunu nasıl değiştireceğinizi öğrenin.
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.
Bazen kodlar çakışır, bu nedenle CSS'in kusursuz çalıştığından emin olmak için kodunuzun sonuna "!important" etiketi ekleyin.
Kolon Grid Boyutunu Nasıl Değiştirirsiniz
Stil Adımına Git
Yeni bir kampanya oluşturun, bir popup seçin ve Popupsmart'ın popup oluşturucusunun "Stil" adımına gidin.
Page ID'yi Bul
Popup'ınıza sağ tıklayın, açılan menüden İncele butonunu tıklayın ve "data-page-id" yi bulun. Köşeli parantezler içinde custom CSS penceresine yapıştırdıktan sonra, yalnızca masaüstünü hedeflemek için tekrar köşeli parantezler içinde data-device-type olarak desktop girin.
CSS Kodunu Yaz
Şimdi popup'ı ve blokları yeniden boyutlandıracağız. Bu örnekte, popup'ın daha büyük ve sol bloğun sağ taraftan daha büyük olmasını istiyoruz. Bunun için "min-width:900px;" ve "grid-template-columns: 70% 30%;" yazın.
İsteğe bağlı olarak, "box-shadow:none" yazarak popup'ın altındaki gölgeyi kaldırabilirsiniz.
Örnek CSS Kodu
Bu tür bir değişiklik için, page 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']{ min-width:900px; grid-template-columns: 70% 30%; box-shadow:none; }
Popup'ınıza custom CSS ekleme hakkında başka sorularınız mı var? Bize Ulaşın!
Bu rehber nasıl?