Шапка на сайт: Attention Required!

Шапка на сайт: Attention Required! | Cloudflare

Содержание

Урок 6 — Школа MODX

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

Начнем с блока с кнопками соцсетей. На самом деле, там не только кнопки соцсетей, а еще ссылка на RSS и форма обратной связи.

RSS — это файл в формате XML, предназначеный для трансляции собственных новостей, анонсов и т.д., а так же, для чтения чужих новостей и анонсов. Все современные браузеры умеют работать с этим форматом, но существуют и специальные приложения (RSS-агрегаторы), такие как Яндекс. Лента и Google Reader, которые собирают и отображают RSS-каналы. Если на вашем сайте планируется публикация новостей или каких-то статей, то настроить RSS ленту — признак хорошего тона, тем более, что делается это за пять минут.

Создаем RSS-ленту

Сначала нам необходимо создать в дереве ресурсов документ с псевдонимом rss и шаблоном (blank). Я создал такой документ в корневой папке. Убираем галочку с «Показывать в меню»

затем переходим в закладку «Настройка страницы» и снимаем галочки с пунктов «Использовать HTML-редактор», «Доступен для поиска» и «Кэшируемый». Пункт «Контейнер (содержит дочерние ресурсы)» тоже должен быть отключен. Там же в графе «Тип содержимого» выбираем text/xml, это один из важных моментов.

Документ для нашей ленты готов. Запоминаем его ID, это пригодится далее, у меня ID получился 6. Сохраняем ресурс, после этого опять заходим в него и помещаем в «Содержимое ресурса» вот такой вызов Ditto:

[!Ditto? &parents=`2` &format=`rss` &total=`all` &tpl=`rss_tpl` &display=`10`!]

Где &parents=`2` — ID папки, в которой находятся транслируемые документы, я предполагаю, что мы будем транслировать только статьи, находящиеся на странице Блог о дизайне. У меня ID этой страницы 2, если у вас другой, то укажите его в этом параметре. Если вы хотите транслировать документы и из другой папки, то добавьте ее ID в этот параметр через запятую.

&format=`rss`— тип данных

&tpl=`rss_tpl` — чанк, шаблон для транслируемого документа

&display=`10` — количество документов на странице

Можно добавлять и другие параметры Ditto, но это основные.

Создаем шаблон вывода RSS

Теперь нам нужно создать шаблон для вывода документов в ленте. Создаем чанк rss_tpl и помещаем в него следующий код:

<item>
<title>[+rss_pagetitle+]</title>
<link>[(site_url)][~[+id+]~]</link>
<description><![CDATA[ [+introtext+] ]]></description>
<pubDate>[+rss_date+]</pubDate>
 <guid isPermaLink="false">[(site_url)][~[+id+]~]</guid>
</item>

Где [+rss_pagetitle+] — заголовок транслируемого документа

[(site_url)][~[+id+]~] — ссылка на транслируемый документ

[+introtext+] — анонс документа.

[+rss_date+] — дата публикации ресурса

Подключаем RSS

В заголовок нашего сайта (чанки HEAD и HEAD_PORTFOLIO) между тегами <head> и </head> необходимо поместить ссылку на наш канал-RSS:

 <link rel="alternate" type="application/rss+xml" title="[(site_name)] Мой сайт" href="[~6~]" />

Где href=»[~6~]» — ссылка на документ, в котором мы делали вызов Дитто, его ID у меня получился 6, у вас может оказаться другой ID.

Создаем транслируемые статьи

У нас пока папка Блог о дизайне пустая, да и вообще еще не папка. Давайте создадим в ней несколько статей, для тестирования нашей RSS-ленты. В дереве ресурсов наводим курсор на Блог о дизайне и нажимаем правую кнопку мышки. В появившемся меню выбираем Дочерний ресурс. Заполняем шапку документа как показано на рисунке:

Таким же образом создаем еще два документа Статья2 и Статья3. Вы можете называть их иначе.

Теперь надо сделать ссылку на нашу ленту. Кнопки соцсетей и значок RSS-ленты находится в чанке HEADER. Вот нужная нам строчка:

<li><a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/rss.png" alt="rss" /></a></li>

Заменяем эту строчку на:

<li><a href="[~6~]"><img src="/assets/templates/templatemo_250_chess/images/rss.png" alt="rss" /></a></li>

Давайте посмотрим, что у нас в итоге получилось. Заходим на главную страницу сайта, если она у вас уже была загружена, то просто обновляем ее и жмем на значок RSS. Если вы все сделали правильно, то в браузере Firefox у вас должно отобразиться следующее:

На этом наша RSS-лента готова.

Кнопки соцсетей

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

Я не буду заниматься ведением блока в социальных сетях, поэтому решаю убрать ненужные мне кнопки фейсбука, твиттера и майспэйса, оставив только значки RSS и обратной связи (красный конверт). Вырезаю из чанка HEADER вот этот код:

