Kayan altbilginin sayfanın altına doğru şekilde nasıl itileceği. Yeni etiketler Altbilgi html tasarımı

Tam teşekküllü web sitesi sayfalarına alışkın olan herkes, sayfa altbilgisinin alt kısmına "çivilenmiş" (yapışkan, yapışkan) görünümü tercih eder. Ancak internette iki sorun var: aşağıya doğru büyümeyen giriş alanları ve çivilenmeyen altbilgiler (pencerenin altına). Örneğin habrahabr.ru/settings/social gibi kısa sayfaları açtığımızda, görüntü alanının altında olması amaçlanan bilgilerin içeriğe yapıştığı ve ortada bir yerde, hatta en üstte olduğu hemen göze çarpıyor. alt kısım boş olduğunda pencerenin.

Yani yerine .
Yeni başlayanlar için bu kılavuz, Habr gibi saygın bir yayının bile kusurlarını düzelterek 45 dakika içinde "çivilenmiş" bir altbilginin nasıl oluşturulacağını ve gelecek vaat eden projenizin uygulanması olarak onunla nasıl rekabet edeceğinizi gösterecek.

Ağdan alınan bir tür çivilenmiş altbilginin uygulanmasına bakalım ve neler olduğunu anlamaya çalışalım. css-tricks.com/snippets/css/sticky-footer
CSS:
* ( kenar boşluğu:0; dolgu:0; ) html, gövde, #wrap ( yükseklik: %100; ) gövde > #wrap (yükseklik: otomatik; minimum yükseklik: %100;) #main ( dolgu-alt: 150 piksel; ) /* alt bilgiyle aynı yükseklikte olmalıdır */ #footer ( konum: göreceli; kenar boşluğu: -150 piksel; /* alt bilgi yüksekliğinin negatif değeri */ yükseklik: 150 piksel; clear:both;) /* CLEAR FIX*/ .clearfix:after (content: "."; display: blok; yükseklik: 0; clear: her ikisi de; görünürlük: gizli;) .clearfix (display: inline-block;) /* IE-mac'ten gizler \*/ * html .clearfix( yükseklik: 1%;) .clearfix(display: blok;) /* IE-mac'ten gizlemeyi sonlandır */
HTML:

Bu koda bakan herkesin, hatta CSS bilenlerin bile ilkeleri anlaması ve karmaşık bir projeyi güvenle düzenlemesi pek olası değildir. Tarafa atılan herhangi bir adım yan etkilere yol açacaktır. Aşağıdaki altbilginin mantığı ve oluşturulması, CSS kurallarını daha iyi anlamanızı sağlamayı amaçlamaktadır.

Teoriyle başlayalım

Çivilenmiş altbilginin olağan uygulaması, öğelerin doğrudan alt öğe olması şeklindeki CSS2'ye özgü özelliğe dayanır. VÜCUT- destek yüzdesi yüksekliği ( yükseklik:%100 veya başka bir) pencereye göre, eğer tüm ebeveynler etiketten başlayarak aynı boy yüzdesine sahipse HTML. Daha önce belge türleri olmadan, ancak şimdi Quirks Modunda, öğelerin yüzde yükseklikleri herhangi bir düzeyde destekleniyor ve modern belge türlerinde yalnızca yüzde ayarlı öğelerin içinde destekleniyor. Yani eğer bir içerik bloğu yaparsak (hadi buna #düzen) %100 yüksekliğe sahip olduğundan, bir pencere gibi kaydırılacaktır. Altbilgi ve belki de başlık hariç tüm (akış) içerik buna yerleştirilir.

Altbilgi bu bloktan sonra yerleştirilir ve 0px yüksekliğinde verilir. Genel olarak takip edebilirsiniz #düzen istediğiniz kadar blok koyun, ancak bunların tümü ya 0 piksel yüksekliğinde ya da belge akışının dışında olmalıdır ( konum: statik). Ve genellikle kullanılan başka bir önemli numara daha var. Yüksekliği 0'a eşit yapmanıza gerek yoktur. Yüksekliği sabit yapabilirsiniz ancak özelliğinden dolayı ana bloktan çıkarabilirsiniz. kenar boşluğu-alt: -(yükseklik);.

