Настройка дизайна

Внимание. Используя рекомендательный виджет, вы принимаете риски, описанные в п. 3.21 Оферты. Перед настройкой дизайна ознакомьтесь с действующим законодательством в сфере рекламы, в том числе с требованиями к обязательным элементам рекламы и их площади.

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

  1. Основные элементы виджета
  2. Стили классов CSS
  3. Типовые настройки оформления

Основные элементы виджета

За каждый элемент ячейки отвечает отдельный 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">
                      <ya-unit-category class="category"/>
                      <ya-unit-date class="date"/></div>
    <ya-unit-close />
  </ya-units-grid>
  <ya-recommendation-label />
</div>

Вы можете:

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

Чтобы скрыть категорию публикаций и оставить только пометку «Реклама», добавьте в элемент <ya-unit-category> параметр ad-only.

В элементе <ya-unit-category> класс CSS указывайте не для самого элемента, а для оборачивающего тега. Это нужно, чтобы к метке «Реклама» корректно применялись стили, когда категория отсутствует (не прописана в метатегах публикаций, или добавлен параметр ad-only).

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

В библиотеке CSS предустановлены стили для классов:
  • headline — заголовок виджета;
  • title — заголовок ячейки;
  • category — категория публикации или метка «Реклама»;
  • wrapper — виджет в целом;
  • grid — сетка;
  • grid-row — строка сетки;
  • grid-item — ячейка сетки;
  • unit-wrapper — рекомендация;
  • unit-image — картинка в рекомендации;
  • recommendation-label — лейбл виджета.

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

Типовые настройки оформления

Это базовые способы настройки оформления. Они не требуют глубокого знания языка разметки.

Ограничение количества отображаемых строк
Может быть нужно для заголовка или описания рекомендации. Чтобы ограничить количество строк, которые будут отображаться в виджете, заключите соответствующий элемент в тег <ya-clamp>. Например:
HTML
Исходный вид элемента заголовка:
<div class="title"><ya-unit-title /></div>
Ограничение отображаемых строк заголовка до двух:
<ya-clamp lines="2" class="title"><ya-unit-title /></ya-clamp>
Или
<div class="title"><ya-clamp lines="2"><ya-unit-title /></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 пиксель, тип линии — сплошная, цвет — черный */
}
Настройка оформления виджета в целом
Заключите весь код виджета в тег с классом 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-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 пикселей размер сетки будет определяться значениями в полях Размер сетки на вкладке Общее.
Важно. Следует учитывать, что в коде HTML задается количество отображаемых ячеек виджета. Количество загруженных рекомендаций и мест под рекламу определяют значения в полях Размер сетки. Например, если вы установите Размер сетки 5 × 2, а в элементе <ya-units-grid> для данного размера экрана будет настроена сетка 2 × 2, то отобразятся только четыре рекомендации из загруженных десяти. В обратном случае (сетка 5 × 2, а количество рекомендаций 2 × 2) в виджете будет шесть пустых ячеек.
Оформление сетки настраивается в 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 пиксель, тип линии — сплошная, цвет — черный */
}
Настройка внешнего вида ячейки

Задать цвет подложки или рамку для каждой ячейки можно с помощью класса 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 пикселей */
}
Настройка внешнего вида картинки в ячейке
В HTML-шаблоне за картинку отвечает элемент <ya-unit-image>. Здесь можно:
  • задать соотношение сторон — параметр ratio;
  • вывести видео вместо картинки;
  • указать путь к изображению-заглушке (будет показано в виджете, если в публикации изображений нет) — параметр src.
Например:
HTML
<ya-unit-image ratio="0.5" enable-video src="https://example.com/image/image.png">
Другие характеристики, например максимальная высота изображения или скругление углов, настраиваются в CSS, в параметрах класса unit-image. Например:
CSS
.unit-image {
  max-height: 200px; /* максимальная высота — 200 пикселей */
  border-radius: 4px; /* скругление углов с 4 пикселей */
}
Настройка лейбла виджета
В HTML-шаблоне за лейбл отвечает элемент <ya-recommendation-label>. Если его удалить из шаблона, лейбл не будет отображаться в виджете. В параметре text вы можете задать свой текст лейбла. Например:
HTML
<ya-recommendation-label text="Рекомендации" />
По умолчанию лейбл выводится серым цветом и выравнивается по правому краю виджета. Изменить эти настройки можно в CSS, в параметрах класса recommendation-label. Например:
CSS
.recommendation-label {
  color: black; /* цвет текста — черный */
  text-align: left; /* выравнивание по левому краю */
}
Настройка даты публикации

Дата публикации указывается с помощью элемента <ya-unit-date />. Вы можете изменить формат даты:

<ya-unit-date format="HH:MM dd-mm-yyyy" />
Настройка открытия в новой вкладке

По умолчанию рекомендации виджета открываются в той же вкладке браузера, а реклама – в новой.

