> For the complete documentation index, see [llms.txt](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/shablony-bannerov.md).

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

Шаблоны баннеров свёрстаны в визуальном конструкторе страницы тренингов 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 %}