Articles:
- How to delete a course?
- Copyright protection of your content on Kwiga
- Public or trial lesson
- Як змінити статус уроку на чернетку та приховати його від учнів
- Using checkpoints
- How to add an assignment to a lesson?
- How to create an assignment with mandatory verification by the curator?
- How to create a task for different offers?
- How to create a test with scores and automatic approval?
- How to create and conduct a survey among students on the course
- Contents of the lesson, all types of activities in the lesson
- Downloading video files
- How to add time codes to the video
- How to add button to the lesson
- Inserting iframe code
- Додавання дробів, математичних функцій, формул
- How to add text with spoiler to the lesson
- How to create a course on the Kwiga platform
- How to create a marathon?
- Як додати обкладинку на курс?
- Course Program Display Options
- How to add a public face to a course
- How to add a team to a course
- Course preview with different access levels
- Блок над уроками (верхній банер)
- Setting delays, schedule for opening and closing lessons (dripping content)
- Selling through a registration form on a third-party site
- How to create a copy of the course?
How to add button to the lesson
In this article:
На Kwiga можна додати кнопку двома способами:
- швидкий, що дає налаштувати колір та текст на кнопці
- використовуючи код, де можна відредагувати будь-які параметри, такі як радіус закруглення, задати розмір, колір контуру, висоту та інше.
Швидке додавання
Відкрийте урок, куди Ви хочете додати кнопку та додати елемент Текст, зображення, вставка коду. Клацніть на ту область, де хочете додати кнопку та на панелі редагування тексту виберіть +Кнопка:
У меню, що відкрилося, Ви можете додати посилання, назву кнопки і задати колір кнопки і тексту на кнопці. Натисніть Надіслати та кнопка вже у Вашому уроці!
Додавання кнопки через код
Додати кнопку в урок курсу або марафону можна за допомогою html коду. І ми розповімо, як це зробити нижче. Відкрийте урок, куди Ви хочете додати кнопку та додати елемент Текст, зображення, вставка коду.
Відкрийте редактор коду (якщо Ви не бачите смужку для редагування тексту – клацніть у білій області для введення тексту):
В вас відкриється редактор коду (чорна площина на екрані), а зверху у меню ви побачити кнопки для додавання готових шаблонів коду. Для створення кнопки оберіть Button:
Ви побачите код на сторінці, а зверху Ви можете бачити свою кнопку.
Ви також можете змінити розмір шрифту на кнопці, відступи, ширину самої кнопки та регулювати радіус заокруглення.
Задати колір кнопки Ви можете використовуючи RGB або HEX код, конвертер або інструмент підбору кольору.
Розміщення кількох кнопок у ряд
Для отримання кількох кнопок, які розташовані поруч один з одним, необхідно використовувати додатковий код. Нижче наведено код для трьох кнопок з текстом Base, Comfort та Pro відповідно трьох різних кольорів. Ви можете відредагувати відповідні місця в коді, змінивши текст на кнопка, колір, формат кнопки, а також не забудьте додати посилання.
<!-- Example Button -->
<div id="buttons-container">
<a id="my-button" href="/"> Base </a>
<a id="my-button" href="/"> Comfort </a>
<a id="my-button" href="/"> Pro </a>
</div>
<style>
#buttons-container {
display: flex;
grid-gap: 20px;
justify-content: center;
}
@media(max-width: 640px) {
#buttons-container {
flex-direction: column;
}
}
#my-button {
display: flex;
margin: 0 auto;
width: 100%;
padding: 13px 20px;
border-radius: 20px;
color: rgb(255, 255, 255);
background: orange;
justify-content: center;
&:first-child {
background: green;
}
&:last-child {
background: purple;
}
}
</style>
Жовтим показано місця, де вказується колір кнопки.
Didn't find the answer? Contact the support service via online chat or Telegram