В HTML-шаблоне можно задать открытие всех ссылок в новой вкладке, добавив атрибут target-blank к тегу <ya-units-grid>. Например:

<ya-units-grid target-blank cols="${grid_columns}" rows="${grid_rows}">
Настройка крестика закрытия

По умолчанию крестик закрытия отсутствует в HTML-шаблоне. Чтобы добавить его в шаблон, используйте элемент <ya-unit-close />. Этот элемент должен находиться непосредственно в <ya-units-grid />.

Отключение всплывающей подсказки

При наведении на крестик закрытия появляется всплывающая подсказка. Вы можете ее отключить параметром disableTooltip: <ya-unit-close disableTooltip />. Например:

<div class="wrapper">
  <ya-units-grid cols="5">
    <ya-unit-close disableTooltip>
      <div class="super-tooltip">Закрыть</div>
    </ya-unit-close>
  </ya-units-grid>
  <ya-recommendation-label />
</div>
Настройка внешнего вида подсказки и крестика

Вы можете настроить внешний вид подсказки и крестика в CSS.

Используйте класс .ya-ad-close-hovered для того, чтобы всплывающая подсказка показывалась при наведении на крестик.

Чтобы при наведении на публикацию показывался крестик, используйте класс .ya-unit-item-hovered. Например:

.super-tooltip {
  display: none;
}
/* при наведении на крестик появляется всплывающая подсказка */
.ya-ad-close-hovered .super-tooltip {
  display: block; /* элемент отображается как блочный */
  position: absolute; /* абсолютное позиционирование */
  width: 45%; /* ширина — 45% */
  height: 8%; /* высота — 8% */
  top: 14%; /* положение от верхнего края — 14% */
  left: 20%; /* положение от левого края — 20% */
  background-color: black; /* цвет подложки — черный */
  color: white; /* цвет текста — белый */
}
/* при наведении на публикацию появляется крестик закрытия*/
.ya-unit-item-hovered .ya-ad-close {
  display: block; /* элемент отображается как блочный */
}
.ya-ad-close {
  display: none; 
  /* вокруг логотипа крестика будет кликабельное пространство в 7px */
  padding: 7px; /* отступы внутри рамки, со всех сторон — 7 пикселей */
  border-radius: 5px; /* скругление углов рамки с 5 пикселей */
  background-color: red; /* цвет подложки — красный */
  width: 40px; /* ширина — 40 пикселей */
  height: 40px; /* высота — 40 пикселей */
  top: 10%; /* положение от верхнего края — 10% */
  right: 10%; /* положение от правого края — 10% */
 }

Помимо этого, вы можете поменять системное изображение крестика: для этого укажите ссылку на свое изображение в формате SVG с помощью параметра svg. Например:

<ya-unit-close svg="data:image/svg+xml;base64,PD94..." />
Настройка дополнительного поля в меню обратной связи

Чтобы добавить настраиваемое поле в меню обратной связи, вы можете использовать параметры customField и customFieldUrl:

<ya-unit-close customField="Супер ПРО" customFieldUrl="https://yandex.ru" />
Адаптация внешнего вида под разный дизайн сайта

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

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

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

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

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

.dark .image {
  background-color: black;
}
                
.light .image {
  background-color: white;
}
Добавление информации о рекламодателе

Вы можете добавить в публикации данные рекламодателей:

Фавиконка сайта

Добавить фавиконку можно с помощью элемента <ya-unit-favicon />.

Фавиконка имеет фиксированный размер, который можно задать в параметре size. Допустимые размеры 16, 32 и 120 (по умолчанию — 16). Например:

<ya-unit-favicon size="32" />
Логотип

Вы можете добавить логотип рекламодателя, который будет отображаться на публикациях в виджете, с помощью элемента <ya-unit-logo />.

Для случаев, когда в публикации нет логотипа, установите изображение-заглушку в параметре src. По умолчанию изображение-заглушка имеет нулевую высоту.

<ya-unit-logo src="https://example.com/image/image.png" />
Если в публикации нет логотипа, он заменяется на другие элементы в таком порядке: фавиконка — картинка — заглушка. Можно изменить этот порядок в параметре disabledSubstitution:
  • <ya-unit-logo disabledSubstitution="all" /> — исключается и фавиконка, и картинка. Логотип сразу заменяется на заглушку.
  • <ya-unit-logo disabledSubstitution="favicon" /> — исключается фавиконка: логотип заменяется картинку, при ее отсутствии — на заглушку.
  • <ya-unit-logo disabledSubstitution="image" /> — исключается картинка: логотип заменяется на фавиконку, при ее остутствии — на заглушку.
Быстрые ссылки на сайт

Добавляются с помощью элемента <ya-unit-sitelinks />. Количество быстрых ссылок можно ограничить параметром limit:.

Физический адрес

Добавляется с помощью элемента <ya-unit-address />.