Cómo agregar un botón a la lección

En Kwiga, puedes añadir un botón de dos maneras:

1. Método rápido: te permite definir el color y el texto del botón.

2. Usando código: te permite editar cualquier parámetro, como el radio de los bordes, el tamaño, el color del borde, la altura y más.
   

Adición rápida

Abre la lección donde deseas añadir un botón e inserta un elemento “Texto, Imagen, Inserción de código”. Haz clic en el área donde quieres colocar el botón y selecciona +Botón en la barra de herramientas del editor de texto.

En el menú que se abre, puedes añadir un enlace, establecer el nombre del botón y personalizar el color del botón y del texto. Haz clic en "Ahorrar" y el botón se añadirá a tu lección.

Añadir un botón mediante código

Puedes añadir un botón a una lección del curso o a un maratón utilizando código HTML. A continuación te mostramos cómo hacerlo.

Abre la lección donde deseas añadir un botón e inserta el elemento “Texto, Imagen, Inserción de código”.

Luego abre el editor de código (si no ves la barra de herramientas del editor de texto, haz clic en el área blanca para activar el campo de entrada):

El editor de código se abrirá (un área negra en la pantalla), y en la parte superior del menú verás botones para añadir plantillas de código listas para usar. Para crear un botón, selecciona Botón:




Verás el código en la página y, encima de él, verás tu botón.

También puedes personalizar el tamaño de la fuente en el botón, el padding, el ancho del botón y ajustar el radio de los bordes.

Puedes establecer el color del botón utilizando código RGB o HEX, un conversor o una herramienta de selección de color.

Colocar varios botones en una fila

Para crear varios botones ubicados uno al lado del otro, se requiere código adicional. A continuación se muestra el código para tres botones con los textos "Base", "Comfort" y "Pro" en tres colores diferentes. Puedes editar las partes correspondientes del código, cambiar el texto, el color, el formato del botón y recuerda también añadir el enlace.



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

Las áreas resaltadas en amarillo indican dónde se especifica el color del botón.