Dönüşümleri Artıracak 5 En İyi Popup Overlay Örneği

Doğru kullanıldığında popup'lar işe yarıyor ve potansiyel müşteri toplamanın, e-posta listesi büyütmenin iyi bir yolu oluyor.

İşletmenizi tanıtmak ve gelirinizi artırmak için kullanabileceğiniz çeşitli popup kullanım senaryoları var. Zor olan, overlay'in kendisi. Kısa olacak, markanıza uyacak ve yine de durup bakmaya değecek.

Dolce & Gabbana, Nike, Bruno Magli, CoSchedule ve Revolve'dan seçtiğimiz beş popup overlay örneğinin her biri, kopyalamaya değer bir kalıp gösteriyor. Her incelemede tasarım tercihlerini, teklifi ve arkasındaki dönüşüm ilkesini ayırıyoruz; böylece kalıbı bu hafta kendi sitenizde yeniden kurabilirsiniz.

Popup Overlay Nedir?

Popup overlay'ler, lightbox popup ve modal popup olarak da bilinen, ekranı karartarak veya bulanıklaştırarak arka planı kapatan web sitesi popup'larıdır. İşin çoğunu arka plandaki karartma yapar. Gözü popup'a çeker ve ziyaretçiye tek bir karar bırakır: teklife yanıt vermek ya da pencereyi kapatmak.

İsimler pazarlamada aşağı yukarı aynı şeyi anlatır, alttaki kod farklı olsa bile. Ortak özellik, ziyaretçi ile sayfanın geri kalanı arasına giren ve odağı üzerine çeken katmandır.

En iyi çalışan overlay'ler üç işten birini iyi yapar: e-posta toplamak, indirim sunmak ya da ayrılan ziyaretçiyi yakalamak. Başarısız olanlar genellikle üçünü birden yapmaya çalışır; metin kalabalıklaşır ve CTA kendisiyle çelişir. Popup overlay'ler, potansiyel müşteri toplama kampanyaları, ilk kez gelen veya geri dönen ziyaretçilere indirim sunma, ücretsiz kargo gibi sınırlı süreli teklifler, ürünleri upsell/cross-sell gibi çeşitli amaçlar için kullanılabilir.

Overlay'ler; interstitial popup'lardan (tüm ekranı kaplayıp kaydırmayı engeller), karşılama popup'larından (çoğu zaman overlay olarak çalışan bir kullanım alanı) ve kayan kutular ya da yapışkan çubuklardan (arka planı hiç karartmazlar) farklıdır. Biçimi, tek satır metin yazmadan önce seçin. Popup türleri rehberimiz bütün biçimleri anlatıyor. 2026 kıyaslamamızda ortadaki modal popup'lar %0,88 dönüştürüyor, köşe/kayan kutularda bu oran %0,49 (medyan kampanya).

