Ünlü Web Sitelerinde Görüntülenen Abonelik Açılır Pencereleri Nasıl Oluşturulur

Pop-up'lar, ilgi alanlarına giren bilgilerle ziyaretçilerinizin dikkatini çekmek veya örneğin posta listenize abonelik yoluyla onlarla bağlantı kurmak için sıklıkla kullanılan bir kaynaktır.

Geçen hafta WordPress'te oluşturulan 75 ünlü web sitesini içeren bir gönderi yayınladığımız gerçeğinden yararlanarak, bu gönderide size tam olarak ünlü web sitelerinde kullanılan pop-up tasarımlarından bazılarını nasıl oluşturabileceğinize dair dört eksiksiz örnek göstermek istiyoruz. Bunu yapmak için, çok çeşitli açılır pencereler oluşturmak için Nelio Popup'ları ve bazılarında gösterilen iletişim formlarını eklemek için Nelio Forms'u kullanıyoruz.

George Michael'ın Web Sitesinde Görüntülenen Açılır Pencere

George Michael'ın büyük bir hayranıysanız, web sitesinde hâlâ müziğinin keyfini çıkarabilir ve hayatı hakkında daha fazla bilgi edinebilirsiniz. Siteye girdiğinizde, görünen ilk şey, sizi haber bültenine abone olmak için verileri doldurmanız gereken sayfaya götüren abonelik düğmesine tıklamaya davet eden büyük bir açılır penceredir.

Nelio Popups ile bu açılır pencerenin görünümünü ve hissini oluşturmak çok basittir. Herhangi bir açılır pencere oluşturmak için Nelio açılır pencere düzenleyicisi, blok düzenleyici gibidir: Sol tarafa fotoğraf ve sağ tarafa logo, metin ve birkaç düğme ekleyebileceğiniz Medya ve Metin bloğunu eklemeniz yeterlidir.

İlk buton olan abonelik butonunda üyelik formunun bulunduğu sayfanın linkini eklemeli ve ikinci butonun özelliklerinde de üzerine tıkladıktan sonra pencerenin kapanması gerektiğini belirtmelisiniz.

Pencerenin merkezde olduğunu, dolgu veya kenar boşlukları olmadığını belirttiğinizden ve açılır pencereyi kapatmak için bir simge eklediğinizden emin olun.

Ayrıca, görüntünün açılır pencerenin sol tarafının tamamını doldurması için, görüntünün tam genişlik hizalamasına ve bir Kapak görüntüsü stiline sahip olduğunu belirttiğinizden emin olmalısınız.

Bu durumda, sayfaya girdiğinizde açılır pencere hemen görüntülenir. Bunu yapmak için açılır pencerenin özelliklerinde, görüntülendiğinde herhangi bir sayfada açılmasını belirtebilirsiniz.

Son olarak, orijinal web'de, açılır pencere kapatıldıktan sonra web'e tekrar erişildiğinde tekrar gösterilmediğini görüyoruz. Bu davranışı tekrarlamak için, açılır pencerenin gelişmiş özelliklerinde, bir açılır pencerenin bir ziyaretçiye gösterilme sayısını sınırlayabilir ve belirli bir süre sonra tekrar göstermek isteyip istemediğinizi belirleyebilirsiniz.

İşte bu kadar, açılır pencereyi zaten aynı görünüm ve hisle oluşturdunuz.

Tabii ki, yazı tipi stilini değiştirebilir veya orijinaliyle aynı hale getirmek için bazı kenar boşlukları ekleyebilirsiniz. Ve önceki resimde görebileceğiniz gibi, bu durumda açılır pencereyi kapatma düğmesi onun içindedir.

Tom Jones Web Sitesinde Görüntülenen Açılır Pencere

İkinci bir örneğe bakalım. Tom Jones'un web sitesinde, çerez başlığını kabul ettikten sonra, web sitesinin sağ alt tarafında, onların posta listesine abone olmanız için basit bir açılır pencere görünür.

Bu durumda, sizi bir abonelik sayfasına yönlendiren bir düğme yerine, açılır pencerenin kendisi zaten bir e-posta adresi girmeniz gereken alanı ve abonelik düğmesini içerir.

