Jak dodać przycisk do lekcji

Na Kwiga możesz dodać przycisk na dwa sposoby:

• Szybki sposób, który pozwala ustawić kolor i tekst na przycisku.
  

• Za pomocą kodu, gdzie można edytować dowolne parametry, takie jak promień zaokrąglenia, rozmiar, kolor obramowania, wysokość i inne.
  
  

Szybkie dodanie

1. Otwórz lekcję, do której chcesz dodać przycisk, i dodaj element Tekst, Obraz, Wstawianie kodu.
   

2. Kliknij w obszar, w którym chcesz dodać przycisk, a następnie na pasku edycji tekstu wybierz +Przycisk.
   
   

W otwartym menu możesz dodać link, nazwę przycisku oraz ustawić kolor przycisku i tekstu na przycisku. Kliknij Wyślij, a przycisk będzie już w Twojej lekcji!

Dodawanie przycisku przez kod

Przycisk do lekcji kursu lub maratonu można dodać za pomocą kodu HTML. Poniżej wyjaśnimy, jak to zrobić. Otwórz lekcję, do której chcesz dodać przycisk, a następnie dodaj element Tekst, Obraz, Wstawianie kodu.

Otwórz edytor kodu (jeśli nie widzisz paska do edycji tekstu, kliknij w białą przestrzeń do wprowadzania tekstu):

Otworzy się edytor kodu (czarne pole na ekranie), a u góry w menu zobaczysz przyciski do dodawania gotowych szablonów kodu. Aby utworzyć przycisk, wybierz Button.




Zobaczysz kod na stronie, a u góry będzie widoczny Twój przycisk.

Możesz także zmienić rozmiar czcionki na przycisku, odstępy, szerokość samego przycisku oraz regulować promień zaokrąglenia.

Nadanie koloru przyciskowi
Możesz nadać kolor przyciskowi, używając kodu RGB lub HEX, konwertera albo narzędzia do wyboru koloru.

Umieszczenie kilku przycisków w jednym rzędzie

Aby uzyskać kilka przycisków ustawionych obok siebie, należy użyć dodatkowego kodu. Poniżej znajduje się kod dla trzech przycisków z tekstem Base, Comfort i Pro w trzech różnych kolorach. Możesz edytować odpowiednie miejsca w kodzie, zmieniając tekst przycisków, kolor, format, a także pamiętaj o dodaniu linku.



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

Na żółto zaznaczono miejsca, w których określa się kolor przycisku.