Kako dodati dugme u lekciju

Na Kwiga platformi možete dodati dugme na dva načina:

1. Brzi način – omogućava vam da podesite boju i tekst dugmeta.
   

2. Pomoću koda – omogućava vam da izmenite bilo koje parametre, kao što su zaobljenost ivica, veličina, boja okvira, visina i drugo.
   

Brzo dodavanje

Otvorite lekciju u koju želite da dodate dugme i umetnite element „Tekst, slika, ugrađivanje koda“. Kliknite na mesto na koje želite da postavite dugme i izaberite +Dugme na traci sa alatkama uređivača teksta.

U meniju koji se otvori možete dodati vezu, postaviti naziv dugmeta i prilagoditi boju dugmeta i teksta. Kliknite na Pošalji, i dugme će biti dodato u vašu lekciju!

Dodavanje dugmeta putem koda

Dugme možete dodati u lekciju kursa ili maraton pomoću HTML koda. U nastavku ćemo vam pokazati kako to da uradite.

Otvorite lekciju u koju želite da dodate dugme i umetnite element „Tekst, slika, ugrađivanje koda“.

Zatim otvorite uređivač koda (ako ne vidite traku sa alatkama za uređivanje teksta — kliknite na belu oblast da biste aktivirali polje za unos teksta):

Otvoriće se uređivač koda (crna oblast na ekranu), a na vrhu menija videćete dugmad za dodavanje gotovih šablona koda. Da biste kreirali dugme, izaberite Dugme:




Videćete kod na stranici, a iznad njega videćete svoje dugme.

Takođe možete prilagoditi veličinu fonta na dugmetu, unutrašnje margine, širinu dugmeta i zaobljenost ivica.

Boju dugmeta možete podesiti pomoću RGB ili HEX koda, konvertora, ili alata za izbor boje.

Postavljanje više dugmadi u red

Za kreiranje više dugmadi postavljenih jedno pored drugog potreban je dodatni kod. U nastavku je kod za tri dugmeta sa tekstom „Base“, „Comfort“ i „Pro“ u tri različite boje. Možete izmeniti odgovarajuće delove koda, promeniti tekst, boju i format dugmeta, a ne zaboravite ni da dodate vezu.



<!-- Primer dugmeta -->

<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>

Žuto označene oblasti pokazuju gde je navedena boja dugmeta.