<li><a href="http://www.facebook.com/templatemo" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/facebook.png" alt="facebook" /></a></li>
<li><a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/twitter.png" alt="twitter" /></a></li>
 <li><a href="#"><img src="/assets/templates/templatemo_250_chess/images/myspace. png" alt="myspace" /></a></li>

Сохраняю чанк.

Обратная связь

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

Находим в чанке

HEADER строчку, отвечающую за ссылку обратной связи:

<li><a href="#"><img src="/assets/templates/templatemo_250_chess/images/gmail.png" alt="gmail" /></a></li>

Заменяем значение в атрибуте href тега <a> на [~5~] — где 5 это ID ресурса Контакты (у вас может отличаться):

<li><a href="[~5~]"><img src="/assets/templates/templatemo_250_chess/images/gmail.png" alt="gmail" /></a></li>

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

Заголовок сайта

Настало время поменять название в шапке нашего сайта. Продолжаем редактировать чанк HEADER. Заголовок сайта состоит из картинки с названием сайта и краткой подписи:

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

Cufon.

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

Если вы решили использовать в качестве названия сайта картинку, то вы можете воспользоваться фотошопом или его бесплатным аналогом GIMP. Я же пока не вижу в этом смысла и предлагаю превратить название нашего сайта в обычный текст, придав ему с помощью стилей необходимый вид. Находим в чанке HEADER такую строчку:

<a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/templatemo_logo.png" alt="css templates" /><span>free css templates</span></a>

Это и есть название нашего сайта. Состоит оно из ссылки, картинки и краткой подписи. Давайте изменим этот код, указав ссылку на главную страницу нашего сайта и поставив вместо картинки нужный нам текст:

<a href="/">МОЙ САЙТ<span>блог о дизайне</span></a>

Открываем в Notepad++ файл со стилями templatemo_style. css, который, как мы помним, находится в папке: C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/ и находим в этом файле класс, отвечающий за оформление нашего названия. Находится он в 142 строке:

#templatemo_header  #site_title a {
    margin: 0px;
    padding: 0px;
    font-size: 30px;
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
}

Узнал я это с помощью дополнения Firebug, которое установил в своем браузере Firefox. Я навел курсор на название нашего сайта и нажал правую кнопку мышки, затем выбрал пункт Анализировать элемент:

После этого в нижней части окна браузера появилось окошко:

В левой части появившегося окошка находится код HTML, а в правой части используемые стили. Вот эти стили я и искал в файле templatemo_style.css, чтобы их отредактировать.
Если вы обратили внимание на скриншот, то наверняка увидели в правой нижней части окна моего браузера зеленый кружок с галочкой:

Это еще одно дополнение HTML Validator, которое проверяет мой сайт на ошибки. Зеленый кружок с галочкой говорит о том, что никаких ошибок и предупреждений на данный момент нет. Об этих дополнениях к браузеру Mozilla Firefox я писал во вступлении к этим урокам.

Но вернемся к редактированию стиля нашего названия. Для начала, давайте добавим жирное начертание. Делается это с помощью font-weight: bold;. Теперь добавим тень к тексту: text-shadow: 1px 1px 2px #555;. Белый цвет названия не совсем подходит нам, давайте окрасим в малиновый, этим цветом было окрашено слово WEB в исходном шаблоне, код этого цвета e92e51. Заодно увеличу размер шрифта font-size: 38px;. Вот что получилось в конечном счете:

#templatemo_header  #site_title a {
    margin: 0px;
    padding: 0px;
    font-size: 38px;
    color: #e92e51;
    font-weight: normal;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px #555;    
}

Еще мне не нравится, что надпись блог о дизане слишком близко к заголовку. Добавляю в стиль, который описывает тег span с этой надписью, внутренний отступ: padding: 2px;

#templatemo_header  #site_title a span {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #5f6675;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 2px;    
}

Вы можете экспериментировать со стилями, пока не добьетесь желаемого результата. Я же останавливаюсь на этом варианте.
Давайте изменим надпись LOREM IPSUMdolor sit amet на что-нибудь, более подходящее нам по смыслу, к примеру, на «Веб-разработка, сайты любой сложности». Находим в чанке HEADER следующий код:

<h2>LOREM IPSUM<span>dolor sit amet</span></h2>

Заменяем на:

<h2>ВЕБ-РАЗРАБОТКА<span>сайты любой сложности</span></h2>

На этом чанк HEADER полностью изменен.

Как отредактировать шапку и подвал сайта в REG.

Site – Помощь

Шапка (header, хедер) ― это верхняя часть сайта. В ней располагается логотип организации, меню, контакты и другие элементы сайта.

Подвал (footer, футер) ― это нижняя часть сайта. В нём может находиться карта сайта, ссылки на социальные сети, символы копирайта.