Bu yazı bir örnek galerisi. Mekaniği (overlay'in sayfada nasıl çalıştığı, başlıca overlay türleri ve sıfırdan kurulum) arıyorsanız web sitesi overlay'leri rehberimiz bunları anlatıyor.

Popup overlay'ler 2026'da neden hâlâ işe yarıyor?

Popup'ların bir itibar sorunu var. Rakamlar ise daha insaflı. Ocak 2024 - Eylül 2026 arasında e-posta veya telefon numarası isteyen 3.034 Popupsmart popup'ında (her biri en az 1.000 gösterim ve 14 aktif gün) medyan, gösterimlerinin %0,83'ünü potansiyel müşteriye dönüştürüyor; en iyi %25 %1,96'ya, en iyi %10 %3,87'ye ulaşıyor. Yöntemin tamamı popup dönüşüm kıyaslama raporumuzda.

Medyan ile en iyi %10 arasındaki fark, daha iyi bir teklifin, daha kısa bir formun ve daha sıkı bir hedeflemenin çalışabileceği alandır. 2026'da kazanan overlay'ler, kaybedenlerin yapmadığı dört şeyi yapıyor: belirli bir ziyaretçi segmentini hedefliyor, somut bir teklifle açılıyor, mantıklı bir tetikleyiciyle çalışıyor ve mobil kullanıcıya saygı gösteriyor.

Son sayı, aşağıdaki örneklerdeki tasarım tercihlerinin neden önemli olduğunu gösteriyor: bir overlay, ziyaretçi karar vermeden önce tek bir bakış alır.

Dönüşüm getiren 5 en iyi popup overlay örneği

Bu beş overlay'i her biri farklı bir ders verdiği için seçtim. Biri markayla uyumlu estetiği yakalıyor, biri metni kısa tutup üç alan istiyor, biri e-posta karşılığında indirim veriyor, biri ayrılan ziyaretçiyi yumuşak bir teklifle yakalıyor, biri de kuponu markaya yine hizmet eden bir reddetme seçeneğiyle birleştiriyor. Sırayla okuyun; tek bir kampanyada üst üste kurabileceğiniz beş ayrı kalıbınız olacak.

Ekran görüntüleri, bu yazının ilk yayımlandığı Aralık 2023'te alındı. Markalar popup'larını sık değiştirir; bu yüzden bunları sitelerin bugün gösterdiği şey olarak değil, kalıp olarak okuyun.

1- Dolce & Gabbana Bülten Popup Overlay

Ünlü moda markası Dolce & Gabbana'nın popup'ı, markayla uyumlu tasarımın ders kitabı örneği. Editoryal bir sayfa gibi görünüyor: aynı model görselleri, aynı siyah beyaz palet, aynı tipografi.

Hiçbir yanı siteye sonradan takılmış bir üçüncü taraf widget'ı gibi durmuyor.

Ne yapıyor: Popup markanın tarzını benimsiyor ve e-postanın yanında iki tercih alanı soruyor: cinsiyet ve dil. Ana sayfanın üzerinde açılıyor, ekranın büyük bölümünü kaplıyor ve arkadaki kataloğu karartıyor. Metin indirim yerine Dolce & Gabbana dünyasından haberler vaat ediyor; bu da lüks konumlandırmaya uyuyor. Alanların altındaki onay satırı, e-postaların neyi kapsayacağını söylüyor.

Neden işe yarıyor: Lüks bir marka nadiren "%10 indirim" ile açılır; bu yüzden Dolce & Gabbana fiyat kancasının yerine ayrıcalık kancasını koymuş ve iki ek alanla listeyi baştan segmentlere ayırmış. Popup editoryal tarzla uyumlu olduğu için görsel kesinti küçük. Ziyaretçi onu reklam gibi değil, sitenin bir parçası gibi görüyor.

Ek alanların bir bedeli var. Kıyaslamamızda bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı). Her abonenin daha değerli olduğu lüks bir listede marka, segmentasyonun bu bedeli karşılayacağına bahse giriyor.

Çıkarım: Overlay'inizi hazır bir şablona değil, kendi editoryal tasarım sisteminize uydurun. Ortalama sipariş değeriniz daha küçük bir listeyi haklı çıkarıyorsa, segmentasyon alanını en baştan isteyin.

2- Nike: kısa metin, üç zorunlu alan

Nike, Dolce & Gabbana'dan farklı bir yol seçmiş. D&G görsel kullanırken Nike neredeyse boş alan kullanıyor: bir logo, bir başlık ve tek satırlık metin. Form ise başka bir hikâye: Nike e-posta adresi, doğum tarihi ve alışveriş tercihi istiyor ve üçünü de zorunlu işaretliyor.

Ne yapıyor: Bir başlık, kısa bir alt başlık, üç zorunlu alan, bir buton. Ziyaretçiyi e-postalarına abone etmek için Nike'ın seçtiği metin kısa: ilk bilen siz olun. Vaat, içerik, haber ve özel teklifler içeren Nike e-postaları; spor ayakkabı kitlesi için bu, sınırlı sürümlerden önceden haberdar olmak anlamına geliyor. Arkadaki sayfa hem kararıyor hem bulanıklaşıyor; görsel sadelik de zaten boş alana dayanan ürün fotoğraflarıyla uyumlu.

