Gerçek Sitelerden 20 Above the Fold Örneği (2026 İncelemeleri)

Örnekler SaaS, e-ticaret ve DTC alanındaki gerçek markalardan geliyor. Her inceleme, ziyaretçi kaydırmadan önce tıklamayı kazanan hero metnini, CTA yerleşimini, sosyal kanıtı ve görsel tercihi gösteriyor. Yazının sonunda bir kalıp kontrol listesi, yaygın hatalar, Google'ın ilk ekran hakkında söyledikleri ve bir test planı bulacaksınız.

Above the fold nedir?

Above the fold (ekranın ilk görünen alanı), bir web sayfasında ziyaretçinin kaydırmadan gördüğü her şeydir. Terim matbu gazetelerden gelir: katlanmış ön sayfanın üst yarısı gazeteyi bayide satmak zorundaydı; ekranda ise fold, tarayıcı penceresinin alt kenarıdır, bu yüzden her cihazda, pencere boyutunda ve yakınlaştırma düzeyinde farklı bir yerde durur.

Gazete editörleri en önemli manşeti, en güçlü fotoğrafı ve gazetenin logosunu ön sayfanın üst yarısına yerleştirirdi ki haber bayideki raftan kendini satsın. Sayfa tam ortadan katlanırdı ve yukarı bakan yarı bütün işi yapmak zorundaydı.

Web bu terimi basından aldı ve ilk dönemin tasarımcıları her kayıt formunu, değer önerisini ve güven rozetini masaüstü monitörün ilk ekranına sıkıştırdı. Bir sebepleri vardı. Jakob Nielsen 1997'de Changes in Web Usability Since 1994 yazısında, ilk çalışmalarında kullanıcıların yalnızca %10'unun ilk ekranın altındaki bağlantıları görmek için bir gezinme sayfasını kaydırdığını, o tarihe gelindiğinde ise kullanıcıların çoğunun uzun bir ana sayfada kaydırdığını yazdı.

O oran o günden beri çok değişti. İnsanlar artık her cihazda kaydırıyor. Ama ziyaretçinin okumaya devam edip etmeyeceğine ya da sekmeyi kapatıp kapatmayacağına karar verdiği yer hâlâ ilk ekran.

Bugün "fold" sabit bir piksel yüksekliği değil. Ziyaretçinin ekranında ne görünüyorsa odur ve bu cihaza, ekran yönüne, tarayıcının araç çubuklarına ve yakınlaştırma düzeyine bağlıdır. Bu yazıdaki ana sayfalar 1440 × 900 boyutunda bir dizüstü pencerede incelendi; mobil notlar 390 × 844 boyutunda bir telefon görünümünden geliyor. Hero alanınız hepsinde çalışmalı. Bazı pazarlamacılar bu ilk ekrana top of the fold diyor; aynı şeyden söz ediyorlar.

Dijital reklamcılıkta terimin ikinci bir anlamı da var: kaydırmadan görünen bir reklam alanı. İlk ekranın ne kadarının reklama gittiği, aşağıdaki SEO bölümünde göreceğiniz gibi, Google'ın sayfa düzeni değişikliğinin de baktığı şeydi.

Above the fold 2026'da neden önemli?

İnsanlar kaydırsa da dikkatlerinin büyük kısmını ilk ekrana veriyor. Nielsen Norman Group, 2018 tarihli kaydırma ve dikkat göz izleme çalışmasında kullanıcıların sayfa görüntüleme sürelerinin yaklaşık %57'sini fold'un üstünde, %74'ünü ilk iki ekranda geçirdiğini buldu. Grubun 2010 çalışmasında fold'un üstünün payı %80'di.

Bu 2015 analizi The Fold Manifesto yazısından geliyor. Nielsen Norman Group orada tasarım için asıl önemli noktayı da vurguluyor: kullanıcılar kaydırıyor, ama yalnızca fold'un üstündeki kısım yeterince umut vadediyorsa. Sayfanın geri kalanının okunup okunmayacağına ilk ekran karar veriyor.

İşe yarayan hero alanlarının çoğunda ortak olan tek bir şey var. Ziyaretçi, bir bakışta ürünün ne yaptığını ve sırada ne yapacağını anlıyor. Bu netse ziyaretçi kaydıracak kadar ilgileniyor. Net değilse hemen çıkıyor ve yeniden hedefleme bütçeniz boşa gidiyor.

Fold'un öldüğünü savunanlar hâlâ var. Ölmedi. Kaydırma alışkanlığı değişti, ama kötü bir ilk izlenimin bedeli azalmadı, arttı; çünkü dikkat için rekabet hiç bu kadar sert olmamıştı.

Etkili bir above the fold alanının temel öğeleri

Bu yazıdaki above the fold alanlarının ortak malzemesi az ama net. Bir sonraki bölümdeki her örnek bunlardan birkaçını bir araya getiriyor.

• Net bir değer önerisi: Ürünü, kitleyi ve sonucu söyleyen tek bir cümle. Yabancı biri başlığı bir kez okuduktan sonra ne sattığınızı anlamıyorsa yeniden yazın. "Excel'den nefret eden restoranlar için stok yönetimi", "Restoran teknolojisinin geleceği"nden iyidir. Bu benzersiz satış teklifi örnekleri aynı fikri tek satırda gösteriyor.

• Ana CTA: Markanın baskın renginde, eylem odaklı metinli tek bir buton ("Ücretsiz başla", "Demo al", "İndirimi gör"). Üç buton değil. Aynı anda bağıran bir buton, bir telefon numarası ve bir sohbet penceresi değil. Karar yorgunluğu ziyaretçi kaydırmadan başlar.

• İş gören bir hero görseli: Bir ürün ekran görüntüsü, gerçek bir müşteri fotoğrafı, kısa döngülü bir video ya da açıklamalı bir arayüz görüntüsü. Takım elbiseli insanların el sıkıştığı stok fotoğraflar sayılmaz. Görsel, ürünün neye benzediğini ya da ürünle hayatın neye benzediğini göstermeli.

• Niyete uyan navigasyon: Üst menü bağlantıları ziyaretçinin muhtemel bir sonraki adımını yansıtmalı (Fiyatlandırma, Ürün, Müşteriler), şirket içi organizasyon şemanızı değil (Çözümler, Kaynaklar, Şirket).

• Gösteriş rakamı değil, sosyal kanıt: Tanınan müşterilerden bir logo duvarı, yorum sayısıyla birlikte bir yıldız puanı ya da adı verilen bir müşteriden tek satırlık bir alıntı. "Sektör liderlerinin güvendiği" ifadesi görünmezdir. "12.400 Shopify mağazası kullanıyor" somuttur.

• Sürtünmeyi azalttığı yerde güven sinyali: SaaS fiyatlandırma CTA'sının yanında bir G2 rozeti, e-ticaret satın alma butonunun yanında para iade garantisi, DTC hero alanında ücretsiz kargo metni. Güveni, şüphenin doğduğu yere koyun; kimsenin okumadığı alt bilgiye değil. E-ticaret güven rozetleri rehberimiz her rozetin nerede işe yaradığını anlatıyor.

• Ölçülü kıtlık ya da aciliyet: Canlı sipariş sayıları, az stok uyarıları, indirim geri sayımları. Gerçek aciliyet dönüştürür. Her ziyarette sıfırlanan sahte aciliyet ikinci ziyarette güveni öldürür, o yüzden uydurmayın. Aynı kural geri sayım sayaçlı popup'lar için de geçerli.

