Saltar al contenido principal
El Editor de Plantillas (Template Builder) es el entorno avanzado de diseño visual de CatalogBuilderApp. Te permite diseñar, crear y personalizar plantillas de catálogos completamente personalizadas desde cero: definiendo maquetaciones de páginas maestras, componentes reutilizables, sistemas tipográficos y paletas de color que se adaptan automáticamente a tus productos.
Editor de Plantillas Modo ClaroEditor de Plantillas Modo Oscuro

Lienzo Visual del Editor de Plantillas (Modo Estructura) — Modos Claro y Oscuro

En CatalogBuilderApp, las plantillas no son archivos rígidos o estáticos. Todos los catálogos tienen acceso directo al Editor de Plantillas a través de la misma interfaz de edición unificada.
Cambia de Modo en Cualquier Momento: Puedes alternar entre el Modo Catálogo (gestión de productos y contenidos) y el Modo Estructura / Plantilla en cualquier momento mediante el control selector tipo píldora en la barra superior:[ ⊞ Structure ] ⟷ [ 🕮 Catalog ]
Al hacer clic en Structure (Estructura), el editor se transforma de inmediato en el Editor de Plantillas:
  • Cero Pérdida de Datos: Tus productos, descripciones y textos se conservan intactos mientras editas la estructura de diseño subyacente.
  • Variables Dinámicas en Tiempo Real: El lienzo muestra etiquetas dinámicas (como [Catálogo: titulo], [Catálogo: slogan] y [Catálogo: cantidad de productos]), indicando con precisión dónde se insertarán los datos reales.
  • Propagación Inmediata: Cualquier ajuste de maquetación, paleta de colores o fuentes que guardes en el modo Estructura se reflejará automáticamente en todas las páginas de tu catálogo al volver al modo Catalog.

​
¿Para qué sirve el Editor de Plantillas?

Aunque CatalogBuilderApp incluye una amplia galería de plantillas profesionales listas para usar, el Editor de Plantillas te ofrece total libertad creativa para construir publicaciones alineadas a la identidad de tu marca:

Plantillas Maestras Personalizadas

Define dimensiones de página, márgenes, elementos decorativos vectoriales, fondos y reglas visuales exclusivas para tu negocio.

Maquetaciones de Página a Medida

Diseña páginas específicas para cada sección: Portada, Tabla de Contenidos (Índice), páginas de producto destacado (1 producto), cuadrículas de múltiples productos y contraportadas de contacto.

Componentes y Ajustes Reutilizables

Crea fichas de producto modulares, etiquetas de precios, insignias y marcos de imagen una sola vez. El motor los repetirá en cada producto automáticamente.

Fichas de Tema Globales

Vincula colores y fuentes a variables maestras. Modificar un color primario o una tipografía actualiza cada elemento de todo el catálogo en un instante.

​
Recorrido por el Espacio de Trabajo

La interfaz del Editor de Plantillas organiza las herramientas de diseño en tres áreas clave:

​
1. Panel Lateral Izquierdo: Estructura y Jerarquía

  • Theme Colors (Colores del Tema):
    • Paleta centralizada con fichas de color globales: Primary, Secondary, Background y Subtle Text.
    • Agrega colores globales personalizados con el botón + para mantener la coherencia cromática de tu marca.
  • Theme Fonts (Tipografías del Tema):
    • Configura las parejas tipográficas del catálogo: Display Font (para títulos y encabezados llamativos, ej. Playfair Display) y Body Font (para descripciones y fichas técnicas, ej. Inter).
  • Page Layouts (Árbol de Maquetaciones de Página):
    • Añade nuevas páginas maestras mediante el menú desplegable + Add Page.
    • Despliega cada página (como Portada, Índice o 1 Product Page) para inspeccionar su jerarquía de capas:
      • Textos fijos, títulos de portada y eslóganes dinámicos.
      • Formas geométricas, líneas divisorias y rectángulos decorativos.
      • Zonas para logotipos y contadores de productos.
    • Reordena las capas con arrastrar y soltar para ajustar el orden visual y profundidad (z-index).

​
2. Lienzo Interactivo y Barra de Herramientas Vectorial Flotante

El área central ofrece un lienzo WYSIWYG interactivo de alta precisión:
  • Marcadores de Posición Dinámicos: Etiquetas visuales claras que señalan los campos que se rellenarán con los datos reales del catálogo.
  • Navegación entre Páginas: Pasa de una maquetación a otra mediante las flechas de dirección (<, >) o los puntos de paginación superiores.
  • Barra Vectorial Flotante Inferior: Muelle de herramientas rápidas para crear y añadir elementos:
    • Herramienta de Texto (T): Inserta textos estáticos o campos de variables dinámicas.
    • Formas Geométricas: Dibuja rectángulos, contenedores redondeados, círculos/elipses y líneas divisorias.
    • Separadores de Columnas y Grillas: Inserta contenedores multi-columna para cuadrículas de productos.
    • Ranura de Componentes de Producto: Coloca el espacio reservado para la ficha de producto.
    • Pluma Vectorial y Curvas Bézier: Dibuja formas vectoriales libres y líneas orgánicas.
    • Subida de Imágenes Personalizadas: Inserta logotipos, sellos de garantía o fondos visuales.

​
3. Panel Lateral Derecho: Inspector y Configuración de Página

Al seleccionar cualquier página o elemento se activa el inspector contextual:
  • Pestañas de Inspector: Alterna entre PAGE, LAYOUT y SETTINGS.
  • Interruptor Mostrar Página (SHOW PAGE): Activa o desactiva este interruptor para mostrar u ocultar la página en la publicación final del catálogo.
  • Selector de Tipo de Maquetación (LAYOUT TYPE): Define el rol de la página (Cover Page, Table of Contents, Product Page, etc.).
  • Propiedades del Elemento: Ajusta coordenadas, tamaño, tipografía, redondeo de esquinas (border-radius), color de relleno y trazo del elemento seleccionado.

​
4. Barra Superior de Control

  • Nombre de Plantilla / Catálogo: Edita el título directamente haciendo clic en el campo.
  • Píldora Selectora de Modo: Cambia entre Structure (Estructura/Plantilla) y Catalog (Contenido).
  • Cápsula de Zoom: Modifica el acercamiento del lienzo (- 69% +) para mayor comodidad visual.
  • Historial (Deshacer / Rehacer): Revierte o reaplica cambios con seguimiento completo de acciones.
  • Indicador de Guardado: Estado en tiempo real (Saved, Saving, Unsaved).
  • Selector de Tema Claro / Oscuro: Alterna entre el tema visual oscuro y claro.
  • Botón Guardar Cambios (Save Changes): Guarda toda la estructura en la base de datos.
  • Publicar (Publish): Exporta el catálogo como Flipbook digital interactivo o archivo PDF.

​
Cómo se Conectan las Plantillas con tus Productos

El Editor de Plantillas se comunica directamente con las pestañas de Productos y Diseño del Editor de Catálogos:
  1. En el Editor de Plantillas, defines la estructura visual de la tarjeta de producto (dónde va la imagen, tipografía del título, tamaño del precio, código SKU).
  2. En la Pestaña de Productos, asignas a cada producto su nivel de maquetación (COMPLETA, MEDIA o CUADRÍCULA).
  3. El motor de CatalogBuilderApp ensambla tu inventario real sobre los componentes de la plantilla, logrando páginas perfectamente diagramadas de forma 100% automática.