Elementor Açılır Pencereleri (ve Nasıl Oluşturulur) İçin Eksiksiz Bir Kılavuz

Yayınlanan: 2022-06-04

Açılır pencere formları, e-posta adreslerini yakalamanıza, satışları teşvik etmenize ve daha pek çok şeye olanak sağlayan temel pazarlama araçları olabilir. Ancak, WordPress'te çekici ve özelleştirilmiş açılır pencereler oluşturmak her zaman kolay değildir.

Neyse ki, Elementor sayfa oluşturucu eklentisi, web sitenizde açılır pencereler oluşturmayı ve özelleştirmeyi kolaylaştırır. Bunları sitenizin tasarımına uyacak şekilde değiştirebilir ve kullanıcı davranışına veya kökenlerine göre tetikleyiciler ekleyebilirsiniz.

Bu kılavuz, farklı türdeki Elementor açılır pencerelerine ve bunları neden kullanmak isteyebileceğinize ilişkin bir genel bakış sağlayacaktır. Ardından, hem ücretsiz hem de Pro Elementor araçlarıyla bu açılır pencerelerin nasıl oluşturulacağını açıklayacağız. Başlayalım!

Elementor Pop-up'larına Genel Bakış

Elementor, WordPress web siteleri için en popüler sayfa oluşturucu eklentilerinden biridir. Güzel ve kullanıcı dostu sayfalar tasarlamak için öğeleri sürükleyip yerine bırakmanıza olanak tanır:

Elementor sayfa oluşturucu eklentisi
Elementor sayfa oluşturucu

Ayrıca Elementor, çeşitli açılır pencereler oluşturmanıza olanak tanır. Bunlar, önceden belirlenmiş bir süre sonra veya bir kullanıcı belirli bir işlemi tamamladıktan sonra sitenizde görünen özel formlardır.

Pop-up'lar çeşitli nedenlerle önemli araçlar olabilir. Bunları potansiyel müşteri toplamak ve e-posta pazarlama listenizi genişletmek için kullanabilirsiniz. Elementor açılır pencereleri, müşteri adreslerini doğrudan tercih ettiğiniz platforma göndererek e-posta pazarlama yazılımıyla entegre olur.

Bunları, e-ticaret mağazanızla ilgili satışları, indirimleri ve etkinlikleri tanıtmak için bile kullanabilirsiniz. Bu nedenle, pop-up'lar genel pazarlama stratejinizin ayrılmaz bir parçası olabilir.

Ayrıca, pop-up'lar müşterilerinizle bağlantı kurmanıza yardımcı olabilir. Tüketici geri bildirimi istemek ve ürün ve hizmetlerinizi geliştirmek için anketler yerleştirebilirsiniz.

Ancak, onları iyi tasarlamazsanız ve hedef kitleniz için doğru tetikleyicileri seçmezseniz, pop-up'lar ucuz ve müdahaleci görünebilir. Bu nedenle, bunları etkili bir şekilde kullandığınızdan emin olmanız gerekir. Elementor'un girdiği yer burasıdır.

Açılır pencere formları, e-posta adreslerini yakalamanıza, satışları artırmanıza ve daha pek çok şeye yardımcı olabilir. Bu kılavuzda kendinizinkini nasıl yapacağınızı öğrenin! Tweetlemek için tıklayın

Elementor Açılır Pencerelerinin Türleri

Elementor, ihtiyaçlarınıza göre özelleştirebileceğiniz 100'den fazla açılır pencere şablonuyla birlikte gelir. Bu tasarımlar şunları içerir:

  • Potansiyel müşteri yakalama formları
  • E-posta kaydı açılır pencereleri
  • Promosyon açılır pencereleri
  • Giriş ve karşılama formları
  • Kısıtlanmış içerik açılır pencereleri
  • Upsell ve çapraz satış formları

Bu açılır pencere şablonları, farklı türdeki web siteleri için çeşitli tasarım özellikleri içeren Elementor kitlerinde yerleşik olarak gelir:

ElementorKits'teki açılır pencere şablonları
ElementorKits açılır şablonları

