След странното объркване в последното видео за това кой хедър всъщност правехме, този път наистина ще внедрим персонализирания хедър за страницата Сделки! Това е направено от Мег Хънт.
Подобно на всички заглавки, прекарахме известно време в разглеждане на оригиналните файлове и да разберем как ще седи най-добре на страницата. Опитваме няколко опции, но в крайна сметка решаваме, че го поставяме в ограничена кутия, най-добре (за разлика от нещо като заглавката на Demos, където заглавката се стопява в граница около съдържанието.
При експортирането му играем с много от различните графични формати. Интересното е, че този специфичен стил е приблизително равен както по качество, така и по размер на файла между PNG и JPG.webp. Извеждаме го с ширина 2000px, което трябва да изглежда добре на всеки екран. Също така уцелихме около 150 000, което е голямо, но за герой като този е добра цел.
Започваме да получаваме шаблона за сделки в ред, включително да разглеждаме как сделките са отделните персонализирани полета, които са рандомизирани преди да бъдат изведени. Ще отделим повече време за това маркиране и всичко това по-късно, но тъй като сме в този шаблон, подготвяйки нещата за заглавката, може и да го почистим.
Разглеждаме няколко различни възможности за поставяне на персонализирана заглавна графика на страницата. Фоновото изображение е най-смислено, тъй като използваме семантично
за замяна на заглавие и изображение. Използваме background-size, проверяваме cover, но това може да доведе до прекъсвания. Проверяваме съдържанието, но това позволява място отвън. 100%прави номера, но ще трябва да направим поле за стил на пропорции, за да работи добре. Това е лесно обаче, просто правим височината 0 и използваме процентно подплата отгоре, за да работи това (подплатена кутия).
Това е седмият заглавие по поръчка, който сме направили и всеки един от тях е направен по различен начин. Уеб дизайн, а? Какво пътуване.