Дизайн шапки

​​Статья касается шапки сайта или интернет-магазина. 

У лэндингов шапка настраивается иначе

Чтобы изменить шапку на сайте в основном меню стоит выбрать  пункт "Дизайн - "Дизайн шапки". 

На текущий момент предоставляется 16 вариантов оформления шапки.

Чтоб выбрать шапку нужно нажать на синюю иконку текущего варианта шапки

В появившемся окне выбрать при помощи стрелок подходящий вариант оформления шапки.

Для того, чтоб использовать эту шапку нужно нажать "Использовать"

Кратко о функциях в шапках: 

  • Описание в шапках: №1, №2, №3, №4, №5, №10, №13, №14
  • Один телефон в шапках: №4, №5, №7, №8, №10, №11, №12 
  • Три телефона в шапках: №13, №14
  • Поиск в шапках: №7, №11, №12, №13, №14, №15
  • Меню бургер в шапках: №6, №9
  • Корзина в шапках: во всех кроме 9. Корзину можно скрыть в любой шапке.
  • Социальные сети в шапках: №12
  • Два меню в шапках: №7,  №9, №11, №15
  • Закрепить шапку поверх контента или зафиксировать на экране: №6, №8, №9, №14(только номера телефонов)
  • Форма обратного звонка в шапках: №5, №10, №12

Подробнее о каждый шапке:

Шапка №1

Особенности шапки:

  • Информация в шапке размещается по центру
  • В качестве логотипа можно использовать изображение или текст
  • Подпись под логотипом 
  • Корзина, в правой части шапки с возможностью изменить цвет или скрыть 
  • Разделитель между шапкой и навигацией. Цвет можно изменить или убрать разделитель вовсе
  • Настройки навигации в отдельном меню "Дизайн" - "Навигация"
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Возможность выравнивания навигации по левому краю
  • Изменяемый фон кнопок навигации при наведении курсора
  • Выпадающее меню для пунктов подменю
  • Возможность задать разный фон для шапки и навигации

Шапка №2

Особенности шапки:

  • Информация в шапке размещается по левому краю
  • В качестве логотипа можно использовать изображение или текст
  • Подпись под логотипом 
  • Корзина в правой части шапки с возможностью изменить цвет или скрыть 
  • Разделитель между шапкой и навигацией. Цвет можно изменить или убрать разделитель вовсе
  • Настройки навигации в отдельном меню "Дизайн" - "Навигация"
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Возможность выравнивания навигации по центру 
  • Изменяемый фон кнопок навигации при наведении курсора
  • Выпадающее меню для пунктов подменю
  • Возможность задать разный фон для шапки и навигации
  • Разница в шапкой №3 в размещении подписи около логотипа

Шапка №3

Особенности шапки:

  • Информация в шапке размещается по левому краю
  • В качестве логотипа можно использовать изображение или текст
  • Подпись справа от логотипа 
  • Корзина в правой части шапки с возможностью изменить цвет или скрыть
  • Разделитель между шапкой и навигацией. Цвет можно изменить или убрать разделитель вовсе
  • Настройки навигации в отдельном меню "Дизайн" - "Навигация"
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Возможность выравнивания навигации по центру 
  • Изменяемый фон кнопок навигации при наведении курсора
  • Выпадающее меню для пунктов подменю
  • Возможность задать разный фон для шапки и навигации
  • Разница в шапкой №2 в размещении подписи около логотипа

Шапка №4

Особенности шапки:

  • Подпись в левом краю шапки
  • В качестве логотипа можно использовать изображение или текст
  • Телефон и подпись к нему
  • Корзина, с возможностью изменить цвет или скрыть 
  • Разделитель между шапкой и навигацией. Цвет можно изменить или убрать разделитель вовсе
  • Настройки навигации в отдельном меню "Дизайн" - "Навигация"
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Возможность выравнивания навигации по левому краю
  • Изменяемый фон кнопок навигации при наведении курсора
  • Выпадающее меню для пунктов подменю
  • Возможность задать разный фон для шапки и навигации