В редакторе REG.Site шапка и подвал редактируются отдельно от основного контента сайта. Как отредактировать тело сайта читайте в статье Как редактировать страницы сайта в REG.Site.

Как создать шапку или подвал

1. Войдите в админку сайта.
2.
Перейдите во вкладку Divi ― Глобальные блоки:
3.
Нажмите на блок, который хотите создать. Например, хедер:
3.
Если вы хотите использовать сохраненный шаблон из библиотеки, в выпадающем списке выберите Из Библиотеки. Если нет, выберите Собрать хэдер:
4.
Если вы выбрали блок «Из библиотеки», можно сразу приступать к редактированию. Если вы выбрали «Собрать хэдер», то выберите Построить с нуля или Клон существующей страницы:

Готово, можно приступать к редактирования блока.

Как перейти к редактированию шапки или подвала

Перейти к редактированию шапки или подвала можно двумя способами:

через админку WordPress,
в процессе редактирования основной части страницы.

Способ 1. Через админку WordPress

Уже созданные блоки в редакторе выделяются зелёным цветом.

Чтобы перейти к редактированию:

1.
Нажмите на Три точки в блоке:
2.
Нажмите Изменить:

Готово, теперь можно редактировать.

Способ 2. При редактировании страницы

Готово, приступайте к редактированию.

Как редактировать шапку или подвал сайта

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

Так же как и при настройке основного контента страницы, редактор разделён на 3 уровня:

раздел,
строка,
модуль.

Чтобы добавить раздел, строку или модуль, нажмите кнопку «+» соответствующего цвета:

раздел ― синий,
строка ― зелёный,
модуль ― серый.

Чтобы открыть настройки раздела, строки или модуля нажмите на Шестерёнку в меню соответствующего цвета:

раздел ― синее меню,
строка ― зелёное меню,
модуль ― серое меню.

Настройки разделены на несколько частей: «Контент», «Дизайн» и «Дополнительно».

Настройка раздела и строки

Настройки раздела и строки одинаковы.

Контент. Здесь можно вставить ссылку, чтобы весь раздел вел на определённую страницу. Можно выбрать фон (однотонный или градиент), вставить фоновое изображение или видео. Обратите внимание! Видео нужно загружать сразу в двух форматах — . MP4 и .WEBM, чтобы на всех браузерах оно отображалось корректно. Также на мобильных устройствах отключены видеофоны, поэтому обязательно установите обычный фон или фоновое изображение, чтобы оно отображалось вместо видео.

Дизайн. При помощи шаблонов можно визуально отделить хедер от основной части страницы:

Здесь же можно настроить размеры и расположение шапки, настроить яркость, насыщенность, наложить фильтры, вставить анимацию.

Дополнительно. Это блок для расширенных настроек. Здесь можно ввести CSS ID и CSS-класс. Чтобы добавить несколько классов, разделите их пробелом. В разделе «Пользовательский CSS» можно добавить собственный CSS к определённому элементу. Каждое правило CSS вводится через точку с запятой. В опции «Видимость» можно отключить раздел на опредёленном устройстве, например для упрощения загрузки контента на мобильной версии сайта.

Настройка модуля

В зависимости от вида модуля настроек может быть больше. Для примера поработаем с настройками модуля «Меню».

Контент. В этом блоке добавляется меню. Обратите внимание, чтобы добавить меню в шапку, надо добавить его в настройках WordPress. Если у вас добавлено несколько видов меню в библиотеке WordPress, можно выбрать одно из сохраненных. Можно добавить свой логотип в шапку сайта. Здесь же можно вставить дополнительные элементы: значок корзины и поиска.

Дизайн. Здесь настраивается шрифт и размер текста. Также в этом блоке можно отрегулировать внешний вид выпадающего меню (если оно есть). Если вы добавили значок корзины или поиска, то именно здесь настраивается их размер и цвет. Можно добавить анимацию.

Дополнительно. Также как и при настройке раздела и строки, в графе «Дополнительно» настраиваются CSS ID, CSS-классы и пользовательский CSS. Можно настроить видимость на определённом устройстве.

Дополнительные возможности

В нижней части экрана есть дополнительное меню. Чтобы его открыть, нажмите на Три точки:

В этом меню есть несколько важных кнопок:

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

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

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

Сохраните изменения:

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

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

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

1.
Создайте модуль «Текст»:
2.
В режиме Настройки Текст ― Контент ― Текст введите номер телефона:
3.
В Ссылки в графе «URL ссылки модуля» напишите tel: +ваш номер телефона. Обратите внимание. Телефон надо вводить слитно, без тире и скобок:
4.
Сделать вызов через компьютер нельзя, поэтому надо ограничить функцию моментального вызова для десктопа. Для этого перейдите в Дополнительно ― Видимость и поставьте галочку на «Десктоп». Обратите внимание, теперь пользователи не смогут узнать контакты организации с компьютера. Поэтому создайте ещё один модуль с номером телефона без ссылки и скройте его от телефона и планшета:

