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

Материал из Справочник сервиса Kadam.net
Перейти к: навигация, поиск

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

Адаптивный таргетинг дизайна
Особенностью нашего конструктора является возможность таргетировать дизайны под разные разрешения экрана также как Ваш дизайн адаптируется под разрешения экранов пользователя.

DisplayAds5.png


По умолчанию новый шаблон будет показываться на всем диапазоне ширины экранов Ваших пользователей.
Но если Вы планируете, что для десктопных устройств блок должен быть горизонтальным (например 4 объявления в ряд), а для мобильных устройств становиться вертикальным (например, колонка из 2 объявлений), то вам достаточно сделать 2 шаблона, которые будут таргетированы на разрешение разрешения страниц (0 - 500px и 500px - ∞).

Сетка блоков


Сетка - это инструмент, определяющий, какое количество рекламных объявлений будет показано по горизонтали и по вертикали.
Управляя ползунками, Вы можете определить то количество блоков, которое будет отображаться в рекламном блоке.
Помимо адаптивного таргетинга дизайнов, горизонтальная сетка блоков также является адаптивной. Это означает, что количество рекламных блоков по горизонтали будет зависеть от ширины обрамляющего контейнера и параметра “базовой ширины“ рекламного объявления, но не более максимального значения количества рекламных материалов по горизонтали.

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

DisplayAds6.png


Настройка блока


Во всех базовых дизайнах имеется стандартный набор настроек блока:

  • Высота отступа
  • Значение верхнего и нижнего отступа блока в px
  • Ширина отступа
  • Значение правого и левого отступа блока в px

Совокупность данных параметров аналогичны css свойству margin: высота_отступа ширина_отступа;

  • Скругление углов. Значение свойства css border-radius для всего рекламного блока.
  • Цвета фона. Селектор выбора фона и его прозрачности для рекламного блока
  • Маркировка рекламы. Селектор выбора маркировки рекламы, если установлен в значении включен, то на рекламных объявлениях будет добавлена фраза “Реклама” и добавлено меню с информацией о рекламодателе.


Заголовок


Включение данной настройки добавит логотип Kadam над рекламным блоком и позволит добавить над ним дополнительный текст.

DisplayAds7.png


  • Текст заголовка. Дополнительный текст который будет добавлен над блоком слева
  • Размер шрифта. Размер текста заголовка в px
  • Цвет шрифта. Цвет шрифта текста заголовка
  • Жирный шрифт. Переключатель размера шрифта
  • Логотип. Активирует показ заголовка и позволяет выбрать, какой текст будет показываться рядом с логотипом Kadam


Настройка материала


Внешний вид рекламного объявления также можно настраивать, для этого есть следующий набор настроек:

  • Высота. Высота материала в px
  • Ширина. Базовая ширина в px. Базовая ширина материала, вокруг которой строится адаптивность сетки по горизонтали. Грубый пример расчета кол-ва тизеров по горизонтали: ширина обрамляющего контейнера / базовая ширина материала = целое число количества материалов по горизонтали
  • Отступ сверху \ отступ снизу \ отступ слева \ отступ справа. Размеры персонального отступа рекламного материала в px, для css свойства margin
  • Толщина обводки. Размер в px первоначальной обводки рекламного материала
  • Скругление углов. Значение css свойства border-radius материала в px
  • Цвет обводки. Селектор выбора цвета обводки рекламного материала
  • Цвет фона. Селектор цвета фона рекламного материала
  • Цвет фона при наведении.Селектор цвета фона рекламного материала при наведении
  • Тень. Селектор включения отключения эффекта тени на рекламном материале


Общая схема размеров рекламного блока:

DisplayAds8.png


Настройка изображения

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


Настройка текста

Во всех шаблонах доступно изменение визуального стиля текстов:

  • Высота отступа. Размер отступа сверху и снизу от текста в px
  • Ширина отступа. Размер отступа справа и слева от текста в px

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

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

Настройка кнопки

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

  • Текст. Селектор выбора текста, который будет отображаться на кнопке (Далее, Подробнее, Читать далее, Узнать больше →)
  • Цвет шрифта \ цвет шрифта при наведении. Селекторы выбора цвета шрифта
  • Цвет фона \ цвет фона при наведении \ цвет обводки \ цвет обводки при наведении. Селекторы выбора цветов фона
  • Расположение. Селектор выбора позиции расположения кнопки (слева, по центру, справа)

Графический с текстом снизу (адаптив)

Адаптив1.png

Графический с текстом поверх (адаптив)

Адаптив2.png

Графический с текстом справа (адаптив)

Адаптив3.png

Графический с текстом слева (адаптив)

Адаптив4.png

См. также