İnsani terimlerle ifade edersek, stiller altta boş bir "cep" oluşturur, içine altbilgi yerleştirilir ve bu her zaman ya pencerenin alt kenarına ya da belge eğer belgeyse belgenin alt kenarına yapışır. pencere yüksekliğinden daha yüksektir. İnternette ve Habré'de altbilginin tüm tarayıcılarda değişen başarı oranlarına sahip birçok uygulaması vardır. Habr'ın düzenini "işgücü" olarak kullanarak kendi başımıza inşa etmeye devam edelim.

Bloğun dibinden beri #düzen- bu bir ceptir, altbilgi için boş olmalıdır, sayfa nesnelerini görüntülememelidir. Ve burada başka bir sınırlamayla karşılaşıyoruz; dolgu malzemesi V #düzençünkü o zaman %100'ün üzerinde olacak. kaydetmeyecek marj- İç içe geçmiş elemanların özelliklerinden dolayı boşluk yapılması gerekmektedir. Ayrıca, örneğin blok tarafından yapılan, yüzen elemanların bloğun sınırının altına girmemesini sağlamak gerekir.

, Nerede .clear(clear:her ikisi de). Bu da önemli" yükseklik" sabitti veya aynı göreceli birimlerdeydi veya sayfa değiştikçe bunu hesaplardık. Bu hizalama kutusunu istenen yüksekliğe ayarlayarak hizalamak genellikle uygundur.

Deneyimizin sayfalarının yapısına bakalım. Bunu yapmanın en kolay yolu Chrome'da Firebug penceresini veya benzer bir pencereyi ("Geliştirici Araçları" (Ctrl-F12)) açmaktır.

...Üst reklam bloğu...

Çalışan bir örneğe geçelim

Ne görüyoruz düzen kusurlarıçivilenmiş altbilgi efektinin uygulanması açısından? Bunu görüyoruz
1) Sitedeki altbilgi, yüzde yüksekliği olmayan id=layout özelliğine sahip bir bloğun içindedir. Teorik olarak o, ebeveynler ve .content-left içerik bloğunun yüksekliği %100 olarak ayarlanmalıdır. İkincisiyle ilgili sorunlar ortaya çıkıyor - buna uyarlanmadı. Bu nedenle, bir ara katman bloğu eksik veya alt bilgi yanlış düzeyde. Ayrıca,
2) altbilginin yüksekliği değişkendir (listedeki öğelerin sayısına ve yazı tipi boyutuna bağlıdır, bu HTML'den değil CSS'den görülebilir). VE
3) üstünde #düzen 90 piksel sabit yüksekliğe sahip bir reklam bloğu var;
4) altbilgide veya (genel olarak konuşursak) blokta hizalama bloğu yok #düzen(Evet, ancak bloğun üstünde .rotated_posts; ancak belki de altbilgiye atfedilmelidir).

4. Nokta - bir senaryo ile çizim yapmalısınız.
#layout(margin-top:-90px;) ekleyerek üçüncü noktayı anlamak kolay gibi görünebilir. Ancak bu bloğun var olmayabileceğini unutmayın - banner kesici tarafından bastırılmıştır veya reklamverenler aniden engellememeye karar verirler. göster. Sitede bunun olmadığı birçok sayfa var. Bu nedenle bağımlılık kenar boşluğu bir reklam bloğundan çıkarmak kötü bir fikirdir. Çok daha iyi - içine yerleştirin #düzen O zaman yoluna çıkmayacak.

İlk nokta, çivilenmiş altbilginin çalışabilmesi için altbilgi bloğunu altına yerleştirmeniz gerektiğidir. #düzen. Bununla birlikte, javascript'in yardımıyla diğer çivilenmiş altbilgi şemalarını uygulayabilirsiniz, ancak her durumda, JS'ye veya başlangıçta doğru düzene ihtiyacınız var.

