Conectar colecciones del CMS al diseño de tus páginas

Una vez que tienes tus datos organizados en Sitio web → Contenido, el siguiente paso es decidir cómo se verán en tu sitio web. En véltica puedes mostrar el contenido de tus colecciones de dos formas complementarias: a través de las páginas dinámicas que cada colección crea automáticamente, o insertando bloques conectados al CMS dentro de cualquier página estática (como una selección de Proyectos destacados en tu página de Inicio).

Qué son las páginas dinámicas de una colección: la página de índice (/coleccion) y la página de ficha (/coleccion/[slug])

Al crear una colección nueva, véltica añade dos páginas especiales bajo el grupo Colecciones del panel Páginas de tu editor:

1. Página de la lista (/coleccion): es la portada o directorio general de esa colección (por ejemplo, /proyectos o /recetas). Su función es mostrar una cuadrícula o listado con todas las fichas publicadas para que el visitante pueda explorarlas y hacer clic en la que le interese.
2. Página de cada ficha (/coleccion/[slug]): es la plantilla maestra individual. En lugar de diseñar una página para el proyecto A y otra distinta para el proyecto B, maquetas esta plantilla una sola vez conectando sus títulos, imágenes y textos a los campos de la colección. Cuando alguien visita /proyectos/casa-del-lago o /proyectos/torre-norte, véltica rellena automáticamente ese mismo diseño con los datos correspondientes a esa ficha.

Cualquier ajuste de diseño que hagas en la Página de cada ficha (como cambiar la estructura de dos columnas a una, o añadir un botón de contacto al final) se reflejará automáticamente en todos los elementos publicados de esa colección.

Cambiar el diseño de una página de colección y previsualizarla con distintos elementos desde la barra superior del editor

Cuando abres la Página de la lista o la Página de cada ficha en el editor visual, la barra superior te ofrece controles específicos para trabajar con contenido dinámico:

• Previsualizar con otra ficha (Viendo con «...» · Elegir otra ficha): al editar la plantilla individual (/coleccion/[slug]), verás en la parte superior con qué registro de tu colección se está rellenando el lienzo en ese momento. Haz clic en Elegir otra ficha para cambiar de elemento al instante y comprobar cómo se comporta tu diseño cuando un título es más largo, cuando una galería tiene más fotos o cuando un campo opcional está vacío.
• Cambiar la disposición (Diseño del CMS): si quieres probar otra presentación visual para la Página de la lista o para la Página de cada ficha, usa el selector de diseño de la colección para alternar entre distintas estructuras predefinidas sin perder un solo dato de tus fichas.

Insertar listas conectadas al CMS en cualquier página (CMS Cuadrícula, CMS Filas, CMS Carrusel, CMS Destacado, CMS Lista simple, Galería CMS, Índice de colecciones)

No estás limitado a mostrar tus colecciones únicamente en su página de índice. Puedes insertar un bloque conectado al CMS dentro de tu página de Inicio, Servicios o cualquier página de aterrizaje:

1. Abre la página donde quieras mostrar tus fichas y haz clic en Insertar en la barra de herramientas izquierda (o añade una sección desde Templates → CMS).
2. Elige el componente visual que mejor se adapte a tu sección:
   • CMS Cuadrícula: muestra las fichas en tarjetas organizadas por columnas con imagen, título, etiqueta y resumen.
   • CMS Filas (CMS Fila, CMS Fila Texto o CMS Fila simple): presenta los elementos en bandas horizontales, ideal para agendas de eventos, listados de experiencia o menús.
   • CMS Carrusel: crea un deslizador horizontal interactivo para recorrer varios elementos ocupando poco espacio vertical.
   • CMS Destacado (CMS Card Destacada): resalta un único elemento principal a gran formato (por ejemplo, el caso de éxito del mes o el próximo gran evento).
   • CMS Lista simple: un listado limpio y compacto de enlaces o títulos.
   • Galería CMS: conecta un bloque de galería directamente al campo Imágenes (Galería) de una ficha para mostrar todas sus fotografías.
   • Índice de colecciones: muestra tarjetas que enlazan a las distintas colecciones de tu sitio.
3. Al seleccionar el bloque en el lienzo, ve al grupo CMS del inspector derecho y elige en Origen / Colección qué colección quieres mostrar.
4. Ajusta los filtros del listado: puedes limitar la cantidad máxima de elementos visibles, ordenarlos por fecha o título, filtrar por Estado de vigencia (Activas, Por venir, Terminado) o activar Sólo destacados para que en la portada únicamente aparezcan tus mejores fichas.

Vincular textos, imágenes, fechas y botones a los campos de tu colección desde el grupo CMS del inspector

Dentro de una lista del CMS (marcada con el indicador Se repite) o dentro de la Página de cada ficha, las capas que pongas en una tarjeta se replican para todos los elementos. Para que cada tarjeta muestre la información real de su propia ficha en lugar de un texto fijo:

1. Haz clic directamente sobre el elemento interno que quieras conectar (un título, un párrafo, una etiqueta de categoría, una imagen o un botón).
2. En el panel inspector de la derecha, localiza la sección CMS y haz clic en Usar un campo del CMS (o abre el selector Campo).
3. Elige a qué columna de tu colección debe conectarse esa capa:
   • En un Texto, puedes vincularlo a Título, Texto largo, Fecha, Número o a una Opción (que además puede adoptar automáticamente el color asignado a esa etiqueta en la colección).
   • En una Imagen, vincúlala al campo Imagen de la colección para que cada tarjeta cargue su fotografía correspondiente.
   • En un Botón o en el enlace de la tarjeta completa, selecciona como destino La ficha de esta tarjeta para que al hacer clic lleve al visitante a la URL individual (/coleccion/[slug]), o bien conéctalo a un campo de tipo Enlace si prefieres dirigirlo a una web externa.
4. Si en algún momento quieres que un texto o imagen vuelva a ser fijo e idéntico en todas las tarjetas, selecciónalo y haz clic en Desvincular del CMS en el inspector.