Готово, теперь пользователи могут не только увидеть номер телефона, но и сразу перейти к вызову.

Видеосправка. Как изменить подвал сайта

Как изменить логотип сайта

Логотип сайта — это уникальное изображение, по которому один сайт можно отличить от другого. В каком-то смысле это визитная карточка сайта. В качестве фирменного знака сайта можно использовать логотип компании.

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

1.
В меню редактирования модуля нажмите на значок Шестерёнка:
2.
В разделе «Контент» выберите пункт Логотип:

Удалить логотип

Изменить логотип

3.
Если вы хотите удалить логотип, нажмите на значок Корзина:
4.
Чтобы сохранить изменения, кликните на кнопку с галочкой, а затем на Три точки:
5.
Чтобы подтвердить изменения, нажмите Сохранить:

Готово, вы удалили логотип.

3.
Если вы хотите изменить логотип, нажмите на значок Шестерёнка:
4.
Чтобы загрузить картинку с компьютера, кликните Загрузить файлы. Если вы хотите использовать картинку из «Библиотеки файлов», перейдите к шагу 6.
5.
Нажмите на Выберите файлы или перетащите нужное изображение:
6.
Вы можете разместить изображение в неизменном виде или выставить настройки отображения. Также можно добавить Alt, заголовок, подпись, описание и ссылку на файл. После этого нажмите Загрузить изображение:
7.
Чтобы сохранить изменения, кликните на кнопку с галочкой, а затем на Три точки:
8.
Чтобы подтвердить изменения, нажмите Сохранить:

Готово, вы изменили логотип.

Видеосправка. Как изменить логотип

%d1%88%d0%b0%d0%bf%d0%ba%d0%b0 %d1%81%d0%b0%d0%b9%d1%82%d0%b0 PNG, векторы, PSD и пнг для бесплатной загрузки

дизайн плаката премьера фильма кино с белым вектором экрана ба

1200*1200

набор векторных иконок реалистичные погоды изолированных на прозрачной ба

800*800

малыш парень им значок на прозрачных ба новорожденного весы вес

5556*5556

88 год юбилея векторный дизайн шаблона иллюстрация

4083*4083

Головной мозг гипноз психология синий значок на абстрактное облако ба

5556*5556

Крутая музыка вечеринка певца креативный постер музыка Я Май Ба концерт вечер К

3240*4320

номер 88 золотой шрифт

1200*1200

начальная буква bf с логотипом

1200*1200

номер 82 золотой шрифт

1200*1200

3d золотые цифры 88 с галочкой на прозрачном фоне

1200*1200

номер 88 3d рендеринг

2000*2000

надпись laa ba sa thohurun insya allah

1200*1200

3d золотые числа 82 с галочкой на прозрачном фоне

1200*1200

первый логотип bf штанга

4500*4500

88 летний юбилей векторный дизайн шаблона иллюстрация

4083*4083

буква bf фитнес логотип дизайн коллекции

3334*3334

вектор поп арт иллюстрацией черная женщина шопинг

800*800

номер 82 3d рендеринг

2000*2000

я люблю моих фб хорошо за футболку

1200*1200

в первоначальном письме bf логотип шаблон векторный дизайн

1200*1200

82 летняя годовщина векторный дизайн шаблона иллюстрация

4083*4083

88 летний юбилей векторный дизайн шаблона иллюстрация

4083*4083

3d числа 88 в кругу на прозрачном фоне

1200*1200

номер 81 золотой шрифт

1200*1200

syafakallah la ba sa thohurun in syaa allah арабская молитва для бесплатного скачивания

2048*2048

82 летняя годовщина логотип дизайн шаблона иллюстрацией вектор

4083*4083

номер 81 3d рендеринг

2000*2000

фб письмо логотип

1200*1200

asmaul husna 88

2020*2020

asmaul husna 81

2020*2020

текстура шрифт стиль золотой тип число 88

1200*1200

asmaul husna 82

2020*2020

Векторная иллюстрация мультфильм различных овощей на деревянном ба

800*800

фб письмо логотип

1200*1200

фб письмо логотип

1200*1200

88 летний юбилей векторный дизайн шаблона иллюстрация

4083*4083

векторный шрифт алфавит номер 88

1200*1200

Акварельная мечта простая геометрическая рамка bf зеленый лист свадебное приглашение

1414*2000

черный градиент 3d номер 88

2500*2500

первый логотип bf штанга

4500*4500

88 летний юбилей векторный дизайн шаблона иллюстрация

4083*4083

ba угол звезда голографическая радуга лазерная наклейка

1200*1200

текстура шрифт стиль золотой тип № 81

1200*1200

bf письмо дизайн логотипа внутри черного круга вектор

1200*1200

3d золотые числа 81 с галочкой на прозрачном фоне

1200*1200

глюк числа 88 вектор на прозрачном фоне

