Ako pridať tlačidlo do lekcie

V Kwiga môžete pridať tlačidlo dvoma spôsobmi:

1. Rýchly spôsob – umožňuje nastaviť farbu a text tlačidla.
   

2. Pomocou kódu – umožňuje upraviť ľubovoľné parametre, ako sú zaoblenie rohov, veľkosť, farba obrysu, výška a ďalšie.
   

Rýchle pridanie

Otvorte lekciu, do ktorej chcete pridať tlačidlo, a vložte prvok „Text, obrázok, vloženie kódu“. Kliknite na miesto, kam chcete umiestniť tlačidlo, a vyberte +Tlačidlo na paneli nástrojov textového editora.

V otvorenej ponuke môžete pridať odkaz, nastaviť názov tlačidla a prispôsobiť farbu tlačidla a textu. Kliknite na Odoslať, a tlačidlo sa pridá do vašej lekcie!

Pridanie tlačidla pomocou kódu

Tlačidlo môžete pridať do lekcie kurzu alebo maratónu pomocou kódu HTML. Nižšie vám ukážeme, ako na to.

Otvorte lekciu, do ktorej chcete pridať tlačidlo, a vložte prvok „Text, obrázok, vloženie kódu“.

Potom otvorte editor kódu (ak nevidíte panel nástrojov na úpravu textu, kliknite do bielej oblasti a aktivujte pole na zadávanie textu):

Otvorí sa editor kódu (čierna oblasť na obrazovke) a v hornej časti ponuky uvidíte tlačidlá na pridávanie pripravených šablón kódu. Ak chcete vytvoriť tlačidlo, vyberte Tlačidlo:




Na stránke uvidíte kód a nad ním svoje tlačidlo.

Môžete tiež prispôsobiť veľkosť písma na tlačidle, vnútorné odsadenie, šírku tlačidla a upraviť zaoblenie rohov.

Farbu tlačidla môžete nastaviť pomocou kódu RGB alebo HEX, nástroja konvertor, alebo nástroja výber farby.

Umiestnenie viacerých tlačidiel vedľa seba

Na vytvorenie viacerých tlačidiel umiestnených vedľa seba je potrebný dodatočný kód. Nižšie je kód pre tri tlačidlá s textami „Base“, „Comfort“ a „Pro“ v troch rôznych farbách. Môžete upraviť príslušné časti kódu, zmeniť text, farbu, formát tlačidla a nezabudnite pridať aj odkaz.



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

Žlto zvýraznené oblasti označujú miesta, kde je uvedená farba tlačidla.