WordPress Web Sitelerine Serbestçe ve Hızlı Bir Şekilde Pop-up Nasıl Eklenir?

Yayınlanan: 2021-05-06

Bir web sitesini ziyaret ederken, ekranda aniden görüntülenen bir resim veya mesaj gördünüz mü? Bu, web sitesinin açılır penceresi veya bildirim penceresidir.

İçindekiler gizle
  1. 1. Bir İşletme Web Sitesinde Neden Açılır Pencere Kullanmalısınız?
  2. 2. Popup Builder eklentisi ile WordPress'e bir Popup ekleyin
    1. 2.1. Adım 1: Açılır Pencerenin Türünü Seçin
    2. 2.2. 2. Adım: Açılır Pencereye İçerik Ekleyin
    3. 2.3. Adım 3: Açılır Pencerenin Görüntüleme Konumunu ve Durumunu Ayarlayın
    4. 2.4. Adım 4: Açılır Pencerenin Ekranını Özelleştirin
    5. 2.5. Adım 5: Diğer Gelişmiş Ayarları Özelleştirin
  3. 3. Son Sözler

Pop-up, birçok işletme koşucusu ve web sitesi sahibi tarafından kullanılan popüler ve etkili bir pazarlama stratejisidir. WordPress'e böyle bir açılır pencere eklemek için, hızlı ve basit hale getirmek için ücretsiz bir eklenti kullanabilirsiniz. Uzman olmasanız bile, talimatlarımızı takip etmeniz sadece 10 dakikanızı alır.

Neden Bir İşletme Web Sitesinde Açılır Pencere Kullanmalısınız?

Aşağıdaki resim, bir işletme web sitesinin açılır penceresine bir örnektir. Harika görünüyor, değil mi?

Panoda eklentiyi kurun ve etkinleştirin.

Pop-up sadece çarpıcı olmakla kalmaz (eğer uyumlu ve çekici bir tane tasarlamayı başarırsanız), aynı zamanda aşağıdakiler gibi birçok başka avantajı da vardır:

  • Önemli bilgileri, satış ve pazarlama kampanyalarını tanıtın,…
  • Harekete geçirici mesaj, dönüşüm oranını artırın
  • potansiyel müşteri oluştur

Popup Builder eklentisi ile WordPress'e Popup Ekleme

WordPress web sitenize bir açılır pencere eklemek için güvenilir bir web tasarım şirketi veya kodlayıcı kiralayabilirsiniz. Ancak zamandan ve paradan tasarruf etmek için eklenti en iyi seçenektir. Çok sayıda açılır pencere eklentisi arasında, Popup Builder kullanımı en kolay ve etkili olabilir.

Ücretsiz bir eklentidir ve wordpress.org'da mevcuttur, bu nedenle eklentiyi doğrudan Gösterge Tablosunda yüklemeniz ve etkinleştirmeniz yeterlidir.

Eklentiyi Pano'da kurun ve etkinleştirin.

Bitirdikten sonra, aşağıdaki adımları izleyin.

Adım 1: Açılır Pencerenin Türünü Seçin

Şimdi Popup Builder alt menüsü Gösterge Tablosunda görünecektir. Oraya gidin, Haber Ekle'ye tıklayın ve sağlanan 4 açılır pencere türünden birini seçin.

Popup Builder alt menüsünde Haber Ekle'yi tıklayın ve 4 açılır pencerenin stilinden birini seçin.

Daha iyi bir örnek için, aşağıdaki resim, bu eklenti tarafından sağlanan 4 tür açılır pencerenin ön uçta nasıl görüntülendiğidir.

4 tür açılır pencere vardır.

İstediğiniz türü seçtikten sonra bir sonraki adıma geçin.

2. Adım: Açılır Pencereye İçerik Ekleyin

İlk olarak, daha kolay yönetmek için açılır pencereye bir ad verin.

Açılır pencereyi adlandırın.

Farklı açılır pencere türleri farklı içeriklere ihtiyaç duyar. Her türü inceleyelim.