1200*1200

82 летняя годовщина векторный дизайн шаблона иллюстрация

4167*4167

3d рендеринг числа 88 с прозрачным фоном

1200*1200

88 год юбилея векторный дизайн шаблона иллюстрация

4083*4083

юбилей 81 год празднование логотип номер звезды роскошный стиль логотип на черном фоне

1200*1200

Правила оформления шапки: компоновка элементов

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

Самая общая рекомендация звучит следующим образом: не нужно пытаться запихнуть в шапку абсолютно всё — логотип, описание, адрес, время работы, телефоны всех отделений компании, заказ звонка, кнопку призыва, 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 без обеда. Выходные — суббота и воскресенье”).

Резюме:

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

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

Закажи юзабилити-тестирование прямо сейчас

Заказать

Best Practices for Your Website Header Design

Для разработки собственного дизайна веб-сайта часто требуется, чтобы вы обращались за советом к экспертам, которые живут и дышат этим материалом (psst, это мы). Возьмем, к примеру, дизайн заголовка веб-сайта. Конечно, вы слышали о заголовке и видели, как он неоднократно использовался на других веб-сайтах, но действительно ли вы знаете, какой потенциал скрывается в этом крошечном куске недвижимости веб-сайта?

Разработка идеального заголовка — это более индивидуальный процесс, чем вы думаете.Создавая свой веб-сайт, помните, что заголовок — это первое, с чем сталкиваются посетители, попадая на вашу домашнюю страницу. Как и все аспекты вашего сайта, он должен отражать ваш бренд и включать в себя равное количество стратегического и творческого мышления.

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

Что такое шапка веб-сайта?

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

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

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

Что следует включить в шапку веб-сайта?

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

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

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

Название компании

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

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

Логотип

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

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

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

Меню навигации

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

Корзина для покупок

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

Панель поиска

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

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

Логин

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

Ссылки на социальные сети

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

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

Языки

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

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

Дизайн шапки веб-сайта: как сделать это хорошо 🚀

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

Итак, в этой статье мы разберем все, что вам нужно знать о дизайне заголовка веб-сайта, от того, что должно быть в нем, до того, как вы можете его создать. Итак, начнем с основ.

Что такое заголовок веб-сайта?

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

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

Плохая навигация по заголовку (настольный / мобильный) заставляет людей покидать сайт. Заголовок оказывает значительное влияние на SEO, поскольку именно здесь размещаются наиболее важные ссылки и сообщения.Адаптивный дизайн заголовка увеличивает производительность веб-сайта.

Размер заголовка веб-сайта

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

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

Есть несколько ключевых советов, которые вы должны использовать при создании заголовка вашего веб-сайта (и их больше, если вы собираетесь писать скрипт в HTML).

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

#1. Предусмотрите навигацию заранее

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

№2. Выберите хороший шрифт

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

№3. Используйте изображения с высоким разрешением

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

№4. Рассмотрите возможность использования сокращающегося заголовка

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

№5. Выразите индивидуальность своего бренда

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

#6. Используйте эффекты для привлечения посетителей

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

Что касается технической части, то есть несколько ключевых моментов, которые должны быть в шапке каждого сайта, а именно:

Логотип и фирменный стиль
Навигация
Название страницы
Панель поиска
Тележка для покупок
Ссылка на профиль пользователя
Вход/Выход из системы
Уведомления
СТА
Контакты

Учебник: h Настройки чтения

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

Из этого видео вы узнаете, как создать заголовок на веб-сайте Weblium.

Примеры шапки веб-сайта

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

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

Ниже мы рассмотрим только 3 различных типа сайтов, которые вы можете использовать для вдохновения:

1. Веб-сайт инструмента для создания прототипов

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

2. Веб-сайт некоммерческого сообщества

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

3. Пример заголовка веб-сайта портфолио

Теперь посмотрим на сайт-портфолио, созданный на Weblium. Юкал Рехтер — онлайн-издатель, который работает над журналами и сайтами, ориентированными на женщин поколения миллениума.

Все три сайта имеют несколько общих функций, повышающих вовлеченность:

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

Завершение

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

Запустите свой сайт 🙂

Ярослава

Контент-менеджер, маркетолог и SEO-специалист!

Добавление универсального верхнего и нижнего колонтитула на ваш сайт

Последнее изменение: 24. 11.2020, 14:58 по восточному поясному времени

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

Добавить раздел верхнего или нижнего колонтитула

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

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

Показать или скрыть разделы верхнего и нижнего колонтитула на страницах

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

Установите новый раздел в качестве верхнего или нижнего колонтитула всего сайта

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

Установить положение заголовка для всего сайта — нормальное, закрепленное или фиксированное

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

