> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/ru/saity-i-zony/nastroika-nativnoi-reklamy.md).

# Настройка нативной рекламы

Создание [нативной рекламы](/publishers/ru/saity-i-zony/create-zone.md#recommendation-widget) зона проста и при этом обладает мощными возможностями настройки. В зависимости от ваших потребностей вы можете использовать немного разные процессы настройки зоны нативной рекламы:

* **Сценарий A**: Вы просто хотите настроить рекламную зону, выбрать соотношение сторон изображений зоны нативной рекламы, а затем задать на вашем сайте размер рекламной зоны, соответствующий ему.
* **Сценарий B**: Вы хотите настроить рекламную зону так, чтобы она соответствовала пользовательскому размеру или соотношению сторон изображения, чтобы рекламная зона выглядела так же, как ваш сайт, и идеально вписывалась в него.
* **Сценарий C**: На вашем сайте есть зона определённого размера, и вы хотите создать рекламную зону, которая в неё поместится и будет хорошо выглядеть.

Какой бы сценарий вы ни выбрали, первое, что вам нужно сделать, — это создать зону нативной рекламы.

## Создание зоны нативной рекламы

Когда вы вошли как издатель, нажмите **Сайты и зоны**, **Новая зона**, и разверните **Нативная** раздел, выберите формат нативной рекламы **Рекомендательный виджет** и нажмите **Далее**.

![Создать зону нативной рекламы](/files/781cf456d8c3f9f35707c0f62a2c3508d7fedc20)

Заполните сведения о зоне и нажмите **Далее**.

{% tabs %}
{% tab title="Сценарий A: Быстрый макет: задайте соотношение сторон" %}
В этом сценарии вы задаёте соотношение сторон изображений в панели администратора, и нет необходимости задавать общий размер рекламной зоны. При использовании **Быстрый макет**, созданная вами рекламная зона будет автоматически подстраиваться под размер контейнера, в который вы её поместите.

{% stepper %}
{% step %}

### Шаг 1

![Нативный шаг 1](/files/fc117ac5265d1042b98c8ce86441737f1835444c)

Выберите **Быстрый макет** вкладку. В разделе **Макет для ПК** задайте количество столбцов и рядов объявлений, которые вы хотите видеть на ПК.
{% endstep %}

{% step %}

### Шаг 2

![Нативный шаг 2](/files/d709e0ebb515592a5393d150a42e570cc7b93938)

Далее выберите соотношение сторон для ваших изображений в раскрывающемся списке **Настройки изображения** Вы можете выбрать между **1:1**, **4:3** или **16:9**, чтобы соответствовать миниатюрам на вашем сайте.
{% endstep %}

{% step %}

### Шаг 3

![Нативный шаг 3](/files/43cbb716f41b49606818c9c9fba5474483e8ea4f)

* После того как вы выбрали соотношение сторон, с помощью флажка выберите, хотите ли вы показывать текст, и затем решите, где он будет отображаться.
* Этот текст состоит из **Заголовка** и **Описания**. При желании вы можете включать и отключать их по отдельности в **Заголовка** и **Описания** разделах.
* Проверьте предварительный просмотр справа, чтобы увидеть, как выглядит ваша рекламная зона, и при необходимости снова настройте параметры.
  {% endstep %}

{% step %}

### Шаг 4

![Нативный шаг 4](/files/b9ed951f9e52ce68204915f714a4bd4fb43e3555)

* Повторите шаги 1–3 выше в разделе **Мобильный макет** чтобы настроить вашу рекламную зону для мобильных устройств.
  {% endstep %}

{% step %}

### Шаг 5

![Нативный шаг 5](/files/edf39a22c1016f5070ca248ee922c9dde5209ad1)

* Проверьте предварительный просмотр для обоих **ПК** и **Мобильный** справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в **Точка перехода для мобильных устройств** раскрывающемся списке **Дополнительные параметры**.
* Точку переключения можно установить на **800px** для iPad, **450px** для мобильных устройств и **Нереагирующий**. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
* Когда вас устраивает вид предварительного просмотра, нажмите **Создать**.
  {% endstep %}

{% step %}

### Шаг 6

![Нативный шаг 6](/files/4b8b10eec9432ca620bf0e39d703acc077f6ba80)

* Скопируйте **HTML-тег зоны** и добавьте его на свой сайт.
* Рекламная зона автоматически подстроится до 100% контейнера, в который вы поместите тег. То есть чем больше контейнер, тем больше будут и зона, и объявления.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Сценарий B: Быстрый макет: задайте пользовательский размер изображения" %}
В этом сценарии вы хотите иметь возможность изменять размер изображения и интервалы в объявлении, чтобы они соответствовали вашему сайту. Так вы бы поступили, если хотите, чтобы нативные объявления действительно выглядели как часть редакционного контента вашего сайта.

{% stepper %}
{% step %}

### Шаг 1

![Нативный шаг 7](/files/5ece6291e5203b60ef64a07026043b6167f906d8)

* Выберите **Быстрый макет** вкладку. В разделе **Макет для ПК** задайте количество столбцов и рядов объявлений, которые вы хотите видеть на ПК.
  {% endstep %}

{% step %}

### Шаг 2

![Нативный шаг 8](/files/035fa240abc86c9037907f145a27801bc7fc53bb)

* В **Настройки изображения** раскрывающемся списке выберите **Пользовательский размер** и задайте ширину и высоту изображений в соответствии с вашим сайтом. Если на сайте есть метатег и сайт адаптивный, то при просмотре сайта изображения тоже будут подстраиваться по мере уменьшения размера экрана. Информация о **Размере виджета** и **Размере изображения** будет отображаться в правом верхнем углу над предварительным просмотром.
  {% endstep %}

{% step %}

### Шаг 3

![Нативный шаг 9](/files/1470a48b17c3cf02762a6811fdc375b9cb30428d)

* После того как вы задали размер изображения, выберите, хотите ли вы показывать текст, с помощью **Текст** флажка, и выберите, где он будет отображаться.
* Проверьте предварительный просмотр справа, чтобы увидеть, как выглядит ваша рекламная зона, и при необходимости снова настройте параметры.
  {% endstep %}

{% step %}

### Шаг 4

![Нативный шаг 10](/files/5e1e3d8c8b092e2bb469015646620487e683398f)

* Повторите шаги 1–3 в **Мобильный макет** чтобы настроить вашу рекламную зону для мобильных устройств.
  {% endstep %}

{% step %}

### Шаг 5

![Нативный шаг 11](/files/5deeb40ef27217d49ecb7c58c415e9e2f1f4301a)

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

{% hint style="info" %}
**Примечание**: Изменение этих параметров изменит общий размер рекламной зоны.
{% endhint %}
{% endstep %}

{% step %}

### Шаг 6

![Нативный шаг 12](/files/edf39a22c1016f5070ca248ee922c9dde5209ad1)

* Проверьте предварительный просмотр для обоих **ПК** и **Мобильный** справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в **Точка перехода для мобильных устройств** раскрывающемся списке **Дополнительные параметры**.
* Точку переключения можно установить на **800px** для iPad, **450px** для мобильных устройств и **Нереагирующий**. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
* Когда вас устраивает вид предварительного просмотра, нажмите **Создать**.
  {% endstep %}

{% step %}

### Шаг 7

![Нативный шаг 13](/files/4b8b10eec9432ca620bf0e39d703acc077f6ba80)

* Скопируйте **HTML-тег зоны** и добавьте его на свой сайт.
* Убедитесь, что размер рекламной зоны на вашем сайте соответствует размеру зоны, которую вы только что создали.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Сценарий C: Пользовательский макет: задайте фиксированный размер зоны" %}
В этом сценарии вы хотите иметь возможность задавать размер рекламной зоны в соответствии с тем, что нужно вашему сайту, и настраивать параметры, чтобы объявления отображались хорошо.

{% stepper %}
{% step %}

### Шаг 1

![Нативный шаг 13](/files/da6229df76d085654f70d947da86b9e913e94e80)

Выберите **Пользовательский макет** вкладку. В разделе **Макет для ПК** разделе задайте **Ширину** и **Высоту** общей рекламной зоны, которую вы хотите создать.
{% endstep %}

{% step %}

### Шаг 2

![Нативный шаг 14](/files/d0e6c9839f034aa609faec803366fa9646865488)

Далее выберите, сколько **столбцов** и **рядов** объявлений вы хотите отображать в рекламной зоне. Проверьте предварительный просмотр справа, чтобы увидеть, какие параметры подходят для выбранного вами размера.
{% endstep %}

{% step %}

### Шаг 3

![Нативный шаг 15](/files/ede9fd6d1301ffb31e9400e752ffb49396f14d1f)

После того как вы выбрали, сколько столбцов и рядов вам нужно, выберите, хотите ли вы показывать текст, с помощью **Текст** флажка, и выберите, где он будет отображаться, с помощью **Положение текста** раскрывающегося списка.
{% endstep %}

{% step %}

### Шаг 4

![Нативный шаг 15](/files/844f5f6674c69c245d0bd5cd8c426d4d0ad5857d)

Повторите шаги 1–3 в **Мобильный макет** чтобы настроить вашу рекламную зону для мобильных устройств.
{% endstep %}

{% step %}

### Шаг 5

![Нативный шаг 16](/files/edf39a22c1016f5070ca248ee922c9dde5209ad1)

* Проверьте предварительный просмотр для обоих **ПК** и **Мобильный** справа на экране. Вы можете задать, где происходит точка переключения между видом для ПК и мобильным видом, в **Точка перехода для мобильных устройств** раскрывающемся списке **Дополнительные параметры**.
* Точку переключения можно установить на **800px** для iPad, **450px** для мобильных устройств и **Нереагирующий**. Когда мы меняем точку переключения, это изменяет, будут ли наши настройки в разделе Макет для ПК влиять на ПК и iPad или только на сам ПК.
* Когда вас устраивает вид предварительного просмотра, нажмите **Создать**.
  {% endstep %}

{% step %}

### Шаг 6

![Нативный шаг 17](/files/4b8b10eec9432ca620bf0e39d703acc077f6ba80)

Скопируйте **HTML-тег зоны** и добавьте его на свой сайт.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## Выбор режима Unresponsive в Mobile Breaking Point

* Когда в разделе «Дополнительные параметры» для Mobile Breaking Point установлен режим Unresponsive, на экране появится показанное ниже модальное окно.

![Нереагирующий2](/files/ff6c7d9c5b6744c68d3b1361b6180f10c23040fe)

![Нереагирующий3](/files/7d4dabf28f017c0d52b144a5df865e9e1dfcec25)

* Нажатие **ПРОДОЛЖИТЬ** в модальном окне будет применять макет для ПК к объявлениям на всех устройствах, включая мобильные телефоны и планшеты.
* Мобильный макет больше не будет доступен для редактирования пользователю, когда выбран режим Unresponsive.
* Параметры изображения будут обновлены до пользовательского размера по умолчанию (ширина — 200px и высота — 200px), если они не были сохранены ранее.

## Использование пользовательского CSS с нативными объявлениями

![баннер](/files/d2cb31bdbae700725232eed9625d0d3a5f30f558)

В **Пользовательский CSS** разделе вы можете добавить пользовательский CSS, чтобы рекламная зона корректно отображалась на вашем сайте. В качестве отправной точки приведены наиболее важные классы CSS. Подробнее о CSS [здесь](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Примечание**: Имейте в виду, что изменения в пользовательском CSS не будут видны в предварительном просмотре: они будут отображаться только на самом вашем сайте.
{% endhint %}

### Классы CSS для нативной рекламы

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

![CSS нативной рекламы](/files/a45669b2aa0e29d4191bd87ca8ad84e33a19063e)

| Класс                              | Действие                                  |
| ---------------------------------- | ----------------------------------------- |
| .exo-native-widget-outer-container | Оформляет весь контейнер виджета.         |
| .exo-native-widget-item            | Оформляет контейнеры отдельных элементов. |
| .exo-native-widget-item-image      | Оформляет изображение.                    |
| .exo-native-widget-item-title      | Оформляет текст заголовка.                |
| .exo-native-widget-item-text       | Оформляет текст описания                  |

### Дополнительные классы CSS

Вы также можете оформить нативную рекламу с помощью этих дополнительных классов CSS:

| Класс                                 | Действие                                                      |
| ------------------------------------- | ------------------------------------------------------------- |
| .exo-native-widget                    | Оборачивает весь виджет.                                      |
| .exo-native-widget-header             | Оборачивает элементы заголовка.                               |
| .exo-native-widget-outer-container    | Оборачивает все объявления.                                   |
| .exo-native-widget-item-container     | Оборачивает блок объявления.                                  |
| .exo-native-widget-item-image-wrapper | Оборачивает изображение в блоке объявления.                   |
| .exo-native-widget-item-image-ratio   | Задаёт соотношение сторон изображения объявления.             |
| .exo-native-widget-item-content       | Оборачивает весь текст блока объявления.                      |
| .exo-native-widget-item-content-box   | Этот блок оборачивает заголовок, описание и бренд объявления. |
| .exo-native-widget-item-brand         | Оформляет бренд объявления.                                   |

**Примеры**

* Следующие примеры показывают, как издатели могут адаптировать стили CSS при настройке зоны нативной рекламы в соответствии со своими потребностями.

{% stepper %}
{% step %}

#### 1. Чтобы разместить текстовый блок поверх изображения.

![пример CSS нативной рекламы](/files/a6aee98de86efd1d7ab74547a7c6acb92ba1c1ae)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

```

{% endstep %}

{% step %}

#### 2. Чтобы изменить размер текстового блока.

![пример CSS нативной рекламы](/files/f60368b078dfcbaed70dcb12f401129b7943671c)

```css

 .exo-native-widget-item-content {
      height: 50px  !important;
   }

```

{% endstep %}

{% step %}

#### 3. Чтобы разместить текстовый блок поверх изображения и добавить к нему фон с прозрачностью.

![пример CSS нативной рекламы](/files/38c50d1d3c45f5bdfc3246b829097914d69bc60d)

```css

 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 4. Чтобы скруглить границы изображения.

![пример CSS нативной рекламы](/files/99fefb44c8b62020e0abd9a64aa05c8c257e8d0d)

```css

 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }   

```

{% endstep %}

{% step %}

#### 5. Чтобы задать стиль шрифта. Таким образом издатель может использовать шрифты, доступные на его сайте, а не только те, которые доступны в настройке зоны.

![пример CSS нативной рекламы](/files/c3d050a11403bc0e37581d6c17ec5bd9bbe5c9d3)

```css

 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

```

{% endstep %}

{% step %}

#### 6. Чтобы добавить отступ между изображением и текстом, чтобы текст мог быть либо близко, либо далеко от изображения. Также можно использовать padding-bottom, чтобы добавить отступ под текстом.

![пример CSS нативной рекламы](/files/be138d4093a9ff2ebdea18d1672617d94b1a5525)

```css

 .exo-native-widget-item-content {
    padding: 30px !important;
    }

```

{% endstep %}

{% step %}

#### 7. Чтобы настроить цвет фона текстового блока так, чтобы он влиял только на блок текста под каждым изображением, оставляя пространство между изображениями и блоками прозрачным или с другим цветом фона.

![пример CSS нативной рекламы](/files/d8e8c32c8691e86cc85fd9aaf5027067ce68cdb9)

```css

 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 8. Чтобы добавить рамку, которая охватывает изображение и его текстовый блок. Это поможет отделить каждое изображение внутри этого нативного виджета.

![пример CSS нативной рекламы](/files/b596f3beb538a05c14948132d79c493a972ee680)

```css

.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

```

{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/publishers/ru/saity-i-zony/nastroika-nativnoi-reklamy.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.