Saltar al contenido principal
Las Variables del Tema constituyen los cimientos del sistema de diseño en CatalogBuilderApp. En lugar de configurar manualmente colores y fuentes en cada elemento, forma, capa de texto o ficha de producto, las Variables del Tema crean una guía de estilo centralizada que actúa como única fuente de verdad para todo el catálogo.
Variables del Tema Modo ClaroVariables del Tema Modo Oscuro

Paneles de Theme Colors y Theme Fonts en el Editor de Plantillas — Modos Claro y Oscuro

​
¿Por qué usar Variables del Tema?

Al diseñar catálogos de decenas o cientos de páginas y productos, modificar un color corporativo o cambiar de tipografía elemento por elemento resulta tedioso y propenso a inconsistencias. Gracias a las Variables del Tema:
  • Actualizaciones en Cascada Instantáneas: Ajusta una muestra de color o una fuente una sola vez y todos los elementos vinculados en el catálogo se actualizan en tiempo real.
  • Coherencia de Marca Total: Garantiza que cada tarjeta de producto, etiqueta de precio, encabezado y línea divisoria cumpla estrictamente con la identidad de tu empresa.
  • Libertad Ilimitada: Crea, renombra, edita o elimina tantos colores y roles tipográficos como necesite tu publicación.

​
Colores del Tema (Theme Colors)

El acordeón Theme Colors en la barra lateral izquierda gestiona todas las muestras de color globales.

​
1. Colores Base del Sistema

Toda plantilla incluye una paleta predeterminada:
  • Primary: Color de acento principal de la marca, aplicado a encabezados, títulos destacados y botones de acción.
  • Secondary: Tono complementario utilizado en insignias secundarias, resaltados de precios y bordes decorativos.
  • Background: Tono base del lienzo de las páginas y contenedores (ej. blanco puro, crema cálido o pizarra moderno).
  • Subtle Text: Tono tenue para números de referencia SKU, dimensiones, etiquetas de especificaciones y notas al pie.

​
2. Creación de Colores Personalizados

Puedes crear tantos colores personalizados como desees:
  1. Haz clic en el botón naranja + en la cabecera de THEME COLORS.
  2. Se generará un nuevo token de color dinámico.
  3. Haz clic en el recuadro de color para abrir el selector visual (color picker).
  4. Elige el tono deseado o introduce el código hexadecimal exacto (ej. #192C4D).

​
3. Edición y Cambio de Nombre

  • Modificar Color: Haz clic en la muestra de color en cualquier momento para elegir otro tono o escribir un nuevo código HEX.
  • Renombrar Variable: Haz doble clic en el nombre o haz clic en el icono del lápiz (✎) que aparece al pasar el cursor. Escribe un nombre descriptivo (ej. Dorado Premium, Insignia Oferta, Borde Divisorio). Los espacios se formatean automáticamente para garantizar compatibilidad técnica.
  • Inspección HEX en Vivo: Al colocar el cursor sobre cualquier fila de color, se muestra su código hexadecimal en el lateral derecho (ej. #192C4D).

​
4. Eliminación de Colores Personalizados

  • Pasa el cursor sobre la fila del color personalizado para ver el icono de la papelera roja (🗑️).
  • Haz clic en la papelera para eliminar permanentemente la variable.
  • (Nota: Los colores base del sistema como Primary, Secondary y Background están protegidos contra eliminación accidental para preservar la integridad visual de la plantilla).

​
Tipografías del Tema (Theme Fonts)

La sección Theme Fonts define la jerarquía tipográfica maestra de tu catálogo.

​
1. Roles Tipográficos Predeterminados

  • Display Font: Tipografía expresiva y de gran impacto visual, seleccionada para portadas, títulos principales y nombres de colecciones (ej. Playfair Display, Cinzel, Montserrat).
  • Body Font: Fuente limpia, moderna y altamente legible, diseñada para descripciones de producto, fichas técnicas, precios e índices (ej. Inter, Roboto, Outfit).

​
2. Creación de Nuevos Roles Tipográficos

¿Necesitas fuentes especiales para citas, notas legales o etiquetas de descuento? Puedes crear todas las tipografías que quieras:
  1. Haz clic en el botón naranja + en la cabecera de THEME FONTS.
  2. Se creará una nueva variable tipográfica personalizada.
  3. Selecciona la familia de fuentes en el menú desplegable.
  4. Haz doble clic en el nombre o pulsa el icono del lápiz (✎) para asignarle un rol (ej. Fuente de Precios, Texto Legal, Insignias).

​
3. Edición y Eliminación de Tipografías

  • Cambiar Familia: Despliega el selector para elegir entre fuentes web profesionales y Google Fonts optimizadas para pantalla e impresión.
  • Variantes y Pesos: Selecciona el grosor deseado (Regular, Medium, Bold, Extra Bold).
  • Eliminar Tipografía: Pasa el cursor sobre cualquier rol personalizado y haz clic en la papelera (🗑️) para borrarlo.

​
Cómo Vincular Variables a Elementos del Lienzo

Una vez definidas tus variables, vincularlas a los elementos de tu diseño es muy sencillo:
1

Selecciona un Elemento

Haz clic sobre cualquier cuadro de texto, figura geométrica, rectángulo o ficha de producto en el lienzo central.
2

Abre el Panel Inspector

Observa el panel lateral derecho (Inspector) donde se muestran las propiedades de estilo.
3

Vincula la Variable

En las opciones de Fill Color (relleno), Stroke Color (trazo) o Font Family (fuente), elige el nombre de tu variable en lugar de escribir un valor estático.
4

Propagación Instantánea

¡Listo! Cada vez que modifiques ese color o fuente en el panel izquierdo, el elemento se actualizará de forma automática en todas las páginas.

​
Buenas Prácticas

Contraste Claro y Oscuro

Asegúrate de que tus colores de Background y Subtle Text ofrezcan un contraste de lectura óptimo tanto en el visor de flipbook claro como oscuro.

Unificación de Fichas de Producto

Vincula los componentes de tarjetas de productos a variables globales para que todos los artículos compartan estilos de precio y tipografías idénticos.