Убедитесь, что на вашей странице настроен заголовок для всего сайта.
Выберите раздел «Заголовок» на своей странице.
Нажмите «Стили заголовков» в верхнем левом углу раздела «Заголовок».
В меню редактирования выберите Положение.
Выберите позицию.
- Обычный — Расположен вверху страницы.
- Прикрепленный — Остается видимым вверху страницы при прокрутке
- Фиксированный — Перекрывает раздел под ним (по высоте раздела заголовка) и остается видимым вверху страницы при прокрутке.
Нажмите «Сохранить» и «Просмотр в реальном времени», чтобы увидеть раздел заголовка в действии.

Изменение цвета или фонового изображения верхнего или нижнего колонтитула

При редактировании страницы выберите раздел верхнего или нижнего колонтитула.
Нажмите «Стиль верхнего колонтитула» или «Стиль нижнего колонтитула» в левом верхнем углу раздела.
В меню «Правка» перейдите на вкладку «Раздел».
Выберите фон раздела.
Щелкните цвет фона или изображение, чтобы установить или изменить фон раздела.
Нажмите «Сохранить», чтобы сохранить страницу.

Настройка цвета разделов верхнего и нижнего колонтитула в настольном режиме не изменит цвет в мобильном режиме

Увеличение или уменьшение высоты раздела верхнего или нижнего колонтитула

расширяться или уменьшаться, чтобы добавить больше или меньше контента в раздел.

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

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

Лучшие практики дизайна заголовков веб-сайтов в 2021 году

Веб-разработка

В веб-дизайне нет второго шанса произвести впечатление.Первое, что видит пользователь на сайте, — это заголовок.

Что такое заголовок?

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

Заголовок — это не только визуальный элемент сайта и инструмент, который помогает увеличить количество конверсий на вашем сайте.

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

Почему заголовок так важен?

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

Существует известная формула AIDA для построения структуры веб-сайтов и целевых страниц: (A) внимание — (I) интерес — (D) желание — (A) действие.

Heder — первая ступень, которая отвечает за привлечение внимания посетителей.Давайте посмотрим, как новый пользователь видит сайт. Многочисленные исследования разработали три модели восприятия контента на странице:

Диаграмма Гутенберга

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

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

Z-образный

Модель, называемая Z-образцом, похожа на диаграмму Гутенберга. Посетитель просматривает страницу зигзагообразно. Но таких зигзагов не один. Такая модель восприятия часто встречается на ресурсах с блочной структурой контентной части.

F-образная форма

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

При любой модели потребления контента пользователь начинает знакомство с сайтом с шапки.Ваша задача — привлечь внимание посетителя и показать предварительную информацию за 3-4 секунды.

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

Что может включать заголовок?

В зависимости от размера и специфики сайта заголовок может включать следующие элементы:

Основные элементы заголовка

Логотип компании

Это важный элемент фирменного стиля.Логотип должен быть виден. Оптимальное место — левый угол. Логотип не должен занимать более 20-25% площади заголовка. Обычно логотип — это ссылка на главную страницу.

Информация о компании

У посетителя есть определенные ожидания при переходе на сайт. Он должен понимать, что попал в нужный ресурс. Данные расположены рядом с логотипом. Это поле подходит для уникального торгового предложения. Крупные интернет-магазины пользуются кнопкой «Каталог». Так пользователь понимает, что может оформить заказ на сайте.

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

Располагается справа или по центру. Здесь находится основной телефон отдела продаж. Для других номеров есть страница контактов. Для интернет-магазинов это должен быть номер бесплатной горячей линии.

В мобильной версии нужно использовать ссылку для набора номера, а не просто картинку с цифрами.

Корзина (личный кабинет, список желаний)

Эти элементы должны быть в шапке интернет-магазина. Главное, чтобы они органично вписывались в дизайн и не перегружали шапку.

Дополнительные элементы заголовка

Часы работы

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

Адрес компании

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

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

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

Панель поиска

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

Лозунги и цитаты

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

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

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

Главное правило шапки — не перегружать информацией. Большое количество элементов рассеивает внимание пользователей.

Перед тем, как разработать заголовок вашего веб-сайта, посоветуйтесь с вашими маркетологами. Это серьезное решение!

Требования к дизайну шапки сайта

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

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

Контакты должны быть интерактивными.Щелчок по контактам должен сделать звонок или открыть почтовый клиент в мобильной версии.

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

Заголовок не должен содержать много графических элементов и анимации. Страница должна загрузиться за 3 секунды — задержка раздражает посетителей. Лучше использовать возможности HTML и CSS для оптимизации веса страницы.
Не используйте одинаковые заголовки h2 на всех страницах вашего сайта. Так вы затрудняете поисковым системам поднять ресурс в поисковой выдаче. Создавайте уникальные метатеги, соответствующие содержанию страницы.
Меню должно быть в виде текста. От любых вариантов с флеш-анимацией и графикой следует отказаться. Вы должны иметь возможность вносить изменения самостоятельно без помощи разработчиков и дизайнеров.
Заголовок играет важную роль, но является основным содержимым сайта.Поэтому для новостных или информационных порталов допустимая высота заголовка 100-200 пикселей. Корпоративные ресурсы, Landing Page и сайты-визитки могут иметь высоту заголовка 300-500 пикселей.
Используйте корпоративные цвета для дизайна заголовка. Помните, что сегмент B2B должен выбирать приглушенные тона: серо-голубой, серый, белый и другие цвета.

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

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