Facebook Pop-up'larına İçerik Ekle

Facebook açılır pencereleri oluşturmak için arayüzde şu bilgileri doldurmanız gerekir:

  1. Açılır pencerede görünen mesaj. Okuyucuları etkileşime geçmeye teşvik etmek için bir harekete geçirme ifadesi kullanmalısınız. Ayrıca, daha çarpıcı olması için resimler, afişler eklemelisiniz.
  2. Facebook URL'sini girin.
  3. Bir hevesle açılır pencere için bir düzen seçin. Temel olarak, bu düzenler çok farklı değildir. Böylece onları deneyebilir ve en sevdiğinizi seçebilirsiniz.
  4. İsterseniz paylaş düğmesini gizlemek için buraya tıklayın.

Açılır pencerenin bilgilerini doldurun.

Ve elimdeki bu:

Facebook açılır penceresinin sonucu.

Görüntü Pop-up'larına İçerik Ekle

Burada sadece resmi yüklemeniz veya resmin bağlantısını eklemeniz gerekiyor. Bu eklenti JPG, PNG ve GIF'i destekler.

Resmi yüklemeniz veya resmin bağlantısını eklemeniz gerekir.

Web sitemin Kara Cuma kampanyası için kendi yaptığım güzel bir banner:

Black Friday görüntü açılır penceresi örneği.

HTML Pop-up'larına İçerik Ekle

HTML açılır penceresine içerik eklemek, WordPress Gutenberg düzenleyicisinde bir yazı yazmak gibidir. Resimler, videolar, tablolar, düğmeler, alıntılar,… veya WordPress düzenleyicinin desteklediği diğer içerikleri ekleyebilirsiniz. Arayüz Gutenberg editörüne biraz benziyor, bu yüzden oldukça samimi ve yerli.

HTML açılır penceresine içerik eklemek, bir gönderi yazmak kadar kolaydır.

Bu da ön uçtaki HTML açılır pencerem:

İşte ön uçtaki HTML açılır penceresi.

Abonelik Açılır Pencerelerine İçerik Ekle

Burada doldurmanız ve abonelik formunuz için özelleştirmeniz gereken oldukça fazla içeriğimiz var. Ancak, en çok dikkat etmeniz gereken, Formdaki Ad , Soyadı , E-posta gibi alanlardır ve bunların Yer Tutucu ve Gerekli alanlarını özelleştirin.

Abonelik Açılır Pencerelerinde birçok bilgiyi doldurabilirsiniz.

Bundan sonra, aşağı kaydırın ve daha çarpıcı ve web sitesiyle uyumlu hale getirmek için formun görüntüsünü Form arka plan seçenekleri, Girdiler stili, Gönder düğmesi stilleri açısından özelleştirin.

Özellikle, Başarılı abonelikten sonra bölümünde, uygun bir mesaj veya abone olduktan sonra kullanıcılarınıza göstermek istediğiniz bilgileri nazikçe seçin. Örneğin, bu aboneler için teşekkür notları, kuponlar, hediyeler, hediye kartları vb. görüntüleyebilirsiniz. Bunu yaparak, kullanıcıların izlenimlerini sürükleyebilir ve deneyimlerini iyileştirebilirsiniz.

Abone olduktan sonra kullanıcılarınıza göstermek istediğiniz uygun bir mesaj veya bilgiyi seçin.

Örneğin, bu benim abonelik e-posta açılır pencerem. Gönderdikten sonra, Kara Cuma indirim kampanyası hakkında müşterileri alışverişe çıkmaya teşvik eden bir bildirim göstereceğim.

İçerik aboneliğim açılır penceresi örneği.

Aboneleri yönetmek için Popup Builder > Tüm Aboneler'e gidin.

Aboneleri yönetmek için Popup Builder > Tüm Aboneler'e gidin.

Bülten sekmesinde abonelere e-posta bile gönderebilirsiniz.

Bülten sekmesinde abonelere e-posta bile gönderebilirsiniz.