Bu açılır pencereyi Nelio Popups ile nasıl oluştururuz? Bir başlık, bir metin ve bir form içeren açık kahverengi arka plan rengine sahip bir grup oluşturuyoruz (bunu Nelio Forms ile oluşturduk, ancak başka herhangi bir eklenti kullanabilirsiniz). Grupta, orijinaline daha çok benzemesi için ona biraz dolgu ekleyeceğiz.

Açılır pencerenin genişliği küçültülmüş olacak ve kenardan biraz kenar boşluğu eklemiş olacağımız sayfanın sağ alt kısmında görüntülenecektir.

Davranış hakkında, bu durumda açılır pencere, ana sayfaya girdiğinizde hemen görüntülenmez, ancak kısa bir süre sonra görünür. Bunun için açılır özelliklerde, gösterilmesinden önce bir gecikme belirleyebilirsiniz:

Ve daha önce olduğu gibi, açılır pencere kapatıldıktan sonra web'e tekrar erişildiğinde tekrar gösterilmemesini de sağlıyoruz. İşte bu kadar, yeni açılır pencereyi zaten oluşturdunuz.

Bir önceki görselde de görebileceğiniz gibi bu durumda orijinaline daha yakın olması için temada web üzerinde kullanılan yazı tipini yüklememiz gerekecek.

Nelio Forms ile bir form oluşturduğunuzda, spam'i kontrol etmek için Akismet ile entegrasyonun yanı sıra birkaç gönderme seçeneğiniz olduğunu unutmayın.

Kim Kardashian'ın Web Sitesinde Görüntülenen Popup

Kim Kardashian'ın web sitesi cilt bakımı güzellik ürünleri satıyor. İlk girdiğinizde ve birkaç saniye sonra ekranın ortasında aşağıdaki açılır pencere görünür:

Tahmin etmiş olabileceğiniz gibi, bu açılır pencereyi oluşturmak, önceki iki pencerenin "karışımı gibidir". Resmi sol tarafa eklediğimiz bir Medya ve Metin bloğu oluşturuyoruz ve daha önce olduğu gibi, tüm alanı kapladığından ve açılır pencerede kapak resmi türünde olduğundan emin oluyoruz. Sağ tarafta başlık, alt başlık, form ve biraz daha metin ekliyoruz.

Bu durumda, kapatma düğmesi olarak ortasında çarpı işareti olan yuvarlak gri bir simge seçtik. Ve davranış öncekiyle aynıdır: yani, görüntülenmesinde bir gecikme olur ve pencere kapatıldıktan sonra bir süre kullanıcıya tekrar gösterilmez.

Selena Gomez Web Sitesinde Görüntülenen Açılır Pencere

Selena Gomez web sitesi ayrıca abone olmak için sayfanın ortasında bir açılır pencere gösterir.

Bu durumda form yalnızca bir e-posta adresi istemez, aynı zamanda ülkeyi ve tam olarak nereye abone olacağımızı belirttiğimiz bir dizi onay kutusunu da seçmenizi ister. Nelio Forms, ülke seçici ve bir grup onay kutusu dahil olmak üzere farklı türde alanlar eklemenize olanak tanır:

Ayrıca, gelişmiş özelliklerde, form bilgilerinin nasıl saklanacağını veya Mailchimp'e kaydedilmesini isteyip istemediğinizi belirtebilirsiniz.

Pencereyi kapat simgesini ve açılır pencere davranışı özelliklerini eklemeyi unutmayın ve… işte bu kadar! Yeni açılır pencerenizi oluşturdunuz.

Özet

Daha fazla ziyaretçinin posta listenize abone olmasını istiyorsanız, onları davet etmek için açılır pencereler oluşturabilirsiniz. WordPress ile sorunsuz bir şekilde entegre olan Nelio Popups ve Nelio Forms eklentileri ile, ünlü web sitelerinde görüntülenen bazı açılır pencereleri kopyalamanın ne kadar kolay olduğunu göreceksiniz.

Bu eklentileri kullanmanın en büyük avantajı, WordPress'iniz için herhangi bir harici araç kullanmayacak olmanız ve pop-up'lar oluşturmak için temanızın stilleri ve görünümü ile zaten bildiğiniz blok düzenleyiciyi kullanabilmenizdir. Onları denemenizi tavsiye ederim ve herhangi bir sorunuz veya yorumunuz varsa bizimle iletişime geçmekten çekinmeyin.

Unsplash'ta Pablo Heimplatz tarafından öne çıkan görsel.