Landinker

Editor de Landings

¿Qué es el Editor de Landings?

El Editor de Landings de Landinker es la herramienta visual que permite crear, editar y personalizar páginas dentro de la plataforma.
Su objetivo es brindar una experiencia intuitiva y flexible, para que cualquier usuario pueda construir landing pages optimizadas para la conversión, sin necesidad de conocimientos técnicos avanzados.

¿Cómo funciona?

• Cada landing está compuesta por componentes (Navbar, Hero, Grid, etc.).
• Los componentes tienen propiedades (props) que definen su apariencia y comportamiento.
• El editor permite arrastrar, soltar, ordenar y configurar componentes de manera modular.
• Una landing puede tener diferentes estados (borrador, publicada, archivada).
• Cada landing tiene un path único que determina en qué URL estará disponible.

Nota: Esta documentación explica el uso del editor y su lógica de funcionamiento desde el punto de vista del usuario. No incluye detalles internos de la API de Puck.

Propiedades (Props)

Las propiedades son configuraciones específicas de cada componente.
Ejemplos:

• Colores (backgroundColor, textColor)
• Tamaños (height, width, borderRadius)
• Contenido (title, subtitle, items, src)
• Comportamiento (sticky, autoplay, required)

Estas propiedades permiten personalizar la landing a nivel diseño y funcionalidad.

Componentes

Los componentes son los bloques de construcción de las landings.

Categorías oficiales

• Esenciales (Essential): Navbar, Footer
• Acciones (Interactive): Button, Form
• Diseño (Layout): Container, Grid, Flex, Space, Divider
• Multimedia (Media): Image, Video, Carousel
• Productos (Product): ProductsGrid, ProductTitle, ProductPrice, ProductImage, ProductDescription, ProductCategory
• Tipografía (Typography): HeadingBlock, Paragraph, IconText, List
• Otros (Other): Hero, Card, FAQ, CountdownTimer, LogoCloud

Cada componente tiene un esquema JSON definido con sus props y se pueden anidar en contenedores (Container, Flex, Grid).

Componentes de Producto

Los módulos de producto te permiten:

• Mostrar listas de productos con ProductsGrid.
• Vincular bloques individuales (ProductTitle, ProductPrice, ProductImage, ProductDescription, ProductCategory) a un producto específico.
• Usar productId fijo (ObjectId) o dinámico (variable desde el path).

Cuando el productId es dinámico, se recomienda configurar paths con segmentos como :idProducto y usar la variable resultante {{IDPRODUCTO}}.

Estados de las Landings

Una landing en Landinker puede estar en distintos estados:

• Borrador (Draft):

  • La landing está en edición.
  • No es pública.
  • Solo el equipo interno la puede ver.

• Publicada (Published):

  • La landing está activa y accesible en su URL pública.
  • Es visible para cualquier visitante.

• Archivada (Archived):

  • La landing queda guardada en el historial.
  • No es accesible públicamente.
  • Se puede restaurar a borrador o publicación si se necesita.

Paths de las Landings

Los paths son las rutas que determinan en qué URL vive cada landing.

• Se construyen a partir del slug definido en el editor.
• Ejemplo:
  • Landing con slug: oferta-2025
  • URL pública: https://tusitio.com/oferta-2025

Reglas

• Cada path debe ser único dentro de un mismo dominio.
• Los slugs no pueden colisionar con paths reservados (ej: /dashboard, /policy, /terms).
• Los paths pueden actualizarse, pero cambiarlo implica actualizar también su URL pública.

Paths dinámicos

También podés crear paths dinámicos usando segmentos con :.

• Ejemplo de path dinámico: /producto/:categoria/:slug
• Si un usuario entra a /producto/zapatillas/nike-air, la landing se renderiza igual pero con variables disponibles dentro del contenido.
• Cada segmento dinámico se transforma en una variable en mayúsculas:
  • :categoria -> {{CATEGORIA}}
  • :slug -> {{SLUG}}
  • :idProducto -> {{IDPRODUCTO}}

Cómo usarlos dentro del contenido

Podés insertar variables directamente en textos, títulos o descripciones usando llaves dobles:

• {{CATEGORIA}}
• {{SLUG}}
• {{CURRENT_PATH}}
• {{GROUP_NAME}}
• {{USER_NAME}}
• {{USER_EMAIL}}

Ejemplos prácticos

• Ruta fija: /black-friday
  • Sirve cuando la landing solo vive en una URL exacta.
• Ruta dinámica: /curso/:categoria/:slug
  • Sirve cuando querés reutilizar una misma landing para varias categorías o productos.
• Texto dentro de la landing: Explorá {{CATEGORIA}}: {{SLUG}}
  • Resultado de ejemplo: Explorá zapatillas: nike-air

Resolución de productos faltantes

En root props podés configurar strictProductResolution:

• false (recomendado para landing de marketing): si falta un producto, los bloques de producto faltantes se ocultan y la landing sigue renderizando.
• true (recomendado para landings de detalle): si falta un producto requerido, la landing se considera no encontrada y puede terminar en 404.

Esto es útil para decidir entre una experiencia tolerante a fallos o una experiencia estricta por URL de producto.

Resumen

El Editor de Landings de Landinker permite:

• Construir páginas con componentes personalizables.
• Administrar su ciclo de vida con estados claros (borrador, publicada, archivada).
• Definir paths únicos que controlan la accesibilidad y visibilidad de cada landing.
• Resolver escenarios avanzados con paths dinámicos y módulos de producto enlazados por variables.