Neden işe yarıyor: Metin, Hick Yasası'nın uygulaması: ziyaretçiye ne kadar az seçenek verirseniz o kadar hızlı karar verir. Tek vaat, tek buton ve dikkat için yarışan ikinci bir CTA yok. Form ise ters yönde ilerliyor: En alakalı içeriği sunmak için bu popup kullanıcının e-posta adresini ve doğum tarihi, ürün tercihi gibi ek bilgileri istiyor. Pazarlama ekibi, bu detaylı verilerle ilgili müşteri gruplarına indirimler veya sınırlı teklifler sunabilecek. Bedeli daha uzun bir form; Dolce & Gabbana örneğindeki alan sayısı verileri bu bedeli gösteriyor. Nike'ın çekim gücüne sahip bir marka bu takası göze alabilir. Erken erişim açısı kayıptan kaçınmaya dokunuyor: spor ayakkabı meraklıları için bir çıkışı kaçırmak, indirim almaktan daha önemli.

Çıkarım: Vaadi tek satırda tutun. Nike'ın marka gücüne sahip değilseniz önce e-postayı alın, geri kalan her şeyi hoş geldin e-postasında isteyin.

3- Brunomagli İndirim Popup Overlay

Bruno Magli, e-ticaretin en çok kopyalanan kalıbını kullanıyor: e-postanı gir, indirim kodu al. Yine de uygulamanın öğrettiği bir şey var. Overlay sıkı kırpılmış, teklif net ve görsel popup'ı arkadaki ürüne bağlıyor. Ziyaretçiye tam istediği anda işine yarayan bir şey sunan bir indirim popup overlay'i.

Ne yapıyor: Başlıkta "Unlock 15% off your order" (siparişinizde %15 indirimin kilidini açın) yazıyor. Tek alan, tek "Continue" butonu ve bir kapatma ×'i. Popup'ın altında markanın spor ayakkabılarından bir sıra uzanıyor; bu da popup'ı bir kesinti değil, ürün sayfasının devamı gibi hissettiriyor.

Neden işe yarıyor: İndirim somut ve anında. Kıyaslamamızda indirim kodu sunan kayıt popup'ları %1,46 dönüştürüyor; kod sunmayan kayıt popup'larında bu oran %0,75. İndirim overlay'i, e-posta alışverişini getirisi belli bir takasa çeviriyor. Ziyaretçi adresiyle %15'lik bir kupon satın alıyor ve bunu biliyor. Ürün sırası küçük bir dokunuş, ama popup'ın markaya ait olduğu fikrini satıyor.

Tek zayıf nokta buton. "Continue" teklif hakkında hiçbir şey söylemiyor; birinci şahıs butonlar ("Send my code", yani "Kodumu gönder") nötr ifadelere karşı %1,18'e %0,80 dönüştürüyor (İngilizce popup'lar, medyan kampanya). İlk deneyeceğim test "Unlock my 15%" olurdu.

Çıkarım: İndirim overlay'i kullanıyorsanız yüzdeyi açıkça yazın ve ürünü popup'ın içinde gösterin. Belirsiz teklifler ("bugün daha fazla tasarruf edin") ziyaretçiye tartacak bir şey vermez.

4- CoSchedule Exit-Intent Popup Overlay

CoSchedule, içerik pazarlama kampanyalarını planlayıp yürütmek için kullanılan hepsi bir arada bir platform. Exit-intent overlay'i, bu kalıbın B2B SaaS'taki iyi örneklerinden biri. Ayrılan ziyaretçiye kalması için yalvarmak yerine teklifi değiştiriyor (pazarlama takviminin demosunu ayırtmak) ve görseli doğrudan sattığı ürüne bağlıyor.

Ne yapıyor: İmleç tarayıcının kapatma butonuna veya adres çubuğuna doğru ilerlediğinde açılıyor. Bu çıkış niyeti popup overlay'inde CoSchedule, pazarlama takvimini markanın tarzında bir görselle tanıtıyor. Başlıkta "Before you go..." (gitmeden önce) yazıyor; metin, CoSchedule'ın pazarlama takvimi yazılımına kaydolmanın yalnızca 30 saniye sürdüğünü söylüyor. Marka renkleri korunuyor ve metin, sıradan bir alışverişçiye değil ziyaretçinin olası iş unvanına sesleniyor.