Altbilgiyi içeriğe "tokatlayan" sitenin en son düzen tasarımcısından daha güçlü olamayacağımız için, altbilgiyi gelecekteki sitemize doğru şekilde yerleştirme fikrini erteleyeceğiz (bu nedenle "daha havalı" olacak) Habr'dan daha!) ve Habr'ı javascript (userscript) ile doğru durumlara göre inceleyeceğiz. (Hemen söyleyelim, suçlu olan düzen tasarımcısı veya makasçı değil, ancak sitenin türü elbette proje yönetiminin stratejik kararını belirliyor.) Bu şekilde ideale ulaşamayacağız çünkü Yükleme işlemi sırasında ilk veya iki saniyede sayfa yanlış düzende olacaktır. Ancak BT dünyasının en popüler sitesini geçme kavramı ve yeteneği bizim için önemlidir.

Bu nedenle, komut dosyasında doğru yere (daha önce, sayfa yüklemesinin sonunda), DOM reklam bloklarının ve altbilginin transferlerini doğru yerlere yazacağız. (Kullanıcı komut dosyaları nedeniyle çözümün temiz olandan daha karmaşık olacağı gerçeğine hazırlanalım.)
var dQ = function(q)(return document.querySelector(q);) //kısaltmak için var topL = dQ("#topline"), lay = dQ("#layout"), foot = dQ("#footer" ); if(topL && lay) //banner - içerik bloğunun içinde lay.insertBefore(topL, lay.firstChild); if(lay && foot && lay.nextSibling) //altbilgiyi taşı lay.parentNode.insertBefore(footer, lay.nextSibling);
Blokları yerlerine koyuyoruz - şimdi gerekli özellikleri elementlere atamak kalıyor. Altbilginin yüksekliğinin tam olarak ayarlanması gerekecektir, çünkü kullanıcı metni yürürlüğe girdiğinde (sayfa yüklemesinin sonu) bunu zaten biliyoruz. Kullanıcı betiği tetikleme noktası nedeniyle, yukarıda tartışıldığı gibi, sayfadaki altbilgi ekranının atlaması kaçınılmazdır. "Kötü bir oyunla" "iyi bir yüz" yaratmayı deneyebilir misiniz? Ne için? Sitenin "kötü oyunu", süper çaba harcamadan bir konsept oluşturmanıza olanak tanır; bu, kaliteyi değerlendirmek için yeterli olacaktır ve projenizde "doğru oynarsanız" gerekli olmayacaktır.
if(ayak)( //blok hizalayıcı

altbilgide h.apnd_el((clss:"clear", AppendTo: footer)); var footH = foot.offsetHeight; //...ve altbilginin yüksekliğini ölçün ) if(topL && lay && footer && lay.nextSibling)( //blogu içerikte istenen yüksekliğe hizalayın ("düzen") h.apnd_el((clss:" clear", css:( height: (footH ||0) +"px"), AppendTo: Lay)); Lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:-) "+ footH +"px !important)html, body (height:100%)"); )
Burada kendi yazdığımız bir işlevi uygulamamıza izin verdik h.apnd_el, kabaca jQuery'dekiyle aynı işlevi görür -
$("

").css((height: footH ||0)).appendTo($(footer))
Ve sonra - başka bir tipik CSS kuralı ekleme işlevi - h.addRules. Burada onsuz yapamazsınız çünkü " ile bir kural ilan etmeniz gerekiyor !önemli" - yalnızca kullanıcı metnindeki stil önceliklerinin özellikleri nedeniyle.

Bu kod parçalarıyla, kullanıcı metnindeki çivilenmiş altbilgiyi (aşağı atladıktan sonra) görebilir ve sayfa düzeninin nasıl oluşturulacağını tam olarak anlayabiliriz. Her gün bir atlama tasarımı kullanmak can sıkıcıdır, bu nedenle bunun yalnızca gösteri ve test amacıyla yapılması önerilir. HabrAjax kullanıcı komut dosyasında, 0.883_2012-09- sürümünden başlayarak, benzer bir komut dosyasını "underFooter" ayarıyla kapatarak ("altbilgi çivilenmiş altbilgi"nin önüne ayarlar listesinde bir "işaret" koyun) yükledim. 12.

Çivilenmiş altbilgi, eğer ayarlanmışsa, ZenComment stillerinin güncellenmesi ihtiyacını etkiler mi? Evet öyle. Kullanıcı metni tarafından eklenen stillerin en düşük önceliğe sahip olduğu karmaşık stil öncelik zinciri nedeniyle, kullanıcı stillerini biraz ayarlamak zorunda kaldık. olasılıklarçivilenmiş altbilgiyle çalışın. Kullanıcı stillerini (2.66_2012-09-12+ sürümüne) güncellemezseniz alt bilgi hatalı çalışacaktır.

Engellemek döndürülmüş_post (geçmişten üç popüler gönderi) altbilgiyle daha mantıklı görünüyor, bu nedenle gerçek senaryoda da altbilgiye taşınıyor.

İkinci öğe (düzen kusurları listesinden) tamamen Habr'a yönelik gerekçedir (kullanıcı komut dosyası için geçerli değildir ve öncekileri kısmen tekrarlar).

Sayfaların, saf CSS'de çivilenmiş altbilgi oluşturmalarını engelleyen bir sorunu vardır; bu, tarayıcıdaki varsayılan yazı tipi boyutlarına bağlı olarak tanımsız bir altbilgi yüksekliğidir. CSS'de altbilgi uygulamak için yazı tiplerinin göreceli yüksekliklerini seçmeniz gerekir, ancak kullanıcının bilgisayarında sağlanan yazı tipleri yoksa bunlar çalışmayabilir. Bu nedenle çözüm, altbilginin yaklaşık konumunu geçişlerle tam konuma ayarlayabilecek bir javascript içermelidir. Veya, farklı platformlarda kullanıcı metni üzerinde yapılan çözümün kabul edilebilirliğine baktıktan sonra, çivilenmiş bir altbilginin hesaplanmış bir kurulumunu yapın - ilk gözlemler çözümün pratik olduğunu gösterir.

Sonuç: Habré'de düzeni tamamen düzenleyebilirsiniz, ancak bunun için düzenin davranışını açıkça anlayan, blokları doğru sıraya göre düzenleyen bir düzen tasarımcısına ihtiyacınız var. (Artık alt bilgi ve üst başlık "orada değil" ve stillerle çivilenmiş bir alt bilgi elde edebilecekleri bir şekilde değil.) Alt bilgi yüksekliğini göreceli birimler halinde ayarlarsanız, bir miktar kenar boşluğu alarak JS olmadan da yapabilirsiniz. yazı tipi belirsizliği için boşluk.

Uygulama

HabrAjax 0.883+ sürümünü etkinleştirirseniz “çivilenmiş altbilgi” çalışmasını göreceğiz. Komut dosyalarının yardımıyla yüksekliğe uyum sağlar. Çivilenmiş altbilgiye sahip sayfaların normal sayfalara kıyasla ne kadar daha iyi göründüğünü değerlendirmenize olanak tanır. ZenComment kullanıcı stilleri komut dosyalarıyla uyumludur, ancak çivilenmiş altbilginin onlarla düzgün çalışması için ZenComment'in 2.66_2012-09-12 + sürümünü yüklemeniz gerekir.

Uygulama Davranışı Gerçekleri

Altbilgisi, stilleri ve yazılarıyla Şamanizm şamanizmdir (yalnızca teoriyle desteklenir). Farklı tarayıcılarda davranış biraz farklı, ancak bazı yerlerde beklenmedik. Kullanıcı komut dosyaları ve yeniden düzenleme blokları olmadan sonuçlar farklı olacaktır. Kullanıcı betiğindeki uygulamayla ilgili deneyler bunu verdi.

1) Firefox - beklenmedik altbilgi atlama eksikliği. Orada olmamaları garip - görüntü oluşturma, altbilgiyi en alta yerleştirdikten sonra gerçekleşiyor.

2) Chrome - "gezinen kaydırma" ile şaşırttı - sayfanın altına saniyede bir periyotla boş alanlar eklendi - yüksekliklerin hesaplanmasında bir sorun oluştu. Kullanıcı stiline html,body(height:100%) eklenerek işlenir, ancak her zaman çalışacağının garantisi yoktur. Belgenin pencerenin yüksekliğini aşıp aşmadığını kontrol etmek daha güvenilirdir ve eğer aşmıyorsa altbilgiyi hareket ettirin, aksi takdirde hiçbir şey yapılmaz. Atlamayla - her şey yolunda, öyle.

