Как оформить шапку для сайта

Оглавление:

Web Design: 7 простых советов по созданию шапки продающего сайта

Приветствую, уважаемые читатели.

Разработка любого продающего сайта и не только продающего, начинается с проектирования шапки. Очень часто у дизайнеров возникает вопрос – с чего начать рисовать шапку сайта, как сделать ее эффективной и привлекательной.

Сегодня мы рассмотрим 7 простых и проверенных на практике правил, которые позволяют создать хорошую, «цепляющую» шапку для лендинга или продающего сайта на примере.

Пример шапки:

В шапке слева должен находиться логотип компании или бренда. Казалось бы, ни чего сложного в этом правиле нет, но на практике дизайнеры часто начинают фантазировать и размещают логотип в том месте, где пользователь его может не заметить.

Логотип в шапке – это важнейший элемент брендирования, который пользователь должен заметить в первую очередь. Взгляд пользователя, попавшего на новый, не знакомый сайт начинает свое путешествие по сайту именно с левого верхнего угла. И если он там не обнаружит логотипа, автоматически страничка будет восприниматься у пользователя нестандартной и хитрой, пользователь начнет напрягать свое внимание и мозг. А этого нужно по максимуму избегать, так как вероятность того, что посетитель уйдет с такого сайта, ничего не купив на долю процентов увеличивается.

Раньше дизайнеры могли экспериментировать, размещали логотип даже справа. Но время идет и практика показала, что размещение логотипа в шапке сайта именно слева сверху является наиболее правильным решением.

2. Контактный телефон.

Традиции в веб-дизайне, как и в любой другой области, складываются годами и имеют под собой весьма объективные основания. Расположение основного контактного телефона также вытекает из сложившихся традиций. Находится телефон справа сверху.

Если пользователь немедленно хочет приобрести товар или заказать услугу, то он непременно позвонит. И поиск телефона не должен занимать много времени и усилий у покупателя. Расположение телефона справа сверху – лучшее решение при создании шапки. Кроме того, под телефоном или над ним, обязательно нужно разместить ссылку заказа обратного звонка.

Смысл обратного звонка в том, чтобы помочь потенциальному покупателю принять решение, внушить доверие и дело тут даже не в сэкономленных на звонке деньгах. Человек, который заказывает обратный звонок – проверяет, как работает компания, как оперативно сотрудники отвечают, как общаются. Это очень важный момент.

3. Навигационное меню.

Меню с основной навигацией по сайту обязательно должно присутствовать в шапке. В принципе, нет разницы, размещено это меню сверху в шапке или снизу. Самое главное, чтобы оно присутствовало в шапке и не было вертикальным.

Вертикальное меню более подходит для каталогов, интернет-магазинов и прочих подобных сайтов, где демонстрируются категории товаров. Но в шапке оно должно быть горизонтальным.

4. Точный и лаконичный заголовок.

Под верхней лентой шапки идет описание основных преимуществ и начинается это описание с простого, понятного и лаконичного заголовка. Не стоит делать заголовок слишком длинным, поставьте себя на место пользователя, что он хотел бы увидеть, что хотел бы получить?

Такие несложные размышления позволят вам придумать красивый и понятный заголовок.

5. Тематическая иллюстрация.

Вы наверняка заметили в шапке из примера – большую тематическую картинку. Такая картинка может идти фоном, как в примере, либо просто располагаться рядом с текстом в шапке. Кроме того, такую картинку можно заменить или дополнить каким-либо тематическим видеоматериалом.

Как показывает практика – размещение шапки или видео в фоне шапки заметно увеличивает конверсию, создает у посетителя нужную картинку товара и вызывает желание приобрести предлагаемый товар, либо воспользоваться услугами.

Изображение в шапке должно отображать деятельность компании прямо, а не косвенно. Например, было бы неплохо у обучающей организации разместить картинку не каких-либо персонажей или иллюстраций, косвенно относящихся к деятельности компании, а запечатлеть на фото сам процесс оказания услуги.

В примере с обучающей компанией – это непосредственно класс с учениками за партами. Если это доставка пиццы – должна быть картинка курьера с красивой и вкусной пиццей. Ну, вы поняли. Человек должен видеть товар или процесс лицом. И он должен захотеть это.

6. «Текст доверия».

В шапке обязательно должен быть так называемый «текст доверия». В данном коротком изложении нужно отобразить то, что заставит пользователя захотеть предмет продажи еще больше. Прежде, чем писать в этот блок, лучше поставить себя на место нуждающегося пользователя, понять, что он хочет.

