Elementlere Custom CSS Ekleme

Popup'ınızın tam da istediğiniz biçimde görünmesini ister misiniz? Elementlerin her birine custom CSS ekleyerek mükemmel bir uyum yakalayabilirsiniz.

Popupsmart elementlerinizin her birine custom CSS stilleri uygulamanıza izin veren güçlü bir özellik sunar. Bu, web sitenizin tasarımına ve markanıza uyan, görsel olarak çekici popup'lar oluşturma esnekliği sağlar.

Custom CSS ile e-posta girişini nasıl özelleştireceğinize dair bir örnek gösterelim:

Elementlere Custom CSS Nasıl Eklenir

Gelişmiş Sekmesine Eriş

Popupsmart popup oluşturucusunun "Stil" adımına gidin. Gelişmiş özelleştirme seçeneklerine erişmek için düzenleyicideki "Gelişmiş" sekmesini bulun ve tıklayın.

Popupsmart popup oluşturucusunun Stil adımı

Elementi Tanımla

Gelişmiş özelleştirme sekmesinde, popup'ınızı oluşturan elementlerin bir listesini göreceksiniz. Değiştirmek istediğiniz elementi belirleyin - bu popup başlığı, buton, görsel veya başka herhangi bir bileşen olabilir.

Popupsmart popup oluşturucusunun e-posta adresi elementi

Element ID'yi Kopyala

Elementi tanımladıktan sonra, özelleştirme için element ID'yi kopyalayın. CSS kodunuzda belirli elementi hedeflemek için bu ID'ye ihtiyacınız olacak.

Custom CSS Yaz

İstediğiniz element ID'sini kopyaladıktan sonra, custom CSS kodunuzu ekleyebileceğiniz bir metin alanı göreceksiniz. CSS kodunuzu belirtilen alana yazın veya yapıştırın ve doğru stil için CSS söz dizimine ve kurallarına uyduğunuzdan emin olun.

custom css kullanarak posta adresi elementinin boyutunu değiştirme

Önizle ve Kaydet

Yazı tipi boyutu, renk, dolgu, kenar boşluğu, arka plan ve daha fazlası gibi çeşitli CSS özellikleriyle denemeler yapın. Seçilen elementi nasıl etkilediklerini görmek için popup düzenleyicisinde değişiklikleri gerçek zamanlı olarak önizleyebilirsiniz.

Örnek CSS Kodu

Bu tür bir değişiklik 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; }

#email-input-cqz567kh0280
{
  background-color:skyblue;
  width:150px!important;
}

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?