---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://yandex.com/support/partner/en/web/units/formats/native/template.md
  - https://yandex.com/support/partner/ru/web/units/formats/native/template.md
  - href: ru/web/units/formats/native/template.md
    type: text/markdown
    title: Markdown version
  - href: ../../../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/support/partner/ru/llms.txt

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

{% note info %}

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

{% endnote %}

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

![](../../../../_images/native-ad-elements.svg)

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

```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 />`) на [слайдер](*slider) (`<ya-units-slider />`);

- добавить в шаблон собственную верстку;

- поменять местами элементы или вложить элементы в другие HTML-теги;

- удалить дополнительные элементы, если не хотите, чтобы они отображались в блоке. Например, чтобы скрыть описание, удалите строку `<ya-unit-desc />`.


{% note warning %}

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

Также учитывайте требования к обязательным элементам рекламы, чтобы реклама соответствовала [Правилам участия в Рекламной сети Яндекса](https://yandex.ru/legal/partner/?lang=ru) и законодательству о рекламе. Важный момент: набор обязательных элементов в рекламе мобильных приложений и других типах рекламы отличается.

{% endnote %}


## Обязательные элементы рекламы {#required-elements}

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

<!-- source: ru/_includes/native/required-elements-table.md -->
#|
|| **Элемент** | **HTML-тег** | **Обязательный элемент рекламы** | **Обязательный элемент рекламы мобильных приложений** ||
|| Метка «Реклама» и возрастная метка | `<ya-unit-category />` | да | да ||
|| Значок меню | `<ya-unit-kebab />` | да | да ||
|| Заголовок рекламы | `<ya-unit-title />` | да | нет ||
|| Домен | `<ya-unit-domain />` | да | нет ||
|| Цена | `<ya-unit-price />` | нет | да ||
|| Название приложения | `<ya-unit-app-name />` | нет | да ||
|| Иконка приложения | `<ya-unit-app-icon />` | нет | да ||
|#
<!-- endsource: ru/_includes/native/required-elements-table.md -->



{% note info %}

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

{% endnote %}

Подробнее о требованиях к использованию обязательных элементов читайте в разделе [Правила работы с обязательными элементами рекламы](https://yandex.com/support/partner/ru/web/units/formats/native/main-rules.md).

## Стили классов CSS {#css-style}

В библиотеке CSS предустановлены стили для классов:
- `grid-row` — строка сетки;
- `grid-item` — ячейка сетки;
- `grid` — сетка;
- `ya-units-slider` — слайдер в целом;
- `ya-slider-item` — карточка в слайдере;
- `unit-wrapper` — рекламное место;
- `unit-image` — картинка или видео в рекламе.

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

## Дизайн рекламного блока {#design-settings}


{% note info %}

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

{% endnote %}

{% cut "Формат блока" %}

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

{% cut "Настройка сетки" %}

<!-- source: ru/_includes/native/grid-size.md -->
Элемент `<ya-units-grid>` рисует сетку по параметрам, заданным в полях **Размер сетки**. Изменять размер можно только с помощью этих же полей.

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

**HTML**

```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**

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

{% note warning %}

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

{% endnote %}

{% endcut %}

{% cut "Настройка слайдера" %}

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

<!-- source: ru/_includes/native/slider-features.md -->
Пример шаблона со слайдером:

```html
<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` (отдельная карточка в слайдере):

```css
.ya-units-slider {
  width: 95vw;
}
.ya-slider-item:not(:first-child) {
  margin-left: 1em;
}
```
<!-- endsource: ru/_includes/native/slider-features.md -->

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

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

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

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

Например:

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

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

{% note info %}

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

{% endnote %}

{% endcut %}

{% endcut %}


{% cut "Оформление блока" %}

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

<!-- source: ru/_includes/native/wrapper-code.md -->
**HTML**

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

**CSS**

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

{% endcut %}

{% cut "Ограничение количества отображаемых строк" %}

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

<!-- source: ru/_includes/native/ya-styling.md -->
{% note alert %}

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

{% endnote %}

**HTML**

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

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

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

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

Или

```html
<div class="desc"><ya-clamp lines="2"><ya-unit-desc /></ya-clamp></div>
```
<!-- endsource: ru/_includes/native/ya-styling.md -->

{% endcut %}

<!-- source: ru/_includes/native/ya-styling.md -->
{% cut "Внешний вид текста" %}

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

{% cut "Настройка шрифта и интервалов" %}

**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; /* регистр — все заглавные */
}
```

{% endcut %}

{% cut "Настройка отступов" %}

**CSS**

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

{% endcut %}

{% cut "Создание рамки вокруг текста" %}

**CSS**

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

{% endcut %}

{% endcut %}


{% cut "Внешний вид ячейки" %}

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

**CSS**

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

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

**CSS**

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

{% endcut %}

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

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

```javascript

```

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

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

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

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

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

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

{% note info %}

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

{% endnote %}

{% endcut %}
<!-- endsource: ru/_includes/native/ya-styling.md -->



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

#|
|| **Элемент оформления** | **Рекомендации по использованию** ||
|| Шрифты | Если в дизайне используется нестандартный шрифт, учитывайте, что он может отсутствовать у пользователя. Также у загрузки такого шрифта для рекламного формата могут быть негативные последствия: задержка отрисовки, уменьшение скорости загрузки, скачок шрифта и т. д.<br><br>

Предусмотрите список резервных шрифтов для своего дизайна или дайте согласие на использование группы шрифтов для форматов по умолчанию.<br><br>

Не используйте в дизайне мелкие шрифты (ниже 12 пикселей). ||
|| Размеры и адаптивность | Дизайн объявления должен подходить под разные размеры контейнера, внутри которого оно отрисовывается. Учитывайте самые минимальные и максимальные размеры контейнера.<br><br>

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

{% cut "Как выглядит некорректная нативная реклама" %}

![](../../../../_images/incorrect-native-block.png)

{% endcut %}

||
|| Использование в среде | Убедитесь, что объявление корректно работает в каждой среде, где планируется его использование:<br><br>

- подстраивается под среду (растягивается, увеличивается, учитывает использование светлой или темной темы среды);

- не мешает пользователю использовать среды (не препятствует прокрутке сайта, работе приложения и пр.). ||
|| Специальные возможности и настройки | Дизайн должен корректно работать, если у пользователя включена опция:<br><br>

- **Отображать текст размером не менее N пикселей** — нужно заранее провести тест на значениях 10, 12, 14, 16.

- **Increase сontrast** — в дизайне должна быть предусмотрена возможность не использовать слабые контрасты между элементами.

- **Reduce transparency** — в дизайне должна быть предусмотрена возможность не использовать прозрачные и полупрозрачные элементы.
||
|#




<!-- source: ru/_includes/feedback-forms/interface-buttons.md -->
## Обратиться в службу поддержки




<a href="https://yandex.ru/chat?context=%7B%22entrypoint%22%3A%22%7B%5C%22entrypoint%5C%22%3A%5C%22help%5C%22%2C%5C%22a_pagename%5C%22%3A%5C%22partner-ru%5C%22%7D%22%7D#/user/61a55f08-7fc4-956b-529c-f783dd9e6cf3/"> <!--ссылка, куда ведет кнопка. Если внутренняя ссылка, пишем без .md и .html -->
  <span class="button">Написать в чат</span> <!--текст на кнопке-->
</a>

<a href="https://forms.yandex.ru/surveys/10014686/?lang=ru"> <!--ссылка, куда ведет кнопка. Если внутренняя ссылка, пишем без .md и .html -->
  <span class="button">Написать письмо</span> <!--текст на кнопке-->
</a>

<details>
    <summary class="button">Написать в Telegram</summary>
    <img src="https://yastatic.net/s3/doc-binary/src/support/partner/ru/qr-codes/qr-code-ru-telegram.svg" style="width: 100%; display: block;"/>
    <a href="http://t.me/YanSupport_Bot" style="display: block; text-align: left; margin-left: 18px; color: #5889FF;">Перейти в Telegram</a>
</details>

<details>
    <summary class="button">Написать в WhatsApp</summary>
    <img src="https://yastatic.net/s3/doc-binary/src/support/partner/qr-codes/gr-code-ru-new-1.svg" style="width: 100%; display: block;"/>
    <a href="https://wa.me/74952583554?utm_source=yan&utm_medium=help&utm_campaign=ru" style="display: block; text-align: left; margin-left: 18px; color: #5889FF;">Перейти в WhatsApp</a>
</details>






<!-- source: ru/_includes/feedback-forms/button-style.md -->

<!-- endsource: ru/_includes/feedback-forms/button-style.md -->

<div width="100%" align="center"> 
<br><br>
Также вы можете перейти на сервис 
<br><br>

[![](https://yastatic.net/s3/doc-binary/src/support/mobile-ads/ru/logo/rsya.svg)](https://partner.yandex.ru)

</div>

<div><br><br></div>
<div class="container" style="padding: 0;">
  <div class="column">
      <p style="font-size: large;">Полезные ссылки</p>
      <ul>
         <li><a href="https://t.me/YANpartner/" target="_blank">Телеграм-канал Рекламной сети Яндекса</a></li>
         <li><a href="https://yandex.ru/legal/partner/" target="_blank">Правила участия</a></li>
         <li><a href="https://yandex.ru/legal/yan_service_offer/" target="_blank">Оферта Рекламной сети Яндекса</a></li>
      </ul>
  </div>   
</div>
<div><br><br></div>


<!-- endsource: ru/_includes/feedback-forms/interface-buttons.md -->

[*slider]: горизонтальная лента объявлений с возможностью прокрутки