Crear páginas de destino puede ser un proceso largo y tedioso que involucra a varias personas de distintos departamentos. Veamos cómo hacerlo tan sencillo como rellenar un formulario.
Algunas de las empresas de más rápido crecimiento en el mundo han tenido un éxito enorme creando páginas de destino personalizadas para optimizar la tasa de conversión, el SEO y otras campañas de marketing. Pero el coste de producir estas páginas puede acumularse rápidamente y reducir el retorno de tu inversión.
Empresas como Intercom incluso han creado herramientas internas personalizadas para crear páginas de destino a gran escala. Pero no necesitas usar valiosos recursos de ingeniería para crear esas herramientas. Ni esas páginas.
En esta guía, te mostraré cómo crear un sistema de diseño de páginas de destino que te permita publicar rápida (¡en segundos!) y fácilmente tantas variaciones como quieras de una página de destino personalizada.
Y te mostraré cómo hacerlo sin usar un constructor de páginas de destino feo y sin una plantilla preestilizada (o con ella, si lo prefieres) como hace todo el mundo.
Pero, ¿cómo se construye este motor? Con un diseño de página de destino dinámico usando un CMS. O en este caso, Webflow CMS.
Y solo lleva 6 pasos:
- Diseña tu contenido: Elige los elementos de la página
- Crea tus colecciones: Crea una base de datos en Webflow CMS de la que tus páginas extraerán los recursos
- Crea tus elementos de colección: Crea tus elementos de colección, es decir, tus páginas de destino
- Diseña tu página de destino: Diseña la página real que extraerá el contenido de tu colección
- Conecta los campos de tu colección: Asocia los elementos de la página con los campos de la colección
- Publica tu sitio: Pon tus páginas en línea con unos pocos clics
Para ayudarte, he creado una plantilla de sistema de página de destino que puedes clonar y personalizar, ¡pero también puedes empezar desde cero si lo prefieres!
¡Madre mía! ¡Acabo de crear una página de destino en lo que dura este GIF!
Paso 1. Diseña tu contenido
Aquí seleccionarás los elementos de contenido que necesitarás para impulsar las conversiones. Estos se asociarán a una base de datos que almacenará el texto de la página, imágenes, vídeos, etc.
Para esto, nos apoyaremos en algunos de los elementos estándar que comentamos en nuestro artículo sobre cómo diseñar una página de destino de alta conversión.
- Navegación: Aunque la sabiduría popular sostiene que no deberías incluir navegación en tus páginas de destino, creo que es debatible. No he visto que una opción supere sistemáticamente a la otra.
- Sección principal: Aquí es donde sueles poner el titular, el subtítulo y una imagen o vídeo; todo enfocado en explicar al visitante qué es tu empresa o producto. Céntrate en los beneficios, no en las características.
- Llamada a la acción: Haz que sea lo más sencilla posible para no poner trabas al usuario.
- Resumen/soluciones: Profundiza un poco más para explicar qué hace tu producto y cómo resuelve el problema de tu cliente. Esto también debe centrarse en los beneficios, no en las características.
- Características: Describe los aspectos clave de tu producto que ayudan a resolver ese problema.
- Segundo formulario de registro: He comprobado que incluir otro formulario al final de la página puede aumentar la tasa de conversión en ciertos casos.
Puede parecer poco contenido, pero dado que el tiempo de toma de decisiones aumenta con la complejidad (ley de Hick), muchos profesionales del marketing han descubierto que es más efectivo reducir estas páginas de destino a la información esencial.
Nota: Ninguno de estos elementos es obligatorio; añade, elimina o ajusta según lo que mejor le siente a tu negocio. Y, por supuesto, según lo que mejor funcione.
Paso 2. Crea tus colecciones en el CMS de Webflow
Bien, ahora llegamos al motor que hace que todo este sistema funcione a las mil maravillas: el CMS (sistema de gestión de contenidos) de Webflow. Aquí es donde se guardan los recursos (textos, imágenes, vídeos, etc.) que usarán tus páginas de destino.
Para empezar, entra en Webflow, abre el panel del CMS, haz clic en crear colección y ponle de nombre “Landing pages”.
Ahora crea un campo que corresponda al tipo de contenido para cada uno de los elementos que hemos detallado arriba y guarda tu colección.
Los campos que hemos usado en la plantilla son:
- Encabezado (campo de texto plano)
- Subencabezado (campo de texto plano)
- Imagen/vídeo principal (campo de imagen)
- Texto del botón (campo de texto plano)
- Enlace del botón (campo de enlace)
- Título del formulario (campo de texto plano)
- Texto del botón del formulario (campo de texto plano)
- Características (campo de referencia múltiple)
Si quieres que las funciones que muestras en cada página varíen según el público objetivo, también puedes usar el CMS para crearlas. Para ello, tendrás que crear otra colección llamada "Funciones" con los siguientes campos:
- Nombre de la función (campo de texto sin formato)
- Icono de la función (campo de imagen)
- Descripción de la función (campo de texto enriquecido)
Ten en cuenta que los campos que utilices para tus funciones pueden variar, pero estos son un excelente punto de partida.
Ahora que tienes tu colección de Funciones, debes conectarla a tu colección de Páginas de destino:
- Abre el panel de Colecciones
- Haz clic en el icono de engranaje a la derecha de "Páginas de destino" para abrir la configuración de la colección
- Añade un campo nuevo
- Selecciona referencia múltiple como tipo de campo
- Selecciona la colección de Funciones como origen
- Guardar
Una vez hecho esto, podrás seleccionar cualquier función que hayas añadido como elemento en tu colección de Funciones al crear una nueva página de destino.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Paso 3. Crea los elementos de tu colección
Ahora llega la parte que harás para cada página de destino que quieras crear: añadir los elementos a tu colección.
- Abre tu colección en el panel de Colecciones
- Haz clic en Nueva página de destino
- Añade contenido para cada campo de la colección
Paso 4. Diseña tu página de destino
Ahora viene la parte conocida: diseñar la página de destino propiamente dicha. La mayoría querrá que un diseñador se encargue de esto. La buena noticia es que solo tendrán que hacerlo una vez y lo que diseñen funcionará de verdad. No tendrán que entregárselo primero a un desarrollador: Webflow escribirá código real en segundo plano mientras diseñan.
Si no cuentas con recursos de diseño, tienes algunas opciones:
- Usar una plantilla
- Clonar un kit de interfaz (o cualquier sitio clonable de Webflow) para copiar y pegar elementos prediseñados en tu página final
- Contratar a un experto en Webflow
En esta etapa, no te preocupes por el texto y las imágenes específicos. Solo dale estilo a la página como quieras basándote en los elementos de tu colección.
Por si te lo perdiste: he creado una plantilla de sistema de landing page sin estilo aquí.
Paso 5. Conecta los campos de tu colección a tus elementos de diseño
Aquí es donde empieza la magia: conectar los elementos de tu página a la colección del CMS que creaste antes. Así es como tus páginas saben de dónde sacar el contenido que creas en el CMS.
Paso 6. Publica tu sitio
Ahora toca publicar tus páginas. Haz clic en publicar. Eso es todo. Ahora visita tu página.
A partir de aquí, crear una nueva landing page es tan fácil como crear un nuevo elemento en la colección.
Echa un vistazo a todas las integraciones de marketing que tenemos para que conectes tus formularios, lances anuncios, integres analíticas, realices campañas de correo electrónico y mucho más.
Aquí tienes de nuevo esa plantilla de sistema de landing page clonable para ayudarte a empezar más rápido.
Puedes construirla gratis en un subdominio de webflow.io y añadir hosting cuando estés listo para publicarlas en tu propio dominio.
¡Feliz publicación!
Gracias a Adam Tanguay, Barrett Johnson, Soso Sazesh, Reid Benson, Shannon Fisher y, especialmente, a John Moore-Williams por ayudar con esta publicación.
