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

# Pestaña de Diseño (Agrupación y Estructura)

> Aprende a estructurar las páginas de tu catálogo usando los modos Por Prioridad y Por Categoría, reordenar secciones con arrastre y renombrar categorías.

La **Pestaña de Diseño (Layout Tab)** en el Editor de Catálogos te proporciona control absoluto sobre la secuencia estructural, la agrupación de páginas y el flujo de lectura de tu publicación.

Ya sea que prefieras destacar primero tus productos estrella o dividir el catálogo en capítulos temáticos por departamento, la Pestaña de Diseño distribuye los productos y calcula la paginación de forma totalmente automatizada.

***

## Modos de agrupación

En la parte superior de la pestaña, el control segmentado te permite alternar entre las dos estrategias principales de maquetación:

### 1. Modo Por Prioridad

En el modo **Por Prioridad**, las páginas se organizan estrictamente según el nivel de importancia visual asignado a cada producto.

<Frame caption="Modo Por Prioridad en la Pestaña de Diseño — Modos Claro y Oscuro">
  <img className="block dark:hidden rounded-lg max-w-sm mx-auto" src="https://mintcdn.com/catalog-builder-app/W78ML57neWm6jD0N/images/editor/layout-tab-priority-light.png?fit=max&auto=format&n=W78ML57neWm6jD0N&q=85&s=1130762aa6034de47d5ac8f1cb8af24c" alt="Modo Por Prioridad Claro" width="413" height="636" data-path="images/editor/layout-tab-priority-light.png" />

  <img className="hidden dark:block rounded-lg max-w-sm mx-auto" src="https://mintcdn.com/catalog-builder-app/W78ML57neWm6jD0N/images/editor/layout-tab-priority-dark.png?fit=max&auto=format&n=W78ML57neWm6jD0N&q=85&s=d194b0a909e7ec753d4088eb5701c20d" alt="Modo Por Prioridad Oscuro" width="415" height="690" data-path="images/editor/layout-tab-priority-dark.png" />
</Frame>

#### Cómo funciona el modo Por Prioridad:

* **Jerarquía Secuencial**: Las páginas fluyen desde los productos más destacados e individuales hasta las cuadrículas comerciales:
  1. **Portada**: Página inicial de presentación del catálogo.
  2. **Índice**: Tabla de contenidos generada automáticamente.
  3. **1 product page (Página de 1 producto)**: Diseños de página completa para artículos estelares (1ª Prioridad / Full Page).
  4. **2 products page (Página de 2 productos)**: Diseños de media página balanceados (2ª Prioridad / Half Page).
  5. **Cuadrícula de productos**: Distribución en cuadrícula para múltiples artículos por página (3ª Prioridad / Grid).
  6. **Información de Empresa**: Contraportada con datos de contacto corporativos.
* **Uso Recomendado**: Lookbooks promocionales, catálogos de temporada y folletos de venta rápida donde los productos insignia deben captar la atención de inmediato antes del resto del inventario.

***

### 2. Modo Por Categoría

En el modo **Por Categoría**, los productos se organizan en capítulos temáticos basados en su categoría asignada en el inventario.

<Frame caption="Modo Por Categoría en la Pestaña de Diseño — Modos Claro y Oscuro">
  <img className="block dark:hidden rounded-lg max-w-sm mx-auto" src="https://mintcdn.com/catalog-builder-app/W78ML57neWm6jD0N/images/editor/layout-tab-category-light.png?fit=max&auto=format&n=W78ML57neWm6jD0N&q=85&s=2ee53944eadd514c0c9ed18c1695ed72" alt="Modo Por Categoría Claro" width="343" height="1024" data-path="images/editor/layout-tab-category-light.png" />

  <img className="hidden dark:block rounded-lg max-w-sm mx-auto" src="https://mintcdn.com/catalog-builder-app/W78ML57neWm6jD0N/images/editor/layout-tab-category-dark.png?fit=max&auto=format&n=W78ML57neWm6jD0N&q=85&s=0e4dda99192d08a30e47e4fe9b568ddf" alt="Modo Por Categoría Oscuro" width="343" height="1024" data-path="images/editor/layout-tab-category-dark.png" />
</Frame>

#### Cómo funciona el modo Por Categoría:

* **Capítulos Temáticos**: Cada categoría (ej. *Furniture*, *Electrónica*, *Electronics*, *Home Appliances*) conforma un bloque independiente.
* **Contador de Productos por Categoría**: Muestra la cantidad total de artículos dentro de cada sección (ej. `3 products`, `5 products`).
* **Estructura en Acordeón**: Al desplegar una categoría se revela su jerarquía interna de maquetación:
  * **Featured Products (1 prod / page)**: Productos a página completa.
  * **Premium Products (2 prods / page)**: Productos a media página.
  * **Grid Products (Grid)**: Productos en cuadrícula.
* **Contadores por Nivel**: Insignias numéricas en vivo que indican cuántos artículos de esa categoría pertenecen a cada formato (ej. `3 prods`, `4 prods` o `0 prods`).
* **Uso Recomendado**: Catálogos mayoristas extensos, guías por departamentos y empresas multimarca donde los compradores navegan por familias de artículos.

***

## Funcionalidades de personalización interactiva

<CardGroup cols={2}>
  <Card title="Reordenamiento por Arrastre (Drag-and-Drop)" icon="arrows-up-down">
    Utiliza los controladores de arrastre (**⠿**) para cambiar el orden de las categorías completas o las páginas especiales. También puedes reordenar los subniveles internos de una categoría para definir si aparecen primero las páginas completas o las cuadrículas.
  </Card>

  <Card title="Clic para Renombrar Secciones" icon="pencil">
    Haz clic sobre el título de cualquier sección o categoría para editar su nombre directamente en línea. Presiona **Enter** o el icono del check para guardar; los nombres personalizados se sincronizan al instante en las cabeceras de página y en el Índice.
  </Card>

  <Card title="Cálculo Automático de Páginas" icon="calculator">
    Cada vez que cambias de modo o reordenas bloques, CatalogBuilderApp recalcula en vivo el pliego, el equilibrio visual y la paginación, sin necesidad de rediseños manuales.
  </Card>

  <Card title="Bloqueo Inteligente de Páginas Especiales" icon="sparkles">
    Páginas como el Índice o la Información de Empresa muestran insignias **Plus** si tu plan actual requiere actualización, con acceso a la ventana modal de mejora en un solo clic.
  </Card>
</CardGroup>

<Tip>
  **Previsualización Inmediata en el Lienzo**: Cada movimiento de arrastre o cambio de nombre se refleja al instante en el lienzo interactivo central, permitiéndote comprobar el equilibrio visual sin demoras.
</Tip>


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