Ayrıca, aşağıdakiler dahil olmak üzere farklı açılır pencere yerleşimleri ve görsel tasarımlar arasından seçim yapabilirsiniz:

  • kalıcı
  • sürgülü
  • Tam ekran
  • Üst veya alt çubuk

Son olarak, herhangi bir açılır pencere şablonunu ihtiyaçlarınıza göre hızla özelleştirmek için Elementor düzenleyicisini kullanabilirsiniz. Şimdi bunu ücretsiz ve Elementor Pro ile nasıl yapabileceğinizi açıklayacağız.

Elementor ile Pop-up Nasıl Oluşturulur (Ücretsiz)

Daha önce, Essential Addons for Elementor eklentisi, kullanıcıların ücretsiz bir açılır pencere formu oluşturmasını sağlayan bir Modal Açılır Pencere özelliğine sahipti. Bunu kullanmak, Elementor Pro için ödeme yapmanın en popüler yollarından biriydi. Bu yöntemi nasıl kullanacağınızı göstermek için birkaç yıl öncesine ait birçok öğretici video bulabilirsiniz.

Ancak, ücretsiz Modal Açılır Pencere özelliği, birinci sınıf bir Işık Kutusu ve Modal öğesine dönüşmüştür. Artık kullanımı ücretsiz değil. Bu nedenle, Elementor Pro'ya yükseltmeniz veya bu yazının ilerleyen bölümlerinde ele alacağımız premium Elementor eklentilerinden biri için ödeme yapmanız gerekecek.

Elementor Pro ile Pop-up Nasıl Oluşturulur (5 Kolay Adımda)

Elementor Pro, bu eğitimde kullanacağımız yerleşik bir Açılır Pencere özelliğiyle birlikte gelir. Önce Elementor Pro'yu satın almanız ve etkinleştirmeniz gerekir. Ardından, açılır pencereler oluşturmaya başlamak için WordPress panonuza gidebilirsiniz.

Adım 1: Pop-up'ınızı Yapın

WordPress kontrol panelinizde Elementor > Şablonlar > Pop-up'lara giderek başlayın. Ardından, yeni bir tane oluşturmak için YENİ POPUP EKLE'ye tıklayın:

Şablonlara yeni bir açılır pencere ekleyin
"Şablonlar"a gidin, ardından "Yeni Açılır Pencere Ekle"ye gidin

Ardından şablonunuzu adlandırmanız istenir. Bir ada karar verdikten sonra ŞABLON OLUŞTUR'u seçin:

Pop-up şablonunu adlandırın ve oluştur'a tıklayın
Pop-up şablonunuzu adlandırın ve “Oluştur”a tıklayın

Bu, Elementor sayfa oluşturucuyu başlatacaktır. Artık mevcut açılır şablon tasarımları arasından seçim yapabilir veya sıfırdan kendinizinkini oluşturabilirsiniz. Örneğimizde, düzenlemek için mevcut şablonlardan birini seçtik:

Elementor'da mevcut açılır tasarımlardan birini seçin veya sıfırdan bir tane oluşturun
Mevcut açılır tasarımlardan birini seçin veya sıfırdan bir tane oluşturun

Artık açılır pencerenizi özelleştirmek için tasarım ayarlarıyla oynayabilirsiniz. Örneğin, düzenini, hizalamasını, arka plan resimlerini ve renklerini değiştirebilirsiniz.

2. Adım: Görüntüleme Koşullarınızı Seçin

Tasarımınızdan memnun kaldığınızda, YAYINLA'nın yanındaki yukarı bakan oka tıklayın. Ardından, görünen menüden Koşulları Görüntüle'yi seçin:

Görüntüleme koşullarınızı seçin
Görüntüleme koşullarınızı seçin

Ardından, Elementor açılır pencerenizin web sitenizde nerede görüntüleneceğini seçmek için DURUM EKLE'ye basın. Ardından, aşağıdaki seçenekler arasından bir konum seçebilirsiniz: Tüm Site , Arşivler , Tekil veya WooCommerce :

