Qué hace que una landing page sea excelente

Antes de empezar a construir, conviene entender los elementos clave de una landing page de alta conversión:

• Propuesta de valor clara — Los visitantes deben entender qué ofreces en cuestión de segundos.
• Llamada a la acción potente — Un CTA principal que destaque y diga a los visitantes exactamente qué hacer.
• Prueba social — Testimonios, logos de clientes o estadísticas de uso que generen confianza.
• Diseño limpio — Mínimas distracciones. Cada elemento debe apoyar tu objetivo de conversión.
• Carga rápida — La velocidad importa tanto para la experiencia de usuario como para el posicionamiento SEO.

Cómo funciona Cmssy

Cmssy es un CMS headless con editor visual. Construyes los componentes de bloques de la landing page en tu propia aplicación Next.js (App Router) usando los paquetes @cmssy/react y @cmssy/next, y despliegas esa aplicación tú mismo (en Vercel o donde quieras). El contenido vive en el admin de Cmssy, y el editor visual enmarca tu sitio desplegado para que puedas arrastrar bloques y editar contenido en vivo. Cmssy entrega el contenido; tu aplicación Next.js lo renderiza.

Paso 1: Configura tu aplicación Next.js

Parte de un proyecto Next.js con App Router y añade el SDK de Cmssy, o clona la aplicación de referencia cmssy-web para tener una configuración funcional desde el primer momento. Instala los paquetes:

npm install @cmssy/react @cmssy/next

Envuelve tu sitio en CmssyServerLayout y añade una ruta catch-all que renderice páginas con createCmssyPage. Esto conecta tu aplicación con la API de entrega de Cmssy para que pueda obtener y renderizar todo lo que publiques en el admin.

Paso 2: Define tus bloques

Una landing page se compone de bloques. Define cada uno como un componente React con defineBlock, declarando su contenido editable con fields. Para una landing page normalmente necesitas un hero, un bloque de características y un CTA. Por ejemplo, un bloque hero:

import { defineBlock, fields } from "@cmssy/react";

export const Hero = defineBlock({
  type: "hero",
  fields: {
    title: fields.text(),
    subtitle: fields.text(),
    ctaLabel: fields.text(),
    ctaUrl: fields.text(),
  },
  render: ({ title, subtitle, ctaLabel, ctaUrl }) => (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
      <a href={ctaUrl}>{ctaLabel}</a>
    </section>
  ),
});

Registra tus bloques para que Cmssy los conozca. Los campos que declaras con fields se convierten en controles editables en el editor visual. El marcado y los estilos son tuyos, así que los bloques encajan exactamente con tu sistema de diseño. (Si clonaste cmssy-web, los bloques hero, características y CTA ya vienen incluidos — reutilízalos en lugar de escribir los tuyos.)

Paso 3: Crea la página en Cmssy

Abre el admin de Cmssy y haz clic en «Nueva página». Dale un nombre y un slug de URL (p. ej., /my-landing-page). El slug determina la ruta que renderizará tu aplicación Next.js. La página empieza vacía — a continuación la llenarás con tus bloques.

Paso 4: Construye la página en el editor visual

Abre la página en el editor visual. Enmarca tu sitio Next.js desplegado, así que ves tus componentes reales renderizándose en vivo. Arrastra tus bloques Hero, Características y CTA al lienzo en orden. Haz clic en cualquier bloque para editar su contenido en el panel lateral — los campos que declaraste con fields aparecen como controles de formulario. Escribe un titular convincente, añade 3-4 beneficios clave y configura tu botón CTA.

Paso 5: Añade prueba social

La gente confía en otra gente. Si has definido un bloque de testimonios o logos (o cmssy-web incluye uno), arrástralo para mostrar reseñas, logos de clientes o estadísticas clave. Colócalo pronto — justo después del hero — para generar credibilidad antes de pedir una conversión.

Paso 6: Edita contenido con IA (opcional)

Cmssy expone un servidor MCP, así que los asistentes de IA pueden editar el contenido de tu página directamente — reescribiendo titulares, ajustando textos o rellenando campos de bloques. La IA edita contenido en el admin de Cmssy, nunca tu código. Tus componentes de bloques quedan exactamente como los escribiste.

Paso 7: Configura el SEO

Ve a los ajustes de la página y rellena los campos SEO:

• Título SEO — Incluye tu palabra clave principal. No superes los 60 caracteres.
• Meta descripción — Resume tu página en 155 caracteres. Incluye una llamada a la acción.
• Palabras clave — Añade palabras clave relevantes que coincidan con la intención de búsqueda de tu audiencia.

Cmssy las renderiza automáticamente en los metadatos de tu aplicación Next.js, y la landing page puede funcionar en su propio dominio personalizado.

Paso 8: Publica

Cuando estés satisfecho con la página, haz clic en Publicar. El contenido se pone en vivo a través de la API de entrega, y tu aplicación Next.js desplegada lo renderiza en el slug que configuraste — rápido, renderizado en el servidor y en tu propio dominio. Compártela en redes sociales, insértala en campañas de email o enlázala desde tu sitio principal.

Buenas prácticas para landing pages

Ten en cuenta estos consejos mientras construyes e iteras:

• Un objetivo por página — No diluyas tu mensaje. Cada landing page debe tener un único objetivo de conversión.
• Diseño mobile-first — Más de la mitad del tráfico web viene de dispositivos móviles. Prueba en pantallas pequeñas.
• Haz tests A/B de titulares — Pequeños cambios en tu titular pueden impactar drásticamente la tasa de conversión.
• El tiempo de carga importa — Apunta a menos de 3 segundos. Comprime imágenes y evita scripts innecesarios.
• Usa la urgencia con cabeza — Las ofertas por tiempo limitado o los contadores pueden aumentar las conversiones si se usan con autenticidad.

Próximos pasos

¿Listo para crear tu primera landing page? Aquí tienes algunos recursos para empezar:

• Instala el SDK de Cmssy en tu aplicación Next.js.
• Sigue el quickstart para renderizar tu primera página de principio a fin.
• Lee la guía de bloques para conocer todo lo que pueden hacer defineBlock y fields.
• Configura el servidor MCP para editar contenido con IA.