Не хватает статьи или нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter

Большие баннеры

В решениях Аспро мы рекомендуем использовать составные баннеры. В статье рассказываем принцип их работы и почему мы работаем именно с ними.

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

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

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

Фоновое изображение

Занимает все поле баннера, но должно соблюдать безопасные зоны. Об этом написано далее.

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

Активная картинка

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

В высоту — от нижней границы до шапки сайта. На примере — синяя зона. Активная картинка «прилипает» к своему левому и нижнему краю. На примере — ярко-зеленая линия.

Рекомендуемый формат изображений для активной картинки — png.

1. С наездом на шапку

Высота фонового изображения зависит от уровней шапки. Вот как выглядит 3х-уровневая, 2х-уровневая и 1-уровневая шапка.

Также высота фона зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «С наездом на шапку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).

Высокий

Фоновое изображение

Ширина: 1920 px.

Высота:

Для 3х-уровневой шапки — 938 px.
Для 2х-уровневой — 887 px.
Для 1-уровневой шапки — 848 px.

Безопасная зона: 1020х760 px по центру снизу. Размер зоны от уровней шапки не зависит.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 759 px.

Обычный

Фоновое изображение

Ширина: 1920 px.

Высота:

Для 3х-уровневой шапки — 762 px
Для 2х-уровневой — 711 px
Для 1-уровневой шапки — 672 px

Безопасная зона: 1020х583 px по центру снизу. Размер зоны от уровней шапки не зависит.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 583 px.

Низкий

Фоновое изображение

Ширина: 1920 px.

Высота:

Для 3х-уровневой шапки — 634 px.
Для 2х-уровневой — 583 px.
Для 1-уровневой шапки — 544 px.

Безопасная зона: 1020х455 px по центру снизу. Размер зоны от уровней шапки не зависит.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 455 px.

2. Без наезда на шапку

Высота фонового изображения зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «Без наезда на шапку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).

Высокий

Фоновое изображение

Ширина: 1920 px.

Высота: 760 px.

Безопасная зона: 1020х760 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 786 px.

Обычный

Фоновое изображение

Ширина: 1920 px.

Высота: 584 px.

Безопасная зона: 1020х584 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 584 px.

Низкий

Фоновое изображение

Ширина: 1920 px.

Высота: 456 px.

Безопасная зона: 1020х456 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 456 px.

3. С баннерами сбоку

Размер фонового изображения зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «С баннерами сбоку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).

Также размер фонового изображения зависит от настройки отображения: На всю ширину или по ширине сайта.

На всю ширину

Высокий

Фоновое изображение

Ширина: 1436 px

Высота: 760 px

Безопасная зона: 744х760 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 760 px.

Дополнительные баннеры

Ширина 478 px

Высота: 380 px

Безопасная зона: 248х380 px по центру.

Обычный

Фоновое изображение

Ширина: 1436 px.

Высота: 584 px.

Безопасная зона: 744х584 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера

Высота: до 584 px.

Дополнительные баннеры

Ширина 478 px.

Высота: 292 px.

Безопасная зона: 248х292 px по центру.

Низкий

Фоновое изображение

Ширина: 1436 px

Высота: 456 px

Безопасная зона: 744х456 px по центру.

Активная картинка

Ширина: Размер зависит от творческого решения дизайнера.

Высота: до 456 px.

Дополнительные баннеры

Ширина 478 px.

Высота: 228 px.

Безопасная зона: 248х228 px по центру.