Размер шрифта основного текста должен быть 16 пикселей. Для фонового текста, заголовков полей и изображений используйте несколько меньших размеров: 13 пикселей или 14 пикселей.

Изменение элементов шапки веб-сайта | Документация Plesk Onyx

Шапка сайта состоит из следующих элементов:

Баннеры . В шапке может быть один или несколько баннеров область, в зависимости от выбранного шаблона оформления.
С баннером можно сделать следующее:
- Загрузите собственное изображение баннера или Flash-файл в формате SWF.
- Выберите и примените баннер из библиотеки Presence Builder.
- Добавьте текст для отображения на баннере.
- Удалите баннер и используйте фон, заполненный цветом или картинки.
- Удалите баннер и все остальные элементы из области заголовка, чтобы уменьшите его высоту до 25 пикселей.
- Переместите баннер в область содержимого и вставьте его в определенное страницу или на все страницы сайта.
Логотип . С логотипом можно сделать следующее:
- Загрузите собственное изображение логотипа или Flash-файл в формате SWF.
- Переместите логотип из области заголовка в другие части веб-страниц, такие как боковые панели и область содержимого.
- Вставьте любое количество изображений логотипа на весь сайт ( ДИЗАЙН ) области.
- Измените размер логотипа, указав нужные размеры в пикселях, или перетаскивая стороны и углы изображения мышью указатель.
- Удалить логотип.
Имя сайта . Обычно содержит название компании или краткое описание сайта. описание, например, «Рецепты Джона Доу».
Слоган сайта . Обычно это включает описание вашего сайта или слоган компании.

Для изменения изображения баннера или других элементов (логотипа, названия сайта, слогана, или текст):

Щелкните изображение баннера.
Щелкните миниатюру в меню Список изображений.
Выполните любое из следующих действий:
- Чтобы использовать изображение из библиотеки, выберите его. Чтобы найти соответствующие изображения, введите ключевое слово в поле ввода. Чтобы скрыть изображения, которые не соответствует цветовой гамме сайта, выберите Подходит по цветовая схема флажок.
- Чтобы использовать собственное изображение или файл Flash в формате SWF, нажмите Загрузите и выберите файл, который хотите использовать.Картинки должны быть в форматах GIF, JPEG и PNG, желательно не шире более 900 пикселей.
- Чтобы удалить изображение, выберите параметр Нет изображения .
Если вы хотите изменить размер баннера, перетащите значок вверх или вниз.
В разделе Показать элементы баннера установите соответствующие флажки к элементам, которые вы хотите показать.
Если вы хотите удалить изображение логотипа или загрузить свой собственный логотип, нажмите кнопку изображение логотипа.
Если вы хотите изменить название сайта, слоган или текст, нажмите кнопку соответствующие поля на баннере и измените их по своему усмотрению.
Чтобы было легче увидеть название или слоган сайта, выберите значок Контур флажок. Это добавляет черный или белый контур вокруг текста, один пиксель в ширину. Если цвет шрифта в заголовке или слогане сайта черный, то контур белый, и наоборот.
Обратите внимание, что вы можете свободно перемещать блоки с названием веб-сайта, описание, логотип и текст в области баннера.

Если вы время от времени удаляете баннер, вы можете вставить его снова.

Чтобы удалить баннер:

Щелкните изображение баннера и щелкните Удалить .

Чтобы вставить баннер:

Перейдите на вкладку Модули , выберите Баннер и перетащите модуль на место, где вы хотите добавить его.

Чтобы вставить логотип:

Перейдите на вкладку Модули , выберите Логотип сайта и перетащите модуль в место, куда вы хотите добавить его.Вы можете загрузить новое изображение логотипа или Flash-файл в формате SWF и выровняйте его по левому краю, по центру или правильно.

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

Примечание: При изменении размера изображения с помощью указателя мыши параметр сохранить исходное соотношение сторон отключается автоматически.

Создание эффективного заголовка веб-сайта

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

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

Вы не поверите, но на самом деле существует всего два основных этапа планирования заголовка вашего сайта. Ваша основа будет вашим брендом; стены и крыша удобны.

Брендинг

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

Стайлинг

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

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

Что включить

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

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

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

Удобство использования

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

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

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

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

Информация

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

Завершение шапки сайта

Теперь у вас есть отличный заголовок, полный всех этих элементов, но есть последний вопрос, который нужно задать себе, прежде чем добавлять его на свой веб-сайт. И этот вопрос: Мешает?

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

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

