Diseñar una landing de campaña paso a paso

En este tutorial montas la landing de ejemplo Acme Coffee — Verano Cold Brew: una promoción de verano con ruleta de premios, formulario de registro y bases legales. Seguirás los mismos pasos que para cualquier campaña real. Calcula entre 45 y 60 minutos la primera vez.

La página final tiene 11 secciones:

#	Sección	Bloques que usa
1	Portada con decoraciones (#inicio)	Hero + 4 decoraciones
2	Cinta de premios	Marquee
3	Cómo funciona (#como-funciona)	Image (ruleta) + Rich Text + Steps
4–5	Premios (#premios, #premios-lista)	Rich Text + 4 columnas con Image y Rich Text
6	Cifras y opiniones (#opiniones)	Stats + Testimonials
7	Cuenta atrás y llamada final	Countdown + Footer CTA
8	Registro (#participar)	Image + Registration con bases y privacidad
9	Preguntas frecuentes (#faq)	FAQ
10	Bases y privacidad (#bases)	Dos FAQ usados como acordeón
11	Pie legal (#legal)	Rich Text con enlaces

Antes de empezar

• Permiso Constructor de landings · Edición Enterprise con el editor de landings v2 activado. Para crear kits de marca necesitas además el permiso Portal de miembros.
• Una campaña creada y guardada, con su Landing Slug (URL). En el ejemplo: acme-coffee-verano-cold-brew. Mira Crear una campaña.
• Las bases legales y la política de privacidad publicadas como versiones en Campañas › Términos y bases. Mira Términos y bases.
• Las imágenes preparadas en JPG, PNG o WebP: foto principal, una imagen por premio y los adornos (granos de café, hielo, sol).

1. Crea el kit de marca

El kit de marca reúne los colores, las fuentes y el logo de la campaña. Así no tienes que elegir colores bloque a bloque.

1. Ve a Ajustes › Kits generales y pulsa Nuevo kit.
2. Escribe el Nombre, por ejemplo Acme Coffee — Verano Cold Brew.
3. Rellena los colores. En el ejemplo: Primario #241510 (marrón café), Secundario #F6EADB (crema), Acento #F28C28 (naranja), Fondo #FFF8EF y Texto #241510. Los colores Ganar, Perder y Pendiente se usan en los resultados del juego.
4. Elige Fuente de títulos, Fuente de texto, Radio de esquinas y Estilo de botón (en el ejemplo, Píldora). Pega la URL del logo.
5. Revisa el bloque Contraste (WCAG AA, 4,5:1): cada par debe marcar AA ✓. Si alguno sale Bajo AA, oscurece el texto o aclara el fondo.
6. Pulsa Guardar.

2. Abre el editor y asigna el kit

1. Abre la campaña en Campañas › Todas las campañas y pulsa Editar landing en la pestaña general.
2. Si la landing está vacía, pulsa Guardar borrador una vez. El kit solo se puede asignar a una página guardada.
3. Abre ⋯ › Kit de marca y elige tu kit. Restablecer al heredado vuelve al kit de la cuenta.

El editor tiene tres zonas. A la izquierda, Estructura, con las secciones y sus bloques. En el centro, el lienzo, que es la página real. A la derecha, el inspector, con las propiedades de lo que selecciones. Sin nada seleccionado, el inspector muestra los ajustes de Animaciones de toda la página.

3. Añade las secciones desde la biblioteca

Pulsa Añadir sección arriba de Estructura, o el + que aparece entre dos secciones del lienzo. Tienes dos opciones:

• Columnas vacías: Una columna, Dos columnas iguales, 1/3 + 2/3, 2/3 + 1/3, Tres columnas, Cuatro columnas o Barra lateral.
• Secciones prediseñadas: ya traen bloques y textos de ejemplo. Filtra por Portada, Mecánica, Premios, Prueba social, Legal o Cierre.

Para Acme, empieza con Portada, Cómo participar, Premios, Cifras clave, Testimonios, Portada + cuenta atrás, Formulario + bases y una sección Legal. Después ajusta cada una.

Para añadir un bloque suelto, pulsa Añadir bloque dentro de la columna. Busca por nombre o elige en Contenido, Formularios, Participación o Estructura.

Arrastra secciones y bloques en Estructura para ordenarlos. Haz doble clic en un texto del lienzo para editarlo ahí mismo.

4. Configura la portada

Selecciona el bloque Hero y rellena la pestaña Contenido:

• Texto superior: Acme Coffee Co. · Promo Verano Cold Brew.
• Titular: Gira la ruleta y gana café todo el verano. Es el único título principal de la página.
• Subtítulo: una o dos frases con la mecánica y el premio estrella.
• Texto del botón: Quiero girar la ruleta.
• Enlace del botón: elige Anclaje a bloque y #participar. El botón baja hasta el formulario.
• Imagen: súbela con Upload o elígela en Gallery. Escribe siempre el Texto alternativo de la imagen.

Ahora selecciona la Sección 1 en Estructura. En Fondo elige Degradado con los dos marrones del kit. En Avanzado › Ancla (para enlaces #) escribe inicio.

Las anclas (inicio, como-funciona, premios, participar, faq, bases) permiten enlazar a cada sección desde botones, el pie legal o un mensaje de WhatsApp.

5. Añade decoraciones a la portada

Las decoraciones son imágenes libres que flotan sobre la sección: en el ejemplo, dos granos de café, un cubito de hielo y un sol.

1. Con la Sección 1 seleccionada, baja hasta Decoración y pulsa Añadir decoración. Elige la imagen.
2. Selecciona la decoración y abre Diseño. Colócala con X %, Y %, W % y H %, gírala con Rotación y decide si va delante o detrás del contenido con Orden de capas.
3. En En móvil elige Debajo del contenido, Ocultar o Mantener en su sitio. En Acme se ocultan para que el titular respire en pantallas pequeñas.
4. Deja activada Imagen decorativa (sin texto alternativo): los lectores de pantalla la ignoran.

En el ejemplo, las decoraciones de la portada y la ruleta de la sección 3 se mueven al hacer scroll (parallax y giro). El editor muestra la posición en reposo; pulsa Reproducir animaciones para ver el movimiento. Configurar este efecto desde el inspector está en curso. Mira el recuadro «Limitaciones conocidas» al final.

6. Anima la entrada de los bloques

Selecciona un bloque, por ejemplo Steps, y abre la pestaña Animación:

• Entrada: Aparecer, Subir, Bajar, Desde la izquierda, Desde la derecha o Acercar.
• Velocidad, Retardo y Distancia.
• Solo la primera vez: la animación no se repite si el visitante vuelve a subir.

Para que las cuatro tarjetas de premios entren una tras otra, selecciona su sección y elige Escalonar elementos › Suave o Medio.

Sin nada seleccionado, el inspector muestra las Animaciones de la página:

• Intensidad: Sutil, Normal o Marcada. Acme usa Normal.
• Botones al pasar el ratón: Elevar, Brillo, Escalar o Ninguno.
• En móvil: deja Reducidas (recomendado). Quita el parallax y el desenfoque en teléfonos modestos.

Si el visitante tiene activado «reducir movimiento» en su dispositivo, las animaciones se desactivan solas. El texto debe entenderse siempre sin movimiento. Las animaciones están paradas mientras editas: pulsa Reproducir animaciones (Mayús+Espacio) para verlas.

7. Rellena el resto de bloques

Bloque	Qué rellenar	En el ejemplo
Marquee	Elementos: cada uno de tipo Texto o Imagen.	«Café gratis todo el verano», «Kits Cold Brew en casa»…
Steps	Título y Descripción de cada paso.	Compra, regístrate, gira.
Image + Rich Text	Una columna por premio en una sección de Cuatro columnas.	Café gratis, kit, tote bag, cupón −20 %.
Stats	Valor y Etiqueta de cada cifra.	+12 mil participantes, 98 % volvería a participar.
Testimonials	Cita, Autor, Cargo y Avatar.	Tres opiniones con ciudad.
Countdown	Título y Fecha objetivo.	«La ruleta se cierra en», fin de la promoción.
Footer CTA	Titular, texto y botón.	Botón «Participar ahora» al ancla #participar.
FAQ	Pregunta y Respuesta de cada elemento.	Quién participa, cuántas veces, cómo se recibe el premio.

Para las bases y la privacidad, añade una sección de Dos columnas iguales con ancla bases y un bloque FAQ en cada columna. Cada apartado de las bases (Organizador, Ámbito y duración, Premios…) es un elemento desplegable.

8. Configura el formulario de registro con bases y privacidad

Selecciona el bloque Registration y, en Contenido, rellena Titular, Subtítulo y Texto del botón de envío (en el ejemplo, Registrarme y girar).

En Legals añade una casilla por documento con Añadir elemento:

Campo	Bases legales	Política de privacidad
Key	bases	privacy
Text	«He leído y acepto las bases legales de la promoción y confirmo que soy mayor de 18 años.»	«Acepto la política de privacidad.»
Url	Dirección del documento publicado, o #bases para bajar al acordeón.	#bases
Terms Version Id	Número de la versión de bases activa.	Opcional.

Ligar las bases a su versión hace que cada aceptación quede registrada con la versión vigente.

Por último, cierra la página con una sección Legal de una columna y ancla legal. Pon un Rich Text con el organizador y enlaces a Bases legales, Política de privacidad, Preguntas frecuentes y Contacto.

9. Revisa los avisos de Problemas

Al final de Estructura, el panel Problemas detecta fallos antes de publicar. Por ejemplo:

• El formulario no tiene bases ligadas a una versión de términos.
• Falta el pie legal, falta el título principal o hay más de uno.
• Hay imágenes sin texto alternativo o con contraste bajo.
• La primera sección o el formulario tienen animación de entrada. En ambos casos el participante espera más.

Pulsa Arreglar cuando aparezca para corregirlo con un clic.

10. Revisa la página en móvil

Casi todo el tráfico de una promoción llega desde el móvil y desde WhatsApp. Cambia de dispositivo con los botones Móvil, Tablet y Escritorio de la barra superior, o con las teclas 1, 2 y 3.

En Tablet o Móvil, la pestaña Diseño de un bloque guarda alineación, tamaño de texto, espaciado y visibilidad solo para ese dispositivo. Un punto azul lo indica; Restablecer vuelve a heredar del escritorio. En una sección, Visibilidad muestra u oculta toda la franja por dispositivo.

11. Previsualiza el borrador

• Vista previa abre el borrador en otra pestaña, sin guardar. El enlace dura 15 minutos.
• ⋯ › Compartir vista previa › pestaña Vista previa (privada) crea un enlace de 24 horas para quien no tiene acceso a IncentIA. Puedes protegerlo con Contraseña (opcional). Guarda el borrador antes de compartirlo.
• Comentarios muestra lo que han anotado los revisores sobre la vista previa compartida.

12. Publica

1. Pulsa Guardar borrador (Ctrl+S) mientras trabajas. La página pública no cambia.
2. Cuando todo esté revisado, pulsa Publicar…. El editor pide confirmación con el número de bloques cambiados: «¿Publicar la página? N bloque(s) cambiado(s).».
3. La cabecera pasa a Publicado. Si después sigues editando, verás Borrador con cambios sin publicar hasta que vuelvas a publicar.

Para publicar más tarde, usa ⋯ › Programar. Para volver a la versión publicada, ⋯ › Descartar borrador. ⋯ › Historial de versiones muestra las versiones anteriores.

Consejos de diseño

• Un solo mensaje por sección y un único botón principal que siempre lleve a #participar.
• Usa los colores del kit, no colores sueltos. Si cambias el kit, toda la página se actualiza a la vez.
• Fotos reales y con texto alternativo; adornos ligeros y como Imagen decorativa.
• Pocas animaciones: intensidad Sutil o Normal, sin animar la portada ni el formulario, y Reducidas en móvil.
• Pon las bases y la privacidad a un clic del formulario, y el pie legal en la última sección.

Comprueba que funciona

1. Pulsa Ver página: se abre la dirección pública /landing/c/acme-coffee-verano-cold-brew.
2. Comprueba que el botón de la portada baja al formulario y que los enlaces del pie abren las bases y la privacidad.
3. Ábrela en tu móvil. Si tu cuenta tiene activados los subdominios de campaña, también responde en {slug}-{cuenta}.{tu dominio}. Por ejemplo, acme-coffee-verano-cold-brew-demotest.staging.incentia.app.
4. Para el enlace corto y el QR, sigue Publicar la landing con enlace corto y QR.

Limitaciones conocidas

Hay mejoras en curso que afectan a este tutorial:

• Estilo de la página y kit de marca: la página pública todavía no aplica todo el estilo de página ni todos los valores del kit (por ejemplo, las fuentes). Revisa siempre el resultado con Ver página.
• Formulario de registro en inglés: algunos textos del formulario publicado salen en inglés («First name», «Last name», «I agree to receive communications», «(read)»), igual que los campos Legals del inspector.
• Imágenes SVG: todavía no se muestran en la página publicada. Sube PNG, JPG o WebP.
• Animación al hacer scroll: el parallax de las decoraciones y el giro de la ruleta aún no se configuran desde el inspector.

Siguientes pasos

• Landing pages: direcciones públicas, editor por secciones y animaciones.
• Constructor de landings: referencia completa del editor.
• Publicar la landing con enlace corto y QR
• Lanzar una campaña con juegos