• Önce mobil boyut: Hero alanını önce dikey tutulan bir telefon için tasarlayın. Başlığınız, CTA'nız ve tek bir görsel öğeniz o ilk ekrana sığıyorsa güvendesiniz. Sonra masaüstü için genişletin.

Canlı ana sayfalardan 20 above the fold örneği

İşte 20 marka örneği. SaaS, e-ticaret, moda, yiyecek, otomotiv ve araçlar alanına yayılıyorlar. Her bölüm markanın above the fold alanında ne yaptığını, bu tercihin kendi bağlamında neden işe yaradığını ve yarın uygulayabileceğiniz dersi anlatıyor.

Her ekran görüntüsü 10 Ekim 2026'da, 1440 × 900 boyutunda bir tarayıcı penceresinde, hesabı olmayan ilk kez gelen bir ziyaretçi olarak alındı. Çerez bildirimleri ve ülke seçiciler, ziyaretçinin nerede olduğuna bağlı oldukları için önce kapatıldı. Melula'nın ana sayfası değişmemişti, bu yüzden eski ekran görüntüsü kaldı. Üç site (EyeBuyDirect, Tesla, Walmart) otomatik ziyareti engelledi; bu yüzden bölümleri önceki yakalamayı geçmiş zamanla anlatıyor.

1. Ahrefs

Ahrefs, backlink ve anahtar kelime verisi üzerine kurulu, hepsi bir arada bir SEO platformu; artık arama ve yapay zekâ görünürlüğünü birlikte konumluyor. Ana sayfası bu yazının ilk sürümünden bu yana çok değişti ve Ekim 2026 sürümü, bir tanıtım bandının above the fold alanına neye mal olduğunu gösteriyor.

Ne yapıyor: Ahrefs'in kendi menüsünün üstünde bej bir bant duruyor ve ekranın üstteki 360 pikselini kaplıyor. Bant Letaido'yu, "Ahrefs'in tescilli web dizini üzerine kurulu tek yapay zekâ pazarlama platformu" olarak tanıtıyor; yanında bir "Get Started" butonu ve üç büyük rakam var: ayda 400 milyon yapay zekâ istemi, takip edilen 41,9 milyar anahtar kelime, web dizinindeki 170 trilyon sayfa. Altında, kraliyet mavisi Ahrefs hero alanı imza rengini koruyor; odanın öbür ucundan okunabilecek büyüklükteki başlık, işletmenizi "in search, AI, and beyond" bulunabilir kılmaktan söz ediyor. Alt başlık trafiği, görünürlüğü ve geliri büyütecek araçları ve veriyi vaat ediyor.

Neden işe yarıyor: Mavi renk hemen Ahrefs'i çağrıştırıyor ve başlık bir özelliği değil, sonucu (aramada ve yapay zekâ yanıtlarında bulunmak) söylüyor. Banttaki üç rakam somut, somut olan da sıfattan iyidir. Bedeli şu: iki ürün tek bir ilk ekranı paylaşıyor. 1440 × 900'de hero alanının kendi "Start for Free" butonu 907. pikselde, yani fold'un hemen altında başlıyor; dizüstündeki ziyaretçinin gördüğü tek Ahrefs kayıt butonu menüdeki "Sign up".

Ana çıkarım: Menünün üstündeki tanıtım bandı, kendi hero alanınızdan kiraladığınız bir alandır. Bir tane eklerseniz, hero butonunun önemsediğiniz en küçük ekranda hâlâ göründüğünü kontrol edin.

2. Allbirds

Allbirds doğal malzemelerden minimalist ayakkabı ve giyim ürünleri satıyor. Hero alanı tam bir DTC moda sayfası, ama dönüşüm işçiliği bir SaaS açılış sayfasına daha yakın.

Ne yapıyor: En üstteki ince siyah bant kargo mesajlarını döndürüyor; aralarında "100 doları aşan siparişlerde ücretsiz kara kargosu" ve siparişlerin 30 güne kadar sürebileceği notu var. Havada duran beyaz menü kısa: New Arrivals, Shop All, Men, Women. Hero, ikiye bölünmüş bir fotoğraf: solda bir sokak lambasına yaslanmış bir kadın, sağda yeni Dasher NZ ayakkabılarının yakın çekimi; üzerinde elle çizilmiş karalamalar ve karalama yazıyla "Ever have a tree hug you back?" Sağ altta "All new Dasher NZ collection", "Wildly Comfortable. Super Natural." başlığı ve iki buton: Shop Men ve Shop Women.

Neden işe yarıyor: Kitleyi hero alanında ayırmak bir tıklamadan ve bir hemen çıkmadan tasarruf ettirir. Ayakkabı alışverişi yapanlar tek bir katalog istemez. Kendi bölümlerini isterler. "Super Natural" ifadesi, bir paragrafın yapacağı marka işini iki kelimeyle yapıyor. 390 × 844'lük telefon görünümünde Allbirds hero alanını ayakkabı yakın çekimine kırpıyor ve iki butonu da ilk ekranın içinde tutuyor.

Ana çıkarım: Kitleniz kendini bölümlere ayırıyorsa, onları hero alanında ayırın. Doğru kategoriye yönlendiren iki CTA, genel bir "Shop now"dan her zaman iyidir.

3. Apple

Apple'ın tanıtıma ihtiyacı yok, ama hero alanındaki disiplin incelemeye değer. Above the fold alanını, o ay neyi önemsemenizi istiyorlarsa onun için bir reklam panosu gibi kullanıyorlar.

Ne yapıyor: Siyah arka plan. Güzel ışıklandırılmış tek bir ürün çekimi: dev krom "PRO" harflerinin üzerinde yatan iPhone 18 Pro. Ürün adı, iki kelimelik bir konumlandırma satırı ("Pro further.") ve iki CTA: "Learn more" ve "Buy". Üst navigasyon yalnızca kelimelerden oluşuyor ve sade. Bir sonraki ürünün başlığı (iPhone Duo) ekranın alt kenarında başlıyor.

Neden işe yarıyor: İki CTA'lı kalıp (bilgi al ya da satın al), seçim dayatmadan iki alıcı aşamasını da karşılar. Apple bazı ziyaretçilerin araştırdığını, bazılarının hazır olduğunu bilir ve ikisine de bir buton verir. Siyah arka plan rakip görsel gürültüyü yok eder, böylece gözünüzün konabileceği tek şey ürün olur. Altta görünen bir sonraki bölüm, ziyaretçiye sayfanın devam ettiğini söyler; bu da Nielsen Norman Group'un "false floor" (sahte zemin) dediği durumu önler.

Ana çıkarım: Alıcı yolculuğunun hem araştırma hem satın alma yolu olan her üründe "Learn more / Buy" ikilisini kullanın. Üzerinde düşünülerek alınan ürünlere tek bir butondan daha iyi uyar.

4. Bobo's

Bobo's, sağlıklı ama lezzetli atıştırmalık arayanlara yulaf barları ve atıştırmalıklar üretiyor. Hero alanı eskiden paketli gıda kategorisini sıcak, davetkâr bir ana dönüştürürdü; 2026'da ise bir ürün yerine bir iş değişikliğini taşıyor.

