# Шаблоны баннеров

Шаблоны баннеров свёрстаны в визуальном конструкторе страницы тренингов GetCourse из стандартных блоков. GetCourse использует Bootstrap 3 для своих страниц, поэтому в баннерах используются классы этого фреймворка для адаптивности. Также используются дополнительные стили. Они находятся в файле `t-banners.css`.

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

Баннеры имеют два типа: для всей ширины контейнера и для использования в колонке. У последнего используется тег заголовка `<h3></h3>`, чтобы он не растягивал баннер по высоте слишком сильно.

<figure><img src="/files/2zCJHrPUS7phiICMcNw5" alt=""><figcaption></figcaption></figure>

Светлый и тёмный баннер отличает лишь наличие класса `.dark`, который перекрашивает цвет заголовка.

А теперь обо всём подробнее и по порядку.

### Установка баннера на страницу тренинга

Откройте нужный тренинг и перейдите к настройке вида:

<figure><img src="/files/Ubp0jc4CDgIsq8aPc6k7" alt=""><figcaption></figcaption></figure>

1. Откройте файл `import-banners.txt` и скопируйте код импорта нужного баннера.
2. Выберите контейнер, в который будете вставлять баннер. Например, если хотите вставить его в самый верх, выделите «Страница тренинга». Если хотите вставить баннер в колонку перед списком уроков, выделите «Список уроков» и т. д.

<figure><img src="/files/i6XtEtPtzgjfeRXMBj2n" alt=""><figcaption></figcaption></figure>

3. Нажмите «Импортировать блок» и вставьте скопированный код импорта в появившееся окно:

<figure><img src="/files/cd79M01acdAVRgZ869Bf" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ohsxTzBZv8Wlx9Vn5mzv" alt=""><figcaption></figcaption></figure>

Нажмите кнопку «Импортировать».

Баннер может вставиться не так, как вы этого ожидали. Не в том месте, его может «покорёжить». Это не страшно. Выделите родительский контейнер баннера и перетащите в нужное место.

<figure><img src="/files/vGDZqi5oizbphvC8c5wh" alt=""><figcaption></figcaption></figure>

Баннер импортирован.

Изображение баннера при импорте у вас не появится, т. к. оно загружено в файловое хранилище аккаунта. Вам нужно загрузить своё. Выделите блок «Изображение» в правой колонке баннера и загрузите картинку.

<figure><img src="/files/0uCOlnOnD3TgNuS3CHfH" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Рекомендую использовать изображения с соотношением сторон 16:9 или 16:10, чтобы в мобильной версии баннеры не были слишком высокими и не занимали всю высоту экрана.

Также лучше использовать формат PNG с альфа-каналом (с прозрачным фоном).

Размер изображения по ширине не делайте больше 600–700 пикселей. Иначе размер файла будет большим, загружаться будет дольше, а толку никакого — ширина картинки в баннере 635px по ширине.
{% endhint %}

Чтобы изменить текст баннера, щёлкните по тексту двойным кликом. Откроется поле редактирования HTML-блока:

<figure><img src="/files/tpIfz1U3DKAAxsfHw5W9" alt=""><figcaption></figcaption></figure>

Измените текст в теге `<h2> ... </h2>` для заголовка. Для описания — в теге `<p> ... </p>`.

Нажмите в любом свободном месте редактора, чтобы завершить редактирование.

Чтобы изменить текст на кнопке и ссылку, выделите блок кнопки и в боковой колонке редактора внесите изменения:

<figure><img src="/files/apHrsewRLmG7sL8QcmiX" alt=""><figcaption></figcaption></figure>

В поле «Содержание» замените текст на кнопке. Также здесь добавлена иконка FontAwesome. Если она вам не нужна,  удалите тег `<i>`.

Чтобы задать ссылку, замените значение в поле «Ссылка при клике».

***

### Классы и настройки баннеров

Родительский контейнер баннера имеет два класса: `t-banner` и `row`. Первый класс используется для стилизации, второй — класс из Bootstrap.

Для тёмной версии баннера сюда добавляется третий класс — `dark`.

<figure><img src="/files/Tp0VIjMxhy2SLC0GsFQT" alt=""><figcaption></figcaption></figure>

У баннера в настройках конструктора Геткурс задан цвет фона (вы его можете переопределить на любой, который вам нужен) и внешний отступ снизу.

Для тёмной версии баннера вам нужно будет также задать цвет текста, т. к. он не задан жёстко в стилях. Задайте `#ffffff` или любой другой.

Левая и правая колонки баннера имеют дополнительные классы:

Левая — `col-text`, `col-xs-12` и `col-sm-6`

Правая — `col-image`, `col-xs-12` и `col-sm-6`

Классы `col-xs-12` и `col-sm-6` отвечают за ширину колонок и адаптивность. Если вы знаете, как работать с Bootstrap, можете менять их под ваши нужды. Если нет, лучше оставьте как есть.

{% hint style="info" %}
Старайтесь, чтобы заголовок занимал не более двух строк. То же относится и к описанию.

Если заголовок или описание получатся длинными, используйте изображение повыше, иначе оно будет непропорционально маленьким на фоне текста в левой колонке. Особенно на некоторых «переходных» размерах экранов.
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/shablony-bannerov.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.