Настройка вида тренинга или списка тренингов

Чтобы настроить собственный вид тренинга или списка тренингов, используйте возможности конструктора на Getcourse и меняйте оформление блоков.

Например, вы можете настроить отображение тренингов или модулей в виде плитки изображений, чтобы при клике на определенное изображение ученик переходил в тренинг или модуль. Дополнительно можно добавить формы продажи или кнопки, чтобы ученики сразу видели возможность продлить доступ или записаться на вебинар/консультацию.

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

Перейти к настройкам вида и вносить в них изменения могут:

• владелец аккаунта,
• администратор.

Для этого откройте список тренингов или нужный тренинг и нажмите «Настроить вид» (для тренинга «Действия — Настроить вид»).

В настройках вида вам откроется меню «старого» конструктора.

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

По умолчанию на странице в разделе «Обучение — Тренинги» расположен список всех тренингов аккаунта. При переходе к определенному тренингу открывается список уроков и подтренингов (при их наличии).

Чтобы дополнить эти страницы, можно добавить на них собственные блоки, например, чтобы показать фотографии преподавателей, разместить формы допродажи, кнопки и т.д.

Для этого в настройках вида:

1. Выберите блок, под который хотите добавить новый элемент, — блок подсветится красным контуром.

2. Нажмите кнопку «Добавить блок».

3. Выберите нужную вкладку со списком блоков: «Элементы», «Формы», «Секции», «Блоки», «Системные», «Профиль».

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

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

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

Рассмотрим основные блоки конструктора:

• HTML
• Изображение
• Видео
• Кнопка
• Форма продажи

HTML-блок можно использовать для размещения кода, текста, изображений, ссылок или других элементов. Для открытия редактора кликните на блок дважды.

Изображения можно использовать для размещения расписания, анонсов мероприятия, графика обучения, фото работ и т.д.

Для этого используйте блоки:

• «Изображение» — позволяет добавить одну картинку;
• «Галерея» — позволяет добавить несколько картинок.

Блок «Изображение». Загрузите картинку, нажав кнопку «Изменить» в поле «Файл». Чтобы добавить подпись используйте поле «Подпись».

Блок «Галерея». Нажмите на поле «Список файлов» и загрузите изображения по кнопке «Загрузить файлы».

Используйте поля «Вид галереи» и «Размер превьюшек», чтобы настроить отображение изображений на странице.

С помощью блока «Видео» можно добавить видеоролик с Vimeo или с вашего канала на YouTube.

Для этого в настройках блока «Видео»:

1. Выберите источник видео в списке.

2. Откройте видео на сайте источника и скопируйте из адресной строки идентификационный номер.

3. Вставьте скопированный номер в поле «ID видео».

Если необходимо разместить в тренинге ссылку, например, на подключение к Telegram-боту или страницу продажи вебинара, используйте блок «Кнопка».

Надпись на кнопке настраивается в поле «Содержание». Ссылку для перехода поместите в блок «Ссылка при клике». О том, как изменить цвет и размер кнопки, читайте дальше в статье [ перейти к разделу ▼ ].

Чтобы ученики могли приобрести дополнительную услугу, продлить доступ, повысить тариф или, например, купить обучение в другом тренинге, разместите на странице блок «Форма продажи».

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

Также в настройках самого блока можно установить действия после заполнения формы: адрес для редиректа или добавление пользователей в определенную группу.

Подробнее читайте в статье → «Как разместить форму продажи в тренинге или уроке на GetCourse».

Любой блок, включая стандартные списки тренингов и подтренингов, можно переместить в рамках рабочей области.

Для перемещения блока зажмите его левой кнопкой мыши и перетяните в нужное место.

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

Переместить блоки можно:

1. В вертикальном направлении, изменяя порядок в текущей колонке.

2. В горизонтальном направлении, создавая новые колонки.

Для каждого блока в меню справа есть возможность настроить его внешний вид: задать цвет текста, указать отступы и выравнивание блоков или добавить ссылку при клике.

Некоторые блоки содержат несколько элементов (например, «Форма продажи»). При клике на выбранный элемент можно отдельно изменить его оформление.

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

Для добавления JavaScript-кода:

1. Добавьте на страницу блок «Javascript».

2. Кликните дважды на блок и добавьте код в раскрывшемся окне.

3. Для закрытия окна с кодом кликните мышью в другом месте.
4. Сохраните изменения

Изменение цвета:

Чтобы изменить цвет определенного элемента, добавьте следующий код:

• для блоков уроков

