К основному содержимому
Все коллекцииСтраницы сайтаБаннеры
Баннер на главной странице сайта
Баннер на главной странице сайта

Размещение и настройка баннеров на главной странице сайта, изменение типа, размещения и порядка отображения баннеров

Обновлено более 5 мес. назад

Каждый баннер занимает на странице свой блок — баннерную линию. Для каждой баннерной линии необходимо определить ее расположение на странице и тип баннера, который будет в ней находиться.

На Главной странице сайта нет ограничений по количеству баннерных линий и их расположению, что позволяет сделать главную страницу сайта информативной и привлекательной для покупателей. Учитывайте, что большое количество баннеров может привести к медленной загрузке страницы, поэтому тщательно обдумывайте, какие именно изображения необходимы.

Для размещения баннера на главной странице нужно:

  1. Определить, какие баннеры вы хотите выводить на главной странице.

  2. Если необходимо, создать новые линии или изменить существующие.

  3. Подготовить изображения правильного размера для каждого баннера.

  4. Загрузить изображения, настроить и активировать баннеры в админке.

Подготовка баннерных линий для загрузки баннеров

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

Пример баннерных линий на главной странице

Пример баннерных линий на главной странице — Хорошоп

Пример отображения баннеров в шаблоне Shaniya из галереи дизайнов:

  • Баннерная линия 1: wideblock, размер L;

  • Баннерная линия 2: 3х, размер M, отступы: S, скругления: S;

  • Баннерная линия 3: 2х, размер: M, отступы: S, скругления: S;

  • Баннерная линия 4: block, размер: L.

Другие комбинации баннеров вы можете увидеть в нашей галерее дизайнов.

Создание или изменение баннерных линий

Для создания новых баннерных линий, изменения параметров баннеров в уже существующих линиях или смены их расположения перейдите в раздел админ панели Сайт Дизайн Редактор дизайна и разверните пункт Главная страница. Нажмите Добавить баннер или разверните существующую баннерную линию и задайте необходимые параметры баннера. Предварительный просмотр в редакторе дизайна позволяет сразу оценить внесенные изменения.

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


Подготовка изображений для баннеров

Для корректного отображения баннеров изображения должны соответствовать следующим требованиям:

  • Размер изображения должен полностью соответствовать выбранному типу и размеру баннера.

  • Изображение должно быть в формате jpeg или png.

  • Если вы выбрали баннер cover, то стоит оставлять отступ от левого и правого края 500px, а важную информацию размещать по центру.

  • Если вы выбираете настройки с отступами, при подготовке изображения необходимо предусмотреть, что 10-15 пикселей от края будут перекрыты отступом.

  • Изображения должны быть высокого качества.


Настройка и включение баннеров на сайте

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

  1. Перейдите в раздел Баннеры и нажмите кнопку Добавить.

  2. В поле Страница выберите Главная.

  3. В поле Расположение выберите нужную баннерную линию.

  4. Убедитесь что в поле Шаблон выбран тип Картинка.

  5. Загрузите файл с баннером в поле Изображение, установите ссылку и дополнительные настройки при необходимости.

  6. Отметьте чекбокс Включить и нажмите Сохранить.

Ссылки

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

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

  • Своя ссылка — в таком случае вы можете указать во второй части поля ссылку на произвольную страницу (как на сайте, так и в других источниках).

Если по клику на баннер покупатель должен попадать на страницу конкретного товара на сайте либо на страницу с результатами фильтрации, необходимо выбрать Своя ссылка и вписать во вторую часть поля относительную ссылку (без домена).

Если по клику на баннер покупатель должен попадать на страницу другого сайта, ссылка должна быть абсолютной (например, https://horoshop.ua/functions/)

Баннеры для разных языковых версий сайта

Для каждой языковой версии сайта можно загружать разные изображения, задать разные ссылки и прописать соответствующие метатеги alt и title.

Баннеры для разных языковых версий сайта — Хорошоп

Обратите внимание:

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

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

Создание Слайдера (сменяющиеся изображения)

Для баннеров типа block, wideblock, cover, blockplus (только большой баннер) можно настроить слайдер — автоматически сменяющиеся с определенной периодичностью изображения.

Слайдер (сменяющиеся изображения) — Хорошоп

Для настройки слайдера необходимо создать несколько баннеров для одной баннерной линии.

Порядок отображения баннеров в линии

Порядок вывода баннеров в слайдере и в линии с несколькими баннерами определятся их последовательностью в списке в разделе Баннеры.

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

Порядок отображения баннеров в линии — Хорошоп

Читайте также

Нашли ответ на свой вопрос?