Баннеры

В системе 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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;imgh=215" alt="" title="">
	   <div class="banners__link banners__link-rectangle banners__link-rectangle_top">Аккумуляторы</div>
	</a>
</div>

  • Изображения для баннеров добавляются средствами 1С. В форме выбора изображения укажите класс css .banners__img, а также размеры самого изображения, согласно выбранным классам ширины и высоты.

Статические баннеры в типовом дизайне

Для типового дизайна рекомендуются следующие размеры: 430px x 445px, 215px x 215px, 430px x 215px.

Для верстки баннеров типового дизайна используется: дополнительный контейнер .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" выберите тип ссылки, которая будет содержаться в баннере.

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

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

Если Вы хотите, чтобы пользователь, кликнув по баннеру, перешел на другой сайт, то выберите тип ссылки Строка и вставьте ссылку в поле URL.

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

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

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

Пример добавления динамического баннера на примере типового дизайна

Ниже описан порядок добавления динамического баннера в Zeta Web 2.x.

  • За отображение динамических баннеров отвечает переменная 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 → Панель управления "Контент" → вкладка Информационные блоки и баннеры

PreviousИнформационные блоки, баннеры, опросыNextНаполнение слайдера на главной странице

Last updated