Saltar al contenido principal
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

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

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. Para añadir una fuente:
  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

  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:
  • 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.
  • 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.