3) Opera - ilk sayfa yüklemesinde atlama yok (v. 12.02), ancak aceleyle yeniden yükleme, altbilgi atlamasını gösterebilir. Aksi takdirde Fx'ten daha az doğru sonuç vermez.

Peki, Chrome'a doğru şekilde davranmayı (bir komut dosyasıyla) özel olarak öğretmeniz ve sürümü bu formda incelenmek üzere sunmanız gerekir. Bu nedenle kullanıcı komut dosyasındaki bölüm makalede verilen bölümden biraz daha karmaşıktır.

Bunun tam bir uygulama olmadığı unutulmamalıdır - örneğin pencerenin kullanıcı tarafından yeniden boyutlandırılması durumlarını hesaba katmaz. Ayrıca, taşımadan önce ve sonra altbilgi yüksekliklerinin değiştirilmesinin nadir (pratikte) kombinasyonlarını da bulabilirsiniz; burada mantık, rahatsızlığa neden olmadan başarısız olmaya başlar. Revizyonun karmaşıklığı ile geçici çözüm arasındaki denge korunduğu için eksiklikler bilinçli olarak bırakılmıştır.

Sonuç olarak, en azından hızlı masaüstü bilgisayarlar için tamamen uygulanabilir bir çalışma planı olduğu ortaya çıktı. Yanlış altbilgi davranışı tespit edilirse "underFooter" ayarı devre dışı bırakılmalıdır.

