Узкий баннер над шапкой отображается на всех страницах сайта и помогает привлечь дополнительное внимание к акциям, распродажам и другой важной информации.
Примеры баннеров над шапкой сайта
Внимание: мы создали новый интерфейс управления баннерами и постепенно обновляем магазины наших клиентов.
Далее приводятся инструкции как для старого, так и для нового интерфейсов.
Как добавить баннер над шапкой
Новый интерфейс:
Перейдите в раздел Сайт → Баннеры, на вкладку Баннер над шапкой и нажмите + Новый баннер.
Настройте содержание баннера и нажмите Сохранить.
Особенности некоторых настроек:
Высота — высота баннера: S (30 пикселей), M (40 пикселей) или L (50 пикселей). В мобильной версии высота автоматически увеличивается, если текст на баннере не помещается в одну строку — для этого необходимо загрузить фоновое изображение с запасом по высоте.
Отображать баннер на версии сайта — показывать баннер только на десктопной версии, только на мобильной или везде.
Кнопка «Закрыть» — если эта функция включена, посетитель сайта сможет скрыть
баннер, после чего он больше не появится.
Текст — текст на баннере, поддерживает HTML и CSS.
Старый интерфейс:
Перейдите в раздел Сайт → Баннеры и нажмите кнопку Добавить.
В поле Страница выберите Все страницы.
Настройте содержание баннера и нажмите Сохранить.
Особенности некоторых настроек:
Изображение — картинка для фона, размещается по центру баннера, на узких экранах обрезается.
Текст — текст на баннере, поддерживает HTML и CSS.
Высота — высота баннера: 30, 40 или 50 пикселей. На мобильной версии высота автоматически увеличивается, если текст на баннере не помещается в одну строку — для этого нужно загрузить фоновое изображение с запасом по высоте.
Отображать баннер на версии сайта — показывать баннер только на десктопной версии, только на мобильной или везде. Используйте эту настройку, чтобы создать два разных баннера под каждую версию сайта.
Отображать кнопку закрытия — если включено, посетитель сайта сможет скрыть баннер, после чего он больше не появится.
Баннер на мобильной версии
На мобильной версии баннер отображается под шапкой: он остается заметным, а шапка не смещается с привычного для пользователя места на экране. Это важно для комфортного пользования сайтом.
Проектируя баннер, позаботьтесь о том, чтобы он был понятным и читабельным на мобильной версии. Рекомендуем несколько вариантов решения этой задачи.
Задайте контент баннера текстом. На мобильной версии текст не обрежется, а перенесется на новую строку. При этом баннер может увеличиваться по высоте, если фоновое изображение загружено с запасом.
Спроектируйте макет так, чтобы важный контент умещался в ширину экрана смартфона. Изображение обрежется по бокам, но контент останется читабельным.
Создайте отдельный баннер для мобильной версии. В настройках этого баннера укажите, чтобы он отображался только на мобильной версии, а оригинальный баннер — только на десктопе (настройка Отображать баннер на версии сайта).
Порядок отображения баннеров
Над шапкой может отображаться только один баннер — тот, у которого самый высокий порядок отображения в разделе Сайт → Баннеры → Баннер над шапкой (в старом интерфейсе — Сайт → Баннеры) в админке.
Но если у первого по приоритету баннера включена кнопка закрытия, тогда после скрытия этого баннера посетитель сайта увидит следующий (после перезагрузки страницы или перехода на другую страницу).
