Шаблоны баннеров
Last updated
Last updated
Шаблоны баннеров свёрстаны в визуальном конструкторе страницы тренингов GetCourse из стандартных блоков. GetCourse использует Bootstrap 3 для своих страниц, поэтому в баннерах используются классы этого фреймворка для адаптивности. Также используются дополнительные стили. Они находятся в файле t-banners.css.
Установите стили для баннеров в вашу тему по тому же принципу, как вы делали это при установке основных стилей набора. Если вы не планируете использовать баннеры в каждом тренинге, можно вставить стили в конкретный тренинг.
Баннеры имеют два типа: для всей ширины контейнера и для использования в колонке. У последнего используется тег заголовка <h3></h3>, чтобы он не растягивал баннер по высоте слишком сильно.
Светлый и тёмный баннер отличает лишь наличие класса .dark, который перекрашивает цвет заголовка.
А теперь обо всём подробнее и по порядку.
Откройте нужный тренинг и перейдите к настройке вида:
Откройте файл import-banners.txt и скопируйте код импорта нужного баннера.
Выберите контейнер, в который будете вставлять баннер. Например, если хотите вставить его в самый верх, выделите «Страница тренинга». Если хотите вставить баннер в колонку перед списком уроков, выделите «Список уроков» и т. д.
Нажмите «Импортировать блок» и вставьте скопированный код импорта в появившееся окно:
Нажмите кнопку «Импортировать».
Баннер может вставиться не так, как вы этого ожидали. Не в том месте, его может «покорёжить». Это не страшно. Выделите родительский контейнер баннера и перетащите в нужное место.
Баннер импортирован.
Изображение баннера при импорте у вас не появится, т. к. оно загружено в файловое хранилище аккаунта. Вам нужно загрузить своё. Выделите блок «Изображение» в правой колонке баннера и загрузите картинку.
Рекомендую использовать изображения с соотношением сторон 16:9 или 16:10, чтобы в мобильной версии баннеры не были слишком высокими и не занимали всю высоту экрана.
Также лучше использовать формат PNG с альфа-каналом (с прозрачным фоном).
Размер изображения по ширине не делайте больше 600–700 пикселей. Иначе размер файла будет большим, загружаться будет дольше, а толку никакого — ширина картинки в баннере 635px по ширине.
Чтобы изменить текст баннера, щёлкните по тексту двойным кликом. Откроется поле редактирования HTML-блока:
Измените текст в теге <h2> ... </h2> для заголовка. Для описания — в теге <p> ... </p>.
Нажмите в любом свободном месте редактора, чтобы завершить редактирование.
Чтобы изменить текст на кнопке и ссылку, выделите блок кнопки и в боковой колонке редактора внесите изменения:
В поле «Содержание» замените текст на кнопке. Также здесь добавлена иконка FontAwesome. Если она вам не нужна, удалите тег <i>.
Чтобы задать ссылку, замените значение в поле «Ссылка при клике».
Родительский контейнер баннера имеет два класса: t-banner и row. Первый класс используется для стилизации, второй — класс из Bootstrap.
Для тёмной версии баннера сюда добавляется третий класс — dark.
У баннера в настройках конструктора Геткурс задан цвет фона (вы его можете переопределить на любой, который вам нужен) и внешний отступ снизу.
Для тёмной версии баннера вам нужно будет также задать цвет текста, т. к. он не задан жёстко в стилях. Задайте #ffffff или любой другой.
Левая и правая колонки баннера имеют дополнительные классы:
Левая — col-text, col-xs-12 и col-sm-6
Правая — col-image, col-xs-12 и col-sm-6
Классы col-xs-12 и col-sm-6 отвечают за ширину колонок и адаптивность. Если вы знаете, как работать с Bootstrap, можете менять их под ваши нужды. Если нет, лучше оставьте как есть.
Старайтесь, чтобы заголовок занимал не более двух строк. То же относится и к описанию.
Если заголовок или описание получатся длинными, используйте изображение повыше, иначе оно будет непропорционально маленьким на фоне текста в левой колонке. Особенно на некоторых «переходных» размерах экранов.
