View source for Настройка ТГБ (нативные шаблоны)

В конструкторе нативных шаблонов можно выбрать один из готовых базовых шаблонов и кастомизировать его под Ваш дизайн.<br/>
<br/>
'''Адаптивный таргетинг дизайна'''
<br/>
Особенностью нашего конструктора является возможность таргетировать дизайны под разные разрешения экрана также как Ваш дизайн адаптируется под разрешения экранов пользователя.<br/>
<br/>
[[Файл:DisplayAds5.png|centre|frame]]
<br/>
По умолчанию новый шаблон будет показываться на всем диапазоне ширины экранов Ваших пользователей.<br/>
Но если Вы планируете, что для десктопных устройств блок должен быть горизонтальным (например 4 объявления в ряд), а для мобильных устройств становиться вертикальным (например, колонка из 2 объявлений), то вам достаточно сделать 2 шаблона, которые будут таргетированы на разрешение разрешения страниц ('''0 - 500px''' и '''500px - ∞''').<br/>
<br/>
==Сетка блоков==
<br/>
Сетка - это инструмент, определяющий, какое количество рекламных объявлений будет показано по горизонтали и по вертикали.<br/> 
Управляя ползунками, Вы можете определить то количество блоков, которое будет отображаться в рекламном блоке.<br/>
Помимо адаптивного таргетинга дизайнов, горизонтальная сетка блоков также является адаптивной. Это означает, что количество рекламных блоков по горизонтали будет зависеть от ширины обрамляющего контейнера и параметра “базовой ширины“ рекламного объявления, но не более максимального значения количества рекламных материалов по горизонтали.<br/>
<br/>
В области предпросмотра можно оценить, как блок будет отображаться в разных обрамляющих контейнерах. Для этого Вы можете указать ширины и высоту контейнера.<br/>
<br/>
[[Файл:DisplayAds6.png|centre|frame]]
<br/>
==Настройка блока==
<br/>
Во всех базовых дизайнах имеется стандартный набор настроек блока:<br/>
*Высота отступа<br/>
*Значение верхнего и нижнего отступа блока в px<br/>
*Ширина отступа<br/>
*Значение правого и левого отступа блока в px<br/>
Совокупность данных параметров аналогичны css свойству '''margin: высота_отступа ширина_отступа''';<br/>
*Скругление углов. Значение свойства css border-radius для всего рекламного блока.<br/>
*Цвета фона. Селектор выбора фона и его прозрачности для рекламного блока<br/>
*Маркировка рекламы. Селектор выбора маркировки рекламы, если установлен в значении включен, то на рекламных объявлениях будет добавлена фраза “Реклама” и добавлено меню с информацией о рекламодателе.<br/>
<br/>
==Заголовок==
<br/>
Включение данной настройки добавит логотип Kadam над рекламным блоком и позволит добавить над ним дополнительный текст.<br/>
<br/>
[[Файл:DisplayAds7.png|centre|frame]]
<br/>
*Текст заголовка. Дополнительный текст который будет добавлен над блоком слева<br/>
*Размер шрифта. Размер текста заголовка в px<br/>
*Цвет шрифта. Цвет шрифта текста заголовка<br/>
*Жирный шрифт. Переключатель размера шрифта<br/>
*Логотип. Активирует показ заголовка и позволяет выбрать, какой текст будет показываться рядом с логотипом Kadam<br/>
<br/>
==Настройка материала==
<br/>
Внешний вид рекламного объявления также можно настраивать, для этого есть следующий набор настроек:<br/>
*Высота. Высота материала в px<br/>
*Ширина. Базовая ширина в px. Базовая ширина материала, вокруг которой строится адаптивность сетки по горизонтали. Грубый пример расчета кол-ва тизеров по горизонтали: ширина обрамляющего контейнера / базовая ширина материала = целое число количества материалов по горизонтали<br/>
*Отступ сверху \ отступ снизу \ отступ слева \ отступ справа. Размеры персонального отступа рекламного материала в px, для css свойства margin<br/>
*Толщина обводки. Размер в px первоначальной обводки рекламного материала<br/>
*Скругление углов. Значение css свойства border-radius материала в px<br/>
*Цвет обводки. Селектор выбора цвета обводки рекламного материала<br/>
*Цвет фона. Селектор цвета фона рекламного материала<br/>
*Цвет фона при наведении.Селектор цвета фона рекламного материала при наведении<br/>
*Тень. Селектор включения отключения эффекта тени на рекламном материале<br/>
<br/>
Общая схема размеров рекламного блока:<br/>
<br/>
[[Файл:DisplayAds8.png|centre|frame]]
<br/>

==Настройка изображения==
*Высота. Высота изображения в px. Присутствует в шаблоне Графический с текстом снизу (адаптив) и определяет высоту изображения. В других шаблонах высота изображения равна высоте материала<br/>
*Ширина. Ширина изображения в px. Присутствует в шаблонах Графический с текстом справа (адаптив) и Графический с текстом слева (адаптив), определяет ширину изображения<br/>
*Отступ снизу. Отступ от изображения снизу в px. Присутствует в шаблоне Графический с текстом снизу (адаптив)<br/>
*Скругление углов. Значение css свойства border-radius изображения в px. Только для шаблона Графический с текстом справа (адаптив)<br/>
<br/>

==Настройка текста==
Во всех шаблонах доступно изменение визуального стиля текстов:<br/>
*Высота отступа. Размер отступа сверху и снизу от текста в px<br/>
*Ширина отступа. Размер отступа справа и слева от текста в px<br/>

Совокупность параметров дает следующее css свойство: margin: высота ширина отступов<br/>

*Максимальная длинна текста. Максимальное количество символов в заголовке рекламного объявления<br/>
*Шрифт. Селектор выбора шрифтов<br/>
*Размер шрифта. Выбор высоты шрифта в px, css свойства font-size<br/>
*Межстрочный интервал. Значение css свойства line-height, мы рекомендуем устанавливать значение больше на несколько px чем значение параметра “размер шрифта”<br/>
*Цвет шрифта. Селектор выбора цвета шрифта<br/>
*Жирный шрифт. Переключатель размера шрифта<br/>
*Подчеркивание ссылки. Переключатель режима подчеркивания ссылок при наведении<br/>
*Цвет шрифта при наведении. Селектор выбора цвета шрифта<br/>

==Настройка кнопки==
Некоторые шаблоны имеют возможность добавления в дизайн дополнительную кнопку, позволяющую заинтересовать пользователя рекламным объявлением.<br/>
При активации кнопки в шаблоне блока появляется кнопка, которую можно дополнительно настроить под вашу стилистику сайта:<br/> 
*Текст. Селектор выбора текста, который будет отображаться на кнопке (Далее, Подробнее, Читать далее, Узнать больше →)
*Цвет шрифта \ цвет шрифта при наведении. Селекторы выбора цвета шрифта
*Цвет фона \ цвет фона при наведении \ цвет обводки \ цвет обводки при наведении. Селекторы выбора цветов фона
*Расположение. Селектор выбора позиции расположения кнопки (слева, по центру, справа)

==Графический с текстом снизу (адаптив)==
[[Файл:Адаптив1.png|centre|frame]]

==Графический с текстом поверх (адаптив)==
[[Файл:Адаптив2.png|centre|frame]]

==Графический с текстом справа (адаптив)==
[[Файл:Адаптив3.png|centre|frame]]

==Графический с текстом слева (адаптив)==
[[Файл:Адаптив4.png|centre|frame]]

==См. также==
*[[Display Ads]]
*[[Размещение блока через Adfox Header Bidding]]
*[[Push]]
*[[Clickunder]]
*[[Native SDK]]
*[[Рекламные блоки]]