Hangi sayfalar için faydalıdır?

Standart bir sitede, kullanıcı stillerinin olmadığı kısa Soru-Cevap sayfaları bile 1500 pikselden uzundur ve bu, çoğu durumda yatay monitörlerde algılanamaz. Ancak sıradan monitörlerde bile, çivilenmemiş altbilginin tüm ihtişamıyla göründüğü yaklaşık 1300 piksel yüksekliğe sahip kullanıcıların kişisel sayfaları sıklıkla karşımıza çıkıyor. Çok uzun değil ve kullanıcı ayarlarında çok sayıda sayfa var.

ZenComment kullanıcı stilleri uygulandığında, gerekli sayfa yüksekliğini büyük ölçüde azaltırlar ve HabrAjax kullanıcı metni, kenar çubuğundaki kenar çubuklarının bir kısmını veya tamamını göstermeyebilir. Bu nedenle, komut dosyalarında ve stillerde çivilenmemiş altbilginin etkisi çok daha sık gözlemlenir. Bu nedenle altbilgi düzeltmesinin ilk kez HabrAjax'ta ortaya çıkması mantıklıdır. Ancak normal bir sitede bile çivilenmiş bir altbilginin faydalı olabileceği çok sayıda sayfa bulunur.

Destek olacak mı?

Sitenin geçen yılki davranışı, geliştiricilerin (ve dolayısıyla yönetimin) daha önce yalnızca kullanıcı komut dosyalarında ve kullanıcı stillerinde var olan özellikleri uygulamaya başladığını gösteriyor. Mesela yılın başında birçok küçük dilek biriktirdiğimi yazdım. Altı ay sonra siteye geri döndüm ve memnuniyetle (metin içinde; "UPD"yi ve tarihleri okuyabilirsiniz) dilek olarak tanımlanan bazı özelliklerin sitede halihazırda uygulamaya konulduğunu fark ettim.

Daha sonra yorumları değerlendirmek için kareler yerine "oklara" bakalım. Yaklaşık 3 yıl önce almalexa ("Prettiifier") kullanıcı gruplarında göründüler ve yaklaşık 2 yıl önce ZenComment'e uyarlandılar. Yaklaşık 2-3 ay önce sitede göründüler. Bir süre sonra, daha az ıskalamak için, ZenComment'te yapıldığı gibi (bir ok sayının solunda, ikincisi sağda) okların belirli bir mesafeye yayılacağına inanmaya başlar.

