Функционал

1. Что такое Главный внутренний баннер, для чего он нужен и как допустимо им пользоваться?

2. Проверка наличия на сайте функционала для работы на сайте главного внутреннего баннера.

3. Действия пользователей по добавлению функционала для работы на сайте Главного внутреннего баннера.

4. Использование функционала Главного внутреннего баннера

1. Главный внутренний баннер представляет собой невысокий но широкий баннер, размещаемый под Слайдером.

Главный внутренний баннер может использоваться (как и любой другой баннер) для размещения как статического изображения, так и для размещения динамического/интерактивного контента (например - счетчика обратного отсчета).

Предупреждаем - не нужно злоупотреблять Главным внутренним баннером:

делать больше одного активного Главного внутреннего баннера;
делать из него внешний баннер (т.е. баннер, переход с которого идет на внешний интернет-ресурс и тем самым заставляет посетителя покинуть ваш сайт)
расходовать его на "ерунду" (незначительное событие\мероприятие) - повод для его использования должен быть весомым!

так же:

если он используется для статического изображения - он обязательно должен быть кликабельным
если он используется для динамического изображения - желательно делать его кликабельным

Важно: совсем не обязательно, чтобы он присутствовал на сайте постоянно, и даже наоборот!!! Максимальный эффект от его наличия на сайте (посетители будут на него больше обращать внимания) будет только тогда, когда он будет появляться на сайте эпизодически - от случая к случаю - по важным поводам!

2. Чтобы проверить наличие на сайте функционала для работы Главного внутреннего баннера необходимо проверить наличие как минимум двух компонентов:

а) Содержание - Боксы - Бокс "Главный внутренний баннер"

б) Дизайн - Модули - Содержимое контейнеров - Модуль "Главный внутренний баннер"

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

3. Добавление функционала необходимого для работы на сайте Главного внутреннего баннера:

а) создайте новый бокс Содержание - Боксы - Бокс "Главный внутренний баннер"

banner1-1

б) создайте новый модуль Дизайн - Модули - Содержимое контейнеров - Модуль "Главный внутренний баннер" и установите в нем следующие свойства:

banner3

banner4

На вкладке "Обертка" в поля нужно добавить код. Обратите внимание, что он разный для разных шаблонов!

Для Шаблона 1, Шаблона 2

До:

<div id="main_banner" class="container">

После:

</div>

Для Шаблонов 3, 4, 5, 6, 9

До:

<div id="main_banner">

После:

</div>

Для Шаблона 7

До:

<div id="main_banner" class="section_block">

После:

</div>

Для Шаблона 8

До:

<div id="main_banner" class="panel block">

После:

</div>

Далее в "Формат вывода" нужно добавить код.

Обратите внимание: он разный для разных шаблонов!

Для Шаблона 1:

<div class="row">

<$IF(@anno = '')>
<a class="item banner">
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <img src="{@PREVIEW}" />
</a>
<$END_IF>

<$IF(@anno != '')>
<a class="item banner bg">
    <xsl:attribute name="style">background-image: url("<$ECHO(@PREVIEW)>");</xsl:attribute>
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <div class="content">
        <$IF(@anno !='')><div class="annotation"><$ECHO(@anno)></div><$END_IF>
        <$IF(@code !='')><$ECHO(@code)><$END_IF>
    </div>
</a>
<$END_IF>

</div>

Для Шаблона 2:

<div class="row">

<$IF(@anno = '')>
<a class="item section_box banner">
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <img src="{@PREVIEW}" />
</a>
<$END_IF>

<$IF(@anno != '')>
<a class="item section_box banner bg">
    <xsl:attribute name="style">background-image: url("<$ECHO(@PREVIEW)>");</xsl:attribute>
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <div class="content">
        <$IF(@anno !='')><div class="annotation"><$ECHO(@anno)></div><$END_IF>
        <$IF(@code !='')><$ECHO(@code)><$END_IF>
    </div>
</a>
<$END_IF>

</div>

Для Шаблонов 3, 4, 5, 6, 7, 9:

<div>

<$IF(@anno = '')>
<a class="item banner">
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <img src="{@PREVIEW}" />
</a>
<$END_IF>

<$IF(@anno != '')>
<a class="item banner bg">
    <xsl:attribute name="style">background-image: url("<$ECHO(@PREVIEW)>");</xsl:attribute>
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <div class="content">
        <$IF(@anno !='')><div class="annotation"><$ECHO(@anno)></div><$END_IF>
        <$IF(@code !='')><$ECHO(@code)><$END_IF>
    </div>
</a>
<$END_IF>

</div>

Для Шаблона 8:

<div>

<$IF(@anno = '')>
<a class="item panel-body banner">
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <img src="{@PREVIEW}" />
</a>
<$END_IF>

<$IF(@anno != '')>
<a class="item panel-body banner bg">
    <xsl:attribute name="style">background-image: url("<$ECHO(@PREVIEW)>");</xsl:attribute>
    <$IF(@link !='')><xsl:attribute name="href"><$ECHO(@link)></xsl:attribute><$END_IF>
    <div class="content">
        <$IF(@anno !='')><div class="annotation"><$ECHO(@anno)></div><$END_IF>
        <$IF(@code !='')><$ECHO(@code)><$END_IF>
    </div>
</a>
<$END_IF>

</div>

в) добавьте модуль "Главный внутренний баннер" в макет главной страницы, для Шаблонов 1-3, 5-9, непосредственно перед модулем "Внутренние баннеры (под слайдером)",

а в случае Шаблона 4 непосредственно перед модулем "Объявления на главной".

г) добавьте в конец файла CSS (Дизайн - Подключения - CSS - style.css) следующие строки:

для Шаблона 1:

/* главный внутренний баннер */
#main_banner {margin: 0 auto 20px;text-align: center;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.25em;line-height: 1.1;}

для Шаблона 2:

/* главный внутренний баннер */
#main_banner {text-align: center;}
#main_banner .section_box {display: inline-block;vertical-align: top;padding: 0;overflow: hidden;max-width: 100%;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%; background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-weight: 500; font-size: 1.4em; line-height: 1.1;}

для Шаблона 3:

/* главный внутренний баннер */
#main_banner {text-align: center;margin: 0 auto 30px;}
#main_banner .banner {display: inline-block;max-width: 100%; position: relative;color: #111;text-decoration: none;background: #f5f5f5;border-radius: 3px;}
#main_banner .banner img {max-width: 100%; max-height: 100%; width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%; background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-weight: 500;font-size: 1.25em;line-height: 1.1;}

для Шаблона 4:

/* главный внутренний баннер */
#main_banner {text-align: center;margin: 0 auto 45px;}
#main_banner .banner {display: inline-block;max-width: 100%;position: relative;color: #111;text-decoration: none;background: #f5f5f5 url(/files/template4/img/tiled_bg.png) repeat 50% 50%;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-weight: 500;font-size: 1.25em;line-height: 1.1;}

для Шаблона 5:

/* главный внутренний баннер */
#main_banner {margin: 0 auto 30px;text-align: center;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.3em;line-height: 1.1;font-weight: 500;}

для Шаблона 6:

/* главный внутренний баннер */
#main_banner {margin: 0 auto 25px;text-align: center;padding: 0;max-width: 100%;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex;flex-flow: column;align-content: center;justify-content: center;width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 15px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.25em; font-weight: 500;line-height: 1.1;}

для Шаблона 7:

/* главный внутренний баннер */
#main_banner {margin: 0 auto 30px;text-align: center;padding: 0;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex;flex-flow: column;align-content: center;justify-content: center;width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.3em;line-height: 1.1;font-weight: 500;}

для Шаблона 8:

/* главный внутренний баннер */
#main_banner {text-align: center;}
#main_banner .banner {display: inline-block;max-width: 100%;position: relative;color: #111;text-decoration: none;padding: 0;border-bottom-style: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex;flex-flow: column;align-content: center;justify-content: center;width: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; vertical-align: top;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.4em;line-height: 1.1;}

для Шаблона 9:

/* главный внутренний баннер */
#main_banner {margin: 0 auto 30px;text-align: center;}
#main_banner .banner {display: inline-block; max-width: 100%;position: relative; color: #111;text-decoration: none;}
#main_banner .banner img {max-width: 100%; max-height: 100%;width: auto; height: auto;}
#main_banner .banner.bg {display: inline-flex; flex-flow: column; align-content: center; justify-content: center; width: 100%; background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
#main_banner .banner .content {margin: auto;padding: 30px;min-width: 100%;}
#main_banner .banner .annotation {font-size: 1.5em;line-height: 1.1;}

4. Выше мы рассмотрели добавление на сайт функционала Главного внутреннего баннера, это разовая задача. Если такой функционал реализован на сайте, то добавление на сайт непосредственно самого Главного внутреннего баннера дело обыденное и всем Вам должно быть уже давно знакомым.

Просто в Содержание - Боксы - Бокс "Главный внутренний баннер" создайте контейнер "Баннер":

дайте ему название (оно не будет выводится поверх изображения);
при необходимости вывода текста поверх изображения заполните поле "аннотация";
загрузите в него изображение;
укажите внутреннюю ссылку на сайт;
PROFIT!

Но это будет, хоть и не совсем обычный (по большому счету просто большего размера чем остальные баннеры), но все же заурядный статичный баннер. И для него Вы можете использовать любое подходящие изображение.

Если же Вам требуется динамический/интерактивный Главный внутренний баннер (например обратный отсчет) то для этого необходимо добавить еще в "Доп код" конкретного контейнера этого баннера соответствующий JavaScript (к сожалению чудес не бывает и магии кстати тоже, простите).

Пример JavaScript для реализации обратного отчета на Главном внутреннем баннере Вы можете посмотреть/скопировать в статье "Пример Главного внутреннего баннера со счетчиком обратного отсчета"

Справка по CMS "Веб-Мастерская"

Функционал

Добавление на сайт функционала Главного внутреннего баннера