Ne yapıyor: İkiye bölünmüş bir hero. Solda, pembe bir panelde iki kutu Bobo's PB&J. Sağda, gök mavisi üzerinde "A New Chapter for Bobo's" başlığı ve tek bir satır: Bobo's'tan alışveriş biçiminin değiştiğini, ama bilinen atıştırmalıkların pişirilmeye devam ettiğini söylüyor. İki buton: Learn More ve Find Stores. Üst bilgideki buton da "Find in Stores" diyor ve hero alanının altındaki kayan şerit atıştırmalıkların etiketlerini sıralıyor (koşer, GDO'suz, glütensiz, %100 tam tahıl).

Neden işe yarıyor: Bir marka insanların satın alma biçimini değiştirdiğinde, ilk ekran bunu her şeyden önce söylemeli; yoksa geri dönen müşteriler eski yolu aramaya başlar. Bobo's değişikliği tek satırda söylüyor, aynı cümlede güven veriyor ve yeni yola (Find Stores) açıklamayla aynı ağırlığı veriyor.

Ana çıkarım: Müşterilerin sizden satın alma biçimi değiştiğinde, değişikliği ve yeni yolu above the fold alanına koyun. Geri dönen bir ziyaretçi ne olduğunu anlamak için kaydırmak zorunda kalmamalı.

5. Calvin Klein

Calvin Klein güçlü bir görsel kimliği olan bir moda evi. Hero alanı ürün odaklı değil, marka odaklı tasarıma yaslanıyor; bu alışılmadık bir tercih ve marka ünlü olduğu için işe yarıyor. Ekim 2026'da bunun üstüne bir indirim paneli eklenmiş.

Ne yapıyor: Siyah bir üst bant indirimi hemen duyuruyor: "Up to 30% off. Shop now." Menünün (Women, Men, Kids ve kırmızıyla Mid-Season Sale) altında kırmızı bir panel aynı mesajı büyük harflerle tekrarlıyor: "Mid-Season Sale. Up to 30% Off. Save on selected items." ve Kadın, Erkek, Çocuk için üç metin bağlantısı. Panelin altında, deri ceketli iki modelin yer aldığı sokak stili bir video, iki çerçeveli butonun (Shop Women ve Shop Men) arkasında oynuyor.

Neden işe yarıyor: Markanız tanınıyorsa üründen önce yaşam tarzını satabilirsiniz. Calvin Klein'ın deri ceketin ne olduğunu anlatmasına gerek yok. Sizin onların ceketini istemenizi sağlaması gerekiyor. Üçlü indirim sinyali (üst bant, kırmızı panel, kırmızı menü bağlantısı), indirimi tek bir popup kullanmadan gözden kaçmaz hâle getiriyor.

Ana çıkarım: Marka odaklı bir hero kullanmadan önce bunu hak edin. Herkesin tanıdığı bir isim değilseniz ürünle ve sonuçla başlayın.

6. Dyson

Dyson premium ev aletleri satıyor. Hero alanı eskiden kasvetli, karanlık ve kendinden emindi; bir Apple lansmanının görsel karşılığı gibiydi. Ekim 2026'da indirim modunda ve yine de premium görünüyor.

Ne yapıyor: İki sıralı siyah bir üst bilgi: yardımcı bağlantılar (Dyson Certified Refurbished, Find a store, For business, Register machine, Contact us, Sign in / Join), ardından Vacuums & cleaners'dan Deals'e kadar kategoriler ve geniş bir arama çubuğu. Altında mavi bir bant: seçili Dyson teknolojilerinde 370 dolara varan tasarruf ve "Offer ends soon" notu, yanında gün, saat, dakika ve saniye gösteren canlı bir geri sayım. Hero, Dyson ürünlerini elektrik mavisi üzerinde siyah siluetler olarak gösteriyor; "Dyson deals", "Too good to miss", seçili ürünlerde 370 dolara varan tasarruf ve geniş tek bir "Shop now" butonu.

Neden işe yarıyor: Siluetler, metin indirim satarken premium hissini koruyor: saç kurutma makinesinin ve süpürgenin şeklini bir ürün adı okumadan tanıyorsunuz. Tek bir doygun renk görsel rekabeti azaltıyor ve geri sayım, son tarihi butonla aynı göz hizasına koyuyor. Yakalamamızda 0 gün 11 saat kaldığını gösteriyordu.

Ana çıkarım: Premium bir marka indirim yapmak zorundaysa, markayı ürün şekilleri taşısın; indirimi tek satır ve tek butonla sınırlayın. Geri sayımı yalnızca gerçekten biten bir teklifte kullanın.

7. EyeBuyDirect

EyeBuyDirect uygun fiyatlı numaralı gözlükleri internetten satıyor; bu, above the fold alanında güven kurmanın her zamankinden önemli olduğu bir kategori. Sitesi Ekim 2026'da otomatik ziyaretimizi engelledi (erişim reddedildi sayfası), bu yüzden bu inceleme önceki yakalamayı anlatıyor.

EyeBuyDirect'in hero alanı, Ocak 2024 veya öncesinde yakalandı; site Ekim 2026'da otomatik yakalamayı engelledi.

Ne yapıyordu: Gözlükleri takan iki kişinin yaşam tarzı fotoğrafı. Yanında "30% OFF EVERYTHING!" yazan, LOVE30 kodunu ve bir "Shop now" butonunu taşıyan pembe bir panel. Sol alt köşedeki küçük "Get your welcome offer" sekmesi, ilk kez gelen ziyaretçiler için pasif bir welcome popup gibi çalışıyordu. Menünün üstündeki bant 2 günde teslimat vaat ediyor, menü de gözlük alıcısının aradığı kategorileri sıralıyordu: Eyeglasses, Sunglasses, Premium Brands, Lenses.

Neden işe yarıyordu: Numaralı gözlüğü görmeden almak bir güven sıçraması ister. Yaşam tarzı fotoğrafı, ürünü mutlulukla takan gerçek insanları gösteriyordu ve bu kaygıyı azaltır. İndirim kodu fiyat itirazını aynı göz hizasında ortadan kaldırıyordu; ziyaretçinin dönüşmek için bir sebep bulmak üzere kaydırması gerekmiyordu. Hero alanının kodu taşıyamadığı sayfalarda bu işi bir indirim popup'ı yapar.

Ana çıkarım: Kategorinizde güven sürtünmesi varsa (görmeden alma, siparişe özel üretim, çok iade), sosyal kanıtı ve riski azaltan öğeyi hero alanına koyun. Bir yardım sayfasına gömmeyin.

8. Fomo

Fomo, web sitelerinde son müşteri hareketlerinin canlı bildirimlerini gösteren bir sosyal kanıt aracı. Artık usefomo.com adresinde (Ekim 2026 itibarıyla fomo.com ilgisiz bir kripto alım satım uygulamasına gidiyor) ve hero alanı hâlâ vaaz ettiğini uyguluyor.

Ne yapıyor: Eğlenceli bir çizgi illüstrasyon: güneş gözlüklü bir adam, "20 MIN" tabelasının yanında bir kapının önünde bekleyen kuyruğu işaret ediyor ve "This must be good..." diye düşünüyor. Başlık "increase sales, trust and credibility"; altında Fomo'nun işletmeler için basit, otomatik bir sosyal kanıt çözümü olduğunu söyleyen satır var. Menü rahat ve küçük harfli: features, pricing, 106+ integrations, reviews, blog. "Start 14-day trial" butonu 1440 × 900'de tam fold çizgisinde duruyor; yalnızca üst kenarı görünüyor.

