Шаг 1.
Переходим в тренинг .
Нажимаем кнопку "Действие" - "Настроить вид"
В поле выбора элемента выбираем блок Javascript, кликнув 2 раза
Шаг 2.
Кликаем на Javascript блок два раза и помещаем внутрь данный код:
$("<p class='lesson-theme'>Раздел 2. Капитальный
пуск</p>").insertBefore($(".lesson-id-218803225"))
где:
- Раздел 2. Капитальный пуск – это название раздела
- lesson-id-218803225 – ID урока "НАД" которым необходимо поместить название раздела (см. рис.)
После добавления кода, кликаем на кнопку сохранить.
Шаг 3.
После добавления кода при просмотре тренинга с уроками у вас уже появится название раздела, но для того чтобы все корректно отображалось необходимо добавить стили CSS.
Снова нажимаем кнопку "Действие" - "Настроить вид"
В поле выбора элемента выбираем блок HTML блок, кликнув по нему 2 раза
Помещаем код CSS в добавленный блок
Код CSS для блока HTML:
<style>
.lesson-theme {
font-size: 160%;
font-weight: bold;
text-align: left;
border-left: 5px solid #4d4d4d!important;
padding-left: 20px;
padding-right: 20px;
margin-left: 20px;
}
</style>
Во время добавления CSS кода необходимо придерживаться следующей последовательности действий:
- Кликаем на блок два раза, чтобы открыть редактор
- В редакторе нажимаем кнопку кода "< >" (см рис.)
- В редактор кода помещаем скопированный код CSS, который представлен выше
- После "не выходя" из редактора кода "< >", нажимаем на кнопку сохранить.
Если все сделали правильно, блок HTML схлопнется
и внутри не будет ни какого текста
Шаг 4.
Для того, чтобы разделить остальные уроки по разделам, просто дублируйте код JavaScript с заменой названием раздела и ID урока, над которым вы хотите разместить надпись.
Стили CSS повторно прописывать не нужно, они автоматом подключатся ко всем последующим названиям раздела.
Вот такой результат можно получить, следуя данной инструкции
авторизуйтесь