Шаблон адаптивного баннера для GetCourse

Баннеры свёрстаны из стандартных блоков визуального конструктора Геткурс с добавлением CSS.

Для установки баннера необходимо импортировать код блока, загрузить изображение и добавить CSS. Стили можно добавить на страницу с баннером или в тему.

ВАЖНО. Баннеры я верстал в «пустом Геткурсе». Если у вас в школе уже установлены какие-то стили или дизайн-наборы, баннеры могут отличаться от вида на моих скриншотах.

Если вы используете мой набор стилей для Геткурса, то код импорта и стили для баннеров берите из него. Код в этой статье чуть отличается от того, что используется в наборе.

Код импорта баннера

Используйте его вне колонок, иначе крупный кегль заголовка растянет его по высоте слишком сильно.

Код для импорта баннера в конструктор страниц:

{"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\">Дескриптор желательно не&nbsp;делать слишком длинным, чтобы в&nbsp;какой-то момент баннер не&nbsp;«поехал»</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>.