Если вы научитесь правильно угадывать желания пользователей – вы будете успешным веб-дизайнером. Вместо текста, также, можно написать список преимуществ компании по порядку – от самого важного и цепляющего.

7. Простая форма обратной связи.

Очень часто пользователь на подсознательном уровне после просмотра первого экрана сайта или его шапки уже принимает решение о покупке, а страничку листает ниже просто так. По инерции. Важно в шапке разместить простую форму заказа. В данной форме должно быть 2-3 поля.

Вообще, уже давно не секрет для профессионалов веб-дизайна, что сложные формы – не заполняет никто. А если и заполняет, то только в том случае, если это действие имеет жизненную необходимость. Например, регистрация финансовых аккаунтов. Но в продающий сайтах ни в коем случае нельзя размещать большие формы, такие, как эта:

Максимум 3 поля – Имя, телефон и E-mail. Или еще какое-нибудь, которое требует специфика компании, для которой разрабатывается дизайн.

Хотелось бы обратить ваше внимание на то, что приведенные выше элементы в шапке, кроме логотипа и формы обратной связи, если она есть, могут располагаться в любом порядке, но наличие их – жизненно необходимо для хорошего продающего сайта. Зачем экспериментировать, если многочисленные исследования продаж и поведения пользователей привели именно к такому набору элементов и их ориентировочному расположению.

Несколько хороших шапок напоследок:

Шапка сайта «Русское Поместье»

Шапка сайта логистической компании

Шапка сайта компании «Такси Хорошее»

Шапка сайта компании «REKLAMARKET»

Шапка сайта компании «ВОЛНАКОЛОР»

Шапка сайта компании «Спело Зрело»

Премиум уроки от WebDesign Master:

Создание современного интернет-магазина от А до Я

