Баннеры
В системе Zeta Web встречаются два вида баннеров:
Статические баннеры;
Динамические баннеры, созданные с помощью контрола.
Статические баннеры
Статические баннеры добавлены на страницу как код html, не управляются контролом и редактируются силами пользователя.
<div class="banners__container">
<div class="banners__row">
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
</div>
</div>
Структура блока баннера:
<div class="banners__container"><!-- контейнер для баннеров -->
<div class="banners__row"><!-- строка баннеров -->
<!-- баннер -->
<!-- .banners__item - класс блока баннера
.banners__item_w1 - баннер найменьшей ширины
.banners__item_h1 - баннер найменьшей высоты
.banners__inner - обертка
.banners__img - изображение баннера
.banners__link.banners__link-rectangle - заголовок в виде полосы
-->
<div class="banners__item banners__item_w1 banners__item_h1">
<a class="banners__inner" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
<!-- конец баннера -->
</div>
</div>
Строка баннеров .banners__row должна быть вложена в контейнер .banners__container.
В одну строку может поместиться 4 баннера наименьшего размера.
Классы управления размерами баннера:
Класс
Максимальная ширина
.banners__item_w1
max-width: 215px;
.banners__item_w2
max-width: 430px;
.banners__item_w3
max-width: 646px;
.banners__item_w4
max-width: 861px;
Класс
Максимальная высота
.banners__item_h1
max-height: 215px;
.banners__item_h2
max-height: 430px;
.banners__item_h3
max-height: 646px;
.banners__item_h4
max-height: 861px;
Необходимо использовать оба размера баннера: и ширину, и высоту.
<div class="banners__item banners__item_w2 banners__item_h1">
<a class="banners__inner" href="">
<img class="banners__img" src="/i/banner-5.png?imgw=430&imgh=215" width="430" height="215" alt="" title="">
</a>
</div>
Если баннер квадратный, используйте следующие классы:
Класс
Максимальная ширина
Максимальная высота
.banners__item_x1
max-width: 215px;
max-height: 215px;
.banners__item_x2
max-width: 430px;
max-height: 430px;
.banners__item_x3
max-width: 646px;
max-height: 646px;
.banners__item_x4
max-width: 861px;
max-height: 861px;
Если баннер по высоте занимает более одной строки, используйте дополнительный класс для задания высоты баннера с учетом отступа между строк баннеров.
Класс
Максимальная высота
.banners__item_r2
max-height: 445px;
.banners__item_r3
max-height: 661px;
.banners__item_r4
max-height: 876px;
Баннеру можно задать заголовок. Для использования заголовка в форме эллипса используйте классы: .banners__link-ellipse и .banners__link-ellipse_top, или .banners__link-ellipse_bottom.
<div class="banners__item banners__item_x2 banners__item_r2">
<a class="banners__inner" href="">
<img width="430" height="445" title="Баннер 1" class="banners__img" alt="Баннер 1" src="/i/banner-1.png?imgw=430&imgh=445">
<div class="banners__link banners__link-ellipse banners__link-ellipse_bottom">
Подробнее
<span class="icon-015 banners__icon"></span>
</div>
</a>
</div>
Для использования заголовка в виде полосы используйте классы .banners__link-rectangle и .banners__link-rectangle_bottom, или .banners__link-rectangle_top.
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_bottom">Аккумуляторы</div>
</a>
</div>
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-7.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">-10% на автохимию</div>
</a>
</div>
Для добавления границы для баннера используйте класс .banners__inner_border вместе с .banners__inner.
<div class="banners__item banners__item_x1">
<a class="banners__inner banners__inner_border" href="">
<img width="215" height="215" class="banners__img" src="/i/banner-6.png?imgw=215&imgh=215" alt="" title="">
<div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
</a>
</div>
Изображения для баннеров добавляются средствами 1С. В форме выбора изображения укажите класс css .banners__img, а также размеры самого изображения, согласно выбранным классам ширины и высоты.
Статические баннеры в типовом дизайне
Для верстки баннеров типового дизайна используется: дополнительный контейнер .banner-group для группировки баннеров в колонки с шириной 50%. Используйте собственные классы для построения необходимой сетки.
В 1С баннеры размещены в переменных banner-1 - banner-7 и собраны в переменную banner. Переменная banners размещена на главной странице.