İçeriği ekledikten sonra aşağı kaydırın. Diğer birçok ayar seçeneğini göreceksiniz. 4,5,6 adımlarındaki her seçeneği inceleyelim.

Adım 3: Açılır Pencerenin Görüntüleme Konumunu ve Durumunu Ayarlayın

Görüntüleme Konumunu Ayarlayın

Açılır Pencere Görüntüleme Kuralları bölümünde, açılır pencerenin nerede görüneceğini/görülmeyeceğini ayarlamamız gerekiyor.

Her sayfada, gönderide, etikette veya özelleştirmede göstermek veya istediğiniz belirli bir yerde göstermek için Her Yer'i seçebilirsiniz. Daha fazla ayrıntı almak için (?) araç ipucunu da tıklayabilirsiniz.

Örneğin, konumu belirli bir sayfa olarak seçiyorum, görüntülemek için “is” i seçiyorum ve görüntüleme sayfasını “Ana Sayfa” olarak seçiyorum. Ek olarak, Ekle'yi seçerek başka konumlar da ekleyebilirsiniz.

Açılır Pencere Görüntüleme Kuralları bölümünde, açılır pencerenin nerede görüneceğini/görülmeyeceğini ayarlamamız gerekiyor.

Görüntüleme Durumunu Ayarlayın

Açılır Pencere Etkinlikleri bölümünde, açılır pencerenin görüneceği zamanı seçin (web sitesi birkaç saniye yüklendiğinde, kullanıcılar bir yere tıkladığında vb.). Bu eklenti, aşağıdaki görüntüleme koşullarını destekler:

  • Yüklendiğinde : Açılır pencere, sitenin yüklenmesi tamamlandıktan birkaç saniye sonra ( Gecikme sekmesinde saniye sayısını ekleyebilirsiniz) otomatik olarak görünecektir.

Açılır pencere, sitenin yüklenmesi tamamlandıktan birkaç saniye sonra otomatik olarak görünecektir.

  • CC sınıfına göre ayarla : kullanıcıların açılır pencereyi etkinleştirmek için bazı bileşenlere tıklamasına izin verir. Bu bileşen, kimliğine dayalı olacaktır. Bu kısım biraz karmaşık, bu yüzden belgeleri dikkatlice okusanız iyi olur.

CC sınıfına göre ayarla: kullanıcıların açılır pencereyi etkinleştirmek için bazı bileşenlere tıklamasına izin verir.

  • Tıklandığında : CSS sınıfına göre ayarla bölümüne benzer ancak etkinleştirmek için “düğmeyi” yüklemek için açılır pencerenin kimliğini kullanmanız gerekmez.

Bunun yerine, Seçenekler bölümünde Varsayılan'ı seçerseniz, eklenti, Varsayılan Sınıf bölümündeki açılır pencere için aşağıdaki gibi bir varsayılan sınıf oluşturacaktır.

Seçenekler bölümünde Varsayılan'ı seçerseniz, eklenti Varsayılan Sınıf bölümündeki açılır pencere için varsayılan bir sınıf oluşturur.

Custom CSS'i seçerseniz Custom Class bölümünde kendi oluşturduğunuz class'ı doldurun.

Custom CSS'i seçerseniz Custom Class bölümünde kendi oluşturduğunuz class'ı doldurun.

Bundan sonra, açılır pencerenin sınıfını, istediğiniz bileşenin CSS'sine ekleyin.

Örneğin bu gönderide Ek CSS sınıfları bölümüne bir buton ve istediğim sınıfı ekledim.

Ek CSS sınıfları bölümüne bir buton ve açılır pencerenin sınıfını ekledim.

Bu, ön uçtaki sonuçtur:

İşte açılır pencerenin sonucu.

  • Hover Click : bir bileşenin üzerine gelindiğinde açılır pencere görünecektir. Aynısını Tıklamada bölümündeki gibi yapabilirsiniz.

Hover Click: Bir bileşenin üzerine gelindiğinde açılır pencere görünecektir. Aynısını Tıklamada bölümündeki gibi yapabilirsiniz.

