> 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FZepEwibYaemXWBAUFuHj%2Fimage.png?alt=media&amp;token=84207fc9-519d-4e9e-958f-30d7d954593b" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F3CDU8X8ujvXlsgzC6LrU%2Fimage.png?alt=media&amp;token=60575240-ad57-498f-992a-76b283c43276" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Fw635zwv5LLtq7LgCUezb%2Fimage.png?alt=media&amp;token=712db133-50bc-49a2-9bf1-9494c15d838b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F73xF4Ix7WhtivEk76TU8%2Fimage.png?alt=media&amp;token=f378f69e-4716-49e4-bb57-bf2d22de139e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F3e60DlHVH3mRaGiAECl9%2Fimage.png?alt=media&amp;token=6f2081b6-8476-495d-9832-00c15ea1fb7c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FeeOMfrzYbNvFbJyZjQN3%2Fimage.png?alt=media&amp;token=638eab65-cd9d-4efe-91f7-1eec5569d475" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FiJjJA2srSHsIEj05raEv%2Fimage.png?alt=media&amp;token=dd53f8f7-3ce0-44b8-bbb7-f37ba1b4f115" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FywpoNpyLJfReJykKximZ%2Fimage.png?alt=media&amp;token=a956b108-88af-4bcd-b8fd-5172cf4e65af" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F8kq7VGfZXeOT3eDvQcM7%2Fimage.png?alt=media&amp;token=afb95fac-303c-464e-9c54-b315cce72b17" alt=""><figcaption></figcaption></figure>

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

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

***

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FxvD3HFFqnsAc7Hsz8Dc8%2Fimage.png?alt=media&amp;token=4d4062db-0f17-44b8-badc-ff7bbe2fd2c9" 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 %}