Come aggiungere un pulsante alla lezione

Su Kwiga, puoi aggiungere un pulsante in due modi:

1. Metodo rapido – ti permette di impostare il colore e il testo del pulsante.

2. Utilizzando il codice – ti permette di modificare qualsiasi parametro, come il raggio dei bordi, la dimensione, il colore del contorno, l’altezza e altro.

Aggiunta rapida

Apri la lezione in cui desideri aggiungere un pulsante e inserisci l’elemento “Testo, Immagine, Incorporamento di Codice”. Clicca nell’area in cui vuoi posizionare il pulsante e seleziona +Pulsante dalla barra degli strumenti dell’editor di testo.

Nel menu che si apre, puoi aggiungere un link, impostare il nome del pulsante e personalizzare il colore del pulsante e del testo. Clicca su Salva e il pulsante verrà aggiunto alla lezione!

Aggiunta di un pulsante tramite codice

Puoi aggiungere un pulsante a una lezione del corso o a un marathon utilizzando codice HTML. Di seguito ti mostriamo come farlo.

Apri la lezione in cui desideri aggiungere un pulsante e inserisci l’elemento “Testo, Immagine, Incorporamento di Codice”.

Poi apri l’editor di codice (se non vedi la barra degli strumenti dell’editor di testo, clicca nell’area bianca per attivare il campo di inserimento):

L’editor di codice si aprirà (un’area nera sullo schermo) e nella parte superiore del menu vedrai pulsanti con modelli di codice pronti all’uso. Per creare un pulsante, seleziona Button:


Vedrai il codice sulla pagina e sopra di esso apparirà il tuo pulsante.

Puoi anche personalizzare la dimensione del font del pulsante, il padding, la larghezza del pulsante e regolare il raggio dei bordi.

Puoi impostare il colore del pulsante usando codici RGB o HEX, un convertitore o uno strumento di selezione del colore.

Posizionare più pulsanti in una riga

Per creare più pulsanti affiancati, è necessario un codice aggiuntivo. Di seguito trovi il codice per tre pulsanti con il testo "Base", "Comfort" e "Pro", in tre colori diversi. Puoi modificare le parti corrispondenti del codice, cambiando il testo, il colore, il formato del pulsante e ricordandoti di aggiungere il link.



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

Le aree evidenziate in giallo indicano dove è specificato il colore del pulsante.