Neden işe yarıyor: Çıkış niyeti tetikleyicileri ziyaretçiyi niyetin en düşük olduğu anda yakalar; zaten ayrılıyordu, bu yüzden kesintinin bedeli neredeyse sıfır. Yine de işi tetikleyicinin yapmasını beklemeyin. Çıkış niyeti istatistiksel olarak güvenilir bir üstünlük göstermiyor: en hassas çıkış niyeti ayarındaki popup'lar, çıkış niyeti olmayanlara karşı %1,10'a %0,78 dönüştürdü (medyan kampanya); bu fark tesadüf olabilir. Ayrıntılar çıkış niyeti popup'ları işe yarıyor mu yazımızda.

Yani işi teklif taşıyor. CoSchedule, ürün sayfasından ayrılan birinin bir "%10 indirim" teklifiyle dönüşmeyeceğini fark etmiş, çünkü SaaS fiyatlandırması böyle işlemiyor. Ziyaretçiyi önce ürüne bakmaya, sonra güçlü bir CTA ile demo planlamaya çağırıyor. Demo talebi, niyeti yüksek bir ziyaretçi için doğru sonraki adım ve geri kalan herkes için işe yarar bir yeniden hedefleme kancası. Biçim bir kurtarma girişiminden çok yönlendirilmiş bir devir teslime benziyor; alıcınız anlık alışveriş yapmıyor, araştırıyorsa doğru ton da bu.

Çıkarım: B2B SaaS'ta çıkış overlay'inizdeki indirimi bir demo veya değerli bir içerik teklifiyle değiştirin. Ziyaretçinin çıkış niyeti satın alma modunu değil araştırma modunu gösterir; popup'ınız buna saygı göstermeli.

5- Revolve İndirim Kuponu Popup Overlay

Revolve'un overlay'i beşi içinde en eksiksiz kalıp. E-posta karşılığında indirim veriyor, bir tercih seçimi ekliyor ve ziyaretçiyi sitede tutan saygılı bir çıkış kapısı bırakıyor.

Ne yapıyor: Bu popup, e-posta karşılığında %10 indirim sunuyor ve segmentasyon için kadın, erkek veya ikisi seçeneği ekliyor. Butonda "Get my coupon" (kuponumu al) yazıyor. Ziyaretçi popup'ı X butonuyla ya da "No thanks, just let me shop" (Hayır, teşekkürler, sadece alışveriş yapmak istiyorum) ifadesiyle kapatıp gezinmeye devam edebilir. Bu, hayır dediği için ziyaretçiyi cezalandırmayan yumuşak bir ret. Bir yanda dört fotoğraflık bir kolaj, diğer yanda form ve düz siyah bir buton var.

Neden işe yarıyor: Onu üç ayrıntı taşıyor. Teklif net: %10 indirim belirten popup'lar %1,25 dönüştürüyor; indirim belirtmeyen popup'larda bu oran %0,67. Buton birinci şahısla yazılmış; yukarıdaki Bruno Magli örneğinde öne çıkan ifade biçimi bu. Ret metni de satın almaya hazır olmayanların suçluluk duymadan gezinmeye devam etmesini sağlıyor ve gelecekteki niyeti koruyor. Revolve, e-posta fırsatını kaybetmeden dönüşüm bahsini güvenceye alıyor.

Çıkarım: Her indirim overlay'ine ziyaret sayısına göre segmentasyon ekleyin. Teklifi, ziyaretçiyi kapanan bir sekmeye değil sayfaya geri götüren bir ret bağlantısıyla eşleştirin.

Yüksek dönüşümlü popup overlay'lerde ortak kalıplar

Beş marka, beş ayrı kitle; yine de aynı kalıplar dönüp duruyor. Kazananların ortak noktaları aşağıda. Kıyaslamamızın söyleyecek bir şeyi olduğunda onunla karşılaştırdık.