Sitenizde açılır pencereyi nerede görüntülemek istediğinizi seçin
Açılır pencerenin nerede görüntülenmesini istediğinizi seçin

Seçiminizden memnun olduğunuzda, İLERİ'ye basın . Pop-up formunuz için Tetikleyicilere yönlendirileceksiniz.

3. Adım: Açılır Pencere Tetikleyicilerinizi Ayarlayın

Tetikleyiciler sayfasında, Elementor açılır pencerenizi görüntülemek için kullanıcıların ne yapması gerektiğine karar verebilirsiniz. Varsayılan olarak, her seçenek devre dışıdır ve kaydırıcıya tıklayarak etkinleştirebilirsiniz. Ardından, tetikleyiciniz için değerler belirtmeniz gerekir.

Örneğin, Sayfada Yükleme'yi seçerseniz, açılır pencerenizin kaç saniye içinde görüntüleneceğini seçmeniz gerekir:

Farklı açılır pencere tetikleyicileri seçin
İstediğiniz açılır pencere tetikleyicilerini seçin

On Scroll ile, kullanıcının hangi yöne kaydırması gerektiğini ve açılır pencere görünmeden önce sayfanın ne kadarını kaplaması gerektiğini seçebilirsiniz:

Sayfa kaydırma tetikleyicileri
Sayfa kaydırma tetikleyicileri

Öğeye Kaydırıldığında ayarı, bir CSS Kimliği girmenizi gerektirir. Bir kullanıcı sayfanızdaki o öğeye ulaştığında açılır pencere görünür:

Öğe tetikleyicilerine ilerleyin
Öğe tetikleyicilerine ilerleyin

Tıklandığında ile, açılır pencere görüntülenmeden önce bir kullanıcının web sitenizi kaç kez tıklaması gerektiğini belirtmeniz gerekir:

Daha gelişmiş kural seçenekleri
Gelişmiş kurallar altında daha fazla tetikleme seçeneği

Hareketsizlikten Sonra ayarı, kullanıcı sayfanızda belirli bir süre boşta kaldıktan sonra açılır pencerenizi tetiklemenizi sağlar:

Hareketsizlik tetikleyicileri
Hareketsizlik tetikleyicileri

Son olarak, Sayfadan Çıkış Niyeti'ni etkinleştirmeyi seçebilirsiniz. Bu ayar, bir kullanıcı sayfanızdan ayrılmaya çalıştığında açılır pencerenizi tetikler:

Sayfada çıkış amacı tetikleyicisini seçin
Uygun olduğunda "Sayfadan Çıkış Niyeti" tetikleyicisini seçin

İşiniz bittiğinde Gelişmiş Kurallara gitmek için KAYDET ve KAPAT veya İLERİ'ye tıklayın. Bu eğitimde biraz sonra bu kurallara bakacağız.

4. Adım: Sitenize Pop-up Düğmesi Ekleyin (Opsiyonel)

Bir kullanıcı sayfanızdaki belirli bir öğeye tıkladığında Elementor açılır pencerenizi tetiklemek isteyebilirsiniz. Örneğin, “Şimdi Kaydolun” yazan bir düğme tasarlayabilir ve alt bilginize gömebilirsiniz. Bir kullanıcı düğmeyi tıkladığında, ekranlarında e-posta kayıt formunuzu görecektir.

İlk olarak, web sitenizde bir Elementor düğmesi oluşturmanız gerekir. Gönderiyi veya sayfayı Elementor düzenleyicide açın ve menüden Düğme'yi seçin. Sayfanıza sürükleyip bırakın:

Menüden düğme seçeneğini seçin
Menüden “Düğme” seçeneğini seçin

Düğme metnini belirledikten ve görünümünü özelleştirdikten sonra Bağlantı > Dinamik Etiketler'e tıklayın. Ardından, açılır menüden Eylemler > Açılır Pencere'yi seçin:

Düğmeniz için açılır pencere eylemini seçin
Düğme için açılır pencere eylemini seçin

Açılır Pencere'ye tıklayın ve Eylem açılır menüsünden Açılır Pencereyi Aç'ı seçin. Açılır menüden formunuzu da seçebilirsiniz:

Açılır açılır seçeneği seçin
Açılır açılır seçeneği seçin

Son olarak, düğmenizi yayınlamak için GÜNCELLE'yi seçin. Bir kullanıcı tıkladığında, kayıt formunuza yönlendirilir.

Adım 5: Açılır Pencere Şablonlarınızı Sonrası İçin Kaydedin

Açılır pencerelerinizi şablon olarak da kaydedebilirsiniz. Açılır pencerenizi Elementor düzenleyicisiyle açın ve GÜNCELLEME öğesinin yanındaki yukarı oka tıklayın. Menüden Şablon Olarak Kaydet'i seçin:

Elementor açılır pencerenizi şablon olarak kaydedin
Açılır pencerenizi şablon olarak kaydedin

Ardından şablonunuzu adlandırmanız istenir. İşiniz bittiğinde, KAYDET'e tıklayın:

Açılır şablona bir ad verin ve ardından kaydedin
Açılır şablona bir ad verin ve “Kaydet”e tıklayın

Açılır pencere, Şablon Kitaplığınıza kaydedilecektir. Artık bir sayfa oluştururken veya şablonlarla gönderi yaparken kullanabilirsiniz.

Gelişmiş Elementor Açılır Pencere Ayarları Nasıl Yapılandırılır

Temel bir Elementor açılır penceresinin nasıl oluşturulacağını zaten ele aldık. Ancak, kullanmak isteyebileceğiniz bazı gelişmiş ayarlar da vardır.

Açılır pencerenizi Elementor düzenleyicisiyle tekrar açın ve Görüntüleme Kuralları'na gidin. Farklı ayarlara bir göz atalım.

Açılır Pencere Ayarları

Bazı gelişmiş açılır ekran ayarları, kullanıcıların formunuzu ne zaman göreceğini kontrol etmenize olanak tanır. Bu yapılandırmalar, ilk kez gelen ziyaretçilerden ziyade geri gelen ziyaretçileri hedeflemek için kullanışlı olabilir.

Örneğin, ziyaretçiniz sayfanızı belirli sayıda görüntüledikten sonra açılır pencerenizi görüntülemeyi seçebilirsiniz:

Daha gelişmiş ayarlar ve koşullar
Daha gelişmiş ayarlar ve koşullar

Alternatif olarak, X oturumundan sonra göster'i seçebilirsiniz. Bu ayar, belirli sayfalardan ziyade genel ziyaretleri hedefler:

X seanstan sonra göster
Belirli bir sayıda oturumdan sonra açılır pencereyi göster

X defaya kadar göster ayarı, kullanıcıların açılır pencerenizi kaç kez göreceğini sınırlayabilir. Sürekli olarak araya giren formlarla ziyaretçilere spam göndermek istemiyorsanız, bunu etkinleştirmeyi düşünebilirsiniz:

Kullanıcıların açılır pencerenizi kaç kez göreceğini seçin
Kullanıcıların açılır pencerenizi kaç kez göreceğini seçin

Açılır pencerenizin nerede görüneceğini sınırlamak için Cihazlarda göster ve Tarayıcılarda göster ayarlarını da kullanabilirsiniz. Pop-up'lar özellikle mobil cihazlarda müdahaleci olabilir, bu nedenle onları orada devre dışı bırakmayı düşünebilirsiniz:

Kesinti süresi ve WordPress sorunlarıyla mı mücadele ediyorsunuz? Kinsta, size zaman kazandırmak için tasarlanmış barındırma çözümüdür! Özelliklerimize göz atın
Cihazlarda göster seçeneği
“Cihazlarda göster” seçeneğini belirleyebilirsiniz.

Daha iyi bir mobil kullanıcı deneyimi sağlamak, ziyaretçilerinizi mutlu edebilir. Ayrıca Arama Motoru Optimizasyonu (SEO) çabalarınızı artırabilir ve web sitenizin arama sonuçlarında daha üst sıralarda yer almasına yardımcı olabilir.

Kullanıcı Menşei Ayarları

