WordPress Web Sitelerine Serbestçe ve Hızlı Bir Şekilde Pop-up Nasıl Eklenir?
Yayınlanan: 2021-05-06Bir 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.
- 1. Bir İşletme Web Sitesinde Neden Açılır Pencere Kullanmalısınız?
- 2. Popup Builder eklentisi ile WordPress'e bir Popup ekleyin
- 2.1. Adım 1: Açılır Pencerenin Türünü Seçin
- 2.2. 2. Adım: Açılır Pencereye İçerik Ekleyin
- 2.3. Adım 3: Açılır Pencerenin Görüntüleme Konumunu ve Durumunu Ayarlayın
- 2.4. Adım 4: Açılır Pencerenin Ekranını Özelleştirin
- 2.5. Adım 5: Diğer Gelişmiş Ayarları Özelleştirin
- 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?

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.

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.

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.

İ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.

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:
- 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.
- Facebook URL'sini girin.
- 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.
- İsterseniz paylaş düğmesini gizlemek için buraya tıklayın.

Ve elimdeki bu:

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.

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

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.

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

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.

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.

Ö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.

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


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.

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.

- 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.

- 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.

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.

Bu, ön uçtaki sonuçtur:

- 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.

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.

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ış.

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.

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.

Bu, web sitesindeki kayan düğmedir:

Veya Devre Dışı Bırak seçeneğine tıklayarak 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!
