Конструктор навчального контенту CYHPER

Конструктор контенту

Огляд

Під час створення та редагування курсів платформа надає вбудований редактор, який дозволяє інструкторам, викладачам та адміністраторам створювати контент безпосередньо всередині курсів, додаючи форматований текст, зображення, вкладення та посилання.

Редактор також дозволяє користувачам форматувати сторінки вмісту за допомогою стовпців та сіток, а також додавати інтерактивні віджети, такі як акордеони, фліпбокси тощо.

Вбудований редактор курсів доступний у розділах курсу. У цій статті ви дізнаєтесь, як отримати доступ до різних елементів редактора та використовувати їх для створення захопливого та естетичного навчального контенту.

Інформація
Зверніть увагу, що бізнес-платформа за замовчуванням використовує термін « семестровий курс» , а академічна платформа — термін «семестрове заняття» . У цій статті терміни «курс» і «заняття» є взаємозамінними.

Доступ до редактора

Редактор відображається щоразу, коли ви редагуєте сторінку в межах курсу.

Щоб отримати доступ до редактора в існуючому курсі:
  1. Доступ до існуючого курсу.
  2. Натисніть на модуль/урок.
  3. Натисніть «Додати розділ» , щоб додати новий розділ (або виберіть існуючий розділ).
  4. Натисніть «Сторінка» .
  5. Додайте заголовок до сторінки.
  6. Натисніть кнопку «Зберегти» .
  7. Натисніть «Редагувати» .
Інформація
Щоб дізнатися, як створити новий курс, перегляньте розділ «Додавання курсу» статті «Курси та заняття для викладачів» .


Відобразиться сторінка редагування , яка складається з кількох меню та інструментів:
  1. Верхнє меню : Верхнє меню дозволяє редагувати заголовок розділу, перемикатися між режимом перегляду «Редактор» та «Попередній перегляд» , а також зберігати або скасовувати зміни.
    1. За замовчуванням сторінка відображається в режимі редактора , що дозволяє активно редагувати вміст. Щоб переглянути вміст перед його збереженням, натисніть «Попередній перегляд» .
  2. Меню конструктора контенту : Меню конструктора контенту відображається в лівій частині редактора. Це меню дозволяє перетягувати макети та віджети контенту на сторінку. Макети та віджети контенту будуть розглянуті детальніше в цій статті.
    1. Зверніть увагу, що меню конструктора контенту можна згортати та розгортати за допомогою стрілки поруч із кнопкою «Структура» , щоб забезпечити додатковий простір для створення вмісту на сторінці.
  3. Панель інструментів : Панель інструментів надає різноманітні інструменти форматування, які дозволяють налаштовувати текст, додавати зображення, посилання тощо. Функціональність панелі інструментів буде детальніше розглянуто в цій статті.
  4. Сторінка або полотно : полотно – це місце, куди ви додаєте текст, зображення та віджети для створення вмісту сторінки.
Інформація
Зверніть увагу, що новий редактор із конструктором контенту буде доступний лише з 1 квітня 2026 року.

Курс, модуль, розділ сторінки в режимі редагування з виділеним верхнім меню, меню конструктора контенту, панеллю інструментів та полотном сторінки

Меню конструктора контенту

Меню конструктора контенту дозволяє додавати віджети макета та контенту до вашого полотна. Меню конструктора контенту складається з трьох розділів:
  1. Режим конструктора контенту : Меню конструктора контенту за замовчуванням має значення Віджети , що дозволяє вибирати віджети макета та контенту, які можна додати до полотна. Після додавання віджетів до полотна можна натиснути «Контур» , щоб побачити порядок доданих віджетів. Вкладка «Контур» дозволяє швидко та легко змінювати порядок віджетів.
  2. Макет : Розділ «Макет» містить віджети «Сітка» та « Стовпці ». Ці віджети дозволяють додавати до вашого контенту сітку або набір стовпців, які можна редагувати.
  3. Вміст : Розділ «Вміст» містить різноманітні віджети, які дозволяють додавати інтерактивність та візуальну привабливість до вашого контенту, такі як акордеони , табулатури , картки тощо. Ви можете додати будь-який із віджетів контенту до полотна, щоб розпочати налаштування віджета відповідно до вашого навчального контенту. Крім того, будь-який із віджетів контенту можна розмістити у віджеті «Макет ». Наприклад, ви можете додати віджет «Перевернутий рядок» до кожного розділу стовпця, щоб створити рядок взаємодій перевернутого рядка.