Son olarak, Elementor, kullanıcılarınızın nereden geldiğine bağlı olarak açılır pencere görüntüleme ayarlarını yapılandırmanıza olanak tanır. Ziyaretçileri tanıtım amaçlı bir açılış sayfasına yönlendirirseniz ve ardından açılır pencerenizi reklam anlaşmaları veya iletişim bilgilerini istemek için kullanırsanız bu ayarlar kullanışlı olabilir.

Aşağıdaki ayarlar, URL'leri belirtmenize ve hangi bağlantıların açılır pencereleri tetikleyeceğini seçmenize olanak tanır:

Belirli bir yerden gelen kullanıcılara göster
Belirli bir yerden gelen kullanıcılara göster

Son olarak, açılır pencerelerinizi oturum açmış kullanıcılardan gizlemeyi seçebilirsiniz. Ücretli bir üyelik web sitesi işletiyorsanız bu ayarı kullanabilirsiniz:

Oturum açmış kullanıcılar için açılır pencereleri gizle
Oturum açmış kullanıcılar için açılır pencereleri gizle

Seçtiğiniz tüm ayarlardan memnun olduğunuzda, KAYDET ve KAPAT'a tıklayın. Gerekirse buraya geri dönebilir ve bu yapılandırmalardan herhangi birini değiştirebilirsiniz.

Elementor Pop-up'ları için En İyi 3 Eklenti

Gördüğümüz gibi Elementor Pro, web siteniz için açılır pencereler oluşturmayı kolaylaştırır. Ancak, premium sayfa oluşturucuya yükseltmeye hazır olmayabilirsiniz. Alternatif olarak, ek tasarım özellikleri arıyor olabilirsiniz.

Bu hususları göz önünde bulundurarak Elementor açılır pencereleri için en iyi eklentilerden birkaçını burada bulabilirsiniz.

1. JetPopUp (Crocoblock)

JetPopUp (Crocoblock) eklentisi
JetPopUp (Crocoblock)

JetPopUp, Elementor ile mükemmel bir şekilde bütünleşen, sürükle ve bırak arayüzüne sahip, kullanıcı dostu bir eklentidir. E-posta kayıtları, tanımlama bilgisi onay formları ve geri sayımlar dahil olmak üzere dinamik ve özelleştirilmiş açılır pencere formları oluşturmanıza olanak tanır.

JetPopUp, interaktif özellikleriyle öne çıkıyor. Kaydırma, çevirme ve döndürme gibi birden çok animasyon ayarı arasından seçim yapabilirsiniz. Ayrıca eklenti, ihtiyaçlarınıza göre özelleştirebileceğiniz çeşitli şablonlara sahiptir.

Bu eklenti ayrıca birden çok ekran ayarını seçmenize ve özelleştirmenize olanak tanır. Örneğin, JetPopUp formlarınızı kullanıcılara belirli tarihlerde web sitenizden ayrılmaya çalıştıklarında veya belirli bir kaydırma işleminden sonra gösterebilirsiniz.

Özellikler:

  • Önceden ayarlanmış açılır şablonlardan seçim yapın
  • Farklı açılır pencere görüntüleme koşulları seçin
  • Belirli koşulları dahil et ve hariç tut
  • Animasyon efektlerini kullanın

Fiyatlandırma: JetPopUp'ın yıllık maliyeti 22 ABD dolarıdır. Bu paket MailChimp entegrasyonunu, bir açılır pencere aracını ve müşteri desteğini içerir. Ayrıca yılda 130 ABD doları karşılığında her şey dahil aboneliğe yükseltebilirsiniz. 20 ek eklenti ve 150 ekstra widget ile birlikte gelir.

2. Açılır Kutu Widget'ı (PowerPack)

Popup Box Widget (PowerPack) eklentisi
Açılır Kutu Widget'ı (PowerPack)

Gelişmiş Elementor açılır pencere ayarları arıyorsanız, PowerPack tarafından Popup Box Widget'ı kullanmayı düşünün. Videolar, resimler ve Google haritaları gibi dinamik öğeler içeren özel açılır pencereler oluşturmanıza olanak tanır.

