Дополнительные классы

В наборе есть несколько дополнительных классов, добавив которые к блокам визуального конструктора уроков, можно изменить их внешний вид.

В текущей версии набора таких классов пять:

• ol-color — красит номера пунктов списка в основной акцентный цвет (primary color).

• ol-round — добавляет фон пунктам списка в виде скруглённых прямоугольников (primary color).

• ol-circle — добавляет круглый фон пунктам списка (primary color).

• fill-width — растягивает изображение на всю ширину контейнера.

• expand — растягивает кнопку на всю ширину колонки.

Добавление класса к нумерованному списку

Чтобы применить стили к нумерованному списку, необходимо добавить один из этих классов (ol-color, ol-round или ol-circle) к блоку текста в настройках стилей.

Наведите курсор на блок с текстом. Нажмите на стрелку вниз рядом с иконкой корзины и в выпадающем меню выберите пункт «Стиль».

В открывшемся окне впишите нужный класс в строку «CSS-класс блока». Нажмите «Сохранить и закрыть».

В результате ко всем нумерованным спискам, содержащимся в этом текстовом блоке применятся стили списков.

Растягивание изображения

По умолчанию ширина изображения в уроке равна ширине колонки текста. Если вам нужно сделать изображение шире, используйте класс full-width. Он растянет изображение на всю ширину контейнера урока.

Добавляется класс точно так же, как для списков, только к блоку изображения.

Растягивание кнопок на ширину колонки

По умолчанию кнопки занимают ширину ровно такую, сколько текста на кнопке, плюс, небольшие поля. Чтобы растянуть кнопку на всю ширину колонки, по аналогии с добавлением других классов, добавьте к ней класс expand.

При добавлении класса expand учитывайте, что по умолчанию в GetCourse блок кнопок имеет ширину в 8 колонок. Растяните ширину на 12 колонок, чтобы кнопка заняла пространство от края до края (выделено на скриншоте верхним прямоугольником).

Классы кнопок социальных сетей

В набор добавлены следующие классы для кнопок:

• Telegram: btn-telegram

• Youtube: btn-youtube

• Вконтакте: btn-vk

• WhatsApp: btn-whatsapp

• Viber: btn-viber

• Instagram: btn-instagram

• Одноклассники: btn-odniklassniki

• Поддержка: btn-support

• Библиотека: btn-library

• Подарок: btn-gift

Если вы добавляете кнопку в конструкторе на странице тренинга, обязательно добавьте к ней дополнительный класс btn.

Если стилизуете кнопку в визуальном конструкторе урока, дополнительный класс btn добавлять не нужно, он есть у кнопки по умолчанию.