• Overlay başına tek değer önerisi. Yukarıdaki her örnek tek bir şey vaat ediyor: marka haberleri, çıkışlardan önceden haberdar olmak, %15 indirim, bir demo, %10 indirim. Hiçbiri aynı anda üç fayda satmaya çalışmıyor. Teklifleri üst üste koyduğunuzda ziyaretçi karar vermeden önce her birini tartmak zorunda kalır.
• Tek birincil CTA, tek ikincil eylem. İşi buton yapıyor. Ret bağlantısı küçük, kibar ve görsel ağırlık için hiçbir zaman yarışmıyor. Üçüncü bir seçenek ("Belki sonra", "Daha fazla bilgi") yok, çünkü her ek seçenek kararı yavaşlatır.
• Markayla uyumlu tasarım. Dolce & Gabbana'nın editoryal tarzı, Nike'ın boş alanı, Revolve'un fotoğraf kolajı: her overlay üçüncü taraf bir widget gibi değil, sitenin parçası gibi okunuyor. Markaya uyum güvenle ilgili, tek bir kazanan renk bulmakla değil: buton rengi, koyu veya açık popup arka planı, aciliyet kelimeleri ve soru başlıkları dönüşümde ölçülebilir bir etki göstermiyor; veri, küçük etkileri dışlayamayacak kadar gürültülü.
• Az form alanı. Bruno Magli'nin overlay'i tek bir veri topluyor. Dolce & Gabbana iki tercih alanı ekliyor, ama yalnızca lüks listesi segmentasyonu en baştan gerektirdiği için; Nike da doğum tarihi ve alışveriş tercihiyle aynısını yapıyor. İsim alanı daha zor bir karar: e-postanın yanına isim alanı eklemenin güvenilir bir etkisi yok: genel olarak lehine görünen fark (yalnızca e-postaya karşı %1,25'e %0,88), formu nadiren değişen kampanyalarda tersine dönüyor (%0,74'e karşı %0,79).
• Niyete uyan tetikleyici. Giriş tetikleyicileri ilk ziyaret indirimlerinde işe yarar. Çıkış niyeti, ziyaretçi zaten araştırma moduna geçmişse işe yarar. Zamana ve kaydırmaya dayalı tetikleyiciler, ilgi sinyallerinin daha geç geldiği içerik sitelerine uyar. Yanlış tetikleyici, yanlış popup demektir.
• Önce mobil boyutlandırma. Telefonda bir overlay'in başparmakla ulaşılabilen CTA'lara ve kapatma butonlarına ihtiyacı var. Mobil ziyaretçiyi kapana kıstıran bir overlay, gelmek üzere olan bir iade talebidir.
• Geri dönen ziyaretçileri koruyan segmentasyon kuralları. En basit hali yalnızca yeni ziyaretçilere gösterme kuralı: yalnızca yeni ziyaretçileri hedefleyen popup'lar %1,13 dönüştürüyor; herkese gösterilenlerde bu oran %0,77. Bu kuralla geri dönen ziyaretçiler popup'ı hiç görmüyor; bu da overlay'lerle ilgili en yaygın şikâyeti, aynı teklifin tekrar tekrar gösterilmesini çözüyor. Sıklık sınırları, ziyaretçi türü ve URL hedeflemesi aynı işi başka açılardan görür; böylece kimse aynı popup'ı sonsuza kadar görmez. "Popup'lar rahatsız edici" şikâyetlerinin çoğu buradan çıkıyor.

Popupsmart İle Etkileşimli Popup Overlay Oluşturun

Popupsmart, bir overlay'i beş adımda yayına almanızı sağlayan kodsuz bir popup oluşturucu. Aşağıdaki adımlar kayıttan canlı kampanyaya kadar bütün yolu kapsıyor ve Popupsmart'ın ilk popup kampanyanızı oluşturma rehberini izliyor. Adımları, vermeniz gereken beş karara göre grupladım.

Kampanyayı tıklayarak kurmak yerine anlatmayı tercih ediyorsanız, Popupsmart'ın yapay zekâ ajanı sohbetteki bir istekten bütün bir kampanyayı (şablon, hedefleme ve tetikleyiciler, entegrasyonlar) kuruyor ve yayına alıyor; ücretsiz plan dahil her planda.

1. Adım: Kaydolun ve kampanyanızı oluşturun

Ücretsiz bir Popupsmart hesabı açın ve kontrol panelinde "+ Yeni Kampanya" butonuna tıklayın. Kampanyaya bir ad verin, çalışacağı web sitesini seçin ve oluşturucuyu açmak için Kaydet'e tıklayın.

2. Adım: Bir overlay şablonu seçin