Bu eklenti, çıkış amacı ve özel zaman gecikmeleri dahil olmak üzere çeşitli kullanıcı eylemlerine göre açılır pencereleri tetiklemenizi sağlar. Ayrıca, Harekete Geçirici Mesajın (CTA) bağlantıları ve diğer öğeleriyle etkileşimli iki adımlı açılır pencereler de oluşturabilirsiniz.

Ayrıca, Popup Box Widget'ın gelişmiş animasyon ayarları vardır. Açılır pencerelerinizi yakınlaştırabilir, gazete biçimlendirmesini kullanabilir veya 3B animasyonları kullanabilirsiniz.

Özellikler:

  • Animasyon efektleri arasından seçim yapın
  • İki adımlı açılır pencereler oluşturun
  • Zaman gecikmelerini ve kullanıcı tetikleyicilerini kullanın
  • Görüntüleri, videoları ve diğer etkileşimli öğeleri görüntüleyin

Fiyatlandırma: Popup Box Widget, bir PowerPack aboneliğine dahildir. Planlar yıllık 49 dolardan başlar ve 70'den fazla farklı Elementor widget'ı ile birlikte gelir.

3. Lightbox ve Modal (Elementor için Temel Eklentiler)

Lightbox ve Modal (Elementor için Temel Eklentiler) eklentisi
Lightbox ve Modal (Elementor için Temel Eklentiler)

Bu Elementor açılır eklentisine daha önce kısaca değinmiştik. Lightbox & Modal, Elementor için Temel Eklentiler aracına sahip çok yönlü bir pencere öğesidir. Videolar, resimler ve animasyonlar gibi etkileşimli özelliklerle açılır pencereler oluşturmanıza yardımcı olur.

Lightbox & Modal, Elementor web sitenizdeki düğmeler ve bağlantılarla çalışacak şekilde tasarlanmıştır. Açılır formlarınızı tetikleyen özel düğmeler, simgeler ve metinler oluşturabilirsiniz. Ayrıca, pencere öğesi zaman gecikmelerini ve diğer kullanıcı eylemlerini kullanabilir.

Genel olarak, Lightbox ve Modal, yalnızca bilgi sunmak yerine kullanıcılarınızla etkileşim kurmak için en iyi seçenek olabilir.

Özellikler:

  • Açılır pencereler için düğme tetikleyicilerini kullanın
  • Resimleri, videoları ve özel içeriği görüntüleyin
  • Açılır pencere düzenlerini özelleştirin
  • Farklı animasyon türleri arasından seçim yapın

Fiyatlandırma: Lightbox ve Modal, Elementor Pro için Essential Addons'a dahildir. Planlar yıllık 39,97 dolardan başlar ve 70'den fazla widget ve yedi uzantıya sahiptir.

Bu adım adım kılavuzun yardımıyla hem ücretsiz hem de Pro Elementor araçlarını kullanarak pop-up'ları nasıl oluşturacağınızı öğrenin Tweetlemek için Tıklayın

Özet

Açılır pencere formları, olası satış yaratma ve pazarlama kampanyalarınız için gerekli olabilir. Ayrıca ziyaretçilerle etkileşim kurmanıza ve onları sayfanızda tutmanıza yardımcı olabilirler. Neyse ki, Elementor sayfa oluşturucu ile özel açılır pencereler oluşturabilirsiniz.

Elementor Pro ile açılır pencereler oluşturmak çok kolaydır. Bunları markanıza uyacak şekilde özelleştirebilir ve sitenizde nerede gösterileceklerine karar verebilirsiniz. Ayrıca, kullanıcı eylemlerine ve kaynaklarına göre açılır pencerenizi gösterecek şekilde gelişmiş görüntü ayarları belirleyebilirsiniz.

Elementor ile güzel bir web sitesi tasarlamak sadece ilk adımdır. Ayrıca köşenizde bir WordPress barındırma sağlayıcısına ihtiyacınız olacak. Kinsta'nın sitenizi nasıl güçlendirebileceğini görmek için bugün fiyatlandırma planlarımıza göz atın!