Шаблон блока c нативным баннером

Примечание

Если у вас нет опыта работы с HTML и CSS, рекомендуем взять за основу готовый шаблон блока. В настройках формата в поле Шаблон дизайна выберите подходящий шаблон и укажите размер сетки. После этого нажмите Редактировать код и добавьте стили CSS, используемые на вашем сайте.

Шаблон определяет, какие элементы рекламы будут отображаться в объявлении. Все доступные элементы представлены на схеме:

За отображение каждого элемента в объявлении отвечает отдельный HTML-тег. Простейший шаблон с основными элементами:

<div class="wrapper">
  <div class="headline">Читайте также</div>
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
    <div class="image"><ya-unit-image /></div>
    <div class="title"><ya-unit-title /></div>
    <div class="desc"><ya-unit-desc /></div>
    <div class="domain"><ya-unit-domain /></div>
    <div class="meta">
      <span class="category"><ya-unit-category /></span>
    </div>
  <ya-unit-kebab />
  </ya-units-grid>
 </div>

Вы можете:

изменить внешний вид рекламного блока с сетки (<ya-units-grid />) на слайдер (<ya-units-slider />);
добавить в шаблон собственную верстку;
поменять местами элементы или вложить элементы в другие HTML-теги;
удалить дополнительные элементы, если не хотите, чтобы они отображались в блоке. Например, чтобы скрыть описание, удалите строку <ya-unit-desc />.

Важно

В шаблоне обязательно должны быть элементы <ya-units-grid /> или <ya-units-slider />. Удалять эти элементы нельзя, иначе блок не будет работать корректно. Все элементы вида <ya-unit-... /> должны находиться внутри <ya-units-grid /> или <ya-units-slider />.

Также учитывайте требования к обязательным элементам рекламы, чтобы реклама соответствовала Правилам участия в Рекламной сети Яндекса и законодательству о рекламе. Важный момент: набор обязательных элементов в рекламе мобильных приложений и других типах рекламы отличается.

Обязательные элементы рекламы

По правилам Рекламной сети Яндекса эти элементы всегда должны быть в рекламном блоке:

Элемент	HTML-тег	Обязательный элемент рекламы	Обязательный элемент рекламы мобильных приложений
Метка «Реклама» и возрастная метка	`<ya-unit-category />`	да	да
Значок меню	`<ya-unit-kebab />`	да	да
Заголовок рекламы	`<ya-unit-title />`	да	нет
Домен	`<ya-unit-domain />`	да	нет
Цена	`<ya-unit-price />`	нет	да
Название приложения	`<ya-unit-app-name />`	нет	да
Иконка приложения	`<ya-unit-app-icon />`	нет	да

Примечание

Если в объявлении есть возрастная метка и предупреждение, они добавляются автоматически при отрисовке блока.

Подробнее о требованиях к использованию обязательных элементов читайте в разделе Правила работы с обязательными элементами рекламы.

Стили классов CSS

В библиотеке CSS предустановлены стили для классов:

grid-row — строка сетки;
grid-item — ячейка сетки;
grid — сетка;
ya-units-slider — слайдер в целом;
ya-slider-item — карточка в слайдере;
unit-wrapper — рекламное место;
unit-image — картинка или видео в рекламе.

Вы также можете создавать свои классы и настраивать стили для них.

Дизайн рекламного блока

Примечание

Если в блоке с нативным баннером несколько рекламных объявлений, они должны выглядеть одинаково.

Формат блока

Блок с нативным баннером может выглядеть как сетка заданного размера или как слайдер (горизонтальная лента объявлений с возможностью прокрутки). За отрисовку сетки отвечает элемент <ya-units-grid />, за отрисовку слайдера — <ya-units-slider />. Использовать оба эти элемента в одном шаблоне нельзя.

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

Элемент <ya-units-grid> рисует сетку по параметрам, заданным в полях Размер сетки. Изменять размер можно только с помощью этих же полей.

Исключение: если для различных размеров экранов нужно отображать разную сетку, задайте соответствия в параметре sizes. Последними обязательно должны идти переменные ${grid_columns}x${grid_rows}. Например:

HTML

<ya-units-grid sizes="(max-width: 1024px) 2x2, (max-width: 600px) 2x1, ${grid_rows}x${grid_columns}">

Соответствие сеток экранам в примере будет следующим:

на экране шириной меньше 600 пикселей отобразится сетка 2 × 1;
на экране шириной от 601 пикселя до 1024 пикселей — сетка 2 × 2;
на экране шириной от 1025 пикселей размер сетки будет определяться значениями в полях Размер сетки на вкладке Общее.

Оформление сетки настраивается в CSS, в классах grid, grid-row, grid-item. Например:

CSS

 .grid-row {
   margin-top: 10px; /* вертикальное расстояние между ячейками — 10 пикселей */
 }
 .grid-item {
   margin-left: 20px; /* горизонтальное расстояние между ячейками — 20 пикселей */
 }
 .grid {
   border: 1px solid #000; /* рамка вокруг всей сетки: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
 }

Важно

Следует учитывать, что в коде HTML задается количество отображаемых ячеек блока. Количество загруженных рекламных объявлений определяют значения в полях Размер сетки. Например, если вы установите Размер сетки 5 × 2, а в элементе <ya-units-grid> для данного размера экрана будет настроена сетка 2 × 2, то отобразятся только 4 объявления из загруженных 10. В обратном случае: сетка 5 × 2, а количество объявлений 2 × 2, — в блоке будет шесть пустых ячеек.

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

За отрисовку блока в виде слайдера отвечает элемент <ya-units-slider />.

Пример шаблона со слайдером:

<div class="block">
  <div class="headline">Читайте также</div>
  <ya-units-slider>
    <div class="unit">
      <ya-unit-kebab />
      <div class="image">
        <ya-unit-image ratio="0.5" />
      </div>
      <div class="body">
        <div class="title">
          <ya-unit-title />
        </div>
        <div class="meta">
          <span class="category">
            <ya-unit-category />
          </span>
          <span class="date">
            <ya-unit-date />
          </span>
        </div>
      </div>
    </div>
  </ya-units-slider>
  <div class="block-label">
    <div class="label">Яндекс рекомендации</div>
  </div>
</div>

Оформление слайдера можно настроить в CSS с помощью классов ya-units-slider (весь контейнер с карточками) и ya-slider-item (отдельная карточка в слайдере):

.ya-units-slider {
  width: 95vw;
}
.ya-slider-item:not(:first-child) {
  margin-left: 1em;
}

В слайдер можно добавить кнопку для прокрутки объявлений. Для этого внутрь элемента <ya-units-slider> добавьте элемент <ya-slider-button>. Направление прокрутки указывается с помощью атрибута direction:

Значение left задает прокрутку влево. Кнопка для прокрутки будет расположена перед объявлениями в слайдере.
Значение right задает прокрутку вправо. Кнопка для прокрутки будет расположена после объявлений в слайдере.

Если внутри <ya-slider-button> есть элемент с классом ya-clickable, то прокрутка выполняется по клику на этот элемент. Если такого элемента нет, прокрутка выполняется по клику на саму кнопку.

Например:

<ya-slider-button direction="left">В начало</ya-slider-button>

При прокрутке до крайнего левого или крайнего правого положения элементу <ya-units-slider /> будут добавлены классы ya-slider-leftmost и ya-slider-rightmost соответственно.

Примечание

Если кнопки прокрутки располагаются над ячейкой слайдера, мы не рекомендуем скрывать их по этим классам: это может привести к ошибочным кликам.

Оформление блока

Чтобы задать настройки для всего блока в целом (цвет подложки текста, отступы и др.), заключите весь код блока в тег, задайте класс (например, wrapper) и настройте для этого класса нужные параметры в CSS.

HTML

<div class="wrapper">
  <ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
  ...
  </ya-units-grid>
</div>

CSS

.wrapper {
  background: #fff; /* цвет подложки — белый */
  padding: 10px; /* отступы внутри рамки, со всех сторон — 10 пикселей */
  margin: 5px; /* отступы снаружи рамки, со всех сторон — 5 пикселей */
  border: 2px solid #000; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
  border-radius: 6px; /* скругление углов рамки с 6 пикселей */
}

Ограничение количества отображаемых строк

Чтобы ограничить количество строк, которые будут отображаться в элементе, заключите этот элемент в тег <ya-clamp>.

Внимание

Не ограничивайте количество строк в заголовке: согласно закону о рекламе он должен быть показан полностью.

HTML

Исходный вид элемента «Описание рекламного предложения»:

<div class="desc"><ya-unit-desc /></div>

Ограничение отображаемых строк описания предложения до двух:

<ya-clamp lines="2" class="desc"><ya-unit-desc /></ya-clamp>

Или

<div class="desc"><ya-clamp lines="2"><ya-unit-desc /></ya-clamp></div>

Внешний вид текста

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

Настройка шрифта и интервалов

CSS

.headline {
  font-family: Helvetica, sans-serif; /* шрифт */
  font-size: 18px; /* размер шрифта — 18 пикселей */
  font-weight: bold; /* толщина букв — жирный */
  font-style: italic; /* начертание — курсив */
  line-height: 24px; /* межстрочный интервал — 24 пикселя */
  letter-spacing: 1px; /* межбуквенный интервал — 1 пиксель*/
  text-decoration: underline; /* декорирование текста — подчеркнутый */
  text-transform: uppercase; /* регистр — все заглавные */
  text-align: right; /* выравнивание — по правому краю */
  color: #373e44; /* цвет текста — темно-серый */
  background: #fff; /* цвет подложки — белый */
}

.category {
  color: #093; /* цвет текста — зеленый */
  font-size: 12px; /* размер шрифта — 12 пикселей */
  text-transform: uppercase; /* регистр — все заглавные */
}

Настройка отступов

CSS

.headline {
  padding-top: 10px; /* отступ сверху — 10 пикселей */
  padding-right: 10px; /* отступ справа — 10 пикселей */
  padding-bottom: 10px; /* отступ снизу — 10 пикселей */
  padding-left: 10px; /* отступ слева — 10 пикселей */
}

Создание рамки вокруг текста

CSS

.headline {
  border: 1px solid #000; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — черный */
}

Внешний вид ячейки

Задать цвет подложки или рамку для каждой ячейки можно с помощью класса unit-wrapper. Например:

CSS

.unit-wrapper {
  background: #fff; /* цвет подложки — белый */
  border: 1px solid #666; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — серый */
  padding: 5px; /* отступы внутри ячейки — 5 пикселей */
  border-radius: 6px; /* скругление углов с 6 пикселей */
}

Задать отдельное оформление для ячейки, в которую загружается объявление без изображения, можно с помощью класса <unit-wrapper.unit-without-image>. Например:

CSS

.unit-wrapper.unit-without-image {
  background: #fff; /* цвет подложки — белый */
  border: 1px solid #666; /* рамка: толщина — 1 пиксель, тип линии — сплошная, цвет — серый */
  padding: 5px; /* отступы внутри ячейки — 5 пикселей */
  border-radius: 6px; /* скругление углов с 6 пикселей */
}

Адаптация внешнего вида под тему оформления сайта

Вы можете динамически менять внешний вид объявлений для разных разделов сайта или тем оформления (например, светлой или темной). Для этого добавьте в код вставки параметр darkTheme: true, например:

<script>
    (yaads = window.yaads || []).push({
        id: "123456-7",
        render: "div",
        darkTheme: true
    });
</script>

При вызове кода корневому элементу <ya-units-grid> или <ya-units-slider> будут добавлены классы ya-theme-dark или ya-theme-light:

<ya-units-grid cols="1" rows="1"> <!-- при вызове кода классы добавляются корневому элементу -->
  <div class="image">
    <ya-unit-image ratio="1" />
  </div>
</ya-units-grid>

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

.ya-theme-dark {
  background-color: black;
}

.ya-theme-light {
  background-color: white;
}

Меню в объявлении также изменяется в зависимости от темы. Но мы не рекомендуем использовать media queries для стилизации темы в рекламных блоках, так как в этом случае меню не адаптируется под тему оформления.

Примечание

Ранее для адаптации рекламы под тему сайта мы использовали параметры additionalClasses и nativeAdditionalClasses: в будущем они перестанут поддерживаться.

Обратиться в службу поддержки

Написать в WhatsApp

Перейти в WhatsApp

Написать в чат

Написать письмо

Также вы можете перейти на сервис

Полезные ссылки

Была ли статья полезна?

Нативный баннер

Обязательные элементы рекламы

Элемент оформления	Рекомендации по использованию
Шрифты	Если в дизайне используется нестандартный шрифт, учитывайте, что он может отсутствовать у пользователя. Также у загрузки такого шрифта для рекламного формата могут быть негативные последствия: задержка отрисовки, уменьшение скорости загрузки, скачок шрифта и т. д. Предусмотрите список резервных шрифтов для своего дизайна или дайте согласие на использование группы шрифтов для форматов по умолчанию. Не используйте в дизайне мелкие шрифты (ниже 12 пикселей).
Размеры и адаптивность	Дизайн объявления должен подходить под разные размеры контейнера, внутри которого оно отрисовывается. Учитывайте самые минимальные и максимальные размеры контейнера. Если в блоке с нативным баннером несколько рекламных объявлений, их верстка должна быть одинаковой. Как выглядит некорректная нативная реклама
Использование в среде	Убедитесь, что объявление корректно работает в каждой среде, где планируется его использование: подстраивается под среду (растягивается, увеличивается, учитывает использование светлой или темной темы среды); не мешает пользователю использовать среды (не препятствует прокрутке сайта, работе приложения и пр.).
Специальные возможности и настройки	Дизайн должен корректно работать, если у пользователя включена опция: Отображать текст размером не менее N пикселей — нужно заранее провести тест на значениях 10, 12, 14, 16. Increase сontrast — в дизайне должна быть предусмотрена возможность не использовать слабые контрасты между элементами. Reduce transparency — в дизайне должна быть предусмотрена возможность не использовать прозрачные и полупрозрачные элементы.

Шаблон блока c нативным баннером

Обязательные элементы рекламы

Стили классов CSS

Дизайн рекламного блока

Рекомендации по оформлению блока

Обратиться в службу поддержки

Была ли статья полезна?