Neden işe yarıyor: İllüstrasyonlar soyut ürünleri anlatmada stok fotoğraftan iyidir. Sosyal kanıt görünmezdir; fotoğrafını çekemezsiniz. Bu yüzden Fomo herkesin tanıdığı çevrimdışı karşılığını çizmiş: bir kapının önündeki kuyruk. Rahat ton "kurumsal yazılım değil, samimi bir aracız" mesajını veriyor; bu da hedefledikleri küçük ve orta ölçekli işletme alıcısına uyuyor. Fold çizgisindeki deneme butonu zayıf nokta: dizüstündeki ziyaretçi butonu tam görmek için birkaç piksel kaydırmak zorunda.

Ana çıkarım: Ürününüz soyutsa, panelin fotoğrafını çekmek yerine kavramı çizin. İki saniyelik bir illüstrasyon, bir ekran görüntüsünün öğretemediğini öğretir. Sonra illüstrasyonun butonu fold'un altına itmediğinden emin olun.

9. Fossil

Fossil en çok saatleriyle tanınan bir moda aksesuarları markası. Hero alanı sezonluk hikâye anlatımına ve ürün tanıtımına yaslanıyor.

Ne yapıyor: Ülke seçicisi, bir müşteri hizmetleri telefon numarası ve dönen teklifler taşıyan lacivert bir yardımcı bant (yakalamamızda tam fiyatlı ürünlerde %15 indirim teklifi ve bir Sign Up bağlantısı). Geniş menü, ziyaretçi tıklamadan ana kategorileri açıyor: Watches, Bags & Wallets, Jewelry & Accessories, Shelby x Fossil, Gift Guide, Our Stories ve bir arama alanı. Hero, "Fossil Athletics Club" için tam genişlikte bir video; markanın en ikonik, en çok satan tasarımlarına yakından bakmaya çağırıyor; iki CTA var, Shop His ve Shop Hers, köşede de bir duraklatma butonu. Yakaladığımız karede bir bilekte altın bir saat görünüyor.

Neden işe yarıyor: Saati bir bilekte göstermek (boş bir fonda havada değil), alıcının boyutu ve oranı değerlendirmesine yardım eder; internetten saat alırken bunu yapmak zordur. Geniş menü doğru ürün ailesine giden tıklama sayısını azaltıyor ve bu önemli, çünkü Fossil çok sayıda alt markada satış yapıyor. Duraklatma butonu ziyaretçiye hareket eden video üzerinde kontrol veriyor.

Ana çıkarım: Uyumun, ölçeğin ya da bağlamın önemli olduğu ürünlerde (saat, gözlük, mobilya) ürünü tek başına değil, kullanımda çekin. Bir iadeyi önler.

10. HubSpot

HubSpot bir CRM ve pazarlama platformu satıyor. Hero alanı eskiden platformu rakamlarla başlayan bir kanıtla satardı; 2026'da bütün platformu tek bir uzun vaat ve iki butonla satıyor.

Ne yapıyor: Küçük bir üst etiketi ("HubSpot Agentic Customer Platform") olan beyaz bir sayfa ve tırnaklı yazı tipinde büyük bir başlık: "Build demand, win deals, and delight customers", ardından "all on one platform". Alt başlık HubSpot'un pazarlamayı, satışı ve hizmeti müşteri verisi etrafında hizaladığını söylüyor. İki CTA: "Get a demo" (dolu turuncu) ve "Get started free" (çerçeveli); ikisi de menüde tekrarlanıyor. Menünün üstündeki ince yardımcı bant bir dil seçici, bir High Contrast anahtarı, Customer Support ve Contact Sales taşıyor. İlk ziyaretimizde köşede HubSpot asistanından bir sohbet karşılaması açıldı.

Neden işe yarıyor: Ücretsiz plan CTA'sı kendi başına ilerleyen alıcıyı, demo CTA'sı kurumsal alıcıyı karşılıyor. Huniyi hero alanında ikiye ayırmak, HubSpot'un 10 kişilik bir ajansa ve 10.000 kişilik bir şirkete aynı ana sayfadan hizmet vermesinin yolu. High Contrast anahtarı, bir erişilebilirlik ayarını ihtiyacı olanların bulabileceği yere, above the fold alanına koyuyor.

Ana çıkarım: Ürününüz hem kendi kendine satın alma hem satış ekibiyle fiyatlandırma içeriyorsa, iki yola da hero alanında bir buton verin. Her ziyaretçiyi tek bir huniye zorlamak dönüşümü yanlış uçta öldürür.

11. Instatus

Instatus durum sayfaları yapıyor: hizmetinizin çalışıp çalışmadığını kullanıcılara söyleyen herkese açık paneller. Hero alanı karanlık, hızlı ve oyunbaz.

Ne yapıyor: Siyah bir arka plan, mavi bir ışık izinin içinden düşen 3D bir astronot ve tamamı büyük harfli, geniş aralıklı bir başlık: "Get ready for downtime." Klavye tuşu gibi tasarlanmış iki kare buton, "Start free" (A harfiyle) ve "Play game" (P harfiyle), üç tek satırlık faydanın yanında duruyor: Monitor your services, Fix incidents with your team, Share your status with customers. Hap şeklindeki menü Product, Customers, Integrations ve Pricing'i kapsıyor.

Neden işe yarıyor: Başlık, alıcının en kötü gününü satış mesajına çeviriyor; ziyaretçi bunu "bu insanlar sorunumu biliyor" diye okuyor. Üç satır ürünü İngilizcede 13 kelimeyle ve işin gerçekleştiği sırayla anlatıyor: izle, düzelt, haber ver. Klavye tuşu butonlar geliştirici kitleye küçük bir selam.

Ana çıkarım: Alıcınızın korktuğu anı adlandırın, sonra ürünün ne yaptığını üç kısa satırda söyleyin. Üç satır okunur; hero alanındaki bir paragraf nadiren okunur.

12. Kylie Cosmetics

Kylie Cosmetics ünlü bir isimle büyüyen bir güzellik markası. Hero alanı eskiden kurucunun kişisel markası ve dönen iş birlikleri etrafında kuruluydu. Ekim 2026'da ürün odaklı: kurucunun adı fotoğrafta değil, logoda.

Ne yapıyor: Pembe bir duyuru bandı teklifleri döndürüyor (minimum siparişte ücretsiz makyaj çantası, parfüm şişelerine özel gravür) ve dönüşü durdurmak için bir duraklatma butonu var. Logoda Kylie Cosmetics yazıyor, altında "Kylie Jenner"; menü kısa ve küçük harfli, "new" ve "best sellers"dan "rewards"a uzanıyor. Hero, kırmızı iple bağlanmış heykelsi bir parfüm şişesi yığını. Solda: "Best-selling Mood Stones", markanın ilk parfüm üçlüsünün artık hediyeye hazır setlerde geldiğini söyleyen bir satır ve küçük bir "shop now" butonu. Arama ve hesap simgeleri üst bilgide sabit duruyor; sepet ve giriş hiç yer değiştirmiyor.

Neden işe yarıyor: Logonun altındaki kurucu adı, fotoğrafı buna harcamadan ünlü sinyalini koruyor; böylece hero alanı tek bir ürünü satabiliyor. "Best-selling" tek kelimelik bir sosyal kanıt ve tam ürün adının üstünde duruyor. "Hediyeye hazır setler" şimdi satın almak için bir sebep veriyor.

Ana çıkarım: Ünlü bir isim logo bloğunda yaşayıp hero alanını ürüne bırakabilir. Kanıt kelimesini ürün adının yanına, gözün zaten baktığı yere koyun.

13. Little Caesars

Little Caesars hız ve fiyatta yarışan bir pizza zinciri. Hero alanı tek bir iş için kurulu: siparişi başlatmak.

