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

Адаптивные баннеры на главной странице

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

В Аспро: Лайтшоп главный баннер подстраивается под размеры экрана. В решении доступно 3 вида отображения больших баннеров на мобильных устройствах:

  1. Без активной картинки — фоновая картинка адаптируется, активная скрывается.
  2. С полем снизу под заголовок и текст — баннер адаптируется при разрешении экрана менее 767 px. Текст переносится под картинку.
  3. Отдельная картинка — отображается отдельное адаптивное изображение, если разрешение экрана менее 767 px. Оно загружается в настройках баннера. Если у какого-то баннера не будет загружена отдельная картинка, то будет адаптироваться фоновая картинка. Обязательный формат для загрузки изображения — 736х506.

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

1. Баннер без активной картинки, где текст располагается поверх картинки.


2. Баннер, где текст отображается в блоке снизу. Отличный вариант, если на всех баннерах прописан цепляющий текст. При отсутствии текста отобразится пустой блок.


3. Баннер в виде отдельной картинки. Этот тип отображения подойдет, если у всех баннеров заполнено значение «Ссылка с баннера». Отобразится только картинка без текста и кнопок.


Чтобы выбрать тип отображения главного баннера, в административной части сайта перейдите в Аспро (1) → Аспро: ЛайтШоп (2) → Настройки (3) → Мобильная версия (4).


В поле «Тип главного баннера в мобильной версии» выберите нужный вариант и сохраните изменения.


Чтобы загрузить отдельное изображение, которое будет отображаться на экранах менее 767 px, нужно зайти в редактирование баннера. В административной части сайта перейдите в Контент (1) → Реклама (aspro.lite) (2) → Большие баннеры (3).


В строке с названием нужного баннера кликните на «Гамбургер», затем нажмите поле «Изменить».


Перейдите на вкладку «Картинки». Загрузите изображение в поле «Картинка для <768px» и сохраните изменения. Отметим, что размер картинки рекомендуется делать 736х506, чтобы изображение не было слишком тяжелым и не терялось качество.