Bir Düğmeye Tıkladığınızda Bloom Katılım Formu Nasıl Açılır?

Yayınlanan: 2017-07-12

Bugünlerde tercih formları olmadan interneti hayal etmek zor. Bunları web sitemizde özellikle iki ana nedenden dolayı kullanıyoruz; abone alma veya potansiyel müşteri oluşturma.

Kitlenize katılım formlarıyla yaklaşmanın doğru yolunu bulmak gerçekten zor olabilir. Bazı insanlar güvenli oynamak ister ve ziyaretçilerine istenmeyen katılım formlarıyla internet balonlarını 'istila ediyormuş gibi hissettirmek istemezler. Bu genellikle, insanların web sitesinde belirli bir yeri tıkladıktan sonra görünen veya bizim buna nasıl adlandırdığımız bir katılım formunu seçtiği andır; 'Tıklamada Tetikleme'.

Bugünkü eğitimde, web sitenizin en önemli bölümlerinden bazılarında bu tıklama tetikleyicilerinden tam olarak nasıl yararlanabileceğinizi göstereceğiz. Tetikleyiciye tıklama seçeneğini dahil etmeyi başardıktan sonra, ilerleme kaydetmenize yardımcı olup olmadığını görmek için size getirdiği sonuçları ölçmeyi unutmayın.

Katılım Formu

Bir Tıklamadan Sonra Katılım Formu Ne Zaman Kullanılır?

Temel olarak web sitenizdeki herhangi bir şeyin bir katılım formunu tetiklemesini sağlayabilirsiniz. Ancak yanlış yerlerde kullanmak hızla aleyhinize dönebilir. İnsanlar her zaman bir web sitesine rastgele tıklamaya alışkındır; örneğin bir şey okurken. Veya sadece etrafa bakınırken bile, genellikle amaçsız olarak web sitesinde bir yere tıklarlar.

Şimdi ziyaretçi olduğunuzu hayal edin; her rastgele tıklamada, amaçsızca yaptığınız bir işlem nedeniyle beklenmedik bir katılım formu ile karşılaşabilirsiniz. Bunun şüphesiz kötü bir etkisi olacaktır çünkü tam o anda, o web sitesini ziyaret ederken hiçbir kontrolünüz yokmuş gibi hissedeceksiniz.

İnsanların gönüllü olarak tıklamayı veya tıklamamayı seçtiği yerlere (genel olarak düğmeler veya harekete geçirici mesajlar gibi) bir tıklama tetikleyici katılım formu yerleştirmek başka bir hikaye. Bir CTA'ya (harekete geçirici mesaj) tıklamaya aşinayız, bu yüzden bizi korkutmasın. Bir sonraki adımın ne olduğunu görmeyi bilinçli olarak seçiyoruz. Bir CTA'nın arkasında ne olduğunu merak etmiyorsak, tıklamayacağız. Ama istersek yapabiliriz. Ziyaretçilerin sahip olduğu bu 'seçim', sonunda bir katılım formu açıldığında kendilerini daha kolay hissetmelerini sağlar ve bülteninize gerçekten kaydolma şanslarını artırır.

Bir Düğmeye Tıkladığınızda Bloom Katılım Formu Nasıl Açılır?

Youtube Kanalımıza Abone Olun

Katılım Formunuzu Oluşturun

İnsanların CTA'nıza tıklamasını sağlamak bir sanat biçimidir. İnsanların CTA'nıza tıkladıktan sonra bir katılım formu aracılığıyla abone olmalarını veya lider olmalarını sağlamak sanatın takdiridir. Sonunda her iki tarafı da memnun edebilmek için denemeniz ve hedef kitlenize yaklaşmanın doğru yolunu bulmanız gerekiyor.

Web sitenizde bu tür bir katılım formundan yararlanabileceğiniz iki farklı düğme için bir tıklama tetikleyicisinin nasıl oluşturulacağını göstereceğiz; Düğme Modülü ve Tam Genişlik Başlık Düğmesi. Çalışma şekli aynıdır, ancak farklı senaryolarda görmek mantığı anlamanıza yardımcı olabilir. Bundan sonra, diğer modüller için de kullanabilirsiniz.

Şimdi, katılım formlarını bir CTA'ya nasıl bağlayacağınızı göstermeden önce, bir katılım formunun ayarlarını gözden geçireceğiz. Bu yazıda, size belirli bir tasarım değil, sadece mantık sunacağız. Tıklama tetikleyicisinin çalıştığından emin olmak için gereken bazı ayarlar vardır.

