Kā pievienot pogu lekcijai

Kwiga platformā pogu var pievienot divos veidos:

1. Ātrā metode – ļauj iestatīt pogas krāsu un tekstu.

2. Izmantojot kodu – ļauj rediģēt jebkurus parametrus, piemēram, stūru noapaļojumu, izmēru, kontūras krāsu, augstumu un citus.
   

Ātrā pievienošana

Atveriet nodarbību, kurai vēlaties pievienot pogu, un ievietojiet elementu “Teksts, Attēls, Koda ievietošana”. Noklikšķiniet vietā, kur vēlaties ievietot pogu, un teksta redaktora rīkjoslā izvēlieties +Poga.

Atvērtajā izvēlnē varat pievienot saiti, norādīt pogas nosaukumu un pielāgot pogas un teksta krāsu. Noklikšķiniet Saglabāt, un poga tiks pievienota nodarbībai!

Pogas pievienošana ar kodu

Pogu kursa nodarbībai vai maratonam var pievienot, izmantojot HTML kodu. Zemāk parādām, kā to izdarīt.

Atveriet nodarbību, kurai vēlaties pievienot pogu, un ievietojiet elementu “Teksts, Attēls, Koda ievietošana”.

Pēc tam atveriet koda redaktoru (ja neredzat teksta redaktora rīkjoslu — noklikšķiniet baltajā laukā, lai aktivizētu ievades lauku):

Tiks atvērts koda redaktors (melns laukums uz ekrāna), un izvēlnes augšdaļā redzēsiet pogas ar sagatavotām koda veidnēm. Lai izveidotu pogu, izvēlieties Poga:



Lapā parādīsies kods, un virs tā — jūsu poga.

Varat pielāgot pogas fonta izmēru, padding, pogas platumu un stūru noapaļojumu.
Pogas krāsu var iestatīt, izmantojot RGB vai HEX kodu, konvertētāju vai krāsu izvēles rīku.

Vairāku pogu ievietošana vienā rindā

Lai izveidotu vairākas pogas blakus vienu otrai, nepieciešams papildu kods. Zemāk ir kods trim pogām ar tekstiem “Base”, “Comfort” un “Pro”, katrai savā krāsā. Varat rediģēt attiecīgās koda daļas — mainīt tekstu, krāsu, pogas formātu un neaizmirst pievienot saiti.



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

Dzeltenā krāsā izceltās vietas norāda, kur tiek definēta pogas krāsa.