İstediğiniz overlay biçimine uyan bir düzen seçin. Şablon galerisi popup türüne göre filtreleniyor (Light Popup, Tam Ekran Popup, Floating Bar); animasyonlu ve çok adımlı popup'lar için ek filtreler de var. Çoğu ekip giriş tetikleyicileri için ortada bir lightbox'la ya da sepet sayfaları için odaklı bir exit-intent düzeniyle başlıyor. Karar vermeden önce ilham için popup şablonlarına veya popup tasarım şablonlarımıza göz atabilirsiniz. Hiçbiri uymuyorsa boş bir şablon seçip sıfırdan kurun.

3. Adım: Tasarımı ve metni özelleştirin

Overlay, Özelleştir ve Stil adımlarında sizin olmaya başlıyor. Başlığı, alt başlığı, CTA buton metnini, renkleri, görseli ve gizlilik satırını güncelleyin. Stil adımı overlay'in kendisini de barındırıyor: gövde stili ayarlarında kaplama rengini ve opaklığını, yani arkadaki sayfanın ne kadar kararacağını belirliyorsunuz; gelişmiş seçeneklerde de ziyaretçilerin popup'ı ESC tuşuyla mı yoksa overlay'e tıklayarak mı kapatabileceğini seçiyorsunuz (popup stilini ayarlama). Popup'ı arkasındaki sayfanın tasarım sistemine uydurun; yukarıdaki Bruno Magli örneği iyi bir ürün uyumunun nasıl göründüğünü gösteriyor. Teklif metnini de burada yazıyorsunuz. Kısa ve somut tutun.

4. Adım: Form öğelerini ve hedeflemeyi ekleyin

Segment adımını açın. Overlay'i kimin, ne zaman göreceğine burada karar veriyorsunuz. Ziyaretçi türünü (ilk kez gelen, geri dönen, ikisi), cihazı (masaüstü, mobil, tablet), URL yolu kurallarını, zamanlama aralıklarını ve sıklık sınırlarını seçin ya da Akıllı Mod'u açıp hedeflemeyi Popupsmart'a bırakın. Form alanlarını az tutun; yukarıdaki bir veya iki alan verileri bunun nedeni. İsim veya telefon gerekiyorsa bunu bir takip e-postasında isteyin.

5. Adım: Tetikleyicileri ayarlayın ve yayınlayın

Tetikleyiciyi aynı Segment adımında seçin. Sayfa yüklenmesi ilk ziyaret indirim overlay'lerinde işe yarar. Çıkış niyeti, CoSchedule örneğindeki gibi ayrılanları yakalamak istediğinizde işe yarar. Uzun sayfalarda ise kaydırma derinliği (%50 veya %70) daha iyi oturur. Yayınla adımında hedefleme özetini kontrol edip Yayınla'ya tıklayın. Sitenizde Popupsmart gömme kodu henüz yoksa kodu kapanış </body> etiketinin hemen önüne yapıştırın veya Google Tag Manager ile ekleyin, alan adınızı doğrulayın ve overlay'in ayarladığınız gibi açıldığını görmek için sayfayı yükleyin.

Popup overlay için en iyi uygulamalar

Medyanın üzerine çıkan ekipler temelleri sıkı tutuyor. Yayına almadan önce her overlay'i tutacağım beş ölçü şunlar.