Katılım Formu Türünü Seçin

Yeni bir katılım formu eklerken karşınıza çıkacak ilk seçenek, kullanmak istediğiniz katılım formunun türüdür. Tıklama efektinde tetikleyici oluşturmak için iki tür kullanabilirsiniz: açılır ve uçar. Büyük olasılıkla seçeceğiniz açılır penceredir. Ama biraz daha incelikli olmak istiyorsanız, sineği de kullanabilirsiniz.

Sekmeyi Ayarla

Oluşturmakta olduğunuz katılım formunun Kurulum sekmesinde katılım formunuzu adlandırarak başlayın. Ardından, formunuzu bir e-posta sağlayıcısına bağlayın. E-posta sağlayıcısı, hesap ve e-posta listesi olmadan form etkin olmayacaktır.

Tasarım Sekmesi

Tasarım sekmesinde, kullanacağınız formun stilini belirleyebilirsiniz. Bu yazıda, bunu yapmayacağız. Sadece çalışıp çalışmadığını görmek için değişiklik yapılmadan standart bir katılım formu seçeceğiz. Daha sonra, değişiklik yapmak için her zaman oluşturduğunuz katılım formuna geri dönebilirsiniz.

Ekran Ayarları Sekmesi

Bu, katılım formunu düğmelerden birine bağlayacağımız sekmedir. Sonuçların işe yaradığından emin olmak için, katılım formunun üzerinde çalışmasını istediğiniz sayfada görüntülenmesine izin verildiğinden emin olmalısınız. Tüm site genelinde aynı formu kullanacaksanız, aşağıdaki resimde gösterildiği gibi formu her şey için kolayca etkinleştirebilirsiniz.

Ayrıca, yalnızca tıklamadaki tetikleyiciler için katılım formunu kullanmak istiyoruz. Bu nedenle, diğer tüm seçenekleri devre dışı bırakacağız ve yalnızca 'Tıklamada Tetikleme' seçeneğini etkinleştireceğiz. CSS Seçici alanının hemen görüneceğini göreceksiniz. Bu gönderide daha sonra, bu alanı, düğmelerimizi oluşturduğumuz katılım formuna bağlamak için kullanacağız. Daha sonra hemen ulaşabilmek için bu sayfayı sekmenizde açık bırakın.

Başlayalım

Farklı modüllerde bir tıklama tetikleyici katılım formu eklemenin mantığı aynı olsa da, bunu iki örnekte açıklayacağız; Düğme Modülü ve Tam Genişlik Üstbilgi Düğmesi. Mantığı anlamadan, bunun gerçekleşmesi için bu gönderideki adımları izlemeniz yeterlidir.

Ancak, tıklama tetikleyicisinin aşağıda açıklananlardan başka yerlerde de çalışmasını istiyorsanız, küçük bir değişiklik yapmanız gerekecektir. Değişecek tek şey, bu her zaman farklı olduğu için kullandığımız sınıftır. Bu tıklama tetikleyicisini web sitenizin başka herhangi bir bölümü için gerçekleştirmek istiyorsanız, aşağıda göstereceğimiz adımları izlemeniz ve kullandığınız şeye göre CSS sınıfını değiştirmeniz yeterlidir.

Pop Up Opt-In Formuna Düğme Modülünü Bağlayın

Size rehberlik edeceğimiz ilk örnek Düğme Modülüdür. Bir Düğme Modülü için bir tıklama tetikleyicisi oluşturmanın güzel yanı, olasılıkların sonsuz olmasıdır. Bir Düğme Modülü içeren herhangi bir tür bölüm veya satır oluşturabilir ve istediğiniz kadar yaratıcı olabilirsiniz.

Daha fazla gecikmeden, düğme için bir tıklama tetikleyicisi oluşturmaya başlayalım. Bunu yapmak için iki yolumuz var; CSS sınıfını kullanarak veya modüle atanmış bir CSS kimliği oluşturarak.

CSS Sınıfını Kullanarak

Tıklama tetikleyicisinin çalışmasını istediğiniz sayfayı açın veya sayfayı oluşturun. Ardından, bir Düğme Modülü ekleyin veya üzerinde çalışmasını istediğiniz düğmenin Düğme Modülü ayarlarını açın.

