Баннеры свёрстаны из стандартных блоков визуального конструктора Геткурс с добавлением CSS.
Для установки баннера необходимо импортировать код блока, загрузить изображение и добавить CSS. Стили можно добавить на страницу с баннером или в тему.
ВАЖНО. Баннеры я верстал в «пустом Геткурсе». Если у вас в школе уже установлены какие-то стили или дизайн-наборы, баннеры могут отличаться от вида на моих скриншотах.
Если вы используете мой набор стилей для Геткурса, то код импорта и стили для баннеров берите из него. Код в этой статье чуть отличается от того, что используется в наборе.
Код импорта баннера
Используйте его вне колонок, иначе крупный кегль заголовка растянет его по высоте слишком сильно.
![Шаблон адаптивного баннера для Геткурс](https://tiil.ru/wp-content/uploads/2024/07/shablon-adaptivnogo-bannera-dlya-getkurs.png)
Код для импорта баннера в конструктор страниц:
{"type":"div","xdgetId":"r9688","params":{"elClass":"t-banner row ","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","hide_with_children":false,"children":[{"type":"div","xdgetId":"r6988","params":{"elClass":"col-text col-xs-12 col-sm-6","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","hide_with_children":false,"children":[{"type":"html","xdgetId":"r4167","params":{"elClass":"","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","content":"<h2 class=\"title\">Шаблон адаптивного баннера</h2>\n<p class=\"description\">Дескриптор желательно не делать слишком длинным, чтобы в какой-то момент баннер не «поехал»</p>","wysiwyg_disabled":"true","typograf":false,"replace_variables":"true","fileList":{"files":[]}}},{"type":"button","xdgetId":"r8627","params":{"elClass":"btn btn-success","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","onClick":"","content":"Подробнее <i class=\"fa-solid fa-angle-right\"></i>","tag":""}}],"content":"","link":""}},{"type":"div","xdgetId":"r4389","params":{"elClass":"col-image col-xs-12 col-sm-6","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","hide_with_children":false,"children":[{"type":"image","xdgetId":"r4721","params":{"elClass":"","elId":"","visibleTo":"","fixedClass":"","elementTitle":"","invisibleTo":"","attributesStr":"","clickLink":"","filehash":"27aa213c003c136e4cb5dcbbcd5d719d.png","alt":"","description":"","width":"","height":"","link":"","link_new_window":false,"widthFit":"true","useAsBackground":false,"backgroundSize":"cover"}}],"content":"","link":""},"style":{"background-repeat":"no-repeat","background-size":"cover","background-position-x":"center","background-position-y":"bottom","padding":"0"}}],"content":"","link":""},"style":{"background-color":"f8f8f8","margin-bottom":"30px"}}
CSS-код для баннера
Вставьте его в настройки стилей страницы тренинга или в тему:
.t-banner {
display: flex;
align-items: center;
border-radius: 20px;
}
.t-banner.row {
margin-left: 0;
margin-right: 0;
}
.t-banner .col-text {
padding: 30px;
}
.t-banner h2.title {
margin-bottom: 15px;
font-size: calc(24px + 1vw) !important;
font-weight: bold;
}
.t-banner .description {
font-size: 16px;
margin-bottom: 15px;
}
.t-banner .btn {
font-size: 16px;
padding: 10px 16px;
border-radius: 4px;
}
@media (min-width: 769px) {
.t-banner .col-image img {
border-radius: 0 20px 20px 0;
}
}
@media (max-width: 768px) {
.t-banner {
flex-wrap: wrap;
}
.t-banner .col-text {
padding: 30px 30px 15px 30px;
}
.t-banner .description,
.t-banner .btn {
font-size: 14px;
}
.t-banner .col-image img {
border-radius: 0 0 20px 20px;
}
}
@media (max-width: 1200px) {
.t-banner h2.title {
font-size: calc(24px + .5vw) !important;
}
}
После импорта баннера в настройках родительского контейнера можно изменить фон, цвет текста, внешние отступы.
Радиусы скруглений заданы в стилях, поэтому если нужно их изменить или убрать, редактируйте CSS. То же с внутренними полями (padding). Они заданы для левой колонки в стилях.
Если хотите использовать баннер не на всю ширину контейнера, а в колонке (например, над списком уроков), замените тег заголовка с <h2>
на <h3>
.