Landing Page Nasıl Tasarlanır: WordPress'te Dönüşüm Rehberi

Landing page nasıl tasarlanır sorusunun cevabı tek bir kararla başlar: ziyaretçinin atması gereken tek adım. Hero düzeninden düğmenin rengine kadar her şey bu karara bağlıdır. Sayfayı önce gri tonlarda bir taslakla çizin, bloklara dokunmadan önce başlığı yazın ve bu tek adıma hizmet etmeyen her şeyi çıkarın. Bu folyo, bunun WordPress içinde Site Düzenleyici ile nasıl yapılacağını ve karşılaşacağınız sınırları anlatıyor.

Landing page neden ana sayfadan farklı bir brief ister?

Ana sayfa birçok ziyaretçiye birçok farklı hedef için hizmet eder. Landing page ise genellikle bir reklamdan, bültenden ya da arama sonucundan gelen tek bir ziyaretçiye tek bir hedef için hizmet eder. Bu fark tüm yapıyı değiştirir.

Gezinme küçülür ya da tamamen kaybolur. İkincil bağlantılar gider. Altbilgideki site haritası da çıkar. Blok temada bu, gizli bir menüye sahip ortak bir şablon değil, ayrı bir şablon anlamına gelir. Site Düzenleyici'de boş bir şablon oluşturun, üst bilgi şablon parçasını kaldırın ve yalnızca logoyu ile çağrı düğmesini tutun.

Ana sayfadaki hero bölümünü yeniden kullanma cazibesine direnin. Geçen bahar bir serbest çalışan meslektaşım, bir webinar sayfası için ana sayfadaki Cover bloğunu kullandı ve tam menüyü olduğu gibi bıraktı. Ziyaretçiler bloga dağıldı. Yedi menü öğesini kaldırmak, o çeyreğin en ucuz düzeltmesi oldu.

Düzenleyiciyi açmadan önce neyi taslak olarak çizmelisiniz?

Önce kağıt. Beş ya da altı dikdörtgeni dikey olarak üst üste çizin ve her birine ad verin: hero, sorun, çözüm, kanıt, teklif detayları, son çağrı. HubSpot'tan Unbounce'a kadar yayımlanmış rehberlerin çoğu bu sıra üzerinde kabaca hemfikir. Bu sıra işe yarar, çünkü kuşkucu bir okurun karar verme biçimini yansıtır.

Taslağı gri tonlarda çizin. Renk, zayıf hiyerarşiyi gizler; gri bir taslak ise bunu hızla ortaya çıkarır. Her şey griyken hangi dikdörtgenin en önemli olduğunu ayırt edemiyorsanız, ziyaretçi de ayırt edemez.

Sonra kelimeleri yazın: bir başlık, tek bir destekleyici cümle ve bir düğme etiketi. Düzeni gerçek metin üzerine kurun, çünkü lorem ipsum ile kurulan bir düzen, gerçek başlık üç satıra uzadığında mutlaka bozulur. Arapça ya da İbranice gibi aynı cümlenin daha uzun olduğu dillerde bu bir zorunluluktur. Türkçe de sondan eklemeli yapısı nedeniyle çoğu zaman İngilizceden uzun metinler üretir, bu yüzden başlığı en uzun haliyle test edin.

Hero, kaydırmayı kazandıracak şekilde nasıl kurulur?

Hero dört iş yapmalıdır: sonucu belirtmek, kimin için olduğunu söylemek, tek bir eylem sunmak ve iddiayı inandırıcı kılan bir şey göstermek. Sonucu adlandıran bir başlık ("Bir müşteri sitesini bir öğleden sonrada yayına alın"), özelliği adlandıran bir başlıktan ("Esnek bir sayfa oluşturucu") daha iyi çalışır.

Gutenberg'de hero'yu, arka planın genişliğinden bağımsız olarak içerik genişliğini sınırlayabilmek için bir Grup içeren bir Cover bloğuyla kurun. Grubun içerik genişliğini 640 ila 720 piksel civarına ayarlayın, bir Başlık bloğu, bir Paragraf ve tek bir Düğmeler bloğu ekleyin. Tek düğme. İki düğme iki karar demektir ve tıklanan genellikle ikinci olandır.

Destekleyici görseli dürüst tutun. Gerçek bir ürün ekran görüntüsü, dekoratif bir fotoğraftan daha iyidir. Yalnızca soyut görseliniz varsa, bunu düşük ağırlıkta kullanın ve sayfayı başlığın taşımasına izin verin. Hero'da kaydırıcılardan (carousel) kaçının: çoğu ziyaretçinin hiç görmediği slaytların arkasında mesajı gömerler.

Not: Bu düzen, Cover ve Grup kısıtlamalarının Site Düzenleyici'de öngörülebilir biçimde çalıştığı WordPress 6.5 ve sonrası için geçerlidir.

Kanıt ne kadar gerekli ve nereye konmalı?

Kanıt, hero'nun yarattığı soruya cevap verir: buna inanabilir miyim? Sayfanın en altında, yalnızca sonuna kadar okuyan ziyaretçinin göreceği yerde değil, hemen hero'nun altında yer almalıdır.

İyi kanıt spesifiktir. Ölçülmüş bir sonuçla adı verilmiş bir müşteri, beş genel yıldızdan daha değerlidir. Hedef kitlenizin tanıdığı logolar bir şerit oluşturuyorsa işe yarar, ama gerçek adı ve unvanı olan tek bir referans, isimsiz alıntılardan oluşan bir kaydırıcıdan daha ağır basar.

Kaynağını gösteremediğiniz rakamlara dikkat edin. Popüler bazı rehberler, hiçbir analiz aracının üretemeyeceği dönüşüm oranları verir. Bir rakam kullanıyorsanız nereden geldiğini ve ne zaman ölçüldüğünü belirtin ya da çıkarın. Kendi sitenizde ölçtüğünüz önce ve sonra karşılaştırması, ödünç alınmış herhangi bir istatistikten daha iyidir.

Kanıt bölümünde müşteri adının yanına sektörünü ve kısa bir sonucu eklemek de işe yarar. "Üç hafta içinde kayıt oranını artırdık" gibi bir cümle, adı olmayan bir yorumdan çok daha somuttur. Yorumun yayımlanmasına izin verilip verilmediğini ve kullanılan verilerin gizliliğini kontrol edin. Kimse, referansının izinsiz yayımlanmasını istemez.

Mobilde hangi yerleşim kuralları en çok önemli?

Reklamlardan ve sosyal medyadan gelen trafiğin büyük kısmı telefona ulaşır. Bu yüzden tasarımı önce o görünüm için yapın, sonra genişletin. Tek sütun kullanın, satır uzunluğunu kısa tutun ve çağrı düğmesine başparmakla rahatça ulaşılabildiğinden emin olun.

Kaybın çoğunu önleyen üç kural var. Dokunma hedeflerini en az 24 x 24 CSS pikseli tutun; bu, WCAG 2.2 AA düzeyinde asgari değerdir ve ana düğme için çok daha büyük olması tercih edilir. Gövde metnini yakınlaştırmadan okunabilir tutun. Ve kanıt bölümünden sonra çağrıyı tekrarlayın ki kimse onu bulmak için yukarı kaydırmak zorunda kalmasın.

Blok temada boşluğu, her bloğa özel dolgu tanımlamak yerine theme.json içindeki boşluk ölçeğiyle yönetin. WordPress theme.json referansı bu ön ayarları belgeler. Bunları kullanmak, bir yığın geçersiz kılma stiliyle uğraşmadan mobil ve masaüstü ritmini tutarlı tutar.

Hızın tasarımla ilgisi nedir?

Her şey. Harika görünen ama yavaş yüklenen bir landing page, başlık çizilmeden ziyaretçiyi kaybeder. Google'ın rehberi, 2,5 saniye ya da daha kısa bir Largest Contentful Paint değerini iyi sayar. Bir landing page'de en büyük öğe neredeyse her zaman hero görseli ya da başlıktır. Ölçümün nasıl yapıldığını web.dev'deki LCP açıklamasında görebilirsiniz.

Pratik sonuçlar bundan çıkar. Hero görselini sıkıştırın ve WebP olarak sunun. Hero görselini tembel yüklemeyin, çünkü ilk boyanmasını istediğiniz öğe odur. Web fontlarını tek bir aileyle sınırlayın; tercihen kendi sunucunuzda barındırdığınız, makul bir yedeği olan değişken bir font kullanın. Kaydırıcıları, otomatik oynayan videoları ve üçüncü taraf sohbet pencerelerini ilk ekrandan çıkarın.

Landing page'lerde WordPress çoğu zaman barındırılan hazır oluşturuculara karşı geride kalır. Çok amaçlı ağır bir temadan üretilen bir sayfa, yüzlerce kilobayt kullanılmayan CSS gönderebilir. Özel bir şablonu olan hafif bir blok tema çok daha azını gönderir ve bu fark doğrudan LCP değerinde kendini gösterir.

Kontrast, erişilebilirlik ve RTL nasıl ele alınır?

Erişilebilirlik sonradan yapılan bir denetim değil, tasarımın baştan kabul ettiği bir kısıttır. WCAG 2.2 kontrast kriteri, normal metin ile arka planı arasında en az 4,5'e 1 oran ister. W3C'nin minimum kontrast kriterini açıklayan sayfası bunun nasıl test edileceğini gösterir. Beyaz bir kart üzerindeki soluk gri bir açıklama yazısı başarısız olur. Birçok pastel düğme ve üzerindeki beyaz etiket de öyle.

Önce düğmeyi kontrol edin. Sayfanın tüm amacı odur ve çoğu zaman marka rengi için seçildiği, okunabilirlik için seçilmediği için en zayıf kontrasta sahip öğe odur.

İki dilli ya da Arapça ve İbranice okurlar için aynalama, sayfayı ters çevirmekten fazlasıdır. Düğmedeki ok gibi yön belirten simgeler çevrilmelidir. Dolgu ve kenar boşlukları left ile right yerine mantıksal özellikleri (inline-start ve inline-end) kullanmalıdır. Yazı tipleri başlık boyutunda test edilmelidir, çünkü birçok Latin görünümlü ekran fontunun Arapça karşılığı yoktur ve yedek font görsel ağırlığı değiştirir.

RTL görünümünü gerçek bir cihazda, gerçek metinle test edin. Yer tutucu metinle iyi görünen aynalanmış bir düzen, gerçek Arapça başlık farklı satırlara kırıldığında bozulabilir.

Yayın için hangi araçlar mantıklı?

Üç dürüst seçeneğiniz var. Site Düzenleyici'de desenlerle yerel olarak oluşturmak en hafif sayfayı ve en fazla kontrolü verir, ama en çok emek ister. Divi gibi bir görsel oluşturucu düzen işini hızlandırır, ancak bir miktar sayfa ağırlığından vazgeçmenizi gerektirir. Üçüncü yol ise bir yapay zeka site oluşturucusuyla ilk taslağı üretip önemli kısımları elle yeniden kurmaktır.

Tek istemle hazır, dönüşüm sağlayan bir sayfa vaat eden her araca temkinli yaklaşın. Üretilen yapı, bölüm sırası ve yer tutucu metin için makul bir başlangıçtır. Nadiren iyi bir nihai tasarımdır ve işaretlemesi çoğu zaman bir müşterinin sürdürebilmesi için temizlenmesi gerekir.

Sayfa WordPress dışında yaşayacaksa, altı hafta sürüp sonra kaybolacak bir kampanya için Framer ya da Webflow gibi barındırılan bir oluşturucu meşru bir seçimdir. Seçimi demoya göre değil, sayfanın ne kadar yaşayacağına ve kimin düzenleyeceğine göre yapın.

Yayından sonra nasıl test edip iyileştirirsiniz?

Yayın, ölçümün başlangıcıdır. Bir dönüşüm olayı tanımlayın, analitik aracınıza bağlayın ve trafik göndermeden önce form gönderimlerinin gerçekten izlendiğini doğrulayın. Kendi sonuçlarını ölçemeyen bir sayfa geliştirilemez.

Her seferinde tek bir şeyi değiştirin. En büyük etkiye sahip olduğu için önce başlık, sonra düğme etiketi, sonra kanıtların sırası. Her testi, ilk umut verici günde durdurmak yerine yeterli sayıda dönüşüm toplayacak kadar uzun çalıştırın. Küçük bir kitleyle bir test haftalar sürebilir ve bu normaldir. Sabır, sahte bir kazananı yener.

Ölçüm için basit bir kontrol listesi yeterlidir. Form gönderimini, düğme tıklamasını ve sayfadan çıkış oranını haftalık olarak aynı tarih aralığında karşılaştırın. Mevsimsel değişimleri ayırt edebilmek için kampanyanın başlangıcını ve bitişini bir yere not edin. Bir test bittiğinde kazananı ve kaybedeni tek cümleyle kaydedin. Altı ay sonra neden bir düzenin işe yaradığını hatırlamak, düzenin kendisinden daha değerlidir.

Unutulması kolay iki bakım maddesi var. Sayfa yalnızca ücretli kampanyalar için varsa, dizine eklenip eklenmeyeceğine karar verin; teklifinizin ince bir kopyası ana sayfanızla rekabet edebilir. Form kişisel veri topluyorsa, yayından önce bölgenizin gerektirdiği onay metnini ekleyin, ilk şikayetten sonra değil.

Bu hafta ne yapmalısınız?

Site Düzenleyici'de boş bir şablon açın ve yalnızca hero'yu gerçek metinle ve tek bir düğmeyle kurun. Sonra telefonunuzda kontrol edin ve LCP değerini ölçün. Bu bölümden bir desen oluşturun; böylece bir sonraki müşteri sayfası boş bir tuval yerine test edilmiş bir bölümle başlar.

Bu işi haftanın sonuna bırakmayın. Hero'nun ilk sürümü bir öğleden sonra sürer, ama gerçek ziyaretçi verisi gelmeden hangi kararın doğru olduğunu bilemezsiniz. Bu yüzden ilk yayını küçük tutun ve gelen veriyi ikinci sürümün girdisi olarak kullanın.