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

# Visión General del Editor

> Aprende cómo funciona el Editor de Catálogos visual, explora los paneles del espacio de trabajo y conoce las opciones para compartir tus flipbooks digitales y PDFs.

El **Editor de Catálogos** es el espacio de trabajo visual central de CatalogBuilderApp. Te permite maquetar, personalizar, organizar y publicar catálogos de productos profesionales y flipbooks digitales interactivos en tiempo real.

<Frame caption="Editor Visual de CatalogBuilderApp — Modos Claro y Oscuro">
  <img className="block dark:hidden rounded-lg" src="https://mintcdn.com/catalog-builder-app/qjpZknx9y9VPjE3J/images/editor/overview-light.png?fit=max&auto=format&n=qjpZknx9y9VPjE3J&q=85&s=602795dd7fe3cb5bd2f8dcc4eba06f1b" alt="Editor de Catálogos Modo Claro" width="1024" height="689" data-path="images/editor/overview-light.png" />

  <img className="hidden dark:block rounded-lg" src="https://mintcdn.com/catalog-builder-app/qjpZknx9y9VPjE3J/images/editor/overview-dark.png?fit=max&auto=format&n=qjpZknx9y9VPjE3J&q=85&s=8118a8c4ce159eee61da0e15fce60bf5" alt="Editor de Catálogos Modo Oscuro" width="1024" height="691" data-path="images/editor/overview-dark.png" />
</Frame>

***

## ¿Qué es el Editor de Catálogos?

El Editor de Catálogos ofrece un entorno visual e interactivo donde lo que ves en pantalla es exactamente lo que recibirán tus clientes. A medida que agregas productos, actualizas precios o ajustas el diseño, el lienzo se actualiza en vivo.

Ya sea que estés creando un flipbook digital optimizado para dispositivos móviles o un PDF de alta definición para impresión comercial, el editor automatiza el cálculo de cuadrículas, las proporciones tipográficas y la paginación.

***

## Estructura del espacio de trabajo y cómo funciona

La interfaz del editor se divide en tres áreas clave: la **Barra Superior de Navegación**, el **Panel Lateral Izquierdo** y el **Lienzo Interactivo**.

### 1. Barra Superior de Navegación

La barra superior te brinda acceso inmediato a las acciones globales y el control del catálogo:

* **Miga de pan y Título**: Muestra el nombre de tu organización, el título del catálogo activo y la insignia del plan (ej. `PREMIUM`).
* **Selector de Modos**:
  * **Modo Catálogo**: El modo predeterminado para gestionar los contenidos del catálogo: asignar productos, ajustar textos de portada, configurar datos de contacto y publicar.
  * **Modo Estructura**: Modo avanzado para diseñar y ajustar las plantillas maestras repetidoras, geometrías de tarjetas de producto, encabezados/pies de página y estilos base.
* **Controles de Zoom**: Alejar, acercar o consultar el porcentaje de escala actual (ej. `83%`) para revisar detalles tipográficos.
* **Historial (Deshacer / Rehacer)**: Reviértete o reaplica cambios con un solo clic mediante los botones de deshacer y rehacer.
* **Estado de Guardado y Botón Guardar Cambios**: Monitorea el estado en tiempo real (`UNSAVED` / `SAVED`) y consolida tus modificaciones con el botón verde **Guardar Cambios**.
* **Alternador de Modo Claro / Oscuro**: Cambia entre una interfaz oscura de alto contraste y un tema claro nítido con un solo clic.
* **Botón Publicar**: Botón de acción principal en color naranja que despliega el menú de publicación y compartición.

### 2. Panel Lateral Izquierdo

El panel lateral cuenta con 4 pestañas especializadas diseñadas para una configuración intuitiva:

<Tabs>
  <Tab title="Productos">
    Gestiona el inventario y la jerarquía de los productos de tu catálogo:

    * **Capacidad del Catálogo**: Monitorea la cantidad de productos añadidos respecto a tu plan (ej. `16 / ∞ productos`).
    * **Agregar Producto al Catálogo**: Añade productos individuales de tu inventario o importa nuevos productos en bloque.
    * **Buscador y Modos de Vista**: Encuentra productos rápidamente por nombre y alterna entre vista de lista o cuadrícula.
    * **Tarjetas de Producto**: Reordena artículos, revisa etiquetas de formato asignadas (`GRID`, `HALF PAGE`, `FULL PAGE`), edita precios y consulta categorías.
  </Tab>

  <Tab title="Contenido">
    Define los datos de identidad y páginas estructurales:

    * **Título y Eslogan**: Asigna el nombre principal de tu catálogo y un lema o eslogan distintivo.
    * **Contenido Descriptivo**: Redacta una introducción para la portada.
    * **Dropzone de Portada**: Sube, reemplaza o previsualiza tu imagen de portada en alta definición.
    * **Moneda y Fecha**: Configura la divisa (`USD`, `EUR`, etc.), la posición del símbolo monetario y la fecha de emisión.
    * **Tabla de Contenidos (Índice)**: Activa o desactiva la generación automática de la página de índice.
    * **Página de Contacto**: Habilita la contraportada con el logotipo, dirección, teléfono y redes sociales de tu empresa.
  </Tab>

  <Tab title="Diseño">
    Personaliza la presentación estética y las reglas de maquetación:

    * **Estilos y Tipografía**: Selecciona la combinación visual, espaciados y acentos cromáticos.
    * **Agrupación de Productos**: Agrupa los productos automáticamente por categoría o mantén un flujo continuo.
    * **Densidad de Páginas**: Ajusta la distribución de productos por página para lograr una lectura armónica.
  </Tab>

  <Tab title="Integraciones">
    Convierte tu catálogo en un canal activo de ventas:

    * **Pedidos Directos por WhatsApp**: Activa el botón de WhatsApp para que tus clientes te envíen pedidos con un toque.
    * **Número y Código de País**: Especifica tu línea de atención comercial.
    * **Plantilla de Mensaje**: Personaliza el texto automático que se enviará cuando un cliente consulte por un artículo (ej. `Hola, me interesa el producto [product.name]`).
  </Tab>
</Tabs>

### 3. Lienzo Visual Interactivo

El lienzo central renderiza tu catálogo tal como saldrá a la luz:

* **Navegación entre Páginas**: Desplázate con fluidez entre páginas usando las flechas laterales o los controles de paginación.
* **Modos de Vista (`1 Page` / `2 Pages`)**: Alterna entre la visualización de una sola página o pliego de doble página (vista de revista abierta) para verificar el equilibrio visual.
* **Marcadores de Sección en Vivo**: Etiquetas claras que identifican cada hoja (ej. `PAGE 1 — PORTADA`, `PAGE 2 — ÍNDICE`).

***

## Formas de compartir tu catálogo

Cuando tu catálogo esté listo, haz clic en el botón naranja **Publicar** en la barra superior para acceder a todas las opciones de distribución y descarga.

<Frame caption="Menú de Publicación y Compartición de Catálogos">
  <img className="rounded-lg max-w-sm mx-auto" src="https://mintcdn.com/catalog-builder-app/qjpZknx9y9VPjE3J/images/editor/publish-dropdown.png?fit=max&auto=format&n=qjpZknx9y9VPjE3J&q=85&s=b70750c9562d83cd708749d81fa4a427" alt="Opciones de publicación del catálogo" width="398" height="364" data-path="images/editor/publish-dropdown.png" />
</Frame>

<Note>
  **⭐ URL Única y Exclusiva por Flipbook**:
  Cada catálogo en CatalogBuilderApp cuenta con su propia **URL permanente y dedicada**. Cada vez que actualizas productos, precios o imágenes, la URL no cambia: tus clientes siempre verán la versión más reciente sin que tengas que reenviar archivos ni compartir nuevos enlaces.
</Note>

### Opciones de publicación y exportación

<CardGroup cols={2}>
  <Card title="Ver Flipbook" icon="book-open">
    Abre el catálogo digital interactivo en una pestaña nueva. Ofrece paso de página en 3D, adaptación completa a dispositivos móviles, zoom táctil y navegación rápida.
  </Card>

  <Card title="Copiar Enlace del Flipbook" icon="link">
    Copia la URL pública exclusiva al portapapeles. Ideal para compartir al instante por WhatsApp, redes sociales, campañas de correo o enlazarla a códigos QR.
  </Card>

  <Card title="Descargar PDF" icon="download">
    Descarga directamente el archivo PDF vectorial de alta definición, listo para imprimir profesionalmente o adjuntar en comunicaciones formales.
  </Card>

  <Card title="Actualizar PDF (últimos cambios)" icon="rotate">
    Vuelve a generar y actualiza el documento PDF incorporando las últimas modificaciones de precios, textos o productos guardados en el editor.
  </Card>

  <Card title="Actualizar Flipbook" icon="arrows-rotate">
    Sincroniza en cuestión de segundos los cambios recientes con la URL del flipbook existente, manteniendo tu vitrina digital siempre al día.
  </Card>

  <Card title="Exportar JSON" icon="code">
    Exporta la estructura completa, datos de productos y parámetros de diseño en formato JSON para copias de seguridad o integraciones técnicas.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.