Crocoblock ve Elementor'dan JetPopup ile PopUp Oluşturun

Merhaba millet,

Bu videoda nasıl yapabileceğimizi göreceğiz Elementor ve Crocoblock'un premium JetPopup eklentisi ile bir Popup oluşturun web siteniz için.

Bu diğer makalede açıklıyorum Elementor Pro ile Pop-up nasıl oluşturulur.

Bu öğreticiyi takip etmek için ihtiyacınız olan:

Serbest Öğe: Elementor'ı indirin

Crocoblock Suite JetPopup: Crocoblock'u indirin

Jetpopup, yapabileceğiniz bir ödeme eklentisidir. 22 $ ​​için ayrı olarak satın alın:

Video öğretici

Kanalıma abone ol:  

veya Crocoblock üyeliğine erişirseniz, hepsine 130 $ karşılığında sahip olursunuz.

Crocoblock felsefesini seviyorum çünkü devasa ve ağır bir eklenti yapmak yerine, işlevleri küçük eklentilere bölüyor ve her biri ayrı bir eklenti yapıyor. Bana çok doğru geliyor.

Eklenti yüklendikten sonra, WordPress menüsünde JetPopup adlı yeni bir öğe görünecektir.

Ojo

Bazı daha gelişmiş PopUp'lar için Crocoblocks paketinden başka eklentilere ihtiyacımız olabilir.

Crocoblock ve Elementor 23'den JetPopup ile PopUp Oluşturun

Benim durumumda JetPopup, JetEngine ve JetElementos For Elementor eklentileri kurulu.

Eğer gideceksek JetPopup -> Ön Ayar Kitaplığı büyük bir önceden tanımlanmış Pop-up kütüphanesi buluyoruz:

Crocoblock ve Elementor 24'den JetPopup ile PopUp Oluşturun

Bir önceki resimde gördüğümüz gibi, sahip olduğu filtreler sayesinde ihtiyacımıza en uygun pop-up'ı bulabiliriz.

Ayrıca, her açılır pencerede bize çalışması için hangi eklentilere ihtiyaç duyacağını söyler. Resimdekinde Jet Elements eklentisi olurdu.

Bir Pop-up Şablonu Yükleyin

Gizemi yok, beğendiğimiz şablonda yükle'ye tıklıyoruz.

Kurulduktan sonra, bizi şablonun eklendiği bir Elementor sayfasına götürür.

Crocoblock ve Elementor 25'den JetPopup ile PopUp Oluşturun

Artık Elementor ile herhangi bir sayfada yaptığımız gibi öğeleri ekleyebilir, değiştirebilir ve kaldırabiliriz.

Açılır Ayarlar

Açılır Pencerenin giriş veya çıkış efektleri ve açılır pencerenin ne zaman gösterileceği gibi kendi seçenekleri, sol altta bulunan ayarlarda bulunur:

Crocoblock ve Elementor 26'den JetPopup ile PopUp Oluşturun

Ve tıkladığımızda tüm bu seçenekleri buluyoruz:

Crocoblock ve Elementor 27'den JetPopup ile PopUp Oluşturun

Animasyon: Açılır pencerenin girerken sahip olacağı etkidir.

Açık Etkinlik: Pop-up'ın görünmesini istediğimizde

Crocoblock ve Elementor 28'den JetPopup ile PopUp Oluşturun

Sayfayı yükledikten x saniye sonra, hareketsizlik süresinden sonra, sayfayı kaydırırken % a, sayfadan çıkarken, belirli bir tarih, belirli bir saat ve web'in bir öğesine tıklandığında Popup'ın görünmesini sağlayabiliriz.

Görüntüleme Koşulları Web'de görünmesini istediğimiz yeri burada belirtiriz:

Crocoblock ve Elementor 29'den JetPopup ile PopUp Oluşturun

Hangi sayfalara dahil etmek istediğimizi veya hangi sayfalardan çıkarmak istediğimizi size söyleyebiliriz.

Pop-up'ımız yayınlandıktan sonra web sitemizde görünecektir 😉

Bir bağlantıya tıkladığınızda Pop-up atlamasını sağlayın

Özellikle sevdiğim seçeneklerden biri, bir bağlantı veya düğme tıklandığında bir açılır pencere açmaktır.