• Tetikleyiciyi sabırsızlığa değil niyete göre zamanlayın. Sayfa yüklenmeden giriş overlay'i göstermeyin. Görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); yön verinin her yılında aynı kalıyor ama fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun. Gecikme süresinin kendisi (0-5 saniyeye karşı 21-60 saniye) dönüşümde ölçülebilir bir fark yaratmıyor, yani kısa bir bekleme yeterli. Ya da okumaya başlamış ziyaretçiyi yakalamak için kaydırma derinliğini kullanın. Çıkış niyeti yalnızca algılanan ilk çıkış hareketinde tetiklenmeli, imleç her gezindiğinde değil.
• Metni 20 kelimenin altında tutun. Başlık, alt başlık ve CTA metni birlikte, kaydırmadan bir telefon ekranına sığmalı. Bir popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor. Teklifi bir paragrafın içine gömerseniz çoktan kaybetmişsiniz demektir.
• Butona okunur bir kontrast verin. WCAG 2.2 AA, buton metni ile buton arasında 4,5:1, buton ile çevresindeki panel arasında 3:1 kontrast ister. Bu tavan değil, taban. Panele karışan bir buton, teklif iyi olsa bile tıklama kaybettirir. Gri tonlamada test edin: butonu arka plandan ayıramıyorsanız renk körü bir ziyaretçi de ayıramaz.
• Önce mobil için tasarlayın. Popup gösterimlerinin %63'ü mobilde gerçekleşiyor ve mobilde medyan popup %1,02 dönüştürüyor, masaüstünde bu oran %0,57. Kapatma butonunu en az 44x44 piksel yapın, formu başparmağın ulaşabileceği yerde tutun ve telefonda ekranın tamamını asla kapatmayın. Google'ın müdahaleci geçiş reklamları rehberi mobilde ana içeriği kapatan popup'lara karşı uyarıyor; yani bu bir SEO konusu da. Mobil popup rehberimiz daha fazlasını anlatıyor.

• Sıklığı haftanın üçüncü görüşünden önce sınırlayın. Bir ziyaretçinin bir hafta içinde popup'ı gördüğü ilk iki sefer benzer oranlarda dönüşüyor (gösterimlerin %1,33'ü ve %1,22'si, toplu); üçüncü gösterimden itibaren dönüşüm düşüyor, altıncı gösterimden itibaren %0,41'e, yani ilk gösterim oranının %31'ine iniyor. Popup'ı ikinci kez göstermek aynı kampanya içinde dönüşümde ölçülebilir bir düşüşe yol açmadı; düşüş üçüncü gösterimle başlıyor. Ondan sonra aynı overlay'i her ziyarette göstermek, ziyaretçiye okumadan kapatmayı öğretir. Dönüştükten sonra popup'ı o kullanıcı için kalıcı olarak gizleyin.

Bu kuralların tasarım tarafı (kapatma butonları, boyutlar, boşluklar) için popup UX tasarımı rehberimize bakın.

Kaçınılması gereken yaygın popup overlay hataları

Aynı birkaç hata sürekli karşımıza çıkıyor. Daha iddialı taktiklere geçmeden önce bunları düzeltin.

• Çok fazla veri istemek. Eklediğiniz her alanın bir bedeli var: yukarıdaki alan sayısı verilerinde üç alan %0,56, tek alan %0,88 dönüştürüyor; e-posta yerine telefon numarası isteyen formlar en zayıf görünüyor (yalnızca e-postadaki %0,88'e karşı %0,46), ancak bu fark istatistiksel olarak güvenilir değil. İlişkiyi başlatmak için gereken en azını isteyin. Gerisini davranış verisiyle veya bir takip e-postasıyla tamamlayın.
• Her ziyaretçiye aynı overlay'i göstermek. İlk kez gelen bir ziyaretçi ile geri dönen bir müşteri farklı şeyler ister. Yeni ziyaretçiler, önceki 7 gün içinde sitede bulunan ziyaretçilere göre popup'larda daha sık dönüşüyor: aynı popup, kampanyaların %75'inde yeni ziyaretçilerde daha iyi dönüştürüyor (medyan fark 0,30 yüzde puan; toplu olarak gösterimlerin %1,28'ine karşı %0,54'ü). Segmentasyonu atlamak, dönüştüren bir popup ile spam olarak bildirilen bir popup arasındaki farktır. Yayına almadan önce en az iki varyant hazırlayın: ilk kez gelenler ve geri dönenler için.
• Her sayfada tetiklemek. Site genelindeki popup'lar çaresiz görünür. Teklifin anlamlı olduğu sayfaları seçin (indirimler için kategori sayfaları, içerik teklifleri için blog yazıları, demolar için fiyat sayfası) ve gerisini hariç tutun. Sayfa türü çoğu ekibin sandığından daha önemli: sepet ve ödeme sayfalarındaki popup'lar %4,57 dönüştürüyor, ana sayfada bu oran %1,07 (medyan kampanya); blog sayfalarında %0,23.
• Kapatma butonunu unutmak. Bazı overlay'ler X'i küçük gri bir simgenin arkasına gizliyor ya da kapatmak için arka plana tıklamaya güveniyor. İki davranış da ziyaretçiyi sinirlendiriyor ve mobil bir overlay'de gizli bir kapatma butonu Google'ın geçiş reklamları rehberine ters düşüyor. Kapatma butonunu görünür, büyük ve alışılmış konumda tutun.

İlk popup overlay'inizi bu hafta yayına alın

Beş overlay, ortak kalıpları, Popupsmart'taki kurulum ve iyi örnekleri ortalamadan ayıran uygulamalar bu kadar. Okuduklarınızı test etmenin en hızlı yolu bu hafta tek bir kampanya yayına almak. İlk kez gelen ziyaretçiler için tek bir teklifle başlayın, sitenizin en çok trafik alan sayfasında gösterin, sıklığı haftada iki görüşle sınırlayın ve yedi gün boyunca kayıt oranını izleyin. Oradan yineleyin. Daha fazla fikir istediğinizde web sitesi popup örneklerimiz overlay'lerin ötesindeki kalıpları topluyor.

Sıkça sorulan sorular

Popup overlay ile modal arasındaki fark nedir?

Pazarlamada bu terimler büyük ölçüde örtüşür. Popup overlay, sayfanın üzerinde arka planı karartarak açılan her popup'tır. Modal ise aynı fikrin mühendislik tarafındaki adıdır: kullanıcı kapatana kadar sayfanın geri kalanıyla etkileşimi engelleyen bir pencere. Günlük kullanımda "modal popup", "lightbox" ve "popup overlay" aynı kalıbı anlatır. Kayan kutular, yapışkan çubuklar ve yüzen widget'lar farklı formatlardır: arka planı karartmaz, odağı da çalmazlar.

Popup overlay'i ne zaman göstermeliyim?

Tetikleyiciyi ziyaretçinin olası niyetine göre seçin. İlk ziyaret indirim tekliflerini, kısa bir beklemeden sonra girişte gösterin: kıyaslamamızda görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); bu bir kural değil, eğilim ve gecikme süresinin kendisi ölçülebilir bir fark yaratmıyor. Ürün veya fiyat sayfasından ayrılanları yakalamak için çıkış niyetini kullanın. İçerik sayfalarında kaydırma derinliğiyle (%50-70) tetikleyin, çünkü derin bir kaydırma gerçek ilgiye işaret eder.

Popup overlay performansını nasıl ölçerim?

En az üç sayıyı izleyin: potansiyel müşteri dönüşüm oranı (potansiyel müşteriler bölü popup gösterimleri), gösterim başına gelir (indirim popup'larında ilişkilendirilen geliri gösterimlere bölün) ve kayıttan sonraki 30 gün içindeki abonelikten çıkma veya şikâyet oranı. Dönüşüm oranı tek başına yanıltıcıdır. Bir ay içinde abonelikten çıkan çok sayıda adres toplayan bir popup, aboneleri kalan daha küçük bir popup'tan daha kötü bir kanaldır. Karşılaştırma için: e-posta veya telefon numarası isteyen medyan Popupsmart popup'ı gösterimlerinin %0,83'ünü potansiyel müşteriye dönüştürüyor (3.034 popup, Ocak 2024 – Eylül 2026).

Popup overlay'ler ziyaretçileri rahatsız etmeden mobilde çalışabilir mi?

Evet, ama kurallar sıkılaşır. Ekranı doldurmayan daha küçük bir overlay kullanın, kapatma butonunu başparmağın uzanabileceği bir yere koyun (modalın sağ üstü veya altı) ve girişte göstermekten kaçının. Mobilde çıkış niyetini algılamak daha zordur: çoğu araç imleç hareketi yerine geri tuşu sinyalini veya hızlı yukarı kaydırmayı kullanır. Sıklık sınırları mobilde daha önemlidir, çünkü kötü bir popup deneyiminden sonra ziyaretçiyi geri kazanmak masaüstüne göre çok daha zordur. Overlay'lerin çoğu da mobilde görülüyor: kıyaslamamızda popup gösterimlerinin %63'ü mobilde gerçekleşiyor.

İlgili Makaleler:

• Vue Modal Popup Nasıl Yapılır