Шапка №5

Особенности шапки:

  • Логотип и подпись в левом краю шапки
  • В качестве логотипа можно использовать изображение или текст
  • Подпись под логотипом
  • Телефон и подпись к нему
  • Кнопка заказа обратного звонка
  • Корзина, с возможностью изменить цвет или скрыть 
  • Разделитель между шапкой и навигацией. Цвет можно изменить или убрать разделитель вовсе
  • Настройки навигации в отдельном меню "Дизайн" - "Навигация"
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Возможность выравнивания навигации по центру
  • Изменяемый фон кнопок навигации при наведении курсора
  • Выпадающее меню для пунктов подменю
  • Возможность задать разный фон для шапки и навигации

Шапка №6

Особенности шапки:

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

Шапка №7

Особенности шапки:

  • Информация в шапке размещается по левому краю
  • В качестве логотипа можно использовать изображение или текст
  • Два навигационных меню
  • Пункты верхнего меню подсвечиваются при наведении курсора
  • Настройки верхней навигации в том же меню
  • Поле поиска по каталогу
  • Телефон и подпись к нему
  • Корзина, с возможностью изменить цвет иконки, текста, фона или скрыть 
  • Пункты меню могут быть как на плитке выбранного вами цвета(в примере), так и без нее
  • Разделитель в виде точки между пунктами меню в варианте без фона пункта навигации
  • Изменяемый фон кнопок основной навигации при наведении курсора
  • Настройки главной навигации в отдельном меню "Дизайн" - "Навигация"
  • Выпадающее меню в обеих навигациях для пунктов подменю
  • Разный фон для шапки и навигации

Шапка №8

Особенности шапки:

  • Информация в шапке размещается по левому краю
  • Пункты меню подсвечиваются при наведении курсора
  • В качестве логотипа можно использовать изображение или текст
  • Телефон
  • Корзина, с возможностью изменить цвет иконки, текста, фона или скрыть 
  • Настройки основной навигации в отдельном меню "Дизайн" - "Навигация"
  • Выпадающее меню для пунктов подменю
  • Шапку можно закрепить и/или поставить поверх контента

Шапка №9

Особенности шапки:

  • Информация в шапке размещается по правому краю
  • Два навигационных меню. Дополнительное (скрыто в "бургере") и главное (в правом краю шапки)
  • Пункты главного меню подсвечиваются при наведении курсора
  • Выпадающее главное меню для пунктов подменю
  • В качестве логотипа можно использовать изображение или текст
  • Шапку можно закрепить и/или поставить поверх контента

Шапка №10

Особенности шапки:

  • Информация в шапке размещается в три столбика
  • В качестве логотипа можно использовать изображение или текст
  • Подпись справа от логотипа
  • Телефон и форма заказа обратного звонка
  • Корзина, с возможностью изменить шрифт, цвет иконки, текста, фона или скрыть 
  • Навигационное меню с возможностью обводки
  • Настройки основной навигации в том же меню
  • Выпадающее меню для пунктов подменю
  • Разный фон для шапки и навигации

    Шапка №11

    Особенности шапки:

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

    Шапка №12

    Особенности шапки:

    • Информация в шапке разделена на 5 столбиков
    • В качестве логотипа можно использовать изображение или текст
    • Поле поиска по каталогу
    • Телефон и подпись к нему
    • Форма заказа обратного звонка
    • Иконки на социальные сети
    • Корзина, с возможностью изменить цвет иконки, текста или скрыть 
    • Настройки главной навигации в том же меню
    • Выпадающее меню для пунктов подменю
    • Возможность отделить навигацию от шапкой обводкой

    Шапка №13

    Особенности шапки:

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

    Шапка №14

    Особенности шапки:

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

    Шапка №15

    Особенности шапки:

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

    Шапка №16

    Особенности шапки:

    • Полное ее отсутствие