Crear un tema

Cuando su equipo crea widgets sin un sistema de diseño compartido, los colores, las fuentes y los componentes pueden desviarse de las directrices de marca entre proyectos. Crear un tema en el Theme Builder le proporciona a su equipo un sistema de diseño estandarizado: establece colores específicos, carga fuentes de marca y precrea componentes que cada widget utiliza de forma coherente.

​

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

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

​

Modificación de colores bloqueados

Si un componente de su tema utiliza actualmente un color, 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 pertenecen al 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

Después de añadir 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 o 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.