Comment ajouter un bouton à la leçon

Sur Kwiga, vous pouvez ajouter un bouton de deux façons :

1. Méthode rapide – vous permet de définir la couleur et le texte du bouton.

2. L’utilisation du code – vous permet de modifier n’importe quel paramètre, comme le rayon des bordures, la taille, la couleur du contour, la hauteur, et plus encore.

Ajout rapide

Ouvrez la leçon dans laquelle vous souhaitez ajouter un bouton et insérez l’élément « Texte, Image, insertion de code ». Cliquez dans la zone où vous souhaitez placer le bouton et sélectionnez +Bouton dans la barre d’outils de l’éditeur de texte.

Dans le menu qui s’ouvre, vous pouvez ajouter un lien, définir le nom du bouton et personnaliser la couleur du bouton et du texte. Cliquez sur Enregistrer, et le bouton sera ajouté à votre leçon !

Ajout d’un bouton via le code

Vous pouvez ajouter un bouton dans une leçon de cours ou un marathon en utilisant du code HTML. Nous vous montrons comment faire ci-dessous.

Ouvrez la leçon dans laquelle vous souhaitez ajouter un bouton et insérez l’élément « Texte, Image, Intégration de code ».

Ensuite, ouvrez l’éditeur de code (si vous ne voyez pas la barre d’outils de l’éditeur de texte — cliquez dans la zone blanche pour activer le champ de saisie) :
L’éditeur de code s’ouvrira (une zone noire à l’écran) et, en haut du menu, vous verrez des boutons permettant d’ajouter des modèles de code prêts à l’emploi. Pour créer un bouton, sélectionnez Bouton :



Vous verrez le code apparaître sur la page, et au-dessus de celui-ci, votre bouton sera affiché.

Vous pouvez également personnaliser la taille de la police du bouton, le padding, la largeur du bouton et ajuster le rayon des bordures.

Vous pouvez définir la couleur du bouton en utilisant un code RGB ou HEX, un convertisseur ou un outil de sélection de couleur.

Placer plusieurs boutons côte à côte

Pour créer plusieurs boutons placés les uns à côté des autres, un code supplémentaire est nécessaire. Ci-dessous, vous trouverez le code pour trois boutons affichant les textes « Base », « Comfort » et « Pro » dans trois couleurs différentes. Vous pouvez modifier les parties correspondantes du code : texte, couleur, format du bouton… et n’oubliez pas d’ajouter le lien.



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

Les zones surlignées en jaune indiquent où la couleur du bouton est définie.