Макет: Сітка

Розділ «Макет» містить два віджети: «Сітка» та «Стовпці» . Щоб створити налаштовувану сітку на полотні:
  1. Розмістіть курсор на полотні та натисніть кнопку «Сітка» .
  2. Або перетягніть віджет «Сітка» на полотно.


Віджет «Сітка» за замовчуванням відображає два стовпці та два рядки.
  1. Використовуйте розкривні списки «Стовпці» та «Рядки» , щоб визначити макет сітки. Ви можете вибрати до чотирьох стовпців і чотирьох рядків.
  2. Ви можете налаштувати проміжок між стовпцями та рядками за допомогою розкривного списку «Проміжок» . Виберіть між Малий , Середній , Великий та Дуже великий .
  3. Вертикальне вирівнювання Значок вертикального вирівнювання Кнопка дозволяє вибирати між вертикальним вирівнюванням тексту та зображень у розділі сітки зверху, по центру та знизу.
  4. Натисніть «Додати рядок» , щоб додати ще один рядок (до чотирьох).
  5. Натисніть кнопку «Додати стовпець» , щоб додати ще один стовпець (до чотирьох).
  6. Натисніть «Видалити рядок» або «Видалити стовпець» , щоб видалити рядок або стовпець.
Щоб додати вміст у сітку:
  1. Клацніть у межах розділу сітки, щоб почати додавати вміст.
  2. Використовуйте панель інструментів , щоб форматувати текст і додавати зображення, посилання або навіть відео.
    1. Зверніть увагу, що панель інструментів детально розглядається далі в цій статті.
  3. Ви можете додавати віджети контенту в розділ сітки.
    1. Наприклад, ви можете розмістити перекидний блок у кожній секції сітки.
  4. Ви можете будь-коли натиснути кнопку «Попередній перегляд» , щоб переглянути свій вміст.
    1. Натисніть «Редактор» , щоб повернутися до режиму редагування.

Макет: Колонки

Щоб створити налаштовувані стовпці на сторінці:
  1. Розмістіть курсор на полотні та натисніть кнопку «Колонка» .
  2. Або перетягніть віджет «Колонка» на полотно.


Віджет « Стовпці» за замовчуванням відображає два стовпці.
  1. Використовуйте розкривний список « Стовпці» , щоб вибрати кількість стовпців. Ви можете вибрати до чотирьох стовпців.
  2. Ви можете налаштувати проміжок між стовпцями за допомогою розкривного списку «Проміжок». Виберіть між «Маленький» , «Середній» , «Великий» та «Надто великий» .
  3. Використовуйте розкривний список «Напрямок» , щоб створити горизонтальні або вертикальні стовпці.
  4. Вертикальне вирівнювання Значок вертикального вирівнювання Кнопка дозволяє вибрати вертикальне вирівнювання тексту та зображень у стовпці: зверху, по центру та знизу.
  5. Натисніть кнопку «Додати стовпець» , щоб додати ще один стовпець (до чотирьох).
  6. Натисніть «Видалити стовпець» , щоб видалити стовпець.
Щоб додати вміст у стовпець:
  1. Клацніть у стовпці, щоб почати додавати вміст.
  2. Використовуйте панель інструментів , щоб форматувати текст і додавати зображення, посилання або навіть відео.
    1. Панель інструментів детально розглядається далі в цій статті.
  3. Ви можете додавати віджети контенту всередині стовпця.
    1. Наприклад, ви можете розмістити віджет «Картка» всередині стовпця.
  4. Ви можете будь-коли натиснути кнопку «Попередній перегляд» , щоб переглянути свій вміст.
    1. Натисніть «Редактор» , щоб повернутися до режиму редагування.

Віджети контенту

Розділ «Вміст» містить шість віджетів: «Акордеон», «Табуляції», «Картка», «Текст виноски», «Цитата» та «Поле відображення». Щоб додати віджет до полотна:
  1. Розмістіть курсор на полотні та клацніть на віджеті вмісту.
  2. Або перетягніть віджет вмісту на полотно.
  3. Ви можете розмістити кілька віджетів контенту на полотні.
  4. Ви також можете розмістити будь-який віджет контенту в розділі сітки або стовпця .
    1. Наприклад, якщо вам потрібне групування перекидних вікон, ви можете спочатку додати Grid , а потім розмістити віджети Flip Box у кожній секції сітки.


