İlk açılır pencereler Ethan Zukerman'ın tasarladığı senaryodan oluşturuldu.hébergement 90'ların başında Tripod'daki web sayfasının kullanıcıları, web sitesine yerleştirdiği reklamların sayısından şikayetçi olunca, bannerları, kullanıcı sayfaya eriştiğinde açılan ayrı bir sayfaya yerleştirmeye karar verdi.
Bu küçük kod parçası, şu anda her web sitesinde gördüğünüz gibi hala gerçek bir açılır pencere değildi, ama her şey burada başladı. Modern web sayfalarında, pop-up'lar yalnızca reklamlar için değil, farklı amaçlar için kullanılır. İletişim formları, gizlilik politikası uyarıları ve abonelik önerileri de genellikle açılır pencereler olarak sunulur.
Pop-up'lara gelince kullanıcıları rahatsız eden iki şey var: istemediğiniz zaman üzerinize atladıklarında; ve görünüşü tamamen web sitesinin tarzından farklı olduğunda. Bu iki sorun, en yüksek kalitede görünmeyen eklentileri kullandığınızda ortaya çıkar.
Acemi geliştiricilerin kullandığı çoğu eklentinin en büyük sorunu pop up oluşturma ortaya çıkan mesaj üzerinde kontrol eksikliğidir. Ancak, Elementor'u kullanırsanız tüm bu sorunlardan kaçınabilirsiniz. web sitesi oluştur.
Özellikle Elementor için oluşturulmuş iki harika eklenti Page Builder, ihtiyacınız olan her tür, şekil ve stilde açılır pencereler oluşturmanıza yardımcı olur – Elementor Popup Builder et JetPopup. Her ikisi de Elementor ile aynı etten yapıldığından, sorulması gereken tek soru bu eklentilerden hangisini seçeceğinizdir. Bu kararı vermenize yardımcı olmak için, her ikisinin de kapsamlı bir incelemesini yapacağım ve bunların artılarını ve eksilerini karşılaştırabilirsiniz. O zaman hadi gidelim !
İndirme ve yükleme
Bu, hangi eklentiyi kullanacağınızı seçerken en önemli kriter değildir, ancak denemek için önce onu edinmeniz gerekir. Bu yüzden en baştan başlayacağım ve bunu elde etme sürecini özetleyeceğim - fiyatlandırma, gereken çaba ve kurulum sürecinin basitliği.
Popup Builder
Bu eklenti, Elementor ekibi tarafından oluşturulmuştur. Bu nedenle ona gerçek "çocuğu" diyebiliriz. Bu, müşteri ihtiyaçlarını karşılamak için Ocak 2019'da yayınlanan Elementor için son güncellemedir. Ancak, Elementor'un ücretsiz sürümünün kullanıcıları için mevcut değildir.
Popup Builder, profesyonel abonelik planına dahildir. Bu nedenle, pop-up oluşturma yeteneğine sahip olmak için önce Elementor Pro'ya sahip olmalısınız. Tek bir web sitesi için tüm Elementor'un çeşitli özelliklerini kullanmanıza izin veren en basit fiyatlandırma planı yıllık 49 dolardır. Bu nedenle, ilk adımlardan (Elementor Pro'nun satın alınması), Popup Builder'ı elde etmek için algoritma:
- Pro Elementor'u Satın Alın Page Builder.
- Kişisel hesabınıza gidin ve eklentiyi indirin.
- Web sitenizin kontrol paneline gidin, Eklentiler> Yeni ekle, "Eklenti yükle" düğmesini tıklayın ve uygun .zip dosyasını seçin.
- Kurulum tamamlandığında, eklentiyi lisans anahtarınızla etkinleştirin.
- Popup Builder, Şablonlar> Açılır Pencereler sekmesinde bulunabilir.
Bu biraz uzun bir yol, ancak Popup Builder ile ayrıca Elementor'dan widget'lar, şablonlar ve diğer ek araçlar gibi çok sayıda farklı öğe koleksiyonu elde edersiniz.
Popup Builder
JetPopup
Jet eklentilerinin "ailesi" zaten 10 makalesinden daha fazlasını içeriyor ve JetPopup da onlardan biri. Elementor için özel olarak özenle yaratılmıştır ve mevcut araç sayısını arttırır. Bu eklenti t
Ücretsiz ve ücretli sürümlerle tam uyumlu. Yani herhangi bir ek alım yapmanıza gerek kalmaz. JetPopup 15 dolara mal oluyor ve bir kez aldığınızda onu sadece bir web sitesi için kullanabilirsiniz. Birden fazla proje için ihtiyacınız varsa, eklentiyi geliştiricinin lisansı altında satın alabilir (size 45 dolara mal olacak) ve beş web sitesi için kullanabilirsiniz. Eklentiyi edinme algoritması biraz daha basittir:
- Eklentiyi TemplateMonster Marketi'nden satın alın. Bilgisayarınıza indirilecektir.
- Web sitenizin kontrol paneline gidin, Eklentiler> Yeni ekle, "Eklenti yükle" düğmesini tıklayın ve uygun .zip dosyasını seçin.
- Kurulum tamamlandığında eklentiyi etkinleştirin.
- İşte bu kadar! Elementor özelleştirme menüsünü açtığınızda ("Elementor ile Düzenle" düğmesine tıklayarak), widget'ın sol menüsünde JetPopup bölümünü bulacaksınız.
Pop-up oluşturma
Şimdi, araçlar orada ve hazır olduğunda, her iki eklentiyle bir açılır pencere oluşturmayı deneyebilirim ve özelliğin ne kadar basit ve anlaşılabilir olduğunu görebilirim. Sonra, temel bir pop-up oluşturacağım ve Popup Builder ve JetPopup için özelleştirme seçeneklerine bir göz atacağım.
Popup Builder
Pro Elementor'da açılır pencereler site sayfalarından ayrı olarak yapılır. Web sitesinin görünümünü değiştirmek için, özelleştirmek istediğiniz sayfayı açın, “Elementor ile Düzenle” düğmesine tıklayın ve değişiklikleri yapın. Ancak pop-up'lar oluşturmak (ve sonra düzenlemek) için Şablonlar> Açılır Pencereler'e gidip "Yeni açılır pencere ekle" düğmesine basmanız gerekir.
Pop-up Builder'ı Şimdi Deneyin
Açılan pencerede, oluşturacağınız şablonu seçmeniz gerekir (evet, yalnızca açılır pencereler için değil, sayfalar ve diğer öğeler için de şablonlar oluşturabilir) ve ona bir ad verebilirsiniz.
"Şablon oluştur" butonuna bastıktan sonra, Elementor kişiselleştirme menüsüne yönlendirileceksiniz. Mevcut bir öğeyi sıfırdan inşa ederek özelleştirmek daha kolaydır. Bu nedenle ilk önce uygun bir model seçmeniz istenecektir.
Kitaplık listesinin en üstünde görüntülenen modellerden birini seçtim. Seçimden hemen sonra, muhtemelen alıştığınız Elementor çalışma alanına inersiniz. Kişiselleştirme seçenekleri, ekranın sol tarafındaki kenar çubuğuna yerleştirilmiştir. Burada üç sekmeniz var.
"Ayarlar" sekmesi, açılır pencerenin düzenini değiştirmenizi, modelin adını ve önizlemesini değiştirmenizi sağlar. "Stil" sekmesinde, tasarımı özelleştirebilirsiniz - renkleri, yazı tiplerini, görüntüleri ve kenarlıkları değiştirin. "Gelişmiş" sekmesinde ayrıca bir dizi ek sürgü vardır; Örneğin, açılır pencerenin ESC tuşuyla kapanmasını önlerler.
Gördüğünüz gibi - beklenmedik bir şey değil, daha önce Elementor kullandıysanız, bu eklenti ile herhangi bir sorunla karşılaşmayacaksınız. Popup Builder'ı kullanarak bir açılır pencerenin nasıl oluşturulacağını açıklayan ayrıntılı bir video:
JetPopup
Bu eklenti aynı zamanda panonuza yeni bir sekme ekler. WordPress tema ve onun yardımıyla açılır pencereler de sayfalardan ayrı olarak oluşturulur. Kullanıma hazır açılır pencereler ayrıca "Açılır pencere kitaplığı" adlı bir sekmede saklanır. Yeni bir açılır pencere oluşturmak için, önceden tanımlanmış şablondaki "Ekle" düğmesine basabilir veya JetPopup > Yeni açılır pencere ekle'ye gidebilir, şablona bir ad verebilir ve "Elementor ile Düzenle"ye basabilirsiniz.
Çalışma alanı normdan biraz farklı çünkü şimdi daha küçük bir pencere yaratıyorsunuz. Soldaki menüde, açılır pencerenize istediğiniz türde bir öğe ekleyebilirsiniz.
JetPopup eklentisi, pencere öğesi menüsüne tek bir öğe ekler - bağlamsal işlem düğmesi. Bu, kullanıcı düğmeye bastığında gerçekleşecek eylem türünü tanımlamanıza olanak tanır.
Ayarların açılır pencereden açılması pek açık değildir. Menünün altındaki bakım düğmesine tıklamanız gerekir. Ayarlar menüsü Popup Builder'dakine oldukça benzer, ancak yalnızca iki özelleştirme sekmesi var. "Genel Ayarlar", bir animasyon efekti tanımlamanıza, modeli yeniden adlandırmanıza veya koşulları tanımlamanıza olanak tanır. "Stil" sekmesinde düzenleri, renkleri, resimleri, yazı tiplerini ve kenarlıkları değiştirebilirsiniz.
JetPopup biraz daha az belirgin bir işleve sahiptir, ancak ayrıntılı ve kullanışlı video dersleriyle telafi eder.
tetikleyiciler
Faydalı olmak ve ziyaretçileri rahatsız etmemek için açılır pencerelerin doğru zamanda görünmesi gerekir. Açılır pencerenin görüntülendiği koşullara "tetikleyiciler" denir. Mevcut koşullar ne kadar ayrıntılı olursa, açılır pencere eklentisi o kadar esnek olur. Abonelik formu açılır penceresi göründükten sonra kullanıcının siteden ayrılmasını istemiyorsanız, hassasiyet çok önemlidir.
Popup Builder
Bu eklenti, açılır pencereyi özelleştirdikten hemen sonra gerekli koşulları tanımlamanıza yardımcı olur. "Yayınla" düğmesine bastığınızda, koşulları (bu açılır pencerenin hangi sayfalarda görüntüleneceğini) tanımlayabileceğiniz pencereyi, tetikleyicileri (açılır pencere görüntülendiğinde) ve gelişmiş kuralları görürsünüz.
Popup Builder, tek bir kaydırma ve tıklamada görüntüleme gibi altı tetikleyiciye ve belirli cihazlarda belirli sayıda oturumdan sonra görüntüleme veya görüntüleme gibi yedi gelişmiş kurala sahiptir. Tetikleyiciler ve gelişmiş kurallar, basit kaydırma anahtarlarına sahiptir ve istediğiniz herhangi bir parametreyi ayarlamak çok hızlı olacaktır.
JetPopup
Tüm tetikleyiciler, koşullar ve açılış olayları parametrelerde birlikte gruplanır. Bakım düğmesine tıkladıktan sonra, ayarlar sekmelerini açarsınız ve tetikleyicileri hemen ayarlayabilirsiniz. Kaydırdıktan sonra sayfanın yüzdesini, görüntülenecek bağlam menüsünü veya kullanıcının mesajı göreceği saniye sayısını ayarlayabilirsiniz.
Pencere yalnızca bir kez veya kullanıcı belirli eylemleri her gerçekleştirdiğinde gösterilebilir (kesinlikle tavsiye etmiyorum - kullanıcıları mutlu etmeyecektir). Ayrıca, bu somut açılır pencerenin hangi yazıların veya sayfaların görüntüleneceğini çok hassas bir şekilde seçebilirsiniz. Genel olarak, bu eklenti oldukça esnektir ve pop-up'ları büyük bir hassasiyetle görüntülemenizi sağlar.
konumlandırma
Kullanıcılar, doğrudan ekranın ortasına atlayan pencerelerden kesinlikle kaçınamayacaklar, ancak web sitesi ziyaretçilerinin dikkatini dağıtıyorlar ve gerçekten can sıkıcı olabilirler. Pop-up'ların tümü ortaya yerleştirilmemelidir, üstteki dar şerit daha az fark edilir, ancak çok daha etkili olabilir. Bu, pencerenin konumunu kontrol etmeniz ve ekranda hareket edebilmeniz gerektiği anlamına gelir.
Popup Builder et JetPopup ekranı dokuz bölüme ayırın ve açılır pencerenizi bunlardan herhangi birine yerleştirmenize izin verin. Konumlandırma, sol-sağ ve yukarı-aşağı ölçekleriyle tanımlanır. Çok esnek değil, ancak bir pop-up için yeterli.
Animasyon efektleri
Pencerenin sayfada kayma (veya dönme veya atlama) biçimi çok önemlidir. Pencere çok hızlı veya çok yavaş hareket ediyorsa etkili olmayacaktır. Sıçrama, gıdıklama ve titreme de büyük bir hassasiyetle kullanılmalıdır. Animasyon efektleri siteyi daha dinamik hale getirir, ancak tüm izlenimi de bozabilir.
Popup Builder farklı yönlerde kaydırma, açma, yakınlaştırma, sıçrama ve döndürme dahil olmak üzere 36 tür giriş animasyonu vardır. Tüm bunlar, animasyonun süresiyle birlikte Ayarlar sekmesinin "Düzen" bölümünde bulunabilir.
Eklentide 13 tür animasyon vardır JetPopup, kaybolma, dikey çevirme, farklı slaytlar, zıplama ve yakınlaştırma dahil. Bunları Ayarlar sekmesinin "Ayarlar" bölümünde bulacaksınız.
modeller
Bazı durumlarda, belirli bir yapıya sahip bir açılır pencere oluşturmak ve nasıl görünmesi gerektiğini tam olarak bilmek istersiniz. Ancak bu oldukça nadir bir durumdur; çok daha sık olarak, açılır pencerenizin hangi öğeleri içermesi gerektiği hakkında hiçbir fikriniz yoktur. Şablonların kullanışlı olduğu yer burasıdır. Önceden yapılandırılmış örneklerin hiçbirini kullanmasanız bile, bunları işlemek size iyi bir genel bakış sağlayabilir. Ve elbette, kullanıma hazır bir öğeyi özelleştirmek, onu sıfırdan oluşturmaktan çok daha hızlı ve kolaydır.
Popup Builder Elementor'un model kitaplığına bir kategori ekledi. Size daha önce de söylediğim gibi, bunu yeni bir pop-up oluşturma sürecinin başında görebilirsiniz. Pop-up şablonlarının çeşitleri yeterince büyüktür; 100'den fazla öğe var. Sol üst köşede, açılır kategoriye göre bir sıralama aracı aramanızı hızlandırmanıza olanak tanır. Kategoriler anlaşılabilir ve ihtiyacınız olan pop-up'ı bulmanız uzun sürmeyecek.
JetPopup ayrıca büyük bir şablon kitaplığına sahiptir. Hepsi Bağlamsal Kitaplık sekmesinde saklanır ve önizleme düğmesi ve kullanım sayacı gibi kullanışlı özelliklere sahiptir. Daha fazla sıralama seçeneği vardır, liste belirli bir model türünü görüntüleyecek şekilde yapılandırılabilir ve ardından herhangi bir sıraya yerleştirilebilir; örneğin, oluşturma tarihine bağlı olarak. Size tam olarak mevcut model sayısını söyleyemem ama kesinlikle 100'ün üzerinde model var.
Karşılaştırma tablosu
| Elementor Popup Builder | JetPopup | |
| Fiyat | 45 $ | 15 $ |
| modeller | 100+ | 100+ |
| tetikleyiciler | 6 tetikleyiciler, 7 gelişmiş kurallar | Ek parametrelerle 5 açık olaylar |
| Animatio | 36 türleri | 13 türleri |
| Öğreticiler | belgeleme | dokümantasyon, 9 video eğiticileri |
Sonuç
Bu iki eklentiden hangisinin daha iyi olduğunu söyleyemem; onları yargılamak çok karmaşık. Her vaka ve her kişinin eklenti seçimi için kendi gereksinimleri vardır. Sanırım bunu kendiniz tanımlamalısınız - bu ikisinden hangisi sizin için en iyisi olacak? Web sitenize harika bir pop-up eklemede iyi şanslar dilerim!
