Сайхан хөл хэсэг. Хуудасны доод хэсэгт хөвөгч хөлийг хэрхэн зөв дарах вэ. Хамгийн сүүлийн үеийн блог шинэчлэлтүүд
Footer бол вэбсайтын хуудасны доод хэсэг бөгөөд хамгийн сүүлчийнх нь боловч чухал биш юм. Сайтын доод хэсэг буюу "хөл хэсэг" нь хуудасны доод хэсэгт байрладаг нь чухал биш мэдээлэл агуулсан бөгөөд цөөхөн хүн "олж авдаг" гэсэн үг биш юм. Гэхдээ үүний зэрэгцээ хуудасны энэ хэсгийг шаардлагагүй мэдээллээр хэт ачаалж болохгүй. Хөлийн хэсэгт юу оруулах нь дээр вэ, үүнийг хэрхэн аль болох ажиллагаатай болгох вэ?
Бид саяхан Украйны 50 онлайн дэлгүүрийн вэбсайтыг үзэж, холбоосын тоо, нийгмийн сүлжээн дэх дансны холбоос эсвэл мэдээллийн товхимолын захиалга зэрэг хэд хэдэн параметр дээр үндэслэн тэдгээрийн хөлийг үнэлэв. Сайтуудыг санамсаргүй байдлаар сонгосон боловч бид онлайн борлуулалтын янз бүрийн чиглэлийг хамрахыг хичээсэн, жишээлбэл: электроник, гэр ахуйн цахилгаан хэрэгсэл, загвар, гоо сайхан, үнэртэй ус, хүүхдэд зориулсан бүтээгдэхүүн, хоол хүнс, барилгын материал, зах, худалдааны клуб гэх мэт. Бидний судалсан онлайн дэлгүүрүүдийн жагсаалтад салбарынхаа тэргүүлэгчид болон шинээр ирсэн хүмүүс багтсан.
хэрэгтэй холбоосууд
Бидний хянасан хөл хэсэгт байгаа холбоосын дундаж тоо 21 байсан.
Бид PARFUMS.UA онлайн дэлгүүрийн хамгийн цөөн тооны идэвхтэй холбоосыг "Дээш" товчлуурыг тооцохгүйгээр 5 холбоосыг тооцсон.
Бид PARFUMS.UA компанийн вэбсайт дээрх хамгийн бага холбоосыг тоолсон: нийгмийн сүлжээн дэх дэлгүүр хуудсууд болон холбоо барих мэдээлэл.
Бид гоо сайхны бүтээгдэхүүн, сүрчигний өөр нэг онлайн дэлгүүр болох MakeUp.com.ua-аас хамгийн олон буюу 86 холбоосыг тоолсон. Энд мэдээллийн товхимол захиалгын шугамаас гадна ангилал, дэд ангилал, холбоо барих хаяг, хүргэлтийн мэдээлэл, мэдээ, нийтлэл, нийгмийн сүлжээн дэх профайл гэх мэт холбоосууд байдаг.
Бидний зочилсон ихэнх сайтуудын хөл хэсгийг блок болгон ашигласан хэрэгтэй мэдээлэлДэлгүүр хэрхэн ажилладаг талаар илүү ихийг мэдэхийг сонирхож буй зочдод зориулав. Олон сайтууд хөл хэсэгт орсон байдаг, жишээлбэл, нууцлалын бодлогын холбоос, сайтыг ашиглах дүрэм гэх мэт.
Бидний шалгасан сайтуудын 88% нь хөл хэсэгт "Бидний тухай" хуудасны холбоосыг оруулсан байна. Мөн өөр 88% нь харилцагчид эсвэл харилцагчидтай хуудасны холбоос юм. Сайтуудын зөвхөн 22% нь доод хэсэгт линктэй байдаг бөгөөд үүгээрээ дамжуулан хэрэглэгч ямар нэг хэмжээгээр компаниас үйлчилгээ авах боломжтой. Бидний үзсэн бүх сайтуудын 56% нь доод хэсэгт тээвэрлэлт, төлбөрийн мэдээлэл болон/эсвэл буцаах бодлогын холбоосыг оруулсан байна.
Зохиогчийн эрх. Эрхийг хамгаалах
Энэхүү дүрс нь бидний дүн шинжилгээ хийсэн онлайн дэлгүүрүүдийн 76% -ийн доод хэсэгт байдаг.
Бусад олон вэбсайтуудын нэгэн адил "Цитрус" хэрэгсэл, дагалдах хэрэгслийн онлайн дэлгүүрийн вэбсайт дээр зохиогчийн эрхийг хамгаалах тэмдэг байдаг.
Дүрэм журмын дагуу дүрсний ард зохиогчийн эрх эзэмшигчийн нэр, зохиогчийн эрхийн хүчинтэй байх хугацааг бичнэ. Хэдийгээр сайт дээр гарч буй өвөрмөц контент нь анхдагч байдлаар зохиогчийн эрхийн хуульд хамаарах бөгөөд суулгах шаардлагагүй ч ихэнх вэбмастерууд энэ дүрсийг сайтын хөл хэсэгт нэмсэн хэвээр байна.
Онлайн дэлгүүрийн вэбсайт дээр барилгын материал"StroyMAG" нь зохиогчийн эрхийн тэмдгийн хажууд "Бүх эрх хуулиар хамгаалагдсан" гэсэн хэллэг ашигласан.
Нэмж дурдахад, олон сайтууд зохиогчийн эрхийн тэмдгийн зэрэгцээ "Бүх эрх хуулиар хамгаалагдсан" гэсэн хэллэгийг ашигладаг бөгөөд энэ нь ямар нэг зүйл тохиолдсон тохиолдолд тэдэнд үзүүлж болох зохиогчийн нотолгоотой гэсэн үг юм. Ийм байдлаар сайтын эзэд хуулбарлагчдад хулгай хийх нь буруу гэдгийг анхааруулахыг хичээж байна.
Нийгмийн сүлжээ болон бусад маркетинг
Дадлагаас харахад хөл хэсэг нь зочин нийгмийн сүлжээн дэх онлайн дэлгүүрийн хуудсуудын холбоос эсвэл түүнтэй цаашид харилцах өөр арга замыг олох боломжтой газар юм.
Судалгаанд хамрагдсан хөлийн хуудасны 92% нь нийгмийн сүлжээн дэх дансны холбоосыг агуулж байна. Энэ бол бидний дүн шинжилгээ хийсэн сайтуудын хөл хэсгийн хамгийн алдартай элемент юм.
Жишээлбэл, "Квитер" цэцгийн онлайн дэлгүүрийн вэбсайтын доод хэсэгт бидний үзсэн ихэнх сайтуудын хөлийн хэсэг шиг алдартай нийгмийн сүлжээн дэх тэдний дансны холбоосууд байдаг.
Онлайн дэлгүүрүүдийн 34% нь и-мэйл эсвэл SMS мэдээллийн товхимолд бүртгүүлэх мөрийг хөл хэсэгт оруулсан байна. Зарим нь захиалахад таатай урамшуулал, тухайлбал тодорхой хэмжээний купон амладаг.
Жишээлбэл, онлайн хувцасны дэлгүүрт Answear захиалга 300 UAH болж өөрчлөгдсөн. худалдан авах.
Шинжилгээнд хамрагдсан хөл хэсгийн 30% нь маркетингийн зарим хэлбэрийн холбоосыг агуулсан байна. Ихэнхдээ эдгээр нь блог, нийтлэл, видео тойм гэх мэт холбоосууд байв.
Сул орон тоо
Ажлын байр бол хөл хэсгийн нэлээд алдартай өөр нэг элемент юм. Бидний дүн шинжилгээ хийсэн сайтуудын 40% нь хуудасныхаа доод хэсэгт энэ мэдээллийн холбоосыг оруулсан байна. Эндээс хэрэглэгчид тус компанид ажиллах боломжит боломжуудыг хайж олох боломжтой бололтой.
Гэнэтийн ажиглалтууд
Бид сайтын газрын зураг гэх мэт хөл хэсэгт тохиромжтой мэт санагдах элементийг онлайн дэлгүүрүүдийн дөнгөж 30% -д нь олсон.
Итгэмжлэх тэмдгийг, жишээлбэл, аюулгүй худалдан авалтын баталгааны дүрсийг бүх 50 онлайн дэлгүүрээс ердөө 4 нь хөл хэсэгт оруулсан болно.
BonPrix худалдааны клубын вэбсайтын доод хэсэгт та аюулгүй худалдан авалтыг амласан дүрсийг олох боломжтой.
Хөлийн хэсэг дэх төлбөрийн хэрэгслийн дүрсийг цөөн тооны онлайн дэлгүүрүүд ашигладаг байсан - ердөө 18%.
Таны хөл хэсэг
Санамсаргүй байдлаар сонгогдсон онлайн дэлгүүрийн 50 хөлийн энэ энгийн дүн шинжилгээ нь мэдээжийн хэрэг шинжлэх ухааны судалгаа биш юм. Мөн бидний хүлээн авсан тоонуудыг цахим худалдааны салбарт бүхэлд нь ашиглах боломжгүй юм. Хэрэв бидний хийсэн дүн шинжилгээгээр онлайн дэлгүүрүүдийн 54% нь доод хэсэгт утасны дугаараа оруулсан бол энэ нь бүх цахим худалдааны сайтуудын 54% нь ижил зүйлийг хийдэг гэсэн үг биш юм.
Гэхдээ энэ мэдээлэл нь таны сайтын хөл хэсэгт юу нэмэхээ шийдэхэд тань туслах үнэ цэнэтэй зүйл юм. Гэсэн хэдий ч зарим элементүүдийг сайтын доод хэсэгт байрлуулах нь хамгийн логик юм, учир нь хэрэглэгч үүнийг харах болно.
Сайтын хөл нь сайтын доод хэсэг, подвал юм. Энэ нь (толгой) эсрэг утгатай бөгөөд хөлийн зөв дизайн нь вэбсайтыг сурталчлах, ашиглах чадварыг сайжруулахад асар их үүрэг гүйцэтгэдэг.
Манай суваг дээрх бусад видеонууд - SEMANTICA-тай интернет маркетинг сур
Жишээ ашиглан вэбсайтын хөл хэсэг гэж юу вэ
Алдарт киноны нарийн бичгийн дарга "Эмэгтэй хүнийг эмэгтэй хүн болгодог гутал" гэж хэлдэг. Мөн түүний зөв! Хэрэв та эсгий гутал өмссөн бол цаст ой дундуур явж байна. Хэрэв гутал нь өндөр өсгийтэй бол та мартагдашгүй үдшийг хүлээж байна. Хэрэв та пүүз өмсвөл спортоор хичээллэх эсвэл маш их алхах болно. Биш гэж үү?
Хэрэв хөл доод хэсэгт байрлуулсан бол хэрэглэгч үүнийг "гүйлгэх" тэвчээргүй байдаг тул түүний дизайн нь толгойн загвараас хамаагүй чухал гэж олон хүмүүс боддог. Гэхдээ энэ нь үнэн биш юм.
Сайтын доод хэсэгт юу байх ёстой
Вэбсайт ажиллахын тулд зочдод тохиромжтой, уншихад хялбар, сэтгэл татам байх ёстой. Сайтын хөл хэсгийн элементүүдийг харцгаая, тэдгээрийн ач холбогдлыг үнэлье. Footer нь эдгээр бүх элементүүдийг агуулсан байх албагүй. Сайтынхаа захиалгат жагсаалтыг сонгоно уу.
- Сайтын газрын зураг.
Энэ бүрэн жагсаалтсайтын хуудсууд, бүтэцийнхээ дагуу харагдана. Энэ элемент нь ашиглах чадварыг сайжруулж, хэрэглэгчийн навигацийг хөнгөвчлөх болно Хайлтын системүүдсайтын бүх хуудасны талаар. Хэрэв сайтад олон хуудас байгаа бол хамгийн чухалыг нь сонгоод HTML сайтын зураг дээр харуул.
- Харилцагчид.
Хөлийн хэсэг дэх сайтын толгой хэсгээс холбоо барих мэдээллийг хуулбарлана. Та хамгийн чухал харилцагчдаа байрлуулж болно. Хэрэв зочин хуудасны төгсгөлд хүрсэн бол тэр бүх мэдээллийг уншсан гэсэн үг бөгөөд тэр захиалга өгөх боломжтой. Тохиромжтой болгохын тулд контактуудыг байрлуулах шаардлагатай.
- Санал хүсэлтийн маягт.
Энэ нь зочдод одоогийн хуудсыг орхихгүйгээр тантай холбогдох боломжийг олгоно. Энэ нь таны боломжит үйлчлүүлэгчдэд тохиромжтой.
- Дээш сум".
Энэ нь зочдод урт хуудсыг гүйлгэхгүйгээр шууд сайтын толгой хэсэг рүү буцах боломжийг олгоно.
- Буцах захиалгын маягт.
Санал хүсэлтийн маягттай адилхан ажиллана. Үүнийг мартаж болохгүй буцах дуудлагааль болох хурдан хийх ёстой Богино хугацаа. Үгүй бол та боломжит үйлчлүүлэгчийн итгэлийг алдах болно.
- Нийгмийн сүлжээн дэх холбоосууд.
Хэрэв та нийгмийн сүлжээн дэх зочдод идэвхтэй харилцаж байвал доорх бүлэг болон хуудсуудынхаа холбоосыг байрлуулна уу. Нийгмийн сүлжээ нь үйлчлүүлэгчидтэй харилцах, тэдний үнэнч байдлыг нэмэгдүүлэх чухал хэрэгсэл юм.
Навигацийн блокийн бага зэрэг хуучирсан хувилбар нь шаардлагатай хуудсыг хурдан олох боломжийг олгодог.
- Хөгжүүлэгчийн холбоос
Хөлийн хэсэг ямар үүрэг гүйцэтгэдэг вэ?
Үзэсгэлэнтэй хөл - өөрөөр хэлбэл, нөөцийн хөл - зүгээр л сайжирдаггүй Гадаад төрхсайт, гэхдээ бас хэрэглэгчийн туршлагад хэрэгтэй.
Бид вэбсайтдаа функциональ footer хийх үндсэн зөвлөмжийг өгөх болно.
Анхаарал хандуулах:
- Шатлалын ач холбогдол. Мэдээллийг бөөндөж болохгүй. Хэрэглэгч үүнийг хялбархан ойлгох чадвартай байх ёстой.
- Жагсаалтыг арилгах. Жагсаалтын гарчигт текстээс илүү зай гаргах.
- Элементүүдийн хоорондох хил хязгаар байгаа эсэх.
- Фонтын нэгдмэл байдал. Хамтдаа сайн зохицсон загварын хэв маягийг ашигла.
- Багана болгон хуваах. Энэ нь мэдээллийг бүтэцтэй болгодог.
- Хөлийн хэсэг болон сайтын сүүлчийн блок хооронд догол байгаа эсэх.
- Порталын бүх хуудсан дээрх хөл хэсгийн нэгдмэл байдал.
- Хөлийн хэсэг болон бүх сайтын хэв маягийн нэгдмэл байдал.
- Энгийн байдал. Хэрэглэгчийн оронд өөрийгөө тавь. Тэр сонирхож буй мэдээллээ хялбархан олох чадвартай байх ёстой.
- Хөлийн үндсэн хэсэгт хэт их мэдээлэл байгаа бол дэд хөлийг ашиглана уу.
Хөлийн хэсэг бүр нь сайтын үндсэн агуулгаас тодорхой тусгаарлагдсан байх ёстой. Ихэвчлэн хөл нь вэб нөөцийн агуулгын хэсэг болох өөр өнгөөр чимэглэгддэг. Хөлийн хэсгийн өнгө нь сайтын дэвсгэрээс бага зэрэг ялгаатай байж болно; ихэвчлэн хөл нь бараан өнгөтэй байдаг.
Хөлийн хэсгийг ер бусын байдлаар хий. Жишээлбэл, хонгилын загварт атираат илгэн цаас байж болно. Хэрэв дээд тал нь арал, долгион агуулсан бол ёроолыг далайн ёроол хэлбэрээр хийж болох бөгөөд нээлттэй эрдэнэсийн авдар нь сонирхолтой элемент байх болно. Уран бүтээлчийн вэбсайт дээр хөлийн гол элемент нь бийр, палитр, хөгжимчний вэбсайт дээр хар хөл болж хувирдаг хар төгөлдөр хуур байж болно. Сайтын ёроолыг мөн тод сонгодог хэв маягаар боловсруулж болно.
Сонирхолтой хөл нь хэрэглэгчийн анхаарлыг татах боломжтой.
Энэ бол ямар нэгэн хар дарсан зүүд юм! Яагаад танай сайтын хөл хэсэг дахин гарч ирээд дизайныг өөрчилсөн бэ? Хуудасны доод хэсэгт хөлийг ямар нэг зүйлээр зөв дарах боломжгүй гэж үү? Агуулга эсвэл тоосго наад зах нь! Тоосго нь дэлгэцэнд багтахгүй байна уу?
Би ойлгож байна, тэгээд та манай нийтлэлийг эцэс хүртэл унших хүртлээ суугаад юу ч хийхгүй байх хэрэгтэй.
Вэбсайтынхаа хөлийг зөв хийх
Хуудасны доод хэсэг зүгээр л дээд талд хөвөх үед олон вэбсайт эзэмшигчид ийм асуудал тулгардаг. Тэгээд юу хийх нь тодорхойгүй байна. Ихэнхдээ вэбсайтын дизайныг хийдэг хурдан засах, ганцаараа ( "галзуу гар" гэж дугуйлаарай) эсвэл шинэхэн вэбмастерууд.
Үүний зэрэгцээ сайтын амьдралын эхний үе шатанд ямар ч аймшигтай зүйл тохиолддоггүй. Агуулга нь подвалд "түүний жин" тавьж, дээшлэхээс сэргийлж, энэ хий хоосон зүйл үргэлжилнэ. Гэхдээ энэ нь хуудсан дээр бага хэмжээний материалыг байрлуулах нь зүйтэй бөгөөд саяхан "тайван" хөл хэсэг нь тэр дороо дээш гарч, сайтын дизайныг бүхэлд нь зохисгүй дүр төрхтэй болгож байна.
Загварын загварын энэхүү "гажиг" -ыг арилгахын тулд вэбмастерын үйлчилгээнд мөнгө үрэх шаардлагагүй. Ихэнх тохиолдолд сайтын хөлийг өөрөө байрлуулж болно. Бүгдийг нь авч үзье боломжит сонголтуудЭнэ асуудлыг шийдэхийн тулд:
Эхний арга
Хуудасны доод хэсгийг "холбох" эхний арга нь CSS дээр суурилдаг. Эхлээд жишээ кодыг өгөөд дараа нь түүний хэрэгжилтийг нарийвчлан авч үзье.
html ( өндөр: 100%; ) толгой, nav, хэсэг, нийтлэл, хажуу тал, хөл (дэлгэц: блок; ) их бие ( өндөр: 100%; ) #wrapper ( өргөн: 1000px; зах: 0 авто; мин-өндөр: 100 %; өндөр: auto !important; өндөр: 100%; ) #footer (өргөн: 1000px; захын зай: -100px авто 0; өндөр: 100px; байрлал: харьцангуй; дэвсгэр өнгө: rgb(51,51,204); )
Хуудасны доод хэсэгт хөлийн шошгыг хавсаргахын тулд
html (өндөр: 100%; ) их бие (өндөр: 100%; )
Мөн бид савны давхаргын хамгийн бага өндрийг 100% гэж тохируулсан. Хэрэв агуулгын өргөн нь савны өндрөөс их байвал өмчийг auto гэж тохируулна уу. Үүний ачаар боодол нь хуудсан дээр байрлуулсан агуулгын өргөнийг автоматаар тохируулах болно.
#боодол ( мин-өндөр: 100%; өндөр: автомат ! чухал; өндөр: 100%; )
"Өндөр: 100%" кодын мөр нь min-height шинж чанарыг хүлээн зөвшөөрдөггүй IE-ийн хуучин хувилбаруудад зориулагдсан.
Хуудасны дизайн дахь хөлийн зайг тусгаарлахын тулд бид шошгонд догол мөр тавьсан
#контент ( дүүргэх: 100px; )
Энэ үе шатанд бид бүрэн дэлгэцийн өргөнтэй, нэмэлт 100 пикселтэй вэб хуудастай бөгөөд түүний байрлалыг харьцангуй (байрлал: харьцангуй) гэж тохируулсан үед хөл хэсгийн сөрөг захын утгаараа (маржин: -100px) "саармагжуулсан" байна. ). Тиймээс, сөрөг дүүргэгчийн утгыг ашигласнаар бид хөлийг өндрийг 100% болгосон савны хэсэгт "татах" болно.
IN энэ жишээндвэб баримт бичгийн тэмдэглэгээг харьцангуй шинэ ашиглан тодорхойлсон HTML шошго 5 буруугаар тайлбарлаж болно хуучирсан хувилбаруудхөтчүүд. Үүнээс болж хуудасны дизайныг бүхэлд нь зөв харуулахгүй байж магадгүй юм. Үүнээс зайлсхийхийн тулд та гипертекст хэлний 5-р хувилбарын арсеналаас шинэ шошгуудыг ердийн зүйлээр солих хэрэгтэй.
Сайжруулсан хувилбар
Хуудасны доод хэсэгт байрлах хөлийг хэрхэн "хөгшрөхгүй" болгох талаар дээр дурдсан арга нь хүн бүрт тохиромжгүй байдаг. Хэрэв та ирээдүйд попап цонх ашиглан сайтынхаа дизайныг өөрчлөх, сайжруулах гэж байгаа бол өмнөх хэрэгжүүлэлтийг ашиглахаа больсон нь дээр.
Ихэнхдээ попап цонхыг хэрэгжүүлэхэд ашигладаг CSS өмч z индекс. Үүний утгуудыг ашиглан та давхаргууд бие биенийхээ дээр овоолсон дарааллыг зааж өгнө.
Элементийн z-индексийн утга өндөр байх тусам энэ нь нийт "давхарга" стект өндөр гарч ирнэ.
Гэхдээ бид өмнөх жишээн дэх хөл хэсэгт сөрөг дүүргэх утгыг ашигласан тул попап цонхны доод хэсэг нь дээд хөлийн хэсэгтэй давхцах болно. Хэдийгээр энэ нь илүү өндөр z-индекстэй байх болно. Учир нь гарч ирэх цонхны эх (боодол) нь энэ өмчийн хувьд бага утгатай хэвээр байна.
Энд илүү дэвшилтэт сонголт байна:
CSS - жишээ код:
html, бие (өндөр: 100%; ) .толгой (өндөр: 120px; дэвсгэр өнгө: rgb(0,255,102); ) .main (min-өндөр:100%; байрлал: харьцангуй; дэвсгэр өнгө: rgb(100,255,255); ) .footer (өндөр: 150px; байрлал: үнэмлэхүй; зүүн: 0; доод: 0; өргөн: 100%; дэвсгэр өнгө: rgb(0,0,153); )
Кодоос харахад бид хөлийг үндсэн элементийн нэг хэсэг болгон байрлуулсан. Бид савыг харьцангуй байрлалд, хөл хэсгийг үнэмлэхүй байрлалд тохируулна. Бид хонгилыг савны хамгийн доод хэсэгт байрлуулж, зүүн ба дээд талд нь 0-ийн байрлалыг тогтоов.
Тогтмол бус өндөртэй подвалд зориулсан сонголт
Өмнөх хэрэгжүүлэлтүүд нь хөл хэсэг нь үргэлж хуудасны доод талд байх болно. Гэхдээ зөвхөн хөл нь тогтмол өргөнтэй бол. Гэхдээ үүнд нийтэлсэн агуулгын хэмжээг урьдчилан таамаглах боломжгүй бол яах вэ?
Энэ нь суурин бус хонгилын хувьд илүү дэвшилтэт сонголтыг шаарддаг. Энэ нь дэлгэцийн шинж чанарын хувьд хөлийг хүснэгт-мөр болгон тохируулдаг. Энэ нь хүснэгтийн мөр хэлбэрээр харагдах болно.
Хэрэв гутал нь аливаа хувцасны эцсийн бүрэлдэхүүн хэсэг бол цахим худалдааны сайтын хөл нь түүний борлуулалтын дизайны эцсийн элемент юм. Доод талын элемент болох хөл хэсэгт анхаарлаа төвлөрүүлснээр орчин үеийн вэбсайтууд өөрсдийн зан чанарыг бүх талаар харуулахад бэлэн байна. Өрсөлдөөнт цахим худалдааны орчинд анхны санаа, бүтээлч байдал, дизайны чиг хандлага хангалттай байдаг. Цахим худалдааны сайтын хөлийг төрөлжүүлэхээс өмнө чухал зүйлийг анхаарч үзэх нь зүйтэй. Юуны өмнө юуг байрлуулах вэ, үүнийг хийх хамгийн сайн арга юу вэ? Бидний урам зориг өгөх хөлийн загваруудын цуглуулгад зарим сонирхолтой сонголтууд бий.
Мөн уншина уу: 2019 оны цахим худалдааны маркетингийн 13 чиг хандлага
Chartbeat-ийн сонирхолтой статистик. 25 сая хэрэглэгчийн зан төлөвийг судалж үзэхэд тэд хуудсуудыг хэр гүнзгий хянадаг болохыг харуулсан. Хэрэглэгчийн анхаарлыг нугалах шугамын доорх зайд татдаг нь харагдаж байна. Илүү хэрэгцээтэй мэдээллийг хүлээн авснаар зочдод хуудасны дээд хэсгээс 1200px зайд (хөтөч дээр дунджаар 700px босоо дэлгэцтэй) эсвэл хоёр дахь дэлгэцийн ард хамгийн удаан саатдаг.
Харах хугацаа (сек.) / Хуудасны дээд хэсгээс авах зай (пиксел)
Эхний болон хоёрдахь дэлгэцийг үзэх хугацаанд маш их зай байна. TOP нь 4 секунд бөгөөд дээд тал нь 1200 пикселийн үргэлжлэх хугацаа нь дээд талдаа (16 секунд) хүрч, цааш гүйлгэх тусам аажмаар буурдаг.
Зочдын эзлэх хувь (%) / Хуудасны дээд хэсгээс авах зай (пиксел)
Зочдын нэлээд хэсэг нь (25% -иас дээш) контент ачаалагдахыг хүлээдэггүй бөгөөд хуудсыг гүйлгэж эхэлдэг. Энэ нь зөвхөн 75% нь хамгийн түрүүнд хамгийн дээд хэсгийг харна гэсэн үг юм. Хуудасны хамгийн их үзсэн хэсэг нь 550px (нугалах шугамаас дээш) юм.
Энэхүү судалгаа нь хэрэглэгчид хуудасны доод хэсэгт гүйлгэж, бүх агуулгыг үздэггүй гэсэн домгийг үгүйсгэж байна. Хөл хэсэг нь орчин үеийн цахим худалдааны сайтад чухал ач холбогдолтой бөгөөд бүр өөрийн гэсэн давуу талтай.
"Подвал" (хөл хэсэг) -ийг хэрхэн зохион бүтээх талаархи санаанууд, борлуулалтын дизайны жишээ
Эдгээр 10 зөвлөмж нь вэб дизайн дахь найруулгын дүрмийн дагуу вэб хуудасны доод хэсгийг хэрхэн сайхан зохион бүтээх, тэргүүлэх зорилтуудыг шийдвэрлэх талаар танд хэлэх болно. Ашиглах чадварыг сайжруулах хамгийн тохиромжтой тактикийг хэрэглээрэй, UX ( Хэрэглэгчийн туршлага) тэр ч байтугай борлуулалтыг нэмэгдүүлнэ.
1. Шаардлагатай мэдээлэл
Уламжлал ёсоор, шаардлагатай зохион байгуулалт, хууль эрх зүйн асуудлуудыг сайтын доод хэсэгт тусгасан болно. Мэдэгдэл нь бага тод текстээр хийгдсэн бөгөөд энэ нь хуудасны бусад хэсгүүдийг илүү утга учиртай элементүүдээр чөлөөлдөг. Энд авч үзэх ёстой жишээ жагсаалт байна:
- Зохиогчийн эрхийн мэдэгдэл
- Хууль эрх зүйн татгалзал
- Тооцооны мэдээлэл
- Күүки мэдэгдэл
Бүтээгдэхүүн борлуулж буй вэбсайт нь хууль ёсны шаардлагыг хангасан байх ёстой бөгөөд журам, буцаах хугацааны талаархи мэдээллийг агуулсан байх ёстой. Түүний доод хэсэгт байрлах байршил нь борлуулалтын эх сурвалж болон зочдод тохиромжтой.
Хөлийн жишээ: Ив Рошер
Yves Rocher брэндийн онлайн дэлгүүр: ээлжлэн давхаргын тааламжтай дизайн бүхий бүтэн дэлгэцийн хөл хэсэг. Компанийн тухай, борлуулалтын вэбсайтын дэд бүтцийн талаар - захиалга хянахаас эхлээд хувийн мэдээллийн бодлого хүртэл мэдээлэл өгдөг. Мөн бүтээгдэхүүнийг ашиглах зөвлөмж, урамшуулал, урамшуулал байдаг
Жишээ хөл хэсэг: Lumity
Хоол тэжээлийн нэмэгдэл борлуулагчид хууль эрх зүйн өндөр шаардлага тавьдаг. хариуцлага. Тэдний борлуулалтын вэбсайт дээр хэлэх ёстой / хэлэх ёсгүй зүйл цөөнгүй байдаг. Хууль эрх зүйн мэдээллийн холбоосыг илүү сайн харагдуулах үүднээс тодоор тодруулсан болно.
Үзэсгэлэнт дэвсгэр зураг бүхий хөл нь сайтын ерөнхий загварт маш органик нийцдэг. Тодорхой хил хязгаар байхгүй, харин агуулга нь өөрөө тусгаарлах үүрэг гүйцэтгэдэг
Жишээ хөл: Saddleback Leather Co
Үзэсгэлэнт чимэг толгой болон хөлийн загвар бүхий борлуулалтын вэбсайт. Материал, өнгөлгөөний согогийн эсрэг 100 жилийн баталгаа. Буцах нөхцөлийг дагалддаг сонирхолтой түүхүүд... шаардлагатай цахим худалдааны мэдээллээр бүх зүйл тийм ч гунигтай байдаггүй
2. Сөрөг зай – харааны хангалттай зай
Хөлийн холбоосын тоог хязгаарлахдаа сөрөг зайг бүү алдаарай - энэ нь харааны ойлголтод гайхалтай нөлөө үзүүлж, унших чадварыг сайжруулна. Ерөнхий дүрэм: Харааны шатлалыг хадгалснаар төв элементүүд илүү хурдан анзаарагддаг (өөрийн давуу тал болгон ашиглаж болно!).
Хөлийн жишээ: QUAY AUSTRALIA
Минималист хэв маяг, тогтмол унждаг цэсээр онлайн дэлгүүр нь өргөн хөлтэй байх боломжтой
Хөлийн жишээ: Case
ТУХАЙ их хэмжээгээрбичил сөрөг орон зай (хооронд жижиг элементүүд) бид үүнийг хэлж чадна: шаардлагатай бүх мэдээлэл байгаа бол энэ нь ойлгомжтой бөгөөд хурдан ойлгогддог - бүх зүйл сайхан байна
Жишээ хөл хэсэг: Stumptown Coffee Roasters
Кофены талбайн өргөн хөл нь маш их макро сөрөг зайтай (хэсэг/хэсгүүдийн хооронд агаар) цэвэрхэн дизайныг маш сайн гүйцэтгэнэ.
3. Үйл ажиллагааны эцсийн дуудлага
Мөн уншина уу: Зорилтот үйлдлийн товчлууруудыг зохион бүтээх 30 гаруй жишээ, санаанууд
Хөл хэсгийн загварлаг дизайн нь нөөцийн талаар маш их ярьдаг. Анхаарах нь чухал: худалдан авагч энд хуудасны бусад хэсгүүдээс арай удаан саатдаг. Дахиад нэг эцсийн дуудлагын тохиромжтой боломж. Ихэнхдээ энэ нь захиалга/мэдээний товхимол боловч та CTA дуудлагыг дансны бүртгэлд холбож болно.
Хөлийн жишээ: Greetabl
Greetabl хуудасныхаа доод хэсэгт бүртгүүлэх дуудлагыг багтаасан даруухан загвартай. Хамгийн бага элементээр дуудлага нь мэдэгдэхүйц болж, оюу дэвсгэртэй зохицон сайтын чимэглэл болж хувирдаг.
Хөлийн жишээ: Ecwid
Хуудасны доод хэсэгт үйл ажиллагаа явуулах уриалга бүхий сайхан дизайн. Борлуулалтын вэбсайт бүтээгчийн бүтэц нь бүх нийтийнх юм. Энэ нь сая хэрэглэгчдэдээ зориулж 35 хэл рүү орчуулагдсан.
4. Хөвөгч тэрэг – борлуулалтын боломжуудыг нэмэгдүүлэх
Сайтын доороос сагсанд хандах нь сайтын ашиглалт, борлуулалтын чанарыг сайжруулах гайхалтай арга юм.
Хөлийн жишээ: Lemonadela
Нийтийн хоолны компанийн борлуулалтын вэбсайт нь харахад таатай бөгөөд худалдан авагчдад тохиромжтой
5. Footer навигаци
Сайтын доод хэсэгт компаний тухай, үйлчилгээний нөхцөл, нууцлалын бодлогын талаар байнга хардаггүй мэдээлэлд тохиромжтой. Энэ тохиолдолд хөлийн функц нь хүн бүрийг аврах явдал юм. Цахим худалдааны орчинд төөрөлдсөн мэт хэн нэгэн дэд бүтцийг сонирхож эхэлдэг электрон дэлгүүр, зөнгөөрөө цааш гүйлгэж...
Сөрөг зай нь агуулгыг уншихад зайлшгүй шаардлагатай. Ерөнхийдөө "хөл хэсэг" нь цэс эсвэл сайтын газрын зургаас ялгаатай нь навигацийн зориулалттай биш юм. Зөвхөн ховор тохиолдолд цахим худалдааны сайтууд тус тусдаа бүтээгдэхүүний ангиллыг хөл хэсэгт байрлуулдаг (
Бүгд wordpress загваруудЭнэ нь блогын нэг буюу өөр хэсгийг боловсруулах, харуулах үүрэгтэй хэд хэдэн файлуудаас бүрддэг - толгой хэсэг, үндсэн агуулга, хажуугийн хэсэг, доод хэсэг. Өнөөдөр бид сүүлчийнх нь талаар ярих болно. Footer (сайтын хөл) нь бүх агуулга бүхий түүний доод хэсэг юм. Ихэнхдээ вэбмастер үүнийг үүсгэсэн огноо, зохиогчийн эрхийн хамгаалалт, гарчиг гэх мэт мэдээллийг өгөхөд ашигладаг. Гэхдээ бүхэлдээ биш WordPress загваруудҮүнийг хэрэгжүүлэхэд хялбар, заримд нь хөл хэсэгт мэдээлэл оруулах энгийн сонголт байдаггүй.
Сайтын хөл хэсэгт юу байрлуулах вэ?
Нэгдүгээрт, зан үйлийн хүчин зүйлсийг сайжруулахын тулд ямар төрлийн сайт, подвалд юу байрлуулж болохыг шийдье.
Холбогдох мэдээлэлВэб дэлгүүрүүдэд хамгийн тохиромжтой. Зоорийн давхарт аялалын картын хаяг, утасны дугаар, дэлгүүр, байгууллагын шуудангийн хаяг зэргийг байрлуулснаар захиалга, худалдан авалт илүү хурдан хийгддэг.
Навигацэсвэл навигацийн блокийг давтах нь ямар ч төрлийн сайтад тохиромжтой. Энэ нь урт хуудасны хувьд маш чухал юм. Энэ тохиолдолд хэрэглэгч хүссэн хэсэг рүүгээ буцаж очих шаардлагагүй болно. Гэхдээ хэрэв та хөл хэсэгт навигацийн блок байрлуулахыг хүсэхгүй байгаа бол дээш сумыг ашиглан дээд хэсэгт хурдан буцаж болно.
Нийгмийн хавчуурга,Хэрэв таны сайтын агуулга нь олон нийтийн хэлэлцүүлгийг хамарсан эсвэл тухайн сэдвийг хөгжүүлэхтэй холбоотой үйл явдлын тоймыг нийтэлсэн бол хөл хэсэгт та холбоосыг байрлуулж болно. олон нийтийн сүлжээТа нөөцийг сурталчлах. Тагийн үүл, түүнчлэн навигацийн нэмэлт блок нь бүх төрлийн сайтад тохиромжтой. Хөл хэсэгт 3D шошготой үүл байрлуулах нь хэрэглэгчдэд тохиромжтой төдийгүй дизайны үүднээс үзэсгэлэнтэй байх болно.
Ийм хөлийн хэсэг нь ойлгомжгүй байдлаас болж үзэсгэлэнтэй, мэдээлэл сайтай биш бол хөлийн холбоос дээр дарах магадлал тэгтэй ойролцоо байгааг тэмдэглэх нь зүйтэй.
Сайхан зохион бүтээсэн вэбсайтын хөлийн жишээ
Үзэсгэлэнтэй, мэдээлэл сайтай хөлийг бий болгохын тулд бид вэб дизайны студиудын хамгийн алдартай бүтээлүүдийг та бүхэнд хүргэж байна.
1. Францын KDIGIT вэб студийн дизайны шийдэл:
2. SNOWDEN industries вэб дизайны студийн хөлийн дизайн:
3. Шведийн Uforia CMS компанийн доод хэсэгт зориулсан дизайны шийдэл:
4. Tapbots-ийн гоёмсог хөлийн загвар:
5. Вэб дизайны студийн хөл хэсэг Бэлэн загварууд:
6. Механик хөлийн загвар:
7. Үзэсгэлэнт хөлийн загвар:
Таныг аль хэдийн ойлгосон байх гэж найдаж байгаа тул эдгээр бүх хөлийг үзэсгэлэнтэй дэвсгэр зураг, тэдгээрийн дээр байрлуулсан мэдээллийн блокууд дээр үндэслэн хэрэгжүүлдэг. Хэрэв бүтээлтэй бол Арын зураг Photoshop гэх мэт янз бүрийн зураг засварлагчид байдаг тул та мэдээллийг блок болгон хурдан бөгөөд хялбар байрлуулах боломжтой.
Хөл хэсэгт мэдээллийн блок нэмж байна
Хамгийн энгийн аргаардоод хэсэгт мэдээллийн блок нэмэх нь WordPress админ самбарт хөл хэсэг виджетийн блок нэмэх болно. Ийм виджетийн блок үүсгэхийн тулд та админ цэс->редакторыг нээж, баруун талд байгаа баганаас functions.php файлыг сонгох хэрэгтэй бөгөөд үүнд бид код нэмнэ:
хэрэв (функц_байдаг("регистр_хадам")) register_sidebar(массив("нэр" => "Footer Sidebar", "fore_widget" => "", "after_widget" => "", "the_title" => "
хэрэв (функц_байгаа ("хажуугийн_бүртгэл" ) ) бүртгэлийн_хажуугийн мөр(массив( "name" => "Footer Sidebar", "fore_widget" => "", "after_widget" => "", "нэрийн_өмнө" => " "
,
"
,
)
)
;
"гарчигны дараа" => " |
Энэ нь админ самбарт виджетийн шинэ блок бүртгүүлэх код бөгөөд 'нэр' нь виджетийн нэр, 'before_widget' нь виджетийн өмнө харагдах HTML код, 'after_widget' нь виджетийн дараа гарч ирэх HTML код юм. виджет, түүнчлэн өмнөх болон дараа нь код гарчиг. Энэ нь ихэвчлэн functions.php файлын эхэнд нэмэгддэг.
functions.php-ийн агуулгыг хадгалаад "Виджет" хэсэгт очно уу. Хэрэв бүх зүйл алдаагүй хийгдсэн бол та тэндээс шинэ блок олох болно.
Тиймээс, бид админ цэсэнд шинэ виджетийн блокийн дэлгэцийг хийсэн тул одоо энэ блокийн виджетүүдийг сайт дээр харуулах хэрэгтэй. Үүнийг хийхийн тулд админ цэс -> засварлагчийг нээж, баруун талд байгаа footer.php файлыг сонго. Дашрамд хэлэхэд ийм виджетийн блокуудыг зөвхөн хөл хэсэгт төдийгүй сайтын аль ч хэсэгт харуулах боломжтой.
footer.php файлд дараах кодыг нэмнэ үү.