Как да добавите бутон към урока

В Kwiga можете да добавите бутон по два начина:

1. Бърз метод – позволява ви да зададете цвета и текста на бутона.
   

2. Чрез код – позволява ви да редактирате всякакви параметри, като радиус на заобляне, размер, цвят на контура, височина и други.
   

Бързо добавяне

Отворете урока, в който искате да добавите бутон, и вмъкнете елемент „Текст, изображение, вграждане на код“. Щракнете върху областта, където искате да поставите бутона, и изберете +Бутон от лентата с инструменти на текстовия редактор.

В отвореното меню можете да добавите връзка, да зададете име на бутона и да персонализирате цвета на бутона и текста. Щракнете върху Изпрати, и бутонът ще бъде добавен към вашия урок!

Добавяне на бутон чрез код

Можете да добавите бутон към урок в курс или маратон, като използвате HTML код. По-долу ще ви покажем как да направите това.

Отворете урока, в който искате да добавите бутон, и вмъкнете елемента „Текст, изображение, вграждане на код“.

След това отворете редактора на код (ако не виждате лентата с инструменти за редактиране на текст — щракнете в бялата област, за да активирате полето за въвеждане на текст):

Ще се отвори редакторът на код (черна област на екрана), а в горната част на менюто ще видите бутони за добавяне на готови шаблони за код. За да създадете бутон, изберете Бутон:




Ще видите кода на страницата, а над него ще видите вашия бутон.

Можете също да персонализирате размера на шрифта на бутона, вътрешните отстъпи, ширината на бутона и да регулирате радиуса на заобляне.

Можете да зададете цвета на бутона чрез 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>

Областите, подчертани в жълто, показват къде е зададен цветът на бутона.