İnternette İstediğiniz Gibi Çevrimiçi Para Kazanma!
Blogs

Kalıcı açılır pencereler nasıl oluşturulur? / Önyükleme & jQuery & css

Şu yazıyı okuyorsunuz: Kalıcı açılır pencereler nasıl oluşturulur? / Önyükleme ve amp; jQuery & css

Kalıcı açılır pencereler genellikle web’de bülten aboneliklerini başlatmak, bildirimleri/uyarıları görüntülemek ve kayıt ve oturum açma formlarını kontrol etmek için kullanılır.

Kullanarak kalıcı açılır pencereler oluşturmanın birkaç yolunu kullanabilirsiniz. Html, cssVe JavaScript. Bu nedenle, şimdi özellikle aşağıdakileri adım adım öğreneceksiniz: Bootstrap Modal Açılır Penceresi, jQuery kalıcı açılır penceresiVe CSS Modal Açılır Penceresi.

Ardından, son olarak size pop-up’lar oluşturmanın ve uygulamanın çok basit ve uygulanabilir bir yolunu vereceğim. Ancak önce öğrenmeniz gerekir kalıcı açılır pencereler neden kullanılıyor? Ve neden bu kadar önemliler.

Bir iletişim kutusu veya kalıcı açılır pencere, en son güncellenen web sayfasının görüntülenmesine yardımcı olur. Kalıcı bir açılır pencerenin faydası eklenen bilgileri gösterir ve sayfayı yeniden yüklemez. Daha iyi bir kullanıcı deneyimi için önemlidir çünkü onlara benzer bir web sayfasındaki açılır kutuda ilgili bilgileri görme olanağı verir.

Modlar etkinleştirilene kadar sessiz kalır ve genellikle kullanıcıyı aktif olmak için tek bir aramaya odaklamak veya kayıt formları ve uyarılar gibi bilgileri vurgulamak için kullanılır.

Modal Popup’ların dahil olduğu birçok yer var:

  • Talep/iletişim formları

  • Kayıt/Potansiyel Müşteri Yaratma Formları

  • Giriş/Kayıt Formları

  • Arama formları

  • Uyarılar/bildirimler

  • Yardım ipuçları

  • Görüntüleri ve videoları tam ekranda görüntüleme

Hedefleriniz etrafında açılır pencereler oluşturabilirsiniz. Örneğin Alpma, kullanıcıların sitenin herhangi bir yerinden giriş yapmasına olanak tanır.

Kalıcı açılır pencere girişi.Kalıcı açılır pencere girişi.

Açılır pencerelerin kullanımları konusunda kötü bir üne sahip olmasına rağmen, bunları doğru kullandığınızda aşağıdaki şekillerde yararlanabilirsiniz:

  • Web sitenizin kullanılabilirliğini artırın.
  • yükleme sürelerini azaltın.
  • tüm tasarımları netleştirin.

Kalıcı açılır pencerelerin neden bu kadar önemli olduğunu öğrendikten sonra artık bunları nasıl oluşturacağımızı öğrenebiliriz.

Yukarıda okuduğunuz gibi kalıcı açılır pencereler, kullanıcıların başka bir yere taşınmadan önce işlem yapabilmelerine yardımcı olur. Bazen kullanıcıları uyarmak veya bilgi almak için kullanılabilir.

Bootstrap modal eklentisi, çok kullanışlı ve işlevsel kalıcı açılır pencereler veya diyaloglar oluşturmanıza yardımcı olur. Üstbilgi, altbilgi ve ileti gövdesiyle kendi kalıcı açılır pencerenizi nasıl oluşturabileceğinizi anlamak için aşağıdaki örneğe başvurabilirsiniz.

“myModal” class = “modal-fade”> < div class = "modal-dialog" >

aralık>

“Belge nesne modeli” JavaScript aracılığıyla yüklendiğinde pencere otomatik olarak açılacaktır.

Bootstrap kalıcı açılır penceresinin görüntüsü.Bootstrap kalıcı açılır penceresinin görüntüsü.

jQuery kalıcı iletişim kutuları, bilgileri hızlı bir şekilde görüntülemenin harika bir yoludur. JQuery modal diyaloglarını oluştururken doğru bir şekilde hazırlanırsanız harika web siteleri ile kullanıcılarınızı uyarabilir veya hataları görüntüleyebilirsiniz. (Çağdaş modele göre!)

Şimdi jQuery örneğine bakalım!

