1. aspro.ru
  2. Аспро: Лайтшоп
  3. Главная страница
  4. Большие баннеры на главной странице
  5. Создание и редактирование больших баннеров

Создание и редактирование больших баннеров


Создавать и редактировать большие баннеры на главной странице можно двумя способами:

  • через виджет в публичной части;
  • в административном разделе.

Рассмотрим каждый вариант подробнее.

Виджет в публичной части

Включите режим правки, переведите курсор на область баннера. Для создания нового баннера нажмите кнопку «Добавить баннер» (1). Чтобы отредактировать уже существующий баннер, нажмите «Изменить баннер» (2).

1c2f5517-7b5d-11f1-8fe4-fa163e2ff576

Административная панель

В административной панели для создания и редактирования баннеров необходимо перейти в Контент (1) → Реклама (aspro.lite) (2) → Большие баннеры (3).

207e71f8-7b63-11f1-8fe4-fa163e2ff576

Для создания нового баннера нажмите кнопку «Добавить баннер» (1). Чтобы отредактировать уже существующий баннер, нажмите на «Гамбургер» рядом с ним и выберите «Изменить» (2).

fbe2af7c-7b5b-11f1-8fe4-fa163e2ff576

Рассмотрим подробнее настройки баннера. На вкладке «Баннер» доступны поля:

b08d0c7d-7b5d-11f1-8fe4-fa163e2ff576

  • Активность (1), чтобы баннер отображался.
  • Название (2) — обязательное для заполнения поле. Его содержимое отображается на сайте как заголовок баннера.
  • Ссылка с баннера (3) — можно прописать url (абсолютный или относительный) страницы. Это сделает баннер кликабельным — при нажатии на него пользователь перейдет на заданную страницу.
  • Заголовок баннера h1 (4) — назначить заголовку баннера мета-тег h1 для использования в SEO.

На вкладке «Картинки» можно загрузить активную картинку (1) и фоновую (2). Если фоновая картинка будет не загружена, то баннер будет располагаться на сером фоне. Картинки загружаются отдельно для высоких, обычных и низких баннеров.

4127c84a-7b62-11f1-8fe4-fa163e2ff576

На этой же вкладке в разделе «Низкий баннер» можно загрузить изображение в поле «Картинка для <768px». Эта картинка предназначена для мобильных устройств и не предусматривает вывод заголовка и текста баннера. Подробнее об этом читайте в статье про мобильные баннеры.

dfe63cc6-7b5c-11f1-8fe4-fa163e2ff576

На вкладке «Текст» доступны следующие поля:

7a07ae3e-7b62-11f1-8fe4-fa163e2ff576

  • Текст баннера (1) — можно назначить расположение текста относительно картинки.
  • Центрировать текст (2) — выравнивание текста по центру.
  • Цвет шапки и текста (3) — установить светлый или темный цвет текста.
  • Затемнение/засветление (4) — включить затемнение или засветление для текста на баннере.
  • Описание (5) — можно написать текст для баннера, который будет отображаться под заголовком.

На вкладке «Кнопки» доступны следующие поля:

b9ccc3f7-7b63-11f1-8fe4-fa163e2ff576

  • Кнопка 1 текст (1) — подпись для кнопки на баннере.
  • Кнопка 1 класс (2) — кнопка может быть залитая, полупрозрачная и прозрачная с бордером.
  • Кнопка 1 цвет (3) — назначить цвет для кнопки. Это может быть цвет темы или любой другой цвет на выбор.
  • Кнопка 1 ссылка (4) — установить ссылку перехода на заданную страницу при нажатии на кнопку.
  • Код формы для первой кнопки (5) — используется, если нет ссылки. При нажатии на кнопку открывается определенная форма. Например, задать вопрос или зарегистрироваться на сайте.
  • Точно такие же функции, как у первой кнопки, вы можете настроить и для второй кнопки (6).


На вкладке «Видео» доступны следующие поля:

1f32d06e-7b63-11f1-8fe4-fa163e2ff576

  • Показывать видео (1), чтобы видеоролик можно было воспроизводить на баннере.
  • Текст кнопки воспроизведения видео (2) — подпись кнопки для запуска видео.
  • Класс кнопки воспроизведения видео (3) — кнопка может быть залитая и прозрачная с бордером.
  • Цвет кнопки воспроизведения видео (4) — назначить цвет для кнопки. Это может быть цвет темы или любой другой цвет на выбор.
  • Настройки видео (5) — есть возможность включить автовоспроизведение, повтор, заполнение по размеру и отключение звука у видео.
  • Источник видео (6) — выбрать способ привязки видео: из файла или по HTML-коду.
  • Ссылка на видео (7) — HTML-код с ссылкой на видеоролик. Можно привязать ролик с YouTube.
  • Файл видео (8) — загрузить файл с видео в систему.

На вкладке «Связи» можно назначить регион показа баннера.

b44e866e-7b5c-11f1-8fe4-fa163e2ff576

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

c8ba209a-7b5f-11f1-8fe4-fa163e2ff576

Предыдущая статья Настройки оформления блока «Большие баннеры» на главной
Следующая статья Настройки анимации и слайд-шоу у больших баннеров