Ne yapıyor: Kişiselleştirilmiş bir "Hi, Guest" karşılaması. Sepet durumu üst bilgide görünüyor. İlk bant sipariş başlatıcı: iki turuncu butonla, Pickup ve Delivery, "Start your order". "Official Pizza Sponsor of the NFL" bandının altında en büyük görsel, fiyatıyla güncel kampanya: 4,99 dolarlık Detroit-Style Slices-N-Stix, içinde neler olduğu ve bir "Order now" butonu.

Neden işe yarıyor: Aç ziyaretçiler gezinmez. Sipariş verir. Little Caesars ziyaretçiyi işleme doğru götürmeyen her adımı kesiyor. Gel-al ya da eve teslim ayrımı sayfanın istediği ilk karar ve alttaki fiyatlı teklif bu kararı vermek için bir sebep sunuyor. 390 × 844'lük telefon görünümünde hem sipariş butonları hem teklifin "Order now" butonu ilk ekranın içinde kalıyor.

Ana çıkarım: Niyeti yüksek, işlem odaklı kategorilerde (yemek, anlık hizmetler, acil alımlar) hero alanını tek bir teklife ve tek bir karara indirin. Gerisi sürtünmedir.

14. Melula

Melula küçük bir DTC çocuk modası markası. Hero alanı bu listedeki en sade olanı ve bu onların lehine çalışıyor.

Yumuşak renk paleti ve sade ürün stiliyle Melula hero alanı; Ocak 2024 veya öncesinde yakalandı, Ekim 2026'da kontrol edildiğinde değişmemişti.

Ne yapıyor: Yumuşak mavi bir arka plan. İnce kâğıt ve tahta çubuklarla eğlenceli bir ürün stil çekimi. Kısa, marka havasını veren bir başlık: "For colourful steps in life." Tek bir "Visit our shop" CTA'sı. Menünün üstünde dünya çapında kargo bandı.

Neden işe yarıyor: Küçük markalar çoğu zaman büyük gibi davranıp hero alanını kalabalıklaştırır. Melula tersini yapıyor ve hero alanını bir müze vitrini gibi kullanıyor. Boşluk premium ve sakin bir his veriyor; bu da hediye alan ve çocuk modasına bakan ebeveynin duygusal tepkisine uyuyor.

Ana çıkarım: Markanız işçilikte ya da premium histe yarışıyorsa, boşluğu bir lüks sinyali olarak kullanın. Tek ürün ve tek butonlu bir hero kendinden emin okunur; beş teklifli bir hero çaresiz okunur.

15. Oskar Gydell

Oskar Gydell İsveçli, el yapımı bir mücevher markası. Hero alanı ölçülü, fotoğraf ağırlıklı ve sessizce bilgilendirici.

Ne yapıyor: Kum rengi bir bant iki kısa güven satırını döndürüyor: "Handmade in Sweden" ve "High end Jewelry since 2012". Menü solda Shop, Contact ve Size Guide'ı, ortada aralıklı yazılmış logoyu, sağda bir para birimi seçiciyi (ziyaretimizde USD), aramayı ve sepeti gösteriyor. Hero, renkli iplere geçirilmiş üç Hook bilekliği takan bir bileğin yakın çekimi; "Luxury For Everyday Use" başlığı, renkler ve pırlantalı seçenek hakkında bir satır ve koleksiyona giden bir buton.

Neden işe yarıyor: Uluslararası alıcılar sepete bir şey eklemeden önce fiyatları kendi para birimlerinde görmek ister ve seçici tam baktıkları yerde duruyor. Size Guide'ı ana menüye koymak, beden sorusunu bir ayrılma sebebine dönüşmeden yanıtlıyor. Dönen iki satır işçilik hikâyesini İngilizcede sekiz kelimeyle anlatıyor.

Ana çıkarım: Sınır ötesi DTC'de ilk andan yerel para birimini varsayılan yapın. Ziyaretçiyi ne ödeyeceğini öğrenmek için bir ülke seçici açmaya zorlamayın.

16. Popupsmart

Popupsmart, e-ticaret ve SaaS siteleri için kendi kodsuz popup oluşturucumuz. Ana sayfayı Eylül 2026'da yeniden tasarladık, bu yüzden bu yazının önceki sürümlerindeki ekran görüntüsü artık güncel değil.

Ne yapıyor: İngilizce sayfada beş kelimelik bir başlık ürünü ve sonucu (dönüşümler) söylüyor, kısa bir alt başlık da işe yarayan basit bir oluşturucu vaat ediyor. Ana buton "Get Popupsmart Free", yanında bir metin bağlantısı var: "Book a demo with an expert". Ardından üç onay işareti: Free and paid plans, Setup in minutes, No credit card required. Mağaza sahipleri için ayrı bir satır var: "Sign in with your Shopify". Sağda döngülü bir demo tek bir popup oluşturuyor: bir istem ("Welcome popup for camper.com, 25% off") ve bir Generate butonu, ardından markanın logosunu ve renklerini bulan bir kart; altyazısı "Name your brand. AI designs it on-brand." Döngü bir ziyaretçinin kaydoluşunu, bir hedefleme kuralını ve bir A/B testini göstererek devam ediyor; hepsi örnek veri olarak etiketli. Ekranın alt kenarı boyunca markanın mavisiyle noktalanmış bir San Francisco silueti uzanıyor.

Neden işe yarıyor: Ürünü statik bir ekran görüntüsüyle değil, çalışırken göstermek "bu şey aslında neye benziyor?" sorusunu anında yanıtlıyor. Üç onay işareti, ücretsiz plana bakan bir ziyaretçinin üç itirazını (fiyat, emek, kayıtlı kart) butonun hemen altında yanıtlıyor.

Ana çıkarım: Ürününüzü hero alanında canlı çalışırken gösterebiliyorsanız (bir popup, bir grafik, etkileşimli bir bileşen) gösterin. Çalışan bir demo ekran görüntüsünü yener, ekran görüntüsü de paragrafı yener.

17. Shopify

Shopify, internet mağazalarının çok büyük bir kısmının üzerinde çalıştığı e-ticaret platformu. Hero alanı sık değişimlerle taze kalıyor ama aynı dönüşüm yapısını koruyor.

Ne yapıyor: İş başındaki satıcıları gösteren tam ekran bir arka plan videosu (yakalamamız kucağında bebekle dizüstünde çalışan bir kadına denk geldi). Başlık "Be the next" ile başlıyor ve sonunu döndürüyor: "AI all-star", "solo-preneur", "household name" ve daha fazlası. Ardından kısa bir değer önerisi satırı geliyor: "Dream big and build fast on Shopify. The world's best commerce platform." İki buton: "Start for free" ve bir video oynatan "Why we build Shopify". Hero alanında önceki sürümlerin kullandığı e-posta alanı artık yok.

Neden işe yarıyor: Dönen son kelime, tek bir başlığın düzeni, vaadi ya da butonu değiştirmeden farklı girişimci tiplerine seslenmesini sağlıyor. Gerçek satıcıların videosu "internet mağazası kurmak" gibi soyut bir fikri somutlaştırıyor ve bir sonraki bölümün başlığı ("Sell everywhere people shop.") fold çizgisinde görünerek kaydırmaya davet ediyor. 390 × 844'lük telefon görünümünde "Start for free" ilk ekranın içinde tam genişlikte bir butona dönüşüyor.