Adım 4: Açılır Pencerenin Ekranını Özelleştirin

3. adımdan sonra, temel bir açılır pencereniz oldu. Ancak daha çarpıcı olmasını istiyorsanız, Tasarım bölümüne gidin. Burada arayüz, kaplama, arka plan gibi bazı bileşenleri en sevdiğiniz gibi mükemmel hale getirmek için özelleştirebilirsiniz.

Tasarım bölümünde bazı bileşenleri istediğiniz gibi özelleştirebilirsiniz.

Bunun da ötesinde, Boyutlar bölümünde Özel modu seçerek veya boyutunun içeriğiyle otomatik olarak eşleşmesini sağlamak için Duyarlı modu seçerek genişliğini ve uzunluğunu ayarlayın.

Boyutlar bölümünde, açılır pencerenin genişliğini ve uzunluğunu özelleştirebilirsiniz.

Adım 5: Diğer Gelişmiş Ayarları Özelleştirin

Bu gelişmiş ayarlar, görüntülemeyi ve açılır pencerelerle etkileşimi daha ayrıntılı bir şekilde yapılandırmanıza olanak tanır.

Örneğin, Ayarları Kapat bölümünde açılır pencerenin nasıl kapatılacağını seçebilirsiniz. Kapatmanın birçok yolu vardır, örneğin Esc tuşuna basın veya bir kapat düğmesi ekleyin… Bir veya daha fazlasını seçin, bu size kalmış.

Ayarları Kapat bölümünde açılır pencerenin nasıl kapatılacağını seçebilirsiniz.

Açılır pencereyi kapatma ve açma efektleri eklemek veya bir kullanıcı için gösterilme sürelerini ayarlamak istiyorsanız, … Açılır Pencere Seçenekleri bölümüne gidin. İstediğiniz seçeneğe tıklamanız yeterlidir ve işte yaptınız.

Ücretsiz Popup Builder eklentisini kullanırken, aşağıdaki resimdeki gibi sarı renkle renklendirilmiş Unlock Option adlı bölümlerin profesyonel sürümün özellikleri olduğunu unutmayın. Bunları kullanmak için bu eklentinin daha fazla uzantısını satın almanız gerekir.

Popup Builder'ın bazı premium özellikleri vardır

Son olarak, kenar çubuğunda çok ilginç bir seçenek var: tıklandığında açılır pencereyi göstermek için web sitesine sabit bir düğme eklemek. Bu kayan düğme gerçekten kullanışlıdır ve insanların onu her zaman ve her yerde görmelerini sağlar. Tasarımı da hoş ve rahatsız edici değil.

Kenar çubuğunda, tıklandığında açılır pencereyi göstermek için web sitesine sabit bir düğme ekleyebilirsiniz.

Bu, web sitesindeki kayan düğmedir:

Bu, web sitesindeki kayan düğmedir.

Veya Devre Dışı Bırak seçeneğine tıklayarak devre dışı bırakabilirsiniz.

Devre Dışı Bırak'ı tıklatarak açılır pencereyi devre dışı bırakabilirsiniz.

Son olarak, bitirmek için Yayınla'yı tıklayın.

Böylece, temelden gelişmiş ayarlara 6 adımdan sonra açılır pencerenizi tamamladınız. İyi bir iş çıkardın!

Son sözler

Gördüğünüz gibi, WordPress'e bir açılır pencere eklemek gerçekten karmaşık değil. Ekranını özelleştirirken biraz sabırlı olmanız gerekiyor, tüm zor iş bu!

Ayrıca, web sitesinin dönüşüm oranını artırmak için birçok şey vardır. Etkili bir açılış sayfası oluşturmak istiyorsanız, yüksek dönüşüm sağlayan bir açılış sayfasının nasıl oluşturulacağı veya bir ürün sayfasının nasıl oluşturulacağı hakkında biraz daha makale okusanız iyi olur.

İyi şanlar!