Özellikle Popup ile yapılması gerekmeyen bir sayfa içinde bir Popup atlama bağlantısı yapabilmemizi seviyorum. Bunu çok beğendim.

Düğmeye tanımlayıcı ekle

Yapmamız gereken ilk şey, açılır pencere tetikleyicisi olmasını istediğimiz düğmeye bir kimlik veya sınıf eklemek:

Crocoblock ve Elementor 30'den JetPopup ile PopUp Oluşturun

Artık düğmenin tanımlayıcısına sahip olduğumuza göre, oluşturduğumuz Pop-up'a geri dönüyoruz.

Hatırlarsanız, yukarıda, pop-up'ı tetiklemek için seçebileceğimiz olaylar arasında olduğunu gördük. Özel Seçici Tıklaması

Crocoblock ve Elementor 31'den JetPopup ile PopUp Oluşturun
Crocoblock ve Elementor 32'den JetPopup ile PopUp Oluşturun

Her şey yolunda giderse, şimdi biri yapılandırdığımız düğmeye tıkladığında açılır pencere atlayacaktır.

Webhooks ile E-posta Pazarlama aracımıza Potansiyel Müşteriler Gönderin

JetPopup, Mailchimp ile doğrudan entegrasyona sahiptir. Entegrasyon API Anahtarı üzerinden hızlı ve kolay bir şekilde yapılır.

Crocoblock menüsü —> JetPlugins Ayarları —> Entegrasyonlar içinde bağlayabiliriz:

Crocoblock ve Elementor 33'den JetPopup ile PopUp Oluşturun

Ama bunu Mailchimp olmayan başka bir araçla nasıl yapardık?

biz teşekkür ederiz Webhooks.

Web kancalarını seviyorum çünkü araçlarla doğrudan entegrasyon olmasa bile araçları birbirine bağlamamıza izin veriyorlar.

Örneğimde onu entegre edeceğim Kayıt, ancak web kancalarını kabul eden herhangi bir araçla hemen hemen aynı şekilde yapılır.

önemli

Bunu yapmak için bileşene ihtiyacımız olacak JetEngine.

JetEngine formlar oluşturmamıza ve ayrıca eklememize izin verir webhooks yani tam ihtiyacımız olan 😉

JetEngine kurulduktan sonra Formları bulabiliriz:

Crocoblock ve Elementor 34'den JetPopup ile PopUp Oluşturun

İhtiyacımız olan alanlar ile bir form oluşturuyoruz, benim durumumda

Crocoblock ve Elementor 35'den JetPopup ile PopUp Oluşturun

Bölümünde Alan Ayarları ihtiyacımız olan alanları formumuza ekliyoruz.

Sihrin gerçekleştiği önemli kısım, Gönderim Sonrası İşlemler/Bildirim Ayarları, yani form doldurulduktan sonra ne olur.

üzerine tıklamamız gerekiyor Bildirim Ekle ve türün bir bildirimini ekleyin Webhook'a Çağrı

Crocoblock ve Elementor 36'den JetPopup ile PopUp Oluşturun

Webhook URL'sini nereden alıyoruz?

Bu bilgiyi bağlanmak istediğimiz araçtan almalıyız, bizim durumumuzda umutları Encharge'a göndermek istiyoruz.

Encharge içinde, bir akış ve bir form ekleyin. JetEngine'de eklememiz gereken Webhook'un URL'sini buluyoruz:

Crocoblock ve Elementor 37'den JetPopup ile PopUp Oluşturun

Form yapılandırıldıktan sonra, onu yalnızca JetPopup açılır penceremize eklememiz gerekir:

Crocoblock ve Elementor 38'den JetPopup ile PopUp Oluşturun
Crocoblock ve Elementor 39'den JetPopup ile PopUp Oluşturun

Açılır penceremizi kaydettik ve şimdi birileri verilerini eklediğinde Web kancaları sayesinde doğrudan Encharge'a gidecekler.

Crocoblock ve Elementor 40'den JetPopup ile PopUp Oluşturun

Bu öğreticiyi takip etmek için ihtiyacınız olan:

Serbest Öğe: Elementor'ı indirin

Crocoblock Suite JetPopup: Crocoblock'u indirin

Bana harika olmadığını söyleme? 😉

Bir sonraki eğitimde görüşmek üzere

Yorum yapın