Ana çıkarım: Tek bir başlık birkaç kitleye seslenmek zorundaysa, hero alanını değil, başlığın sonunu döndürün. Butonu ve vaadi yerinde tutun.

18. Tesla

Tesla elektrikli araçları ve temiz enerji ürünlerini doğrudan tüketiciye satıyor. Hero alanı bilinçli olarak önce ürün, sonra pazarlamaydı. Tesla'nın sitesi Ekim 2026'da otomatik ziyaretimize erişim reddedildi sayfası döndürdü, bu yüzden bu inceleme önceki yakalamayı anlatıyor.

Tesla'nın hero alanı, Ocak 2024 veya öncesinde yakalandı; site Ekim 2026'da otomatik yakalamayı engelledi.

Ne yapıyordu: Açık bir yolda kırmızı bir Model 3'ün tam ekran fotoğrafı, üstünde "Model 3" ve "Order Online for Touchless Delivery". İki CTA: "Custom Order" ve "Existing Inventory". Üst menü seyrek ve ürün odaklıydı (Model S, Model 3, Model X, Model Y, Solar Roof, Solar Panels). Menünün üstündeki ince bir bant, çevre bilinçli alıcılar için Tesla'nın 2021 Etki Raporu'na bağlantı veriyordu.

Neden işe yarıyordu: Tesla bir özellik listesi göstermiyordu, çünkü kitle özellikleri zaten biliyordu. Arabayı lüks bir markanın gösterdiği gibi gösterdiler ve ziyaretçiye bir yapılandırma yapmak ile stoktaki bir aracı almak arasında seçim bıraktılar. İki CTA'lı ayrım gerçek alıcı ayrımını yansıtıyordu: sabırla yapılandıranlar ve almaya hazır olanlar.

Ana çıkarım: Üzerinde uzun düşünülen alımlarda hero alanının işi ürünü güzel göstermek ve alıcının önceden yaptığı araştırmaya saygı duymaktır. Zaten bildiklerini yeniden anlatmayın.

19. Walmart

Walmart bu listedeki her sade hero'nun tam tersi ve kitlesi için doğru tercih bu. Ekim 2026'da walmart.com otomatik ziyaretimize bir "Robot or human?" kontrolüyle yanıt verdi, bu yüzden bu inceleme önceki yakalamayı anlatıyor.

Walmart'ın hero alanı, Ocak 2024 veya öncesinde yakalandı; site Ekim 2026'da otomatik yakalamaya bir bot kontrolü gösterdi.

Ne yapıyordu: Birden fazla kampanya kutusundan oluşan yoğun bir düzen: bir Walmart+ üyelik paneli ("Members save $1300+ each year", "Try free for 30 days"), fiyatıyla günün Rollbacks indirimi ve gel-al ya da teslimat ile 4 Temmuz indirimleri için kutular. Arama çubuğu üst bilgi boyunca uzanıyordu; çevresinde Departments, Services, Reorder My Items, Account ve sepet vardı. İkinci bir bant ziyaretçinin mağaza konumunu ve kategori bağlantılarını gösteriyordu.

Neden işe yarıyordu: Walmart alışverişçileri aklında belirli bir ürünle gelir. Gezinmiyorlar. Avlanıyorlar. Kategorileri ve bir arama çubuğu olan yoğun bir hero, avcının tam ihtiyacı olan şeydir. Sadelik burada dönüşüme açıkça zarar verirdi; market, elektronik ya da eczane ürünlerini bulmak için daha fazla tıklamaya zorlardı.

Ana çıkarım: Hero yoğunluğunu ziyaretçi niyetine göre ayarlayın. Gezinenler sadelik ister; avcılar seçenek ister. Trafiğiniz arama odaklı ve kategori ağırlıklıysa, yoğun ama düzenli bir hero sade bir hero'dan daha iyi dönüştürür.

20. Zapier

Zapier binlerce uygulamayı birbirine bağlayan iş akışı otomasyon platformu. Hero alanı net bir değer önerisini çalışan bir görsel demoyla eşleştiriyor.

Ne yapıyor: Kırık beyaz bir sayfada "The next generation of Zapier" üst etiketi, "Welcome to automation in the agentic era" başlığı ve tek bir satır: işe en sevdiğiniz yapay zekâ aracında başlayıp güvenilir iş akışlarını Zapier'de çalıştırmaya ve yönetmeye çağırıyor. İki kayıt butonu: "Start free with email" (turuncu) ve "Start free with Google". Altlarında, yumuşak bir renk geçişi üzerinde çerçeveli bir ürün animasyonu oynuyor: önce Zapier'in bir iş akışını düzelttiğini söyleyen bir bildirim, ardından iş akışı düzenleyicinin kendisi; bir yapay zekâ asistanı, bir Zendesk iş akışının yanında neyin yanlış gittiğini ve neyin değiştiğini açıklıyor.

Neden işe yarıyor: "Start free with Google", Google hesabı olan herkes için kayıt formunu ortadan kaldırıyor; e-posta butonu da geri kalan herkesi karşılıyor. Animasyon ürünü gerçekten iş yaparken gösteriyor ve bu, fikri statik bir panelden daha iyi satıyor. Başlık anı (yapay zekâ ajanları), alt başlık da Zapier'in kendine ayırdığı işi adlandırıyor: iş akışlarını çalıştırmak ve yönetmek.

Ana çıkarım: E-posta butonunun yanına tek tıkla kayıt koyun. Şifre alanında vazgeçecek ziyaretçi hiç şifre alanıyla karşılaşmaz.

Yüksek dönüşümlü above the fold tasarımlarındaki ortak kalıplar

Bu 20 ana sayfada kalıplar tekrar ediyor. En sık görünenler şunlar.

• Tek başlık, tek CTA, tek karar: En güçlü hero alanları ziyaretçiden tam olarak bir seçim ister. İki CTA olduğunda bile bunlar birbiriyle yarışmayan iki yola gider (araştır ya da satın al, demo ya da ücretsiz). Bir hero ilk ekranda üç ya da daha fazla karar istediğinde hiçbiri öne çıkmaz.

• Özellik değil, sonuç odaklı başlıklar: "Make your business discoverable", "Yapay zekâ destekli backlink analiz aracı"ndan iyidir. Alıcılar sonucun sizin değil, kendi dillerinde söylenmesini ister. Özellik kelimeleri fold'un altını bekleyebilir. Bu ürün başlığı örnekleri de aynı kurala dayanıyor.

• Stok fotoğraf değil, kahraman olarak ürün: Gerçek ürün ekran görüntüleri, gerçek ürün animasyonları, gerçek müşteri fotoğrafları. Bu listedeki markaların çoğu gerçek ürününü ya da gerçek kullanıcılarını gösteriyor.

• Göz hizasında sosyal kanıt: Müşteri logoları, canlı kayıt sayıları, yıldız puanları, adı verilen müşteri yorumları ya da "best-selling" gibi tek bir kelime. Sosyal kanıtı alt bilgiden ana CTA'nın erişebileceği yere taşıyın.

• İstekle aynı nefeste giderilen sürtünme: Sepetin yanında ücretsiz kargo eşiği, kayıt CTA'sının yanında "kredi kartı gerekmez", e-posta butonunun yanında tek tıkla Google kaydı. Ziyaretçiyi evet demek için bir sebep bulmak üzere kaydırmaya zorlamayın. Sebep butonun yanında durmalı.

• Yerini hak eden üst yardımcı bant: Ana menünün üstünde kargo kampanyaları, para birimi, bir telefon numarası ya da bir indirim geri sayımı için ince bir bant. Allbirds, Calvin Klein, Dyson, Fossil, Kylie Cosmetics ve Oskar Gydell bunu kullanıyor. Sayfadaki en hafife alınan alan, çünkü ekiplerin çoğu onu süs gibi görüyor.

• Sayfanın devam ettiğine dair bir ipucu: Apple ve Shopify bir sonraki bölümün başlığını ilk ekranın altında gösteriyor. Nielsen Norman Group, fold'da bitmiş gibi görünen tasarımlar olan sahte zeminlere karşı uyarıyor; bir sonraki bölümün görünen kenarı en ucuz çözüm.

• Mobilde taviz değil, eşdeğerlik: Buradaki en güçlü hero alanları telefon için küçültülmemiş, yeniden tasarlanmış. Allbirds mobilde bölünmüş fotoğrafını ürüne kırpıyor ve iki butonu da ilk ekranda tutuyor. Mobil hero alanınız masaüstüne göre bir ceza gibi hissettiriyorsa yanlış kurmuşsunuz demektir.

Bu hero alanlarıyla birlikte düşünülebilecek daha fazla kalıp için announcement bar örnekleri rehberi ince yardımcı bandı ayrıntılı anlatıyor; bu Shopify açılış sayfası örnekleri de aynı kuralları mağaza sayfalarında gösteriyor.

Kaçınılması gereken above the fold hataları

Bazı kalıplar sayfanın geri kalanı ne kadar iyi olursa olsun dönüşümü öldürür. Yaygın olanlar şunlar.

• Karusel hero alanları: Üç ila beş slaytlı dönen kaydırıcılar hâlâ her yerde. İlgiyi ilk slayt toplar; ondan sonraki her slayt, ziyaretçilerin çoğunun beklemediği bir mesajdır. Üç mesajınız varsa üç slayt değil, üç sayfa yapın.

• "Özellik çorbası" başlık: "Modern ekipler için yapay zekâ destekli, kurumsala hazır, güvenli, ölçeklenebilir platform." Bu bir komitenin yazdığı bir cümle. Silin. Tek bir sonuç ve tek bir kitle seçin, yeniden yazın.

• Görünmez CTA: Arka planla aynı renkte, gövde metniyle aynı boyutta, kontrastı olmayan bir "Learn more" butonu. Buton metni butonun rengine karşı en az 4,5:1 kontrast oranına sahip olmalı; bu, WCAG 2.2'nin kontrast kriterindeki AA düzeyi kuralı. Dokunma için WCAG'nin gelişmiş hedef boyutu kriteri en az 44 × 44 CSS piksel istiyor (AAA düzeyi); AA düzeyindeki en düşük sınır 24 × 24.

• Stok fotoğraf ekip: Dizüstü ekranını gösteren, gülümseyen beş farklı insan. Ziyaretçiler bu görseli on binlerce kez gördü. "Gerçek bir ürün fotoğrafımız yok" mesajı verir. Ya ürünü ya da gerçek ekibinizi gösterin.

• Hero alanını yiyen tanıtım bandı: Menünün üstüne istiflenmiş bir indirim, etkinlik ya da ikinci ürün bandı. Her biri hero alanını aşağı iter. Dizüstünde hero butonuna, telefonda bütün ilk ekrana mal olabilir.

• CTA'yı gömen mobil hero: Uzun bir görselin ya da bir tanıtım bandının CTA'yı telefonda fold'un altına ittiği bir mobil hero. CTA, desteklediğiniz en küçük ekranda kaydırmadan görünmeli; yoksa mobil dönüşüm hesabı bozulur.

Above the fold içerik Google sıralamasını etkiler mi?

Above the fold içerik Google sıralamasını dolaylı olarak etkiler: Google içeriği reklamların altına gömen ilk ekranlara karşı adım attı ve page experience rehberi hâlâ reklamları ve rahatsız edici popup'ları soruyor. Google 19 Ocak 2012'de, ilk görülen kısmında "fold'un üstünde fazla görünür içerik olmayan ya da sitenin ilk ekran alanının büyük bir bölümünü reklamlara ayıran" siteleri hedefleyen bir sayfa düzeni algoritması değişikliği duyurdu. Google'a göre bu tür siteler "bundan sonra o kadar üst sıralarda yer almayabilir". Değişikliğin fold'un üstüne "normal düzeyde" reklam koyan siteleri etkilemediğini ve küresel aramaların %1'inden azını belirgin şekilde etkilediğini söyledi.

Google artık o yazının okurlarını page experience belgelerine yönlendiriyor. Understanding page experience in Google Search results sayfası site sahiplerine başka soruların yanı sıra şunları soruyor: "İçeriğiniz, ana içerikten dikkati dağıtan ya da ona müdahale eden aşırı miktarda reklam kullanmaktan kaçınıyor mu?", "Sayfalarınız rahatsız edici interstitial'lar kullanmaktan kaçınıyor mu?" ve "Sayfanız, ziyaretçilerin ana içeriği sayfadaki diğer içerikten kolayca ayırt edebileceği şekilde mi tasarlandı?" Aynı sayfa bilinmesi gereken bir sınırı da ekliyor: "Core Web Vitals dışındaki diğer page experience unsurları, web sitenizin arama sonuçlarında doğrudan daha üst sıralarda yer almasına yardımcı olmaz."

İlk mobil ekranda bir popup neyi kaplayabilir?

İlk mobil ekranın ana içeriğini kaplayan bir popup, Google'ın adını koyduğu durumdur. Google Ağustos 2016'da, 10 Ocak 2017'den itibaren "mobil arama sonuçlarından geçişte içeriği kullanıcı için kolayca erişilebilir olmayan sayfaların o kadar üst sıralarda yer almayabileceğini" duyurdu. İlk örneği şuydu: "Kullanıcı arama sonuçlarından sayfaya geçer geçmez ya da sayfaya göz atarken ana içeriği kaplayan bir popup göstermek." Ayrıca kullanıcının kapatması gereken bağımsız bir interstitial'ı ve fold'un üstünün böyle görünüp asıl içeriğin fold'un altına yerleştirildiği bir düzeni de saydı.

Aynı yazı, sorumlu kullanıldığında etkilenmeyecek olanları da listeledi: çerez kullanımı ya da yaş doğrulaması gibi yasal bir yükümlülük için gösterilen interstitial'lar, herkese açık olarak dizine eklenemeyen içerik için giriş pencereleri ve "makul miktarda ekran alanı kullanan ve kolayca kapatılabilen bannerlar". Google'ın güncel sayfası Avoid intrusive interstitials and dialogs aynı şeyi daha az kelimeyle söylüyor: "Tam sayfa interstitial'lar yerine ekranın yalnızca küçük bir bölümünü kaplayan bannerlar kullanın" ve "Bütün sayfayı interstitial'larla örtmeyin."

Zamanlama da yardım ediyor. Popupsmart'ın 2026 kıyaslamasında 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. Oradaki oranlar popup gösterimi başına. Popup zamanlaması rehberimiz gecikmeleri ve tetikleyicileri anlatıyor, mobil ve masaüstü popup verileri de telefonların nasıl farklılaştığını ayrıntılandırıyor.

Yani ilk mobil ekranda: popup'a ekranın küçük bir dilimini verin, kapatmayı kolaylaştırın ve sayfanın kendi başlığını görünür bırakın. Tam ekran formatı yasal bildirimlere saklayın. Bütün resim için popup'ların SEO'yu nasıl etkilediğini anlatan rehberimizi okuyun.

