Wie man einen Button zur Lektion hinzufügt

Auf Kwiga können Sie einen Button auf zwei Arten hinzufügen:

1. Schnellmethode – ermöglicht es Ihnen, die Farbe und den Text des Buttons festzulegen.

2. Mit Code – ermöglicht es Ihnen, beliebige Parameter wie Border-Radius, Größe, Rahmenfarbe, Höhe und mehr zu bearbeiten.

Schnelles Hinzufügen

Öffnen Sie die Lektion, zu der Sie einen Button hinzufügen möchten, und fügen Sie das Element „Text, Bild, Code-Einbettung“ ein. Klicken Sie auf den Bereich, in dem Sie den Button platzieren möchten, und wählen Sie +Button in der Symbolleiste des Texteditors aus.

Im sich öffnenden Menü können Sie einen Link hinzufügen, den Namen des Buttons festlegen und die Farbe des Buttons und des Textes anpassen. Klicken Sie auf Speichern, und der Button wird zu Ihrer Lektion hinzugefügt!

Hinzufügen eines Buttons über Code

Sie können einen Button zu einer Kurslektion oder einem Marathon mithilfe von HTML-Code hinzufügen. Unten zeigen wir Ihnen, wie das funktioniert.

Öffnen Sie die Lektion, zu der Sie einen Button hinzufügen möchten, und fügen Sie das Element „Text, Bild, Code-Einbettung“ ein.

Öffnen Sie dann den Code-Editor (wenn Sie die Werkzeugleiste des Texteditors nicht sehen — klicken Sie in den weißen Bereich, um das Texteingabefeld zu aktivieren):
Der Code-Editor wird geöffnet (ein schwarzer Bereich auf dem Bildschirm), und oben im Menü sehen Sie Buttons mit vorgefertigten Codevorlagen. Um einen Button zu erstellen, wählen Sie Button:



Sie sehen den Code auf der Seite und darüber erscheint Ihr Button.

Sie können außerdem die Schriftgröße auf dem Button, das Padding, die Breite des Buttons und den Border-Radius anpassen.

Sie können die Farbe des Buttons mit RGB- oder HEX-Code, einem Konverter oder einem Farbwahlwerkzeug festlegen.

Mehrere Buttons in einer Reihe platzieren

Um mehrere Buttons nebeneinander zu platzieren, ist zusätzlicher Code erforderlich. Im Folgenden finden Sie den Code für drei Buttons mit den Texten „Base“, „Comfort“ und „Pro“ in drei verschiedenen Farben. Sie können die entsprechenden Teile des Codes bearbeiten, den Text, die Farbe, das Button-Format ändern und nicht vergessen, den Link hinzuzufügen.



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

Die gelb markierten Bereiche zeigen an, wo die Button-Farbe definiert ist.