.lesson-list li .info { background: #00FFFF; }

• для фона блока «Список уроков»

.lesson-list { background-color:#00FFFF; }

где #00FFFF — это HEX-код цвета. Для поиска кода можно использовать сторонние сервисы, например, → get-color.

Скругление углов:

Чтобы скруглить углы контейнера, добавьте следующий код:

• для блоков уроков

.lesson-list li .info {border-radius: 10px;}

• для блока «Список уроков»

.lesson-list {border-radius: 10px;}

где «10px» — интенсивность скругления.

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

• блоки, добавленные на страницу тренинга;
• содержание в блоках (текст, собственный код, изображения и т.д.);
• настройки тренинга (начало и завершение тренинга, дополнительные учителя, расписание и т.д.).

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

Если лимит превышен, то при попытке сохранить изменения вы увидите предупреждение:

Чтобы убрать предупреждение и сохранить изменения, сократите количество символов или блоков на странице:

1. Если на странице требуется разместить блок с текстовой информацией, замените его на изображение с этим текстом. Так блок будет занимать меньше места.
2. Добавляйте новые элементы на страницу тренинга постепенно и сохраняйте промежуточные настройки. Это позволит опытным путем определить предельно допустимое количество информации на странице.
3. Чтобы создать сложный дизайн, используйте вместо страницы тренинга страницу сайта со списком уроков и ссылками на подтренинги. Добавьте другие необходимые элементы: кнопки, изображения, которые могут выступать в роли «баннеров», ведущих на страницу продажи смежных курсов. Количество блоков на страницах сайта не лимитируется.

По умолчанию блоки, размещенные на странице, видны всем пользователям. Вы можете настроить видимость элементов только для определенной категории пользователей, например, чтобы отобразить форму продажи VIP-тарифа только для учеников стандартного тарифа.

Чтобы настроить видимость блока:

1. Подготовьте сегмент пользователей, для которых нужно скрыть или отобразить блок.
2. Перейдите в настройки вида и нажмите на нужный блок.
3. Выберите подготовленный сегмент в поле «Показывать только для» или «Скрывать от» в меню конструктора.
4. Сохраните настройки.

Подробнее читайте в статье → «Настройка видимости блоков на странице».

По умолчанию собственные настройки вида тренинга не будут отображаться в мобильном приложении GetCourse. Страницы тренингов там имеют оптимизированный вид.

Чтобы в приложении отображались стили и настройки вида, доступные в браузере, выключите опции нативного вида. Подробнее в статье → «Мобильное приложение GetCourse».

Если вы хотите сбросить все изменения на странице и вернуться к исходному виду тренинга, нажмите «Сбросить все настройки страницы» внизу конструктора.

Один из вариантов настройки тренинга — отображение подтренингов в виде плитки, то есть в виде картинок-превью. При клике на изображение осуществляется переход к соответствующему подтренингу.

Аналогичным образом можно настроить весь список тренингов.

Для настройки отображения списка тренингов плиткой заранее подготовьте картинки-превью. Рекомендуем использовать изображения с одинаковыми пропорциями. Далее:

Шаг 1. Добавьте изображения:

1. Перейдите в настройки страницы и добавьте нужное количество блоков «Изображение».
2. Перетаскивая блоки мышкой, расположите их в виде плитки.

3. Загрузите изображение в каждый блок.

Шаг 2. Сделайте плитку статичной (чтобы плитка не растягивалась под размер экрана пользователя).

1. Выберите блок со всеми изображениями (в нашем примере это блок <3 колонки>).
2. Включите опцию «Не занимать всю ширину».

3. Для каждого блока с изображением в полях «Ширина» или «Высота» укажите нужные размеры.

Шаг 3. Сделайте изображения кликабельными

1. На отдельной вкладке откройте тренинг и скопируйте ссылку на него из адресной строки браузера.

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

3. По аналогии добавьте ссылки на тренинг для остальных картинок.
4. Не забудьте сохранить настройки.

Шаг 4. Настройте видимость блоков

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

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

Шаг 5. Скройте системный список тренингов

Если для всех тренингов настроены изображения со ссылками, то блок «Список тренингов» можно скрыть от всех пользователей или оставить видимым для администраторов:

• чтобы блок был доступен только администраторам, в поле «Показывать только для» выберите «Админы»;
• чтобы скрыть блок ото всех, в поле «Скрывать от» выберите «Все пользователи».

Готово! Теперь ученики вместо системного вида модулей будут видеть ваши изображения, при клике на которые смогут перейти в нужный модуль.

В следующей статье разбираемся, что такое темы и как их использовать для единого оформления аккаунта → «Темы: как изменить оформление тренингов или страниц аккаунта».