> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Crear un tema

> Cree un sistema de diseño estandarizado en el Theme Builder definiendo los colores de marca, las fuentes y los componentes reutilizables para los widgets de su equipo.

La creación de un tema le permite definir un sistema de diseño estandarizado para su equipo. Puede establecer colores específicos, cargar fuentes de marca y precrear componentes directamente en el Theme Builder.

## Crear un nuevo tema

1. Vaya a **Studio** > **Temas** en la barra lateral izquierda.
2. Haga clic en **Añadir un tema**.
3. Introduzca un nombre para el tema y seleccione el o los **Proyectos** a los que afectará.
4. (Opcional) Añada una descripción y etiquetas.
5. Haga clic en **Siguiente** para abrir el **Theme Builder**.

### Definir colores

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/colors.png)
</Frame>

Utilice la sección **Colores** para definir la paleta disponible para los usuarios.

Para restringir a los usuarios a colores de marca específicos, cambie **Definir colores del tema** a **ON**.

* **Añadir un color:** Introduzca un código hexadecimal o haga clic en el icono **+**. Puede seleccionar un color del gradiente, ajustar la opacidad o utilizar la herramienta cuentagotas para tomar una muestra de su pantalla.
* **Gestionar colores:** Arrastre y suelte los colores para reordenarlos. Haga clic en el icono de la **papelera** para eliminar un color.

<Note>
  Si añade un componente al tema mientras **Definir colores del tema** está en **ON**, los colores predeterminados de ese componente se añaden automáticamente a la lista de colores del tema.
</Note>

Los colores añadidos aquí están disponibles en **Colores del tema** en el Widget Studio.

#### Modificación de colores bloqueados

Si un color está actualmente en uso por un componente de su tema, no podrá eliminarlo. Sin embargo, podrá editar el color. Cuando modifica un color, el cambio se aplica automáticamente a todos los componentes del tema que utilizan ese color.

### Añadir fuentes

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/fonts.png)
</Frame>

En la sección **Fuentes**, determine a qué tipografías distintas pueden acceder los usuarios. Marque una fuente de la lista para incluirla en su tema. Utilice la barra de búsqueda para buscar una fuente específica.

<Important>
  Debe seleccionar al menos una fuente para añadir componentes a su tema. Si elimina una fuente que está actualmente en uso, el sistema utilizará por defecto la primera fuente de su lista.
</Important>

Para añadir una fuente:

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-a-font.png)
</Frame>

1. Haga clic en **+ Añadir fuente**.
2. Seleccione la fuente de su tipografía:
   * **Desde su sitio web:** Introduzca el nombre de la familia de fuentes.
   * **Enlace a un archivo de fuente:** Introduzca el nombre de la familia de fuentes y la URL del archivo.
   * **Código de incrustación:** Introduzca el nombre de la familia de fuentes y el código de importación.
3. Haga clic en **Vista previa y añadir**.
4. Seleccione los grosores de fuente que desee incluir.
5. Haga clic en **Añadir**.

### Añadir y gestionar componentes

La sección **Componentes** le permite preconfigurar elementos (como botones, imágenes o formularios) para su equipo y definir qué componentes están permitidos en el tema. Puede añadir el mismo tipo de componente varias veces para crear variaciones; por ejemplo, un botón "Enviar" distinto y un botón "Cancelar".

#### Añadir un componente

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/add-components.png)
</Frame>

1. Haga clic en **+ Añadir** junto a **Componentes**.
2. Busque un componente o explore las categorías en la barra lateral izquierda.
3. Seleccione los componentes que desee incluir.
4. Haga clic en **Añadir componentes**.

#### Editar y bloquear componentes

Una vez que se ha añadido un componente a su lista, haga clic en el menú **Acciones secundarias** (tres puntos) para gestionarlo:

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/themes/create-a-theme/secondary-actions.png)
</Frame>

* **Cambiar nombre:** Asigne al componente un nombre descriptivo (por ejemplo, "CTA principal").
* **Editar:** Abra el editor de componentes para ajustar los estilos utilizando las [herramientas de Widget Studio](../widgets/create-a-widget-with-the-widget-studio/edit-your-widgets).
* **Bloquear:** Restrinja los permisos de edición de este componente. Como alternativa, haga clic en el icono de **candado** junto al menú **Acciones secundarias** para bloquear un componente.
  * **Cuando está bloqueado:** Los usuarios solo pueden modificar el contenido (texto/imágenes), la posición y el tamaño. No pueden diseñar elementos como colores o bordes.
  * **Cuando está desbloqueado:** Los usuarios tienen control total para cambiar el diseño.

## Activar su tema

Cuando termine de configurar su tema, haga clic en **Activar** en la esquina superior derecha. El tema ya estará disponible para utilizarse en sus experimentos y personalizaciones.

Para desactivar un tema más tarde, haga clic en el menú desplegable de estado (**Activo**) y seleccione **Desactivar**, o utilice el panel de Temas.