Теперь вы готовы к работе!

Дополнительные идеи см. в образцах

Bourn Creative: рекомендации по брендингу

Строка 25: 50 креативных дизайнов

Журнал Top Design: 55 выдающихся работ

Узнайте больше об оптимизации вашего веб-сайта

Загрузите нашу электронную книгу о том, как максимально эффективно использовать свой веб-сайт.

4 совета, как сделать заголовок веб-сайта более привлекательным • Silo Creativo

89 $
Все наши премиальные темы в наборе тем

Посмотреть темы
Поскольку мы искали, как сделать ваш заголовок более креативным в соответствии с современными тенденциями, я уверен, что вы уже выбрали то, что лучше всего подходит для вас. Заголовок является одним из мест на веб-сайте с большим трафиком и используется для создания первого впечатления. Это один из элементов, который мы должны тщательно изучить, чтобы он оказался в нашу пользу.
Варианты разнообразны, и каждый должен выбрать то, что лучше всего подходит для вашего веб-сайта и вашей аудитории. Но сегодня мы пойдем еще дальше и рассмотрим советов, которые сделают ваш заголовок лучшим элементом для привлечения вашей аудитории. Начнем! 😉
1. Не забывайте: это ваше сопроводительное письмо
Мы не устаем повторять, что заголовок — это сопроводительное письмо , первое, что видит посетитель при заходе на сайт и на что ставит акцент, поэтому есть элемент, который всегда должен включать: ваше имя или логотип .В противном случае вы потеряете возможность контекстуализировать посетителя.
Если вы попадаете в сеть, вы влюбляетесь в изображения, но потом не помните, где вы были… Ошибка! Подумайте о тех случаях, когда вы не помните название того веб-сайта, который вам понравился, и еще реже, если вы заходите на него впервые. Как и в любой физической презентации, первое, что мы должны сделать, это представить себя, назвать свое имя, поэтому не забудьте сделать это и на цифровых носителях.
2. Начальная точка навигации
Как уже упоминалось, заголовок — это первый элемент, обнаруженный при посещении веб-сайта , и, следовательно, это также точка, с которой наши пользователи начинают перемещаться по нему. Таким образом, навигация должна восприниматься . Если мы заходим на страницу и находим картинку в шапке, но не знаем, делаем ли мы прокрутку, будет ли отображаться меню при клике слева или справа или вдруг появится по волшебству… Ваш сайт будет запомнился как хороший заголовок, но только для этого , потому что посетители не могут взаимодействовать или перемещаться и, следовательно, уйдут.
Поэтому очень важно, чтобы меню или, по крайней мере, способ навигации распознавались в заголовке сети . Мы должны знать, как мы можем продолжать просматривать его. Это одна из причин, почему меню гамбургеров стало популярным. Это осторожно; он занимает абсолютно необходимое пространство и является легко узнаваемым всеми элементом.
3. Создайте свой фокус
Независимо от того, какой вариант вы выбрали: дизайн, изображения, шрифты… Заголовок всегда будет в центре внимания Интернета, что делает его лучшим местом для размещения призыва к действию и преобразования вашей аудитории. Подумайте, для чего предназначен ваш сайт, и используйте шапку для достижения своих целей.
Все паутины создаются по какой-то причине, поэтому очень важно знать эту причину и сделать так, чтобы ваш заголовок помогал ее достичь. Это лучшее место для введения хотя бы одного из следующих элементов:
Подписка на рассылку новостей: лучшее место, где пользователь может войти в систему. Пользователь только что пришел, и если мы сможем его поймать… поставьте нам точку! Если у вас есть блог и всегда без спама, подписка на рассылку новостей является одним из элементов, которые заставят нас расти, так что лучше поместить это в шапку!
Если на днях мы рекомендовали использовать шрифты и цвета вашего логотипа для передачи чувств, то сегодня мы предлагаем то же самое с заголовком. Это лучшее место для передачи ощущений. Изображения здесь имеют фундаментальное значение: хороший выбор изображений сделает нас более успешными, но это также работает с цветами и шрифтами. Давайте изучим, что они представляют, и давайте использовать их в нашем заголовке.
Точно так же, если вы хотите ввести небольшой вступительный текст, это ваше место. Но будь осторожен! Мы не говорим о написании романа. Остерегайтесь длины. Это произведет больший эффект, если оно будет кратким и прямым.Это лучшее место в сети, где можно в двух словах рассказать, чего вы хотите.
4. Но главное… Не отвлекайтесь!
Мы уже создали фокус, посетитель начинает взаимодействовать с сетью, так что не отвлекайтесь! Все элементы, являющиеся аксессуарами, могут сбить с толку посетителя, поэтому удалите их.
Все элементы, содержащиеся в заголовке, должны быть четкими и лаконичными и должны ли они быть неспроста.
No related posts.

alexxlab

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное