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

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

<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 />.

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

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

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

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

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

Формат блока

Блок с нативным баннером может выглядеть как сетка заданного размера или как слайдер (горизонтальная лента объявлений с возможностью прокрутки). За отрисовку сетки отвечает элемент <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: в будущем они перестанут поддерживаться.

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

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