WordPress’te HTML Reklam Pop-up’ları Nasıl Oluşturulur?

WordPress sitenizde ziyaretçilerin ilgisini çekmek, promosyonları göstermek veya reklam geliri elde etmek için HTML reklam pop-up’ları kullanabilirsiniz. Bu makalede, WordPress’te HTML reklam pop-up’larını nasıl oluşturacağınızı, özelleştireceğinizi ve optimize edeceğinizi detaylı bir şekilde ele alacağız.

1. HTML Reklam Pop-up Nedir?

HTML reklam pop-up’ları, ziyaretçilerin belirli bir eylemi gerçekleştirdiğinde veya belirli bir süre sonra ekranda görünen açılır pencerelerdir. Bu pop-up’lar aşağıdaki amaçlarla kullanılabilir:

• Ürün veya hizmet tanıtımları
• İndirimler ve kampanyalar
• E-posta abonelik formları
• Reklam gösterimi

Doğru şekilde yapılandırıldığında, bu pop-up’lar kullanıcı deneyimini bozmadan etkileşimi artırabilir.

2. HTML Reklam Pop-up’ı Oluşturma Yöntemleri

WordPress’te HTML reklam pop-up’ları oluşturmanın birkaç farklı yöntemi vardır:

1. Eklenti kullanarak (Kolay Yöntem)
2. Kod yazarak (Manuel Yöntem)

Her iki yöntemi de detaylı olarak ele alalım.

3. WordPress Eklentileri ile HTML Reklam Pop-up’ı Oluşturma (Kolay Yöntem)

WordPress için birçok pop-up eklentisi vardır. En popüler olanlar şunlardır:

• Popup Maker
• OptinMonster
• Elementor Pop-ups
• Hustle – Pop-ups, Slide-ins, Email Opt-ins

Bu eklentiler, sürükle-bırak arayüzleri sayesinde teknik bilgi gerektirmeden HTML reklam pop-up’ları oluşturmanızı sağlar. Örnek olarak Popup Maker eklentisi ile nasıl pop-up oluşturacağınızı anlatalım:

Popup Maker ile HTML Reklam Pop-up’ı Oluşturma

1. Eklentiyi yükleyin ve etkinleştirin:
   • WordPress paneline gidin.
   • Eklentiler > Yeni Ekle sekmesine tıklayın.
   • “Popup Maker” araması yapın ve yükleyin.
2. Yeni pop-up oluşturun:
   • Popup Maker > Yeni Ekle seçeneğine tıklayın.
   • Pop-up başlığını belirleyin.
3. HTML reklam içeriğini ekleyin:
   • İçerik alanına aşağıdaki gibi bir HTML kodu ekleyin:
   <div style="text-align:center;"> <a href="https://siteniz.com/kampanya"> <img src="https://siteniz.com/reklam-banner.jpg" alt="Özel İndirim" style="width:100%;"> </a> </div>
4. Tetikleyici ayarlarını yapın:
   • “Tetikleyiciler” sekmesine gidin ve “Sayfa yüklendiğinde göster” seçeneğini seçin.
5. Görünüm ve kapanış ayarlarını düzenleyin:
   • Pop-up’ın ne kadar sürede kapanacağını ve nasıl görüneceğini belirleyin.
6. Pop-up’ı kaydedin ve test edin.

Bu yöntem, kod yazma gerektirmeden pop-up oluşturmanızı sağlar.

4. HTML ve JavaScript ile Manuel Pop-up Oluşturma (Gelişmiş Yöntem)

Eğer bir eklenti kullanmak istemiyorsanız, HTML, CSS ve JavaScript kullanarak kendi pop-up’ınızı oluşturabilirsiniz.

Adım 1: HTML Kodu Ekleme

WordPress sitenizin Tema Düzenleyici veya Özel HTML Widget’ı içine aşağıdaki kodu ekleyin:

<div id="reklamPopup" class="popup">
    <div class="popup-content">
        <span class="close-btn" onclick="kapatPopup()">&times;</span>
        <a href="https://siteniz.com/kampanya">
            <img src="https://siteniz.com/reklam-banner.jpg" alt="Reklam" style="width:100%;">
        </a>
    </div>
</div>

Adım 2: CSS ile Tasarım Yapma

Pop-up’ın görünümünü düzenlemek için aşağıdaki CSS kodunu ekleyin:

.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

Adım 3: JavaScript ile Açılma ve Kapanma İşlemi

Pop-up’ın otomatik açılması ve kapanması için aşağıdaki JavaScript kodunu kullanın:

<script>
document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
        document.getElementById("reklamPopup").style.display = "block";
    }, 3000); // 3 saniye sonra açılır

    window.kapatPopup = function() {
        document.getElementById("reklamPopup").style.display = "none";
    }
});
</script>

Bu kod, sayfa yüklendikten 3 saniye sonra pop-up’ı otomatik olarak açar ve kullanıcı isterse kapatabilir.

5. WordPress’te HTML Reklam Pop-up’larını Optimize Etme

Pop-up’lar kullanıcı deneyimini olumsuz etkilememesi için aşağıdaki optimizasyon ipuçlarını uygulayın:

• Pop-up’ı zamanlamaya dikkat edin: Hemen açılan pop-up’lar kullanıcıları rahatsız edebilir. 3-5 saniye gecikmeli açılmasını sağlayın.
• Mobil uyumlu olmasına dikkat edin: Mobil cihazlarda iyi görünmesi için CSS kullanarak duyarlı (responsive) hale getirin.
• Kapatma düğmesi ekleyin: Kullanıcıların pop-up’ı kolayca kapatabilmesini sağlayın.
• A/B testleri yapın: Farklı tasarımları test ederek en iyi performans göstereni kullanın.
• Google SEO ve Kullanıcı Deneyimine Dikkat Edin: Google, agresif pop-up’ları olumsuz değerlendirebilir. Kullanıcı dostu tasarımlar kullanın.

Değerlendirme

WordPress’te HTML reklam pop-up’ları oluşturmanın en kolay yolu Popup Maker gibi eklentileri kullanmaktır. Daha fazla özelleştirme ve kontrol için ise HTML, CSS ve JavaScript ile manuel pop-up oluşturabilirsiniz.

Her iki yöntemle de sitenize profesyonel pop-up’lar ekleyebilir, reklam gelirlerinizi artırabilir ve promosyonlarınızı etkili bir şekilde duyurabilirsiniz.

WPW ve BayrakNET olarak WordPress web siteniz için profesyonel pop-up çözümleri ve diğer dijital pazarlama hizmetleri sunuyoruz. Daha fazla bilgi almak için bizimle iletişime geçebilirsiniz!