Gelişmiş sekmesine gidin ve aşağı kaydırın. Ana Öğe alanına tıklayın ve düğmeye atanan CSS sınıfının görünmesini izleyin. CSS sınıfını kopyalayın, hemen ihtiyacımız olacak.

Ardından, oluşturduğunuz katılım formunun Görüntü Ayarları sekmesine gidin. Bir önceki bölümde, size sihrin nerede olacağını zaten göstermiştik. 'Trigger On Click'i etkinleştirdik ve bahsedilen diğer tüm olasılıkları devre dışı bıraktık. 'Trick On Click'in hemen altına aşağıdaki satırı yapıştırmanız gerekecek:

*.et_pb_button_0.et_pb_button.et_pb_module

Gördüğünüz gibi, bu adımdan hemen önce kopyaladığınız sınıfın ardından gelen sadece bir '*' sembolü.

Bu yöntemi kullanırken aklınızda bulundurmanız gereken bir şey var; buton CSS Class aynı sayfadaki her buton için farklılık gösterir fakat başka bir sayfaya bir buton eklediğinizde hemen '0'dan başlayacaktır. Bu, katılım formunuz tüm sayfalar ve gönderiler için mevcutsa, her sayfadaki her ilk Düğme Modülünün katılım formunu tetikleyeceği anlamına gelir.

Bundan kaçınmak istiyorsanız, tıklama tetikleyicisinin bir CSS kimliği aracılığıyla gerçekleşmesini sağlayabilirsiniz. Ancak tüm modüle belirli bir CSS kimliği atadığınız durumlarda, bunu gerçekleştirmenin en kolay yolu CSS Sınıfıdır.

Belirli bir katılım formunun hangi sayfalarda görüntülenebileceğini, katılım formunuzun Görüntü Ayarlarında belirleyebilirsiniz. Bunu yaparak, kontrol sizde olacak ve katılım formunun kendisine atanan düğmeyi tıkladıktan sonra hangi sayfalarda görüneceğini tam olarak bileceksiniz.

CSS Kimliğini Kullanarak

İkinci yöntem, bir CSS kimliği kullanmaktır. Düğme Modülünü açın, Gelişmiş sekmesine gidin ve ona bir CSS kimliği verin. Bu durumda, 'pop-up' kullanacağız.

Düğme Modülünün İçerik sekmesine gidip “#” sembolünü ve ardından istediğiniz herhangi bir şeyi yazarak devam edin. Bunu yaparak, ziyaretçinin düğmeyi tıklarken sayfada aynı yerde kalmasını sağlarsınız.

Devam ederek, katılım formu ayarlarınıza geri dönün ve Trigger On Click alanına “a#popup” ekleyin. Düğme Modülüne atadığınız CSS ID'nin ardından her zaman “a#” yazmalısınız.

a#popup

Tam Genişlikli Başlık Düğmelerini Katılım Formuna Bağlayın

Tıklamada Tetikleme katılım formunu nasıl yapacağınızı göstereceğimiz diğer örnek, Tam Genişlik Üstbilgi Düğmesidir. Burada sahip olduğumuz tek olasılık, CSS sınıfı butonunu kullanmaktır. Divi oluşturucu aracılığıyla özellikle düğmeye bir CSS kimliği atayamayız.

CSS Sınıfını Kullanarak

Tam genişlikte bir başlık oluşturun veya Tıklandığında Tetikleyici katılım formunu eklemek istediğiniz yerde tam genişlikte başlığı açın. Tam Genişlik başlığının Gelişmiş sekmesine gidin ve 'Birinci Düğme' ile karşılaşana kadar aşağı kaydırın. Alana tıklayın ve butona atanan CSS sınıfını kopyalayın.

Ardından, İçerik sekmesine gidin ve “#” sembolünü ve ardından Düğme #1'in URL alanına herhangi bir şey yazın.

Son olarak, tercihinizin Ekran Ayarları sekmesine gidin ve “*” sembolünü ve ardından kopyaladığınız sınıfı düğmeye atayarak yazın.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Son düşünceler

Bu eğitici, tıklamayla tetikleyicileri ve Bloom katılım formunu kullanmaya başlamanıza yardımcı olacaktır. Hatta şu anda abone veya potansiyel müşteri kazanmaya çalıştığınız yolu yeniden gözden geçirmenize neden olabilir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin. Ve oradayken; Trigger On Click katılım formunu hangi durumlarda kullanacağınızı bize bildirin.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

BarsRsind / Shutterstock.com tarafından Öne Çıkan Görsel