Bu nedenle belki de Habré'nin “çivili altbilgisi” 3 yıl önce sanıldığı gibi bir fantezi değil.

HabrAjax betiğinde görünen diğer özellikler son 3 ay boyunca (ayarlarda devre dışı):
* giriş alanlarının otomatik büyümesi (Opera'da büyük metinlerde yavaşlayabilir);
* "bugün" ve "dün" dışındaki tarihler için haftanın günleri;
* Akıştaki olaylar, 1 satır ve 2 karaktere daraltılmıştır;
* "habr*" kelimelerinin "χ·" ve "χα" olarak kısaltılması;
* makale numaralarına göre tarih ipuçları - URL'deki numaraya göre makalenin yüklenmeden önce hangi ay ve yılda olduğu bildirilir;
* “İlgili Yazılar” 2 kelimeye daraltıldı. "İlgili gönderiler" açılır penceresinin ekran görüntüsü (4 değil 12 bağlantıyı gösterir).

Ayakkabılar herhangi bir kıyafetin son bileşeniyse, o zaman bir e-Ticaret sitesinin altbilgisi, satış tasarımının son öğesidir. Altbilginin en alttaki öğesine odaklanan modern web siteleri, bireyselliklerini her şekilde göstermeye hazırdır. Rekabetçi bir e-ticaret ortamında yeterince özgün fikir, yaratıcılık ve tasarım trendleri vardır. Bir E-ticaret sitesinin altbilgisini çeşitlendirmeden önce önemli noktaları dikkate almakta fayda var. İlk önce neyi yerleştirmeli ve bunu en iyi nasıl yapmalı? İlginç seçenekler için ilham verici altbilgi tasarımları incelememize göz atın.

Ayrıca okuyun: 2019'un 13 E-ticaret Pazarlama Trendi

Chartbeat şirketinin ilginç istatistikleri. 25 milyon kullanıcının davranışları üzerine yapılan bir araştırma, sayfalara ne kadar derinlemesine göz attıklarını gösterdi. Kullanıcının dikkatinin katlama çizgisinin altındaki boşluğa çekildiği ortaya çıktı. Daha kullanışlı bilgiler elde eden ziyaretçiler, sayfanın üst kısmındaki 1200 piksellik alanda (tarayıcıdaki ekranda dikey olarak ortalama 700 piksel) veya ikinci ekranın arkasında en uzun süre oyalanırlar.

Görüntüleme süresi (sn.) / Sayfanın üst kısmına olan mesafe (piksel)

Birinci ve ikinci ekranların görüntülenme süresinde büyük bir boşluk. TOP'un kendisi 4 saniyedir, süre üstten 1200 pikselde maksimuma (16 saniye) ulaşır ve daha fazla kaydırmayla yavaş yavaş azalır.

Ziyaretçilerin payı (%) / Sayfanın üst kısmına olan uzaklık (piksel)

Ziyaretçilerin önemli bir kısmı (%25’ten fazlası) içeriğin yüklenmesini bile beklemiyor ve sayfayı kaydırmaya başlıyor. Bu, yalnızca %75'in en üsttekini ilk önce göreceği anlamına gelir. Sayfanın en çok görüntülenen alanı 550 pikseldir (katlama çizgisinin hemen üstü).

Araştırma, kullanıcıların sayfanın en altına kaydırıp tüm içeriği izlemediği yönündeki efsaneyi ortadan kaldırıyor. Altbilgi, modern bir e-ticaret sitesi için de önemlidir ve hatta kendi avantajlarına da sahiptir.

Bir "bodrum" (altbilgi) nasıl tasarlanacağına dair fikirler, satış tasarım örnekleri

Bu 10 ipucu, web tasarımındaki kompozisyon kurallarına ve öncelikli görevlerin çözümüne göre sitenin altbilgisini nasıl güzel bir şekilde tasarlayacağınızı gösterecektir. Kullanılabilirliği, UX'i (kullanıcı deneyimi) geliştirmek ve hatta satışları artırmak için en uygun taktikleri uygulayın.

1. Gerekli bilgiler

Geleneksel olarak gerekli organizasyonel ve yasal konular sitenin altbilgisinde ele alınmaktadır. Bildirimler daha az görünür metinlerle tasarlanmıştır, bu da sayfanın diğer alanlarına daha anlamlı öğeler için yer açar. İşte dikkate alınması gereken örnek bir liste:

Telif hakkı notları
Yasal sorumluluk reddi beyanları
Fatura bilgileri
Çerez Bildirimi

Mal satan web sitesinin yasal gereklilikleri karşılaması ve prosedür, iade koşulları hakkında bilgi vermesi gerekir. Altbilgideki konumu hem satış yapan kaynak hem de ziyaretçiler için uygundur.

Altbilgi örneği: Yves Rocher

Yves Rocher çevrimiçi mağazası: alternatif katmanlardan oluşan hoş bir tasarıma sahip tam ekran altbilgi. Sipariş takibinden kişisel veri politikasına kadar şirket, satış sitesinin altyapısı hakkında bilgi verir. İşte ürünü kullanmayla ilgili ipuçları, bonuslar, promosyonlar

Alt bilgi örneği: Lumity

Gıda katkı maddesi tüccarları artan yasal yaptırımlarla suçlanıyor sorumluluk. Satış sitelerinde söylemeleri/söylememeleri gereken pek çok şey var. Yasal bilgilere olan bağlantılar daha iyi görünürlük için kalın harflerle yazılmıştır.

Güzel bir arka plan görüntüsüne sahip bir altbilgi, sitenin genel tasarımına çok organik bir şekilde uyar. Net bir sınır yoktur; bunun yerine içeriğin kendisi ayırıcı görevi görür

Altbilgi örneği: Saddleback Leather Co

Güzel bir retro üstbilgi ve altbilgi tasarımına sahip satış sitesi. Malzeme ve kaplama kusurlarına karşı 100 yıl garanti. İade koşullarına ilginç hikayeler eşlik ediyor… gerekli e-Ticaret bilgileriyle her şeyin o kadar da üzücü olmadığı ortaya çıkıyor

2. Negatif alan – yeterli görsel mesafe

Alt bilgi bağlantılarının sayısını sınırlandırırken, negatif alan konusunda cimri olmayın; bunun görsel algı üzerinde inanılmaz bir etkisi olacak ve okunabilirliği artıracaktır. Genel bir kural olarak, görsel bir hiyerarşi korunurken merkezi unsurlar daha hızlı fark edilir (avantaj olarak kullanılabilir!).

Alt bilgi örneği: QUAY AVUSTRALYA

Minimalist bir tarza ve sabit bir açılır menüye sahip bir çevrimiçi mağaza, geniş bir altbilgiye sahip olabilir.

altbilgi örneği: Incase

Büyük miktarda mikro negatif alan (küçük elemanlar arasında) şu şekilde söylenebilir: gerekli tüm bilgiler mevcut olduğu sürece okunaklıdır ve hızlı bir şekilde algılanır - her şey yolundadır

Alt bilgi örneği: Stumptown Kahve Kavurma Makineleri

Kahve alanının geniş altbilgisi, çok fazla makro negatif alana (bölümler/bölümler arasında “hava”) sahip olan temiz tasarım kompozisyonunu mükemmel bir şekilde tamamlıyor.

3. Son harekete geçirici mesaj

Ayrıca okuyun: Hedef Eylem Düğmeleri için 30'dan Fazla Örnek ve Tasarım Fikirleri

Altbilginin şık tasarımı, kaynağın kendisi hakkında anlamlı bir şekilde konuşuyor. Alıcının burada sayfanın geri kalanına göre biraz daha uzun süre kaldığını unutmamak önemlidir. Başka bir son eylem çağrısı için iyi bir fırsat. Genellikle bu bir abonelik / posta listesidir, ancak CTA çağrısını hesap kaydına da bağlayabilirsiniz.

altbilgi örneği: Greetabl

Greetabl, abone olma çağrısı da dahil olmak üzere sayfaların alt kısmında mütevazı bir şekilde tasarlanmış. Minimum unsurla çağrı fark edilir hale gelir ve turkuaz arka planla uyumlu bir şekilde site dekorasyonuna dönüşür.

Altbilgi örneği: Ecwid

Sayfaların alt kısmında harekete geçirici mesajlar içeren hoş bir tasarım. Satış yapan web sitesi oluşturucunun yapısı evrenseldir. Milyon müşterisi için 35 dile çevrildi.

4. Yüzen sepet - satış işlevselliğinin kullanılabilirliğini artırmak

Alışveriş sepetine sitenin alt kısmından erişmek, sitenin kullanılabilirliğini ve satış kalitesini artırmanın harika bir yoludur.

Altbilgi örneği: Lemonadela

Catering şirketinin satış web sitesi görünüm olarak hoş ve alıcı için kullanışlıdır

5. Alt Bilgide Gezinme

Sitenin alt kısmı, nadiren görüntülenen bilgiler için idealdir: şirket hakkında, hizmet şartları ve gizlilik politikası. Bu durumda altbilginin işlevi herkesi kurtarmaktır. E-Ticaret ortamında kaybolduğunu hisseden kişi, e-Ticaret altyapısıyla ilgilenmeye başlar ve içgüdüsel olarak aşağıya doğru kaydırır…

İçeriğin okunabilirliği için negatif alan gereklidir. Genel olarak "alt bilgi", menü veya site haritasından farklı olarak gezinme amaçlı değildir. Yalnızca nadir durumlarda, e-ticaret siteleri belirli ürün kategorilerini altbilgiye yerleştirir (

Bu bir çeşit kabus! Sitenizin altbilgisi neden tekrar ortaya çıkıyor ve tasarımı değiştiriyor? Alt bilgiyi sayfanın altına bir şeyle düzgün bir şekilde basmak gerçekten imkansız mı? En azından içerik veya tuğlalar! Monitördeki tuğla tırmanmıyor mu?

Anlıyorum, sonra yazımızı sonuna kadar okuyana kadar oturup hiçbir şey yapmayın.

Web siteniz için doğru altbilgiyi oluşturma

Birçok site sahibi, sayfanın altbilgisi "yukarı" çıktığında bu sorunla karşılaşır. Ve sonra ne yapılacağı belli değil. Çoğu zaman, web sitesi tasarımları aceleyle kendi başlarına yapılır ( "çılgın eller" daire içine alın) veya acemi web yöneticileri.

Aynı zamanda sitenin yaşamının başlangıcında korkunç bir şey olmuyor. Ve içerik bodruma "kendi ağırlığıyla" baskı yapıp yukarı çıkmasını engellediği sürece böyle bir cennet devam ediyor. Ancak sayfaya daha az materyal yerleştirmeye değer ve son zamanlarda "sakin" olan altbilgi anında yükselerek sitenin tüm tasarımını uygunsuz bir görünüme getiriyor.

Hazırlanan şablonun bu "kusurunu" ortadan kaldırmak için bir web yöneticisinin hizmetlerine para harcamanıza gerek yoktur. Çoğu zaman sitenin altbilgisi kendiniz yerleştirilebilir. Böyle bir sorunu ortadan kaldırmak için olası tüm seçenekleri ele alalım:

İlk yol

Altbilgiyi sayfanın "alt kısmına" "sabitlemenin" ilk yolu CSS'yi temel alır. Örnek kodla başlayalım ve ardından uygulanmasına daha yakından bakalım:

html ( yükseklik: %100; ) üstbilgi, gezinme, bölüm, makale, kenar, altbilgi ( görüntü: blok; ) gövde ( yükseklik: %100; ) #wrapper ( genişlik: 1000 piksel; kenar boşluğu: 0 otomatik; minimum yükseklik: 100 %; yükseklik: otomatik !önemli; yükseklik: 100%; ) #header ( yükseklik: 150 piksel; arka plan rengi: rgb(0,255,255); ) #content ( dolgu: 100 piksel; yükseklik: 400 piksel; arka plan rengi: rgb(51,255,102) ; ) #footer ( genişlik: 1000 piksel; kenar boşluğu: -100 piksel otomatik 0; yükseklik: 100 piksel; konum: göreceli; arka plan rengi: rgb(51,51,204); )

Sayfa etiketinin altına altbilgi yapıştırmak için