Після додавання віджетів до полотна їх можна переміщувати та змінювати порядок різними способами. Щоб змінити порядок віджетів:
  1. Натисніть «Структура» в меню «Конструктор контенту», щоб переглянути список віджетів, доданих до полотна.
    1. Використовуйте стрілки вгору та вниз на віджетах у списку, щоб змінити порядок віджетів на полотні.
  2. Кожен віджет на полотні також має невелике меню у верхньому правому куті віджета.
    1. Використовуйте стрілки вгору та вниз, щоб змінити порядок віджетів на полотні.
  3. Ви також можете перетягувати віджети на полотно, натискаючи та утримуючи кнопку зміни порядку значок переупорядкування значок ліворуч від віджета та перетягування віджета в нове місце.


Будь-який віджет на сторінці також можна видалити або продублювати. Щоб видалити або продублювати віджет:
  1. Натисніть значок із трьома крапками у верхньому правому куті віджета, щоб відобразити невелике меню.
  2. Натисніть «Видалити» , щоб видалити віджет.
  3. Натисніть «Дублікувати» , щоб дублювати віджет. Будь-який вміст, який ви додали до віджета, буде включено до дубліката віджета.
Меню-акордеон на полотні сторінки з виділеною піктограмою меню з трьома крапками

Віджет контенту: Акордеон

Акордеон – це інтерактивний віджет, який об’єднує розділи контенту та дозволяє користувачам розгортати та згортати кожен розділ за потреби. Кожен розділ має заголовок, на який можна натиснути, і який показує вміст. Щоб додати акордеон на полотно:
  1. Розмістіть курсор на полотні та натисніть «Акордеон» або перетягніть віджет «Акордеон» з меню конструктора контенту на полотно.
За замовчуванням Акордеон відображає два розділи, кожен із заголовком та розділом вмісту. Щоб налаштувати Акордеон :
  1. Клацніть безпосередньо на тексті заповнювача заголовка , щоб редагувати його.
  2. Клацніть заголовок , щоб розгорнути розділ і відобразити розділ вмісту.
  3. Клацніть безпосередньо на тексті заповнювача контенту , щоб редагувати його. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до розділу контенту.
  4. Натисніть «Додати елемент» , щоб додати додатковий розділ. Ви можете додати до десяти розділів акордеона.
  5. Натисніть «Видалити елемент» , щоб видалити розділ.
Інформація
Зверніть увагу, що коли учні переглядають ваш контент, усі розділи акордеона будуть закриті за замовчуванням.
Курс, модуль, розділ сторінки в режимі редагування з прикладом віджета Accordion на полотні

Віджет контенту: Вкладки

Віджет «Вкладки» – це інтерактивний віджет, який упорядковує пов’язаний контент в окремі подання (вкладки), дозволяючи користувачам перемикатися між кожною вкладкою, не залишаючи віджет. Щоб додати віджет «Вкладки» до полотна:
  1. Розмістіть курсор на полотні та натисніть «Вкладки» або перетягніть віджет «Вкладки» з меню конструктора контенту на полотно.
За замовчуванням у віджеті відображаються три вкладки, кожна з яких має назву вкладки та розділ вмісту. Щоб налаштувати віджет «Вкладки» , виконайте такі дії.
  1. Клацніть безпосередньо на тексті заповнювача заголовка вкладки щоб редагувати текст заголовка вкладки.
    1. Зверніть увагу, що колір тексту заголовка вкладки є основним акцентним кольором вашої платформи.
  2. Клацніть безпосередньо на тексті-заповнювачі вмісту вкладки , щоб редагувати текст вмісту. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до вмісту вкладки.
  3. Клацніть на заголовок іншої вкладки щоб перейти до вкладки для редагування заголовка та вмісту.
  4. Натисніть «Додати вкладку» , щоб додати додаткову вкладку. Ви можете додати до восьми вкладок.
  5. Натисніть «Видалити вкладку» , щоб видалити вкладку.
Курс, модуль, розділ сторінки в режимі редагування з прикладом віджета вкладок на полотні

Віджет контенту: Картка