$(document).ready(function(){ $(“düğme”).click(function(){ $(“#test”).hide(); }); } );

Bu bir başlık

Bu bir paragraf.

Bu başka bir paragraf.

Beni tıkla< /düğme>

Bundan sonra aşağıdakileri görebilirsiniz:

jQuery kalıcı açılır pencere örneği.jQuery kalıcı açılır pencere örneği.

CSS, HTML öğelerinin ekranda nasıl görüntüleneceğini açıklayan bir dildir. Bu nedenle önce HTML’ye bakıyoruz, sonra CSS’yi inceliyoruz.

Kapalı

:target sözde sınıfını temel alan, yalnızca CSS’ye özgü bir model. Umarım faydalı bulursunuz.

Ardından CSS’yi ekleyin!

.modal-window { konum: sabit; arka plan rengi: rgba(255, 255, 255, 0,25); üst: 0; sağ: 0; alt: 0; sol: 0; z-endeksi: 999; opaklık: 0; olay işaretçisi: yok; -webkit geçişi: tümü 0,3 saniye; -moz-geçiş: tümü 0,3 saniye; geçiş: tümü 0,3 saniye; &:hedef { opaklık: 1; olay işaretçisi: öz; } &>div { genişlik: 400px; konum: mutlak; yukarı: %50; sol: %50; dönüştürme: çevir (-%50, -%50); dolgu: 2em; arka plan: #ffffff; renk: #333333; } başlık { yazı tipi ağırlığı: kalın; } h1 { yazı tipi boyutu: %150; kenar boşluğu: 0 0 15 piksel; renk: #333333; } } .modal-close { renk: #aaa; satır yüksekliği: 50 piksel; yazı tipi boyutu: %80; konum: mutlak; sağ: 0; metin hizalama: ortala; üst: 0; genişlik: 70 piksel; metin dekorasyonu: yok; &:hover { renk: #000; } } /* Demo Stilleri */ html, body { height: 100%; } body { yazı tipi: 600 18px/1.5 -Apple sistemi, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif; arka plan rengi: #f69d75; color: #555555 } a { color: inherit; } .container { görüntü: ızgara; yasla-içerik: merkez; hizalama öğeleri: merkez; yükseklik: 100vh; } .btn { arka plan rengi: #fff; doldurma: 1em 1,5em; kenarlık yarıçapı: 3px; metin dekorasyonu: yok; i { sağ dolgu: 0,3em; } }

Şuna benziyor mu:

CSS kalıcı açılır pencere örneği.CSS kalıcı açılır pencere örneği.

Kalıcı pop-up’larınızı kesinlikle herhangi bir amaç için ve web sayfanızda uygulandıkları her yerde oluşturabilirsiniz. Ancak kalıcı açılır pencereler oluşturmanın daha işlevsel ve basit bir yolu var.

Akıllı açılır pencere yaratıcısı Popupsmart her şeyi sizin adınıza yapar. İlk adım için neden bir açılır pencereye ihtiyacınız olduğunu belirlemeniz gerekir. Satış dönüşümünü artırmak, e-posta listesini büyütmek veya telefon çağrılarını artırmak olabilir. Bundan sonra hedeflerinizi seçerek sonraki adımlara geçebilirsiniz:

Aralarından seçim yapabileceğiniz birçok hazır şablon var. Hedef kitlenizi “Pop-up Reklam” ile yönlendirmek istiyorsanız şunu seçebilirsiniz:

Popupsmart Modal Açılır Pencere Örneği.Popupsmart Modal Açılır Pencere Örneği.

Veya “Ürün Promosyon Popup’ı” ile satış dönüşümünü artırmak istiyorsanız pop-up’ınız şu şekilde tasarlanabilir:

Promosyon için kalıcı açılır pencere. Promosyon için kalıcı açılır pencere.

Dönüşümü, etkileşimi ve satış oranını artırmak için mesajınızı ziyaretçi davranışına göre kısaca kişiselleştirebilirsiniz. Ayrıca Popupsmart, kullanıcılarına tüm web sitesi platformlarıyla uyumlu açılır pencereleri 1 dakika içinde yüklemelerine olanak tanır.

Satışlar için kalıcı bir açılır pencere örneği. Satışlar için kalıcı bir açılır pencere örneği.

İş hedefinizi ve uyumlu açılır pencere şablonlarınızı seçtikten sonra bunları Popupsmart’ın kullanımı kolay sistemiyle hiçbir teknik sorun yaşamadan özelleştirebilir ve yayınlayabilirsiniz.

Kalıcı açılır pencere entegrasyonu.Kalıcı açılır pencere entegrasyonu.

Wix açılır pencereleri ve Squarespace açılır pencereleri oluşturmak için Popupsmart’ı bu web sitesi oluşturucularıyla entegre olarak kullanabilirsiniz.

Umarım bu makale size kolayca açılır pencerelerin nasıl oluşturulacağı konusunda rehberlik eder. Bunları kullanarak yapmayı deneyebilirsiniz HTML, CSS veya JavaScript. Ancak zaman kaybetmemek, en dikkat çekici pop-up’ları hazırlamak ve en önemlisi dönüşümlerinizi kontrol etmek için Popupsmart’ı tercih etmelisiniz!

Popupsmart tasarımlarını detaylı incelemek için şunlara göz atmalısınız:

Açılır Pencere Tasarım Şablonları

Ayrıca WordPress’te eklenti olmadan nasıl açılır pencere oluşturulacağını biliyor musunuz? Hemen öğrenmek için ilgili yazıya gidin!

İlgili blog gönderileri

Basit Bir Açılır Pencereyle Blog Yazısı Etkileşimlerinizi Artırın

Web sitenizin ziyaretçilerini rahatsız etmeden YouTube izlenme sayınızı artırın

Web Siteniz için Tailwind Modal CSS Açılır Pencereleri Nasıl Oluşturulur

Zaman ayırdığınız için teşekkürler! 🤗

Size şunları öneriyoruz: