Açılış sayfası menüsünde bir bağlantı nasıl oluşturulur - adım adım talimatlar. Açılış sayfası için duyarlı menü

Bugün, eklentiyi kullanarak tam ekran kayan bir açılış sayfasını nasıl oluşturabileceğinize bir göz atacağız. Yani, açılış sayfanız belirli bloklardan oluşur ve bu bloklar yalnızca kaydırma yapıldığında hafif bir gecikmeyle değişecektir. Çok ünlü şirketler, açılış sayfalarını bu tarzda oluşturur. Ve bugün böyle bir açılış sayfası tasarımı oluşturmanın ne kadar kolay olduğunu öğreneceksiniz.

Kaydırma Efektleri Makaleleri:

Efektin özü: kaydırmadan önce sonraki blok hafif bir gecikme olur ve ardından sayfa bir sonraki bloğa geçer. Animasyon, ters yönde kaydırma yaparken de gerçekleşir. izlenim küçük.

Bu açılış sayfasının en altına gidip menüyü kullanmayı deneyin:

İndirmek

Blok değiştirme süreci:

Böyle bir açılış sayfası tasarımı nasıl yapılır?

1 HTML yapısı

Öncelikle sadece bloklar arasında gezinmekle kalmayıp genel menüyü de kullanabilmemiz için bir menü oluşturacağız.

Menü yapısı standarttır:

Nitelikleri açıklayayım:

• veri menüsü- öznitelik menüyü oluşturmak için gereklidir.
• href- aynı tanımlayıcıya sahip ilgili bağlantıya giden bağlantı özelliği.

Şimdi tüm bloklar için bir yapı oluşturalım:

Tanımlayıcıya sahip ortak bir blok var "tam sayfa" içerikli bloklar içerir. Burada size yabancı gelen bir özellik var:

• veri bağlantısı- biraz sonra çalışmasını sağlayacağımız menünün işleyişi için bu özellik.

2 CSS Stili

Burada özel stiller yok, bu yüzden burada sadece menü için stiller yerleştireceğim:

Komut dosyasını bağlamak ve küçük bir JS kodu yazmak için kalır.

3 JS parçası

Gerekli kütüphaneler:

• jQuery.min.js

Onları bağlarız:

Merhaba arkadaşlar, meslektaşlar! Nasılsın? Umarım herkes harika iş çıkarıyor :) Bugün basit bir şey yapacağız uyarlanabilir menü açılış sayfamız için. Gittikçe daha fazla insan bunu soruyor ve ben de bu tür soruları yazıyorum ve boş zamanlarımda bu konularda makaleler yazmaya çalışıyorum.

Bu şekilde yeni fikirler ortaya attığınız ve blogun geliştirilmesine yardımcı olduğunuz için teşekkür ederiz. Bu arada, bir sonraki makaleyi hangi konu hakkında okumak istersiniz? Lütfen yorumlara yazın bu benim için çok önemli. Şimdi başlayalım...

Bir web sitesi için duyarlı bir menü nasıl yapılır

Google, mobil duyarlılığın Nisan ortasından itibaren sıralama faktörlerinden biri olacağını onayladı. Bu bağlamda, açılış sayfanızı nasıl duyarlı hale getireceğinize dair tüm materyaller her zamankinden daha alakalı. Bugün karmaşık bir şeyi çitlemeyeceğim, aksine size minimum sürede çok basit bir uyarlanabilir menüyü nasıl yapacağınızı anlatacağım.

Temel olarak html + css olacak, ancak tıklamayı işlemek için çok küçük bir komut dosyası gerekiyor. Yani…

Duyarlı yatay menü

Html ile başlayalım. Öncelikle jquery kütüphanesini ekleyelim. Muhtemelen uzun süredir kullanıyorsunuz, bu yüzden ikinci kez bağlamamaya dikkat edin:

Şimdi işaretleme. Basit bir sırasız liste ve menü simgesini içeren küçük bir div. Yalnızca düşük çözünürlüklerde görünür olacaktır.

Gördüğünüz gibi - karmaşık bir şey yok, bence gerektiği gibi kendiniz geliştirebilirsiniz.
Şimdi stilleri ekleyelim:

#menu (arka plan: # 2ba9c0; genişlik: %100; dolgu: 10px 0; metin hizalama: merkez;) #menu a (renk: #fff; metin dekorasyonu: yok; dolgu: 12px 12px;) #menu a: fareyle üzerine gelin (kenarlık-alt: 4 piksel katı #fff; arka plan: # 078ecb;) .itemsMenu li (ekran: satır içi; sağ dolgu: 35 piksel; genişlik: %100; kenar boşluğu: 0 otomatik;) .itemsMenu li img (dikey hizalama : orta; kenar-sağ: 10px;) .iconMenu (renk: #fff; imleç: işaretçi; görüntü: yok;) .showitems (ekran: blok! önemli;) @medya ekranı ve (maksimum genişlik: 600 piksel) (# menu a (alt dolgu: 13px;) #menu a: vurgulu (kenarlık-alt: yok;) .iconMenu (ekran: blok;) .itemsMenu (ekran: yok;) .itemsMenu li (ekran: blok; dolgu: 10px 0;))

Şimdi tarayıcı penceresini küçülttüğünüzde aşağıdaki resmi göreceksiniz:

Gerçekten her satırı açıklamak istemem çünkü blog bu şekilde düzen ile ilgili değil. Sadece açıklamaya çalışayım.

İlk olarak, yatay olarak yan yana oturmalarını sağlamak için li öğelerini görüntülenecek şekilde ayarladık: inline. Float: left kullanmış olabilir, ancak bu şekilde yapmaya karar verdi. Ve menü simgesini display: none özelliği ile gizleyin. Ekran çözünürlüğü 600 pikselden az olduğunda, satır içi öğeleri li öğelerinden kaldırın, gizleyin ve simgeyi gösterin. Özetle - öyle.

Şimdi, menü simgesine tıklanacak ve öğelerini görüntüleyecek basit bir komut dosyasına ihtiyacımız var:

$ (function () ($ (". iconMenu"). (işlev ()'e tıklayın (if ($ (". itemsMenu"). is (": görünür")) ($ (". itemMenu"). removeClass (" showitems ");) else ($ (". itemsMenu "). addClass (" showitems ");)));));

Bunun gibi. ben aldım ayrı dosya ve kapanış gövde etiketinden önce bağladı.

Bu kadar. Böylece, hızlı bir şekilde basit bir uyarlanabilir menü düzenleyebilirsiniz. Açılış sayfası.

Tabii ki dezavantajları var. Kenar boşlukları piksel cinsinden belirtilir, ancak tüm mesafeler yüzde... Sadece gerekli değildi. Tam teşekküllü bir site olsaydı, png değil, svg veya yazı tipinde simgeler kullanırdım ve girintileri yüzde olarak yeniden hesaplardım. Ve biraz doğaçlama oldu :) Umarım her şey açıktır? Hoşçakal.

Navigasyon size kendi başına iyi olan bir kontrol hissi verir. Peki ya “tek sayfa, tek hedef” kuralı? Bu sorunun kesin bir cevabı yok (çoğu optimizasyon sorusunda olduğu gibi), ancak karar vermenize yardımcı olacak bazı harika vaka çalışmaları var.

Açılış sayfası optimizasyonu

Açılış sayfası, kârı artırma stratejisinin ayrılmaz bir parçasıdır. Şirketler açılış sayfası numaralarını artırdığında, ortalama olarak müşteri adayları %55 artar. Ancak araştırmalar, şirketlerin sadece %22'sinin kendi şirketlerinden memnun olduğunu gösteriyor.

Tüm bu unsurları yukarıdan görüyor musunuz? Dikkati dağıtırlar ve açılış sayfasından uzaklaşırlar. Navigasyon önde gidiyor Açılış sayfası, varlığının anlamı ile çelişir.

Açılış sayfası, bir ziyaretçinin bir reklam bağlantısı aracılığıyla veya arama sonuçlarından geldiği bağımsız bir sayfadır. Görevi, kullanıcıyı bir işlem yapmaya teşvik etmektir. Örneğin, bir ürünün demosunu alın veya bir web seminerine kaydolun.

Navigasyonun burada pek bir anlam ifade etmediği açıktır, ancak açılış sayfalarının yalnızca %16'sı onu içermez. Açılış sayfası düzeninde diğer bölümlere gitmek için bağlantılara ihtiyaç duyulduğuna inanılmaktadır. Bakalım bölünmüş testler ne gösterecek.

Gezinme "için" durum

• konumunuzu anlayın;
• diğer bölümlere gitmek kolay.

Üç tür navigasyon vardır:

• ana;
• yerel;
• bağlamsal.

Bu tür sitenin ana menüsünü temsil eder. İçindeki her öğe, kaynağın belirli bir bölümüne götürür. Edgar sayfasındaki başlık, temel gezinmeye bir örnektir:

Yerel navigasyon

Bunlar, bilgileri yapılandıran bir açılır menü formatında ana navigasyonun alt bölümleridir. Yukarıda bahsedilen Zoho açılış sayfasında böyle bir menü var.

bağlamsal gezinme

Kaynağı görüntülemek ve içeriği düzenlemek için her üç tür de gereklidir. Sayfadan sayfaya gezinmeyi ve şirket hakkında daha fazla bilgi edinmeyi kolaylaştırırlar.

WordStream'e göre, açılış sayfalarının %96'sı ziyaretçiden uzaklaşan en az bir bağlantı içeriyor. Rakamlar diyor ki:

• açılış sayfalarının sadece %4'ünde hiç bağlantı yok;
• Sayfaların %81'i 1'den 9'a kadar bağlantı içerir;
• %14'ü 10'dan fazla gezinme öğesi kullanıyor.

Bağlantıların yerleştirilmesi, açılış sayfasının ana amacından farklı sorunları çözmenize olanak tanır. Örneğin, sosyal düğmeler... ağlar abone sayısını artırır.

Örnek olarak Meltwater sayfasını alın.

Açılış sayfası, yalnızca bir CTA düğmesine tıklanarak ürünü tanıtmakla kalmaz, aynı zamanda gezinme yoluyla diğer bölümlere giden yolu da açar. Sayfanın asıl amacı ile ilgilenmeyenler için başka bir şey iyi olabilir. Görünen o ki, bağlantılar ziyaretçiyi alıp götürse bile sonunda sonuç için çalışıyorlar.

Gezinmeye "karşı" durum

Gezinme bağlantıları, sitenizdeki sayfalardan biri olmadığı ve ondan farklı olması gerektiği için açılış sayfasında çalışmaz. Kaynağın ilk penceresindeki bağlantılar, bir sayfadan diğerine geçerek bilgileri incelemeye yardımcı olur. Bir açılış sayfasında, kullanıcıyı alıp götürürler.

Başlığın ne kadar ilgi çekici olduğu, bilgilerin ne kadar ustaca sunulduğu veya ne kadar iyi olduğu önemli değil. Gezinme bağlantısı, dönüşüm hedefinden uzaklaşıyor ve ziyaretçinin geri dönüp dönmeyeceğini tahmin etmek imkansız. Kullanıcının dikkat süresi sınırlıdır, bu nedenle onları baştan cezbetmeniz ve sayfanın sonuna kadar dikkat dağıtıcı unsurları ortadan kaldırmanız gerekir.

Bu, bağlantılarla dolu altbilgi (sayfa altbilgisi) için de geçerlidir. Açılış sayfanızı görüntüleyen ve bir CTA düğmesine tıklamak üzere olan, ancak aniden aşağıdaki bağlantılarla dikkati dağılan bir ziyaretçi hayal edin. Bu, dönüşüm oranınızı etkiler.

Örneğin, Better Homes and Gardens'ın çekiliş açılış sayfasında, ziyaretçinin Meredith Corporation hakkında daha fazla bilgi edinmek ve CTA düğmesine tıklamaya giden yolu kapatmak istemesi için iyi bir şans vardır.

Yeterince örnek var, şimdi de bağlantıların dönüşüm üzerindeki etkisi hakkında bölünmüş testlerin ne söylediğine bakalım. Ölçek - En iyi yol açılış sayfasında neyin etkili olduğunu ve neyin yıkıcı olduğunu öğrenin. Gezinme bağlantılarını kaldırmanın olumlu etkisini görmek için AmeriFirst örneğine bakmanız yeterlidir.

Pazarlamacılar performansı artırmak istediler, ancak müşteri güvenini kaybetme korkusuyla tüm sayfayı yeniden tasarlamakta tereddüt ettiler. Sayfayı daha akıcı hale getiren ve dönüşümlerde %30-40 artış sağlayan gezinme çubuğunun kaldırılmasına karar verildi. İşte iki sayfa arasındaki farklar:

Benzer şekilde, Hubspot yüksek trafik hacmine sahip beş açılış sayfasını test etti. Sürüm A, sürüm B'den farklı olarak bir üst ve alt panel gezinme ve sosyal medya düğmeleri.

Veriler, tüm gezinme bağlantılarının kaldırılmasının dönüşümleri artırdığını gösteriyor.

İlginç bir şekilde, dönüşüm hunisinin ortasından gezinmeyi hariç tutmak, huninin tepesinden %16 ve %28 ve %0-4 artış sağladı.
Minders ekibi açılış sayfasını test edip gezinme çubuğunu kaldırdığında, dönüşümler ay içinde %9,2'den %17,6'ya sıçradı.

Dört numaralı test. Yuppiechef, Güney Afrika'da bulunan lider bir çevrimiçi premium mutfak gereçleri mağazasıdır. Ziyaretçilerin dikkatini asıl dönüşüm görevinden, yani çevrimiçi bir düğün hediyesi listesi oluşturmak için kaydolmaktan alıkoymamak için gezinme çubuğunu kaldırmayı denediler.

Gezinme çubuğunu kaldırdıktan sonra olanlar:

Bu seçenek, dönüşüm oranını %100'e kadar yükseltti.

Açılış sayfasında gereksiz bağlantılar olmadığında (CTA düğmesi hariç), hiçbir şey kullanıcıyı ana görevden uzaklaştırmaz. Bağlantısız açılış sayfası tek bir eyleme odaklanır, bu da ziyaretçinin buna dikkat edeceği anlamına gelir. Ancak navigasyon bağlantıları sadece dikkat dağıtmaktan daha fazlasıdır - maddi atıklarla doludurlar.

Bir açılış sayfasını tanıtmak için kullanırsanız, her ziyaretçi için ödeme yaparsınız. Ve sayfa dönüşüm oranlarına yol açmazsa, sadece para kaybedersiniz. Bir açılış sayfasını nasıl oluşturduğunuza bakılmaksızın - bir şablondan veya sıfırdan, gezinme bağlantıları ziyaretçileri ana görevden uzaklaştırarak ikincil olanlara geçer.

Sayfada gezinmeyi ve sayfada çalışmayı kolaylaştıran bağlantılar göndermenin sorun olmadığını açıklığa kavuşturmakta fayda var. Uzun açılış sayfaları, mobil cihazların yerleşimini uygular gezinme çubukları, bir bilgi bloğundan diğerine geçmeye yardımcı olur.

Conversion XL ajans sayfası, kaydırma yapmadan açılış sayfasında gezinmenize olanak tanıyan bir menüye sahiptir.

Sayfada çok fazla bilgi varsa, başlıktaki menü doğrudan gerekli bölüme gitmenizi sağlayacaktır. daha rahat sonsuz kaydırma bölümler.

Bu nasıl çalışır google sayfası Uygulama:

Çözüm

Siteden farklı olarak, Açılış sayfası belirli bir eyleme yol açmalı ve ona odaklanmalıdır. Bağlantı eklediğinizde, ziyaretçi kaybetme şansınız artar.

Normal bir kaynakta navigasyon gereklidir. Ziyaretçiye bir site haritası sağlamaya da değer, çünkü farklı teklifler içeren birkaç sayfayı görüntülemesi gerekiyor. Ancak, açılış sayfasına bağlantı koymak anlamsızdır, çünkü altında oluşturulan tek sayfada kaybolmak Özel görev, Bunun olacağından emin değilim.

Yani veriler affetmez. Bir açılış sayfası tek bir amaca hizmet etmelidir. Ziyaretçilerinize sizi terk etmeleri için bir sürü sebep sunmayın.