Віджет «Картка» – це контейнер, який застосовує вбудоване форматування, щоб допомогти контенту виділитися з-поміж решти сторінки. Віджети «Картка» містять заголовок і контент. Основний акцентний колір вашої платформи відображається з лівого боку контейнера. Щоб додати віджет «Картка» до полотна:
  1. Розмістіть курсор на полотні та натисніть «Картка» або перетягніть віджет «Картка» з меню конструктора контенту на полотно.
За замовчуванням текст-заповнювач відображається у віджеті «Картка» . Щоб налаштувати віджет «Картка» , виконайте такі дії.
  1. Клацніть безпосередньо на тексті заповнювача заголовка картки, щоб редагувати текст заголовка.
  2. Клацніть безпосередньо на тексті заповнювача вмісту картки , щоб редагувати його. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до вмісту картки.
Курс, модуль, розділ сторінки в режимі редагування з прикладом віджета картки на полотні

Віджет контенту: Виноска

Віджет «Текст виноски» пропонує чотири попередньо встановлені формати для привернення уваги до різних типів контенту. Чотири варіанти: Підказка , Примітка , Попередження та Приклад . Щоб додати віджет «Текст виноски» до полотна:
  1. Розмістіть курсор на полотні та натисніть «Текст виноски» або перетягніть віджет «Текст виноски» з меню конструктора вмісту на полотно.
За замовчуванням текст-заповнювач відображається у віджеті «Текст виноски» . Щоб налаштувати віджет «Текст виноски» , виконайте такі дії.
  1. Виберіть тип виклику з розкривного списку «Тип» . Доступні такі варіанти: Порада , Примітка , Попередження та Приклад .
    1. Вибраний вами тип виклику визначатиме колір контуру та фону віджета.
  2. Клацніть безпосередньо на тексті тимчасового оголошення , щоб відредагувати його. Ви можете скористатися панеллю інструментів, щоб додавати зображення, посилання або відео до віджета оголошення.

Віджет контенту: Цитата

Віджет «Цитата» пропонує три попередньо встановлені формати цитат, які можна використовувати під час додавання цитат до вашого контенту. Три варіанти: Класичний, Сучасний та Мінімальний . Щоб додати віджет «Цитата» до полотна:
  1. Розмістіть курсор на полотні та натисніть «Цитата» або перетягніть віджет «Цитата» з меню конструктора контенту на полотно.
За замовчуванням текст-заповнювач відображається у віджеті «Цитата». Щоб налаштувати віджет «Цитата», виконайте такі дії.
  1. Виберіть тип котирування з випадаючого списку «Тип» . Доступні варіанти: Класичний, Сучасний та Мінімальний .
    1. Вибраний вами тип цитати визначатиме форматування віджета цитати.
  2. Клацніть безпосередньо на тексті заповнювача цитати щоб редагувати текст. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до віджета цитат.
  3. Клацніть безпосередньо на тексті заповнювача джерела цитати, щоб редагувати джерело цитати.

Віджет контенту: Flip Box

Віджет «Flip Box» – це інтерактивна двостороння картка, яка перевертається, коли користувачі натискають на неї. Flip Box ідеально підходить для карток та контенту для запитань і відповідей. Щоб додати віджет «Flip Box» до полотна:
  1. Розмістіть курсор на полотні та натисніть «Відкинути рамку» або перетягніть «Відкинути рамку» віджет з меню конструктора контенту на полотно.
За замовчуванням відображається передня частина віджета Flip Box із заповнювачем. Щоб налаштувати віджет Flip Box :
  1. Натисніть «Редагувати передню частину» або клацніть безпосередньо на тексті заповнювача Flip Box , щоб редагувати текст на передній частині картки. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до картки.
  2. Натисніть «Редагувати назад» , щоб редагувати текст на звороті картки. Ви можете використовувати панель інструментів, щоб додавати зображення, посилання або відео до картки.
  3. Натисніть «Перевернути» , щоб перевернути картку в будь-який момент під час редагування вмісту.
  4. Клацніть розкривний список «Форма» , щоб вибрати між квадратом або прямокутником для перевертання.
Курс, модуль, розділ сторінки в режимі редагування з прикладом віджета Flip Box на полотні

Меню панелі інструментів

Панель інструментів складається з рядка меню та значків, які дозволяють редагувати вміст на сторінці та у віджетах. Панель інструментів також відома як HTML-редактор. Щоб дізнатися більше, перегляньте статтю про HTML-редактор .

Курс, модуль, розділ сторінки в режимі редагування з виділеною панеллю інструментів