Создание контентного сайта на Jekyll от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Шапка страницы

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента .

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.

  • Использовать формат PNG-24 при сохранении прозрачности.
  • Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
  • Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

    Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

    На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:

    Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

    Окончательный код для шапки приведён в примере 6.14.

    Правила оформления шапки интернет-магазина

    Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

    Шапка — не справочник

    Самая общая рекомендация звучит следующим образом: не нужно пытаться запихнуть в шапку абсолютно всё — логотип, описание, адрес, время работы, телефоны всех отделений компании, заказ звонка, кнопку призыва, e-mail, свежую акцию, навигационное меню, вход в личный кабинет и корзину.

    Обязательно продумайте, какая информация важна для ваших покупателей, а какая нет. И в соответствии с этим расставляйте акценты. Не гнушайтесь зайти на сайты хороших магазинов (не только конкурентов) и посмотреть как сделано у них.

    Свободу важным элементам

    Рассмотрим важность каждого элемента шапки с точки зрения классического розничного интернет-магазина:

    Логотип. Необходим как основа стиля сайта и для узнавания магазина. Размещается слева, служит ссылкой на главную страницу (правило хорошего тона: на самой главной лого — не ссылка). Логотип важен, но не придавайте ему слишком большого значения и не делайте его огромным: будет съедаться полезное место на первом экране. 40-60 пикселей по высоте вполне достаточно для логотипа.

    Все пользователи попадают на сайт с определенными ожиданиями. Они могут быть сформированы текстом ссылки, описанием в блоке объявлений контекстной рекламы, сниппете органического поиска или чем-то еще. Если сайт не принадлежит крупному, широко известному бренду, то лого не стоит делать слишком контрастным и большим. Как правило пользователи приходят на ресурс не по брендовым запросам, и хотят решить свою задачу. Им гораздо важнее убедиться в том, что они попали “туда куда надо”, чем рассматривать красивое лого.

    Оптимально, если в течение трёх секунд посетитель понимает куда он попал и что продается на сайте. Если же на решение этой задачи у него уйдет больше времени, то появится вероятность, что он просто закроет страницу и уйдет на сайт более понятного конкурента.

    Описание. Размещается рядом с логотипом. Необходимо посетителям для быстрого понимания деятельности компании. В некоторых случаях вместо описания можно вставить короткое УТП (то есть не “что мы делаем”, а “что вы получите”). Однако для УТП обычно предусматривается более заметное место.

    Телефоны. Зависит от специфики бизнеса. Если вы получаете много заказов по телефону, его нужно поместить в шапку и выделить. Если заказы в основном идут через корзину, телефон стоит разместить, но более мелким шрифтом. И только, если вы умышленно не хотите получать звонки, уберите его в “Контакты”.

    Если вы работаете с несколькими городами, не стоит размещать все телефоны одновременно. Размещение даже двух телефона, хоть и уместно, но уже не очень хорошо. Если вы работаете по всей России, купите номер 8-800 или много номеров в каждом регионе, а в шапке сделайте выпадающий список “Ваш город:”. Второе решение эффективнее, но дороже.

    Выделение номера зависит от его кода. Если номер городской, выделяйте вторую часть, например 8(495)888-00-00. Если 800, то первую, чтобы подчеркнуть бесплатность, то есть — 8(800)888-00-00. Не забудьте проставить в коде атрибут tel, чтобы пользователи с мобильных могли позвонить вам в один клик. На шапке телефоны традиционно находятся справа, или по центру.

    Время работы. Второстепенная информация, хотя зависит от специфики магазина. Если в шапке осталось много места, напишите: “Время работы такое-то, прием заказов круглосуточно”. В ином случае убирайте в “Контакты”.

    Как поступить с второстепенными ссылками

    Адрес. В большинстве случаев его можно убрать в “Контакты”. Адрес важен в том случае, если магазин работает в пределах определенного региона, например, города или области, а часть заказов клиенты забирают самостоятельно.

    Заказ звонка. Если на сайте установлен отдельный виджет с таким функционалом, из шапки ссылку можно убрать — люди привыкли пользоваться виджетами. Только перед убиранием сделайте А/Б тест, все-таки аудитория каждого магазина уникальна. Традиционным же местом размещения ссылки звонка в шапке считается место над или под номером. Отдельно выделять ссылку не нужно. В мобильной версии набирает популярность значок обратного звонка (см. рис.1).

    Корзина, Сравнение, Войти в кабинет. Уместно разместить в шапке, если она не перегружена другими элементами. Однако более изящное решение — вынести подобные “навигационные” ссылки в дополнительное верхнее меню, над шапкой.

    Кнопка с призывом. Больше актуальна для лендингов и сильно зависит от специфики бизнеса. Актуальна для магазинов со “сложным” товаром, где клиенту может потребоваться полноценная консультация, или если один товар доминирует над всеми остальными. Большинству b2c магазинов она не нужна.

    Если же, вы приняли решение оставить кнопку, то помните правило: на странице должен быть только один ярко выраженный призыв. Кнопка в форме может быть оформлена “незаметно” (например, с рамкой без фона) и вести на “дополнительное действие (например, заказать звонок).

    Посмотрим, что получится, если соблюсти все перечисленные правила:

    Новая шапка: -85px по высоте, появился акцент на акции, дополнительно подтянули основное меню (Каталог, Доставка, Контакты). Потеряли призыв (его заменила акция), адрес и ссылку для заказа звонка. Элементы на шапке стали восприниматься легче, в целом всё стало выглядеть гораздо аккуратнее.

    На первый взгляд, компоновка шапки — не самое сложное дело. Однако столкнувшись с реальной задачей, легко начать мудрить, забывать базовые правила дизайна, а главное: перестать думать об удобстве посетителей.

    Ошибки, которые не стоит повторять

    Пройдемся по элементам, которым точно не место в шапке интернет-магазина, хотя некоторые вебмастеры умудряются их там размещать.

    Акции. Для акции рисуется красивый баннер, а не строчка в шапке. Акция должна цеплять и привлекать внимание, а грустить в тесноте между другими элементами, создавая дополнительный визуальный мусор.

    Агрессивные призывы. Большая яркая кнопка с надписью “Купить” абсолютно неуместна в интернет-магазине. Яркая кнопка должна быть только одна на странице и находится непосредственно рядом с товаром. Добавлять её в шапку — намеренно уводить внимание пользователя в пустоту.

    Словесный мусор и лишние элементы. В общем смысле это любая информация, которая очень интересна всем. По мнению владельца сайта. И сотрудников, которые постеснялись сказать ему, что на самом деле это никому не интересно.

    В эту категорию входят цитаты от великих людей, тяжеловесные слоганы, а также нужные фразы, но сформулированные слишком длинными оборотами (например, “Мы работаем с понедельника по пятницу, с 9:00 до 19:00 без обеда. Выходные — суббота и воскресенье”).

    1. Не концентрируйте на элементах шапки много внимания посетителей.
    2. Располагайте в шапке только необходимые элементы.
    3. Размещайте элементы на привычных пользователям местах.
    4. Не слепляйте разные элементы и группируйте схожие.
    5. Наши рекомендации помогут вам не совершить грубых ошибок, но, конечно, о качестве любого изменения не забывайте спрашивать самых важных людей — ваших клиентов.

      Существенная доля посетителей начинает изучать ваш сайт с главной страницы и шапки сайта. Тут складывается первичное впечатление, которое влияет на последующее желание ознакомиться с предложением. В сегодняшнем выпуске речь пойдет о том, как из шапки сайта сделать информативный элемент, способствующий продажам. Начнем с основных показателей хорошей шапки.

      Необходимый минимум — именно по этому принципу нужно выбирать информацию, которая будет шапке. Все способы связи, действующие акции, 2-3 и больше кнопок, адреса — в общем не делайте из шапки смесь страницы «Контакты», карточки товара и страницы «О нас». Оставьте самое главное — телефон, часы работы, логотип, обратный звонок — как вариант. На этот счет изучите сайты своей и смежных сфер — они всегда тестируют варианты, следят за тенденциями и выбирают лучший.

      Обязательные элементы

      Отказаться и убрать нельзя категорически — он необходим в шапке и служит вашим опознавательным элементом. Лого традиционно в левом верхнем углу, через него можно вернуться на главную страницу с любой другой. На основной странице это, как правило, изображение.

      Не делайте логотип «центровым» элементом главной страницы — вашему клиенту важно решить свою проблему, а не оценить старания дизайнера. Самое важное — это соответствие запросу и ожиданиям; релевантность главной страницы и сайта вообще, если объявление контекстной рекламы ведет сюда.

      С первого взгляда на шапку пользователь должен понимать, куда пришел и что может получить здесь.

      Краткое описание

      Оно всегда расположено рядом с логотипом. Это емкий текст о том, чем именно занимается или почему выгодно сотрудничество с компанией/магазином (уникальное торговое предложение).

      Номер телефона

      Есть три варианта: указать его в шапке крупным шрифтом, более мелким или вообще прописать только на странице «Контакты». Все зависит от того, откуда именно вы получаете максимум заказов. Эти данные у вас должны быть обязательно.

      Не пишите в шапке все имеющиеся номера, особенно, если вы работаете на несколько регионов. В этом случае оправдано будет подключить номер 8-800, единый для всех областей, и обязательно при публикации сделайте акцент шрифтом, что номер бесплатный. По возможности укажите номер текстом, а не в виде изображения, чтобы его можно было скопировать или сразу набрать: +7 (ХХХ) ХХХ-ХХ-ХХ. Не забывайте про мобильных пользователей, которые могут звонить вам прямо из шапки.

      Часы работы

      Укажите время, когда менеджеры обрабатывают заказы и уточните, что оформить можно в любое время, если на это есть место в шапке. В случае, если вы работаете круглосуточно и даже по выходным, подчеркните это.

      Схематично это может выглядеть так:

      Еще один вариант:

      Второстепенная информация

      Он обязателен только в том случае, если вы работаете на один регион или многие клиенты забирают покупки самовывозом. Если такой тенденции нет или вы работаете на несколько регионов, указывайте адреса в разделе «Контакты». Клиент найдет их, если возникнет необходимость.

      Обратный звонок

      Если он работает и посетители пользуются, оставьте кнопку в шапке. Если запрос отсюда — скорее исключение (специфика аудитории), можно смело убирать, и на его месте указать более полезную информацию или функцию. С сайта orel-stavto.ru:

      Корзина, Личный кабинет

      Эти пункты, как правило, размещают над шапкой, поскольку они являются в большей степени навигационными, на уровне с другими пунктами меню, которые как правило находятся выше или ниже шапки.

      Кнопка CTA

      Призыв к действию с кнопкой — это традиционный вариант для лендинга. Для сложных товаров, магазинов большого ассортимента и B2B-компаний она не работает. Если на вашем сайте есть призыв именно в шапке, не делайте ее акцентом всей страницы — оформите ее более сдержано, чтобы кнопка стала, скорее, полезной дополнительной функцией.

      Не для шапки

      Акции и специальные предложения

      Не нужно перегружать шапку этим сообщением — нарисуйте хороший баннер, который будет кликабельным, и разместите в верхней части главной. Пусть он будет завершенным элементом, а не частью хаоса.

      Агрессивный CTA

      В интернет-магазине нет места примитивным призывам и агрессивным цветам. Не рискуйте так, иначе покупатель решит, что вы в отчаянии и не захочет иметь с вами дело. Будьте самодостаточны, дайте клиенту выбор.

      Слоганы, красивые фразы, цитаты и пр.

      Почему-то некоторые владельцы сайтов считают, что цитата в шапке сайта отразит ценности компании и замечательную натуру руководителя. Как бы ни хотелось, лучше отказаться от лишних слов в шапке, да и на сайте вообще.

      Длинные формулировки

      Если информацию можно сообщить справочно, выберите именно такую подачу. Например: «Рабочие дни: пн-сб с 10 до 22. Вскр — выходной». Это понятно и доступно, можно без указания выходных.

      Рекомендации

      • Шапка не должна занимать весь первый экран, даже если это изображение вам очень нравится. Высота, по возможности, до 250 пикселей.
      • Не используйте теги H1-H6 для текста шапки, т. к. это может повлиять на оптимизацию.
      • Если у вас много текстовых материалов и ассортимент свыше 10-ти товаров, в шапке сайта должен присутствовать поиск.
      • Помните, что шапка будет одинаковой на всех страницах сайта. Следите за тем, чтобы она не контрастировала с другими страницами.
      • Пункт меню «Главная» сохраните, т. к. не все кликают по логотипу, чтобы вернуться на главную.

      Примерное расположение элементов шапки может выглядеть так. На первый взгляд, пустовато, но если задаться целью и занять все свободное пространство, ни один элемент не будет работать как нужно.

      Эффективная шапка сайта выглядит достаточно просто, несет только полезную информацию и не содержит лишних элементов. Попробуйте сравнить поведение посетителей с учетом двух разных вариантов шапки, и вы поймете, что лаконичность берет верх над нагромождением информации.

      Как сделать шапку сайта

      В этой статье рассмотрим, как сделать шапку сайта, и расположить на ней заголовок, и описание сайта

      Первым делом для шапки сайта нужна картинка. Её лучше всего сделать в фотошопе.

      А тем, кто не владеет этим редактором, я предлагаю самый простой способ изготовления картинки для шапки сайта, в имеющимся на всех Windows по умолчанию Paint.

      Ширину картинки сделаем 900px, по ширине сайта, высоту — 200px. У Вас конечно могут быть свои размеры, лишь бы ширина картинки совпадала с шириной сайта (оболочка wrapper), высота на Ваше усмотрение.

      Как только картинка будет готова, и размещена в папке images каталога сайта, возьмём каркас сайта, созданный на предыдущей странице, и приступим к установке шапки на сайт.

      В селекторе #header убираем заданную ему высоту, и прописываем ширину и высоту сделанной картинки.

      Затем вставляем саму картинку.

      Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

      Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position

      Теперь дошла очередь до заголовка и описания сайта. Для этого прописываем в теге body блок div с идентификатором id=»header» , и в нём два заголовка h1 и h3 , в которые и вставляем название сайта и его описание

      Посмотрим, что у нас получается.

      Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:

      Для h3 зададим ширину в 200 пикселей, чтоб он не растянулся на всю картинку. Отступами можно манипулировать в зависимости от того, в каком месте шапки будет удобнее разместить текст.

      По моему, очень даже симпатично.

      Обобщим код этой страницы.

      Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок

      (к примеру, адрес моей картинки

      В таком случае, в селекторе #header убираем свойство background-image: (../images/position.png); , и прописываем position: relative .

      А в селекторах тегов h1 и h3 , прописываем свойство position: absolute; .

      При этом необходимо будет изменить отступы для заголовков. Подробнее о том, почему так делается, можно прочитать в статье Относительное позиционирование

      Всё остальное остаётся без изменения.

      Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

      На WordPress устанавливается готовая тема, с готовой шапкой, но допустим, Вам захотелось в эту готовую шапку, добавить какой нибудь свой логотип, или ещё какое изображение.

      Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

      В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

      Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php .

      В этом файле, находим строку

      После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта.

      Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img , добавляем атрибут style со свойством margin

      И двигаем изображение туда, куда нам нужно.

      Вот мы и создали первую страницу сайта. После доработки шапки, и ещё кое каких доработок, описанных далее, можно этот файл назвать index.html , и выложить его на хостинг. Затем, по этому же шаблону, создаются другие страницы, создаётся меню и так далее. И сайт начинает свою жизнь в интернете.

      P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

      Желаю творческих успехов.

      Перемена

      Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

      53 комментария на «Как сделать шапку сайта»

      .clear <
      clear: both;
      > , а что это?

      Обрезать картинку до нужного размера.

      Спасибо большое!
      А я вот взял картинку, но, слишком большую, и она у меня не поместилась.
      Правда, может я не внимательно читал.
      Что делать?

      А что именно уточнить? Вообще-то слайдер — это уже блочный элемент. Вопрос в какое место его спозиционировать. Или просто вставить в текст, или в шапку, сайдбар и т.д.? Слайдер самописный или плагин? И как у вас с html и css?

      Доброго времени суток. Хотелось бы уточнить о возможности вставки в один из блоков страницы слайдшоу. С уважением, Сергей.

      Спасибо автор ты мне очень сильно помог

      У меня такое бывает когда ошибка в шапке подвале или виджете, т.е. в тех элементах которые подгружаются на каждую страницу.

      Возможно я чего-то не знаю и не понимаю, но мне не понятен смысл двух хедеров и нескольких h2. На странице должен быть один хедер, один h1 — заголовок сайта, и один h2 — заголовок страницы. Всё остальное можно сделать другими тегами с тем же визуальным результатом. Может это для сниппета? Я в этом направлении ещё не копал.

      А два хедера? Что принимать за начало, начало страницы, или начало статьи? Во втором хеадере микроразметка microformats.org. Может и в этом есть сакральный смысл? Откуда циклическая переадресация?

      С таким шаблоном наверное можно работать только в визуальном редакторе и настройках, не залезая в код, тогда всё тайные замыслы создателя возможно сработают как надо.

      ты посмотрел, когда я все исправил. А ошибки появляются тогда когда вносишь изменения, даже изменишь расстояния межде словами или слово добавишь или вставишь. Сразу во всех страницах возникают ОДНИ и ТЕ ЖЕ ошибки

      У тебя одна ошибка и одно предупреждение, можно не париться.

      Почему же не решить? Сходу не решить — эт точно.

      Staric привет!
      А не подскажешь почему возвращаются ошибки кода, которые исправляю с помощью валидатора, если вношу какие-нибудь изменения в страницу.

      возможно сжатие связано с действием плагинов. Заливали на старте стандартную Рибосому. Затем старался оптимизировать. Это — то, что получилось. Т.е. проблемку PageSpeed с количеством циклов передачи данных
      не решить?

      Действительно Рибосома. Только основательно переделанная. В оригинальном шаблоне название определяется по линкам стилей в head, а в твоём нет. Вообще, как переделаны стили, для меня полная непонятка, к тому же они сжаты, а это не читаемо. Вообще нет подключённых файлов стилей, только встроенные. Непонятно. В оригинальной Рибесоме всё как у людей, более-менее понятно и видно. Можешь сам посмотреть. Почувствовать, так сказать, разницу.

      шаблон Ribosome на WordPress

      Вот тут Витя тёмный лес. Одно дело логотип и другое — разобраться в твоём шаблоне. По всему он самописный, потому что названия нет, так что просечь полёт фантазии разработчика — гигантский труд (кстати, а где тот мастер, который его создал?). По серверам непонятка. Стили сжатые в хедере, в этой каше разве разберёшься? Вообще в хедере столько наворочено, что я не знаю. Фавикон с логотипом в отдельном линке. Иль хакеры одолели?

      Короче, помочь тебе сможет только создатель сего шедевра.

      Привет Staric!
      С шапкой вроде нет вопросов. Думал, что когда расположу на одной линии, то это предупреждение уйдет, но наверное полученный результат как-то с ним надо связать или не в этом дело.
      А не подскажешь как решить такую проблемку если pageSpeed пишет

      Оптимизируйте загрузку видимого контента
      Для отображения верхней части страницы необходимы дополнительные сетевые запросы. Сократите объем HTML-кода в верхней части страницы, чтобы она быстрее открывалась в браузере.
      Для показа верхней части страницы понадобилось 52 КБ данных с сервера, содержащих код HTML. Количество циклов передачи данных от пользователя на сервер и обратно: 3. Размещайте в верхней части страницы только важное содержание – оно отобразится после первых 2 циклов обмена информацией с сервером.
      В верхней части страницы не удалось отобразить ни один элемент содержания на основе данных HTML, полученных с сервера (количество циклов передачи данных: 2).

      Сделаем Витя, только недели через три, не раньше. Я ведь по профессии отделочник, а сайты и веб — просто хобби. Интересно.

      Сейчас работа по плитке срочная, так что я кое как на комменты только успеваю отвечать. На большее не времени ни сил. И потом, в твоём шаблоне чёрт ногу сломит, и где только такой нарыл.

      Между делом, нули то из top (отступ сверху), и left (отступ слева), меняй на другие значения, тогда и двигаться будет.

      float — это обтекание элемента слева. psition и float вместе не работают. Или то, или другое.

      Спасибо Staric!
      Ты меня все таки натолкнул на мысль своими вариантами. И мне удалось сдвинуть h1 и h2 через float и position absolute

      Спасибо Starik!
      Этот код находится в хедере. Вставлял в style.css после юblog-info-sin-imagen
      селектор .main-logotip <
      position: absolute;
      top: 0px;
      left: 0px;
      > стоит насмерть логотип.
      Пробовал его вставить в это место if ( get_theme_mod(‘ribosome_display_top_bar’, и даже в другие (с тегами и без тегов, с class и без него) слетает сайт. Может опять что-то не то делаю. Вроде как ты написал. Еще где-то читал предлагали разбить на блоки и выставить в одну линию, но знаний не хватило, а конкретики маловато. Очень надеюсь на твою помощь. Может на прямой связи. я могу на мобилу набрать и под руководством сделаем.

      Ага. Вот так понятнее. Судя по всему тебе надо начать с начала, а не тыркаться с середины во все стороны. Вот смотри: есть веб-инспектор, в котором видно весь html сайта, все эламенты, и стили, которые этим элементам заданы.

      Картинка находится в блоке blog-info-sin-imagen. Задавая стили для него ты можешь сделать его уже, шире, сместить вправо-влево (свойство margin) Картинка — самостоятельный элемент в блоке blog-info-sin-imagen, и ей задано позиционирование position: absolute;, что означает что она будет расположена в левом верхнем углу блока blog-info-sin-imagen, которому задано свойство position: relative;

      Причём (и это вызывает удивление), position для блока задан как положено в style.css, а position картинки задан атрибутом style, который находится в теге img картинки.

      Элементы которым задано position двигаются свойствами left: **; top: **; Обязательно прочитай статьи по ссылкам.

      Чтобы перемещать твой логотип, нужно во первых найти его код в вебинспекторе вот он: . Затем найти этот код в файлах шаблона, скорее всего в header.php., но не обязон. Возможно логотип подгружается по php. Как бы там ни было, путь к картинке в теге img есть. И судя по тому что она в папке uploads, то была загружена пользователем, а не встроенная.

      В общем тебе нужно найти код картинки, и вместо атрибута style=»position: absolute;», прописать в него class=»main-logotip». Затем создать (добавить) в style.css селектор .main-logotip и задать в нём свойства:

      .main-logotip <
      position: absolute;
      top: 0px;
      left: 0px;
      >

      Если не найдёшь код логотипа (возможно) и только в этом случае, то можно сделать следующее: Взять его код из веб-инспектора, или (я уже скопировал) из начала коммента и вставить в файл темы header.php, сразу после

      Должны будут появится 2 логотипа. Первый надо будет убрать. Попробуй убирать из header.php

      Посмотришь что это даст. Скорее всего первая часть уберёт первый логотип. Ну а тогда меняй значения в top и left и двигай второй.

      Если и так не понятно, то от души — начни с основ html и css, чтобы нам понимать друг друга, попрактикуйся в шаблоне и вебинспекторе, и всё будет ОК.

      Что я делал — в соответствии с разными предложениями в style.css менял параметры в т.ч. для blog-info-sin-imagen» и h1 и h2 и много еще разных попыток. Лого двигался или вбок или сверху добавлялась еще полоса . Сейчас я попробовал как ты говоришь написать так.
      и вставить в style css .ehp-logo1 такие параметры и другие, но не сработало
      <
      float:left;
      margin: 4px 10px 2px 0px;
      >
      Что-то видно не так делаю.
      Если можешь напиши конкретно, ПОМОГИ. Мозги кипят от непонимания
      С уважением Вик

      В коде картинки-логотипа задан атрибут style=»position: absolute», без каких либо отступов. Он так и будет в верхнем левом углу торчать. Странно конечно, обычно это в стилях делается. А что вы только не делали, интересно? Вообще-то картинке нужно задать класс и в style.css задать этому классу позиционирование, тогда подвинется.

      Интересный шаблон, в смысле замороченный. Позиционирование блоков (не только картинка-логотип) в html задано. Два хедера, два h1, h2 вообще полно. ПС свихнётся. Ну в смысле плохо это для поисковой оптимизации.

      Может сменить шаблон? У него же ничего кроме адаптации. А сейчас адаптивных полно. Даже у того же вордпресса 5-я 6-я и 7-я адаптивные. Классные шаблоны.

      Добрый День!
      У меня сайт на вордпрессе. Я новичок. В шапке стоит логотип и название с описанием. Не могу логотип установить на одну строку с названием и описанием. Что только не делал. Советов много, но не получилось ничего. Как логотип был выше так и остался . Надеюсь на вас профессионалы. Кусок кода хедера ниже.

      Добрый вечер Алексей. Вам фоновое изображение в шапку хочется, правильно? Или просто картинку в шапку вставить? Нужна ли она вообще? Что то, что другое. По опыту, вряд ли Вы кого-то удивите и привлечёте красочной шапкой, учитывая специфику сайта, а вот скорость загрузки посадите однозначно. От картинок в шапке только вред.

      Люди к вам пойдут за технической услугой. Надо им картинки? Ну туризм там — понятно. А тут. Лучше телефон (хорошо-бы бесплатный) и город в шапку.

      У Вас хороший цвет и шрифт. На мобиле нормально смотрится. Я бы шапку ещё сузил, есть возможность, чтоб инфа сразу начиналась. И календарь не на месте. Информацию вверх.

      Посмотрел вашу страницу в веб-инспекторе — картинки вообще нет. То есть не то чтоб её не видно — её кода просто нет в древе. Чтоб разобраться надо зайти в шаблон и копать, а это сами понимаете ….

      Интересно, помогите с проблемкой, ни как не вставляется, точнее вставляю фото в шапку сайта, но его на сайте не видно пробовал разные размеры фотографий в теме Neblog
      не пойму почему не вставляется
      и включал фото и выключал фото, так и не появляется на сайте. Спасибо заранее

      Смотрите еще:

      • Что такое psv суда Судно снабжения морских буровых платформ, проект VS 485 PSV Судно предназначено для снабжения морских буровых платформ: перевозка бурового раствора, сыпучих грузов, метанола и генеральных грузов на открытой палубе; участие в […]
      • Диплом на тему договор купли продажи Дипломная работа Выполнена в 2015 г., 92 страницы, 78 сносок в тексте. ОГЛАВЛЕНИЕ ГЛАВА 1. ОБЩИЕ ПОЛОЖЕНИЯ ДОГОВОРА КУПЛИ-ПРОДАЖИ 1.1. Понятие и предмет договора купли-продажи 8 1.2. Условия договора купли-продажи 16 1.3. Права и […]
      • Адреса адвокатов гЩелково Щелковский городской суд Московской области Адрес суда: 141100, Московская область, г. Щелково, ул. Ленина, д.5 Председатель суда: Тюшляева Нина Ивановна тел. +7 495 526-43-70 Телефон секретаря председателя суда: +7 495 526-43-70 […]
      • Закон о тишине москва консультант Закон о тишине в Москве с 1 января 2016 года Добрый вечер , снимаю комнату в Москве , мой сосед в соседней комнате , играет на скрипке начиная с 8 утра и заканчивая иногда около 23:00. Хотел бы узнать подходит для этого случая закон […]
      • Гибдд челябинск штраф по фамилии Узнать задолженность по штрафам ГИБДД в Челябинске Как правило, у многих водителей часто возникают ситуации, когда им необходимо узнать свои долги перед ГИБДД по штрафам за нарушения правил дорожного движения. Причины у таких ситуаций […]
      • Декларация по налогу на прибыль нулевая какие листы сдавать 2018 Нулевая декларация по налогу на прибыль: как правильно заполнить? Отправить на почту Нулевая декларация по налогу на прибыль — это декларация, оформляемая при отсутствии данных по доходам и расходам для ее заполнения. Когда нужно сдавать […]
      • Суда в порту таганрог ФГБУ "Администрация морских портов Азовского моря" 347922, Ростовская обл., г.Таганрог, ул.Комсомольский спуск, 2 Справочник Капитан морского порта Таганрог - Яранцев Василий Викторович тел.: +7 (8634) 342-727 (просьба по вопросам […]
      • Фсс больничный лист после увольнения Многих работников, да и самих нанимателей, волнует вопрос: оплачивается ли больничный после увольнения в 2018 году? Расскажем, как правильно действовать. Правила постоплаты Когда говорят об оплате больничного после увольнения, то имеют в […]