Динамические баннеры
Для создания или изменения динамического баннера необходимо перейти в раздел "Баннеры".
Zeta Web 2.x
Zeta Web → Панель управления сайтом → вкладка Информационные блоки →вкладка Баннеры.
Zeta Web 3.x
Zeta Web → Панель управления "Контент" → вкладка Информационные блоки и баннеры.
В таблице по каждому баннеру приведен его код в системе, наименование, URL (веб-адрес страницы, на которую попадет пользователь при клике на баннер), даты начала и окончания размещения баннера на сайте, формат баннера и список страниц, на которых он отображается.

Параметры динамических баннеров
При создании нового баннера, задайте четыре группы параметров: - основные настройки, - настройки показа, - назначение, - картинку.
В поле Наименование укажите название баннера, которое будет отображаться в справочнике 1С.
В поле Комментарий (title) введите текст, который будет показан на сайте при наведении указателя мыши на баннер.
В поле Число показов задайте максимальное количество показов баннера на сайте, за весь период показа.
Задайте период показа в полях Дата начала показа и Дата окончания показа. Для указания даты нажмите на кнопку в правом углу поля и выберите нужное число в календаре.
В поле Вес присвойте баннеру его очередность появления на странице сайта. Если на одном рекламном месте отображается несколько баннеров по очереди, то первым будет отображаться баннер с наименьшим весом. Следовательно, чем больше абсолютное значение числа, указанного в поле Вес, тем дальше в очереди отображения на сайте будет помещен баннер. Например, если первому баннеру присвоен вес 200 единиц, а второму - 100, то на сайте будет сначала показан второй баннер, затем первый.
В поле Формат баннера откройте справочник форматов с помощью кнопки с тремя точками и выберите подходящий вариант. Информация о формате баннера задается для размещения его в правильном контроле на странице. Справочник форматов можно просмотреть, отредактировать и дополнить на вкладке Форматы.

В поле Группа страниц баннера выберите из справочника группу, содержащую список тех страниц, на которых будет отображаться баннер.
В поле URL с помощью кнопки с буквой "T" выберите тип ссылки, которая будет содержаться в баннере.

Далее нажатием на кнопку с тремя точками выберите страницу, на которую будет вести клик по этому баннеру.

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

Нажмите кнопку ОК, чтобы сохранить сделанные изменения и вернуться к списку баннеров, размещенных на сайте.
После создания динамического баннера размещаем его в переменной, области или на странице.
Пример добавления динамического баннера на примере типового дизайна
За отображение динамических баннеров отвечает переменная aside-banners во вкладке Наполнение сайта.

Эту переменную необходимо разместить через кнопку "Редактировать наполнение" в области, на которой должен отображаться этот баннер.

Далее - выполнить обмен с сайтом.
По данной инструкции динамический баннер отображается на сайте в левой области под меню.

Если на страницу добавляется более одного баннера, на этапе добавления в переменную, необходимо настроить "время обновления" баннера - время, с какой периодичностью будут меняться баннеры.
Для этого (на примере типового дизайна) нужно открыть переменную aside-banners, выделить контрол, через нажатие на кнопку с зеленым карандашом перейти в настройки котрола.
В настройках контрола - указать желаемое время в секундах.


Форматы баннеров
Раздел Форматы позволяет просмотреть и отредактировать справочник размеров баннеров, размещенных на сайте.
Zeta Web 2.x
Zeta Web → Панель управления сайтом → вкладка Информационные блоки →вкладка Баннеры→ вкладка Форматы.
Zeta Web 3.x
Zeta Web → Панель управления "Контент" → вкладка Информационные блоки и баннеры

Создайте новый формат с помощью строки контекстного меню Добавить или отредактируйте существующий формат, нажав дважды левой кнопкой мыши на наименование формата в списке. Далее заполните/измените данные в карточке формата баннера.
В поле Наименование введите любое название, по которому, впоследствии, сможете найти нужный формат баннера в списке.
В полях Ширина и Высота введите размеры баннера в пикселях.
Нажмите кнопку "ОК", чтобы сохранить все сделанные изменения и вернуться к справочнику форматов баннеров.
Статистика просмотров и кликов
Zeta Web 2.x
Закладка Просмотры и клики позволяет просматривать статистику показов динамических баннеров, уже размещенных на сайте, и количество кликов по ним.

Zeta Web 3.x
Пройдите в раздел Просмотры баннеров по ссылке меню Zeta Web → Панель управления "Контент" → вкладка Информационные блоки и баннеры
Last updated