Above the fold alanınızı nasıl test eder ve optimize edersiniz?

Hero alanını yalnızca bakarak denetleyemezsiniz. Veri gerekir. İşte çoğu site için işe yarayan bir test düzeni.

Bir ısı haritasıyla başlayın. Hotjar ya da Microsoft Clarity gibi araçlar ziyaretçilerin ilk ekranda nereye baktığını ve tıkladığını gösterir. Tıklamaların %80'i CTA yerine bir logoya ya da bir menü öğesine düşüyorsa CTA'nız işini yapmıyor demektir. Tıklamalar tıklanamayan bir öğede toplanıyorsa o öğeyi tıklanabilir yapın.

Bir kaydırma derinliği raporu ekleyin. Ziyaretçilerin yüzde kaçı fold'u hiç geçiyor? Bunu cihaza göre karşılaştırın, çünkü fold her cihazda farklı bir yerde. Fold'u geçme oranınız ne kadar düşükse, hero alanınızın tek başına yapması gereken iş o kadar fazladır.

Oturum kayıtlarını izleyin. Yeni ziyaretçilerden 10 ila 20 oturum seçin. İmlecin nerede oyalandığını, nerede durakladığını, nerede tereddüt ettiğini izleyin. Bağlantı olmayan bir şeye dokunan ya da anlamadığı bir başlığı yeniden okumak için yukarı kaydıran ziyaretçilere bakın. Bunların hiçbiri tıklama verisinde görünmez.

Tek değişkenli bir A/B testi yapın. Hero alanını tek seferde yeniden tasarlamayın. Her seferinde tek bir değişkeni test edin: başlık, CTA metni, CTA rengi, hero görseli, sosyal kanıtın yeri. Her testi, test aracınız anlamlı bir sonuç bildirene kadar sürdürün; iyi görünen ilk güne kadar değil. Beş şeyi birden değiştirirseniz hiçbir şey öğrenmezsiniz.

İlk ekranda kalma süresini takip edin. Analiz aracınızda, ziyaretçi kaydırmadan sayfada kaldığında tetiklenen 5 saniyelik bir etkileşim olayı kurun. 3 saniyede ayrılan ziyaretçiler, hero alanının dikkat kazanamadığı anlamına gelir. 15 saniye kalıp dönüşmemek, CTA'nın tıklamayı kazanamadığı anlamına gelir. Farklı sorun, farklı çözüm.

Yedek olarak exit-intent ya da kaydırmayla tetiklenen popup'lar kullanın. İyi bir hero bile herkesi ilk ziyarette dönüştürmez. Farklı bir açıyla (bir teklif, indirilebilir bir içerik, bir sohbet daveti) doğru zamanlanmış bir popup size ikinci bir şans verir; yeter ki yukarıdaki ilk ekran kurallarına uysun. Exit-intent popup örneklerimiz ve kaçınılması gereken popup UX hataları bunu insanları rahatsız etmeden nasıl yapacağınızı anlatıyor.

Above the fold alanınızı bu hafta denetleyin

En çok trafik alan sayfanızı seçin. Telefonda açın. 5 saniyelik bir zamanlayıcı kurun. Zamanlayıcı sıfırlanmadan ürünün ne olduğunu, kimin için olduğunu ve sırada ne yapılacağını anlayabiliyor musunuz? Evetse hero alanı dikkati hak ediyor. Hayırsa ilk testiniz hazır.

Yukarıdaki 20 örnek satır satır kopyalanacak şablonlar değil. İlk ekranı en net markalarda birkaç inatçı kuralın tekrar ettiğinin kanıtı: sonuç odaklı tek bir başlık, tek bir ana CTA, gerçek sosyal kanıt ve ziyaretçinin itiraz edeceği yerde giderilmiş sürtünme. Şu anda yapmadığınız ikisini seçin, bir sonraki sprintte yayına alın ve iki hafta sonra fold'u geçme oranınıza bakın. Sayfanın bütünü için bir ölçüt isterseniz iyi bir web sitesi dönüşüm oranının ne olduğuna bakın.

Popup'lar ya da yapışkan barlar above the fold stratejinizin bir parçasıysa, Popupsmart'ta kurduğumuz kısım bu: popup şablonlarından başlayın ve yukarıdaki ilk ekran kurallarını aklınızda tutun.

Sık sorulan sorular

Above the fold mobilde ve masaüstünde farklı mı?

Evet. Mobil kullanıcılar telefonu dikey tutar, bu yüzden yatay hero düzenleri dikey bir yığına dönüşür. Öğelerin sırası da değişir: mobilde ziyaretçi önce başlığı, sonra görseli, sonra CTA'yı görür. Masaüstü hero alanınızı küçültmeye çalışmayın. Yeniden tasarlayın. Ekim 2026'da 390 × 844 boyutunda yaptığımız kontrollerde Allbirds, Shopify ve Little Caesars ana butonlarını ilk ekranın içinde tuttu.

Above the fold alanımın işe yarayıp yaramadığını nasıl test ederim?

Üç sinyali takip edin: fold'u geçen ziyaretçilerin oranı (scroll-past oranı), ziyaretçinin kaydırmadan ya da ayrılmadan önce ilk ekranda kaldığı süre ve hero alanındaki CTA'nın tıklanma oranı. Her birini cihaza göre karşılaştırın. Bunlardan biri belirgin şekilde sapıyorsa önce o sinyalin işaret ettiği öğeyi test edin: hızlı çıkışlarda başlığı, tıklamasız uzun kalışlarda butonu.

Above the fold neden hâlâ önemli?

Çünkü ziyaretçi sayfanıza daha fazla zaman ayırıp ayırmayacağına hâlâ ilk ekranda karar veriyor. Nielsen Norman Group'un 2018 göz izleme çalışmasında sayfa görüntüleme süresinin yaklaşık %57'si fold'un üstündeki içeriğe, %74'ü ilk iki ekrana gitti. Ziyaretçiler kaydırsa bile, ancak hero alanı bunu hak ettiyse kaydırıyor.

Above the fold ile below the fold arasındaki fark nedir?

Above the fold, sayfa yüklendiğinde kaydırmadan ekranda görünen kısımdır. Below the fold ise kaydırma gerektiren her şeydir. Above the fold ikna işini üstlenir: değer önerisi, sosyal kanıt, ana CTA. Below the fold ayrıntılar içindir: özellik açıklamaları, müşteri yorumları, SSS, ikincil CTA'lar. Hiç kaydırmayan ziyaretçi yalnızca above the fold alanını görür, bu yüzden o alan tek başına çalışmalıdır. Kaydıran ziyaretçi size devam edecek kadar güvenmiştir; below the fold'u yazmak bu yüzden daha kolaydır.

Above the fold içerik Google sıralamasını etkiler mi?

Dolaylı olarak. Google'ın 2012'deki sayfa düzeni değişikliği, ilk ekranı çoğunlukla reklamdan oluşan sayfaları hedef aldı. Page experience belgeleri de reklamların ya da rahatsız edici interstitial'ların ana içeriğin önüne geçip geçmediğini hâlâ soruyor. Google ayrıca Core Web Vitals dışındaki page experience unsurlarının sıralamayı doğrudan yükseltmediğini, sayfayı kullanmayı daha tatmin edici hâle getirdiğini söylüyor.

Diğer ilham veren yazılar

E-posta listesi oluşturma: e-posta listenizi büyütmek için kanıtlanmış 13 yöntem