К основному содержимому

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

Автор: Olga

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


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

Сетка блоков


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


​

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


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

  • Высота отступа
    ​

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

  • Ширина отступа
    ​

  • Значение правого и левого отступа блока в px
    ​

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

  • Скругление углов. Значение свойства css border-radius для всего рекламного блока.
    ​

  • Цвета фона. Селектор выбора фона и его прозрачности для рекламного блока
    ​

  • Маркировка рекламы. Селектор выбора маркировки рекламы, если установлен в значении включен, то на рекламных объявлениях будет добавлена фраза “Реклама” и добавлено меню с информацией о рекламодателе.
    ​


​

Заголовок


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


​

  • Текст заголовка. Дополнительный текст который будет добавлен над блоком слева
    ​

  • Размер шрифта. Размер текста заголовка в px
    ​

  • Цвет шрифта. Цвет шрифта текста заголовка
    ​

  • Жирный шрифт. Переключатель размера шрифта
    ​

  • Логотип. Активирует показ заголовка и позволяет выбрать, какой текст будет показываться рядом с логотипом Kadam
    ​


​

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


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

  • Высота. Высота материала в px
    ​

  • Ширина. Базовая ширина в px. Базовая ширина материала, вокруг которой строится адаптивность сетки по горизонтали. Грубый пример расчета кол-ва тизеров по горизонтали: ширина обрамляющего контейнера / базовая ширина материала = целое число количества материалов по горизонтали
    ​

  • Отступ сверху \ отступ снизу \ отступ слева \ отступ справа. Размеры персонального отступа рекламного материала в px, для css свойства margin
    ​

  • Толщина обводки. Размер в px первоначальной обводки рекламного материала
    ​

  • Скругление углов. Значение css свойства border-radius материала в px
    ​

  • Цвет обводки. Селектор выбора цвета обводки рекламного материала
    ​

  • Цвет фона. Селектор цвета фона рекламного материала
    ​

  • Цвет фона при наведении.Селектор цвета фона рекламного материала при наведении
    ​

  • Тень. Селектор включения отключения эффекта тени на рекламном материале
    ​


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


​

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

  • Высота. Высота изображения в px. Присутствует в шаблоне Графический с текстом снизу (адаптив) и определяет высоту изображения. В других шаблонах высота изображения равна высоте материала
    ​

  • Ширина. Ширина изображения в px. Присутствует в шаблонах Графический с текстом справа (адаптив) и Графический с текстом слева (адаптив), определяет ширину изображения
    ​

  • Отступ снизу. Отступ от изображения снизу в px. Присутствует в шаблоне Графический с текстом снизу (адаптив)
    ​

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


​

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

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

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

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

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

  • Максимальная длинна текста. Максимальное количество символов в заголовке рекламного объявления
    ​

  • Шрифт. Селектор выбора шрифтов
    ​

  • Размер шрифта. Выбор высоты шрифта в px, css свойства font-size
    ​

  • Межстрочный интервал. Значение css свойства line-height, мы рекомендуем устанавливать значение больше на несколько px чем значение параметра “размер шрифта”
    ​

  • Цвет шрифта. Селектор выбора цвета шрифта
    ​

  • Жирный шрифт. Переключатель размера шрифта
    ​

  • Подчеркивание ссылки. Переключатель режима подчеркивания ссылок при наведении
    ​

  • Цвет шрифта при наведении. Селектор выбора цвета шрифта
    ​

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

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

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

  • Цвет шрифта \ цвет шрифта при наведении. Селекторы выбора цвета шрифта

  • Цвет фона \ цвет фона при наведении \ цвет обводки \ цвет обводки при наведении. Селекторы выбора цветов фона

  • Расположение. Селектор выбора позиции расположения кнопки (слева, по центру, справа)

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

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

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

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

См. также

Нашли ответ на свой вопрос?