Guía sobre cómo construir una página de aterrizaje desde cero

Tabla de Contenidos

Hablamos mucho sobre cómo optimizar páginas de aterrizaje aquí en Embudos Web, pero ¿cómo se construye una página de aterrizaje en primer lugar? ¡Necesitas algo para optimizar antes de poder empezar a optimizar! Hay muchas formas de construir una página de aterrizaje, desde remangarte y sumergirte en la codificación con HTML, CSS y JavaScript hasta usar servicios web que te permiten personalizar plantillas de páginas de aterrizaje.

 

Ejemplo 1 para construir una página de aterrizaje

 

En el post de hoy, aprenderás cómo construir páginas de aterrizaje desde cero y verás qué opción es la adecuada para ti. Al final de este post, estarás listo para empezar a construir una página de aterrizaje que impulse conversiones. A menos que se parezca a la que está arriba, en cuyo caso probablemente querrás reconsiderar tus elecciones de vida.

 

¿Por qué necesitas construir una página de aterrizaje?

Rápido y claro: quiero abordar algo que vemos con demasiada frecuencia aquí en Embudos Web. Debido a que no son conscientes de la importancia de una página de aterrizaje específica y relevante, muchos marketers y propietarios de negocios simplemente dirigen prospectos desde sus anuncios de Google y Facebook a las páginas de inicio de sus sitios web.

Este es un error tan comprensible como costoso. Mira, lo entendemos. Cuando miras la página de inicio de tu propio sitio web, parece que es la página más intuitiva y navegable en Internet. Es algo con lo que interactúas a diario y, sin darte cuenta, puedes confundir tu familiaridad con la página con una facilidad de uso asombrosa.

Aunque tu página de inicio puede, de hecho, estar increíblemente bien diseñada, aún no es una buena opción para tu página de aterrizaje. Si estás anunciando a una audiencia fría en Facebook, por ejemplo, las personas a las que diriges a tu sitio web nunca han encontrado tu negocio antes. Es probable que no tengan ni idea de cómo navegar desde tu página de inicio hasta la oferta que les mostraste en el anuncio de Facebook.

Y precisamente por eso usar tu página de inicio como página de aterrizaje es un error costoso. Confunde a los prospectos y los prospectos confundidos no tienen muchas probabilidades de convertir. De hecho, los prospectos confundidos pueden ni siquiera saber cómo convertir. Eso, en pocas palabras, es un desastre.

La buena noticia es que es un problema altamente evitable. Al crear una página de aterrizaje con los métodos que explicaré a continuación, te preparas para impulsar muchas más conversiones para tu negocio. Y como estarás generando más conversiones sin siquiera tocar tus anuncios, harás maravillas para tu retorno de la inversión en publicidad (ROAS).

Bien, entonces. Vamos a ello.

 

Construyendo una página de aterrizaje de la manera «difícil»

Antes de sumergirnos en los detalles de construir una página de aterrizaje desde cero, aclaremos una cosa: sí, HTML, CSS y otras tecnologías web tienen una curva de aprendizaje. Sin embargo, aprender a codificar páginas web no es lo mismo que programar una aplicación, construir una supercomputadora o darle (vida artificial) a un robot asesino con la intención de dominar el mundo. Se necesita tiempo y esfuerzo para aprender HTML, CSS y JavaScript, pero no es tan difícil como podrías pensar.

Primero, veamos cada una de estas tecnologías web y qué hacen.

 

HTML

El Lenguaje de Marcado de Hipertexto, o HTML, es el «lenguaje» de la web. Ten en cuenta que HTML no es un lenguaje de programación, sino un lenguaje de marcado (como su nombre lo indica) que se utiliza para definir el contenido y la estructura de las páginas web. Echemos un vistazo.

 

Ejemplo de codigo html-254

 

Crédito de la imagen: Mozilla Developer Network

¿Ves cómo el contenido y la estructura de la página están definidos por el código?

Los conceptos básicos de HTML están fuera del alcance de este post, pero hay varios recursos excelentes en la web que pueden ayudarte a aprender. Algunos de los mejores son:

  • Codecademy (ejercicios interactivos gratuitos de codificación sobre HTML, CSS, JavaScript y más)
  • Treehouse (extensa biblioteca de videos, prueba gratuita, suscripción mensual)
  • Mozilla Developer Network (tutoriales gratuitos basados en texto sobre varias tecnologías web, incluido HTML)
  • HTML Dog (más tutoriales con muchos ejemplos de código)

 

CSS

HTML define el contenido y la estructura de las páginas web, mientras que las Hojas de Estilo en Cascada (CSS) definen cómo se ven las páginas web. Las hojas de estilo se llaman en cascada porque los cambios realizados en una hoja de estilo de nivel superior pueden «cascadearse» en toda la totalidad de un sitio, lo que te permite realizar cambios a gran escala en la apariencia de tu sitio ajustando el código de una sola hoja de estilo.

En el pasado, el código CSS se insertaba directamente en documentos HTML, pero esto no es una práctica recomendada; sí, funcionará, pero no adquieras malos hábitos. Mantén separado tu código CSS y HTML.

Aquí tienes un ejemplo de cómo se ve el código CSS:

 

Ejemplo de codigo CSS-6589

 

Nuevamente, no vamos a profundizar en propiedades, valores, selectores y declaraciones aquí, pero hay muchos recursos para ayudarte a ponerte al día, incluidos los sitios enumerados en la sección de HTML anterior.

Para tener una idea de lo poderoso que puede ser CSS, echa un vistazo al Jardín Zen de CSS de Dave Shea. Aunque puede ser difícil de creer, cada uno de los estilos de ejemplo que verás allí se aplican al mismo código HTML exacto. Bastante genial, ¿verdad? Al hacer cambios en el CSS de tu página de aterrizaje, puedes experimentar con diseños radicalmente diferentes sin tener que volver y ajustar manualmente el HTML de cada página.

 

JavaScript

Entonces, has creado una página de aterrizaje funcional (y dolorosamente hermosa) – ahora necesitas agregar algo de interactividad. Esto es crucial para las páginas de aterrizaje, ya que deseas que tus posibles clientes realmente hagan algo, ya sea descargar un informe técnico o solicitar una llamada de ventas. Esto se logra a través de llamadas a la acción impulsadas por JavaScript.

JavaScript es un lenguaje de programación «real», pero se utiliza más comúnmente como un lenguaje de secuencias de comandos del lado del cliente. En pocas palabras, esto significa que JavaScript hace que tu navegador haga la mayor parte del trabajo.

Aquí tienes un fragmento de JavaScript:

 

Ejemplo de codigo javascript-1

 

JavaScript se puede utilizar para agregar funcionalidades a una página web, como:

  • Enviar información a servidores a través de formularios web
  • Crear ventanas emergentes
  • Autenticar la entrada del usuario, como credenciales de inicio de sesión
  • Animar elementos de navegación…

 

Si estás realmente interesado en hacer tu propia página de aterrizaje desde cero a mano, necesitarás algunas habilidades técnicas, pero las recompensas pueden ser grandes. Por un lado, tendrás un control completo sobre cómo se estructura, muestra e interactúa tu página con tus servidores. También obtendrás importantes derechos de presumir por haber diseñado y codificado tu página tú solo. ¿Plantillas? ¡No necesitamos malditas plantillas!

Sin embargo, este enfoque lleva mucho tiempo para el novato en codificación, además de ser un poco intimidante. Tiene que haber una manera más fácil, ¿verdad?

 

Construyendo una página de aterrizaje de la manera fácil

Así que necesitas una página de aterrizaje rápido. ¿Qué haces? ¡Usa una plantilla! No te sientas mal, sin embargo, en muchos casos, esta es la mejor manera de hacer una página de aterrizaje. (Si el uso de una plantilla aún te deja en blanco, echa un vistazo a algunas inspiraciones de páginas de aterrizaje para que fluyan esas ideas creativas).

Hay muchos sitios donde construir una página de aterrizaje es pan comido. Vamos a ver dos de ellos: Unbounce y Wix.

 

Unbounce

La página de aterrizaje en la parte superior de este post fue construida a partir de una plantilla existente utilizando Unbounce, que se promociona como «el constructor de páginas de aterrizaje para marketers».

Uno de los principales beneficios de usar Unbounce es que incluye una variedad de funcionalidades específicamente dirigidas a personas que están principalmente enfocadas en conversiones. Otra ventaja de usar Unbounce es que puedes hacer pruebas A/B con dos versiones de una página de aterrizaje para determinar cuál es más efectiva para mejorar las tasas de conversión, ¡un bono!

Unbounce ofrece más de 80 plantillas para casi cualquier tipo de página de aterrizaje que puedas necesitar, incluyendo lanzamientos de productos, páginas de suscripción a boletines de correo electrónico, descargas de libros electrónicos, páginas de aprendizaje en línea y más. Elegí la plantilla «Click Through Minimalist Desktop Light» para el ejemplo en la parte superior de este post. También puedes optar por comenzar con una página en blanco y empezar desde cero si te sientes ambicioso.

 

construir una página de aterrizaje - Plantillas de unbounce

 

Digamos que quieres crear una página de aterrizaje para una campaña de PPC de generación de leads que estás llevando a cabo. La plantilla «York» es un buen lugar para comenzar para este tipo de página.

 

construir una página de aterrizaje - Plantillas de gen

 

Unbounce te permite ajustar cada elemento de la plantilla para satisfacer tus necesidades. Puedes cambiar el texto, usar diferentes fuentes, cambiar imágenes e incluso mover elementos completos donde quieras. En solo unos minutos, pude crear esta variación:

 

construir una página de aterrizaje - york-meetings-1

 

No está muy bien diseñada, pero ese no es el punto: este rediseño rápido y sencillo tomó menos de 10 minutos en armar y no requirió codificación alguna. ¡Imagina lo que podrías hacer en unas pocas horas!

En general, Unbounce es una excelente plataforma para construir una página de aterrizaje. No es gratuita (los precios comienzan en $49 al mes para emprendedores y nuevas empresas), pero puedes registrarte para una prueba gratuita para empezar a ensuciarte las manos.

 

Wix

Mientras que Unbounce está dirigido específicamente a marketers que esperan impulsar conversiones, Wix es un poco más de propósito general.

Wix ofrece una variedad de plantillas para comenzar, categorizadas por tipo de negocio e industria. Para este ejemplo, digamos que tienes un sitio de comercio electrónico especializado en artesanías hechas a mano.

 

construir una página de aterrizaje - Plantillas de wix

 

Una vez que hayas seleccionado tu tipo de negocio, se te presentarán una variedad de plantillas diseñadas pensando en tu tipo de negocio. Estas son algunas de las plantillas para tiendas de manualidades y hobbies en línea.

 

Plantillas en hobby store

 

Ahora es el momento de comenzar a personalizar tu página. Elegí la plantilla «Lil Pillow Shop» porque secretamente me encantaría tener una almohada con un controlador de videojuegos en ella. Lástima que mi gato probablemente la destruiría, por eso no puedo tener cosas bonitas.

 

construir una página de aterrizaje - Personalizar paginas en wix

 

Wix ofrece algunas opciones de personalización, aunque no tantas como Unbounce. Por supuesto, si no necesitas modificar cada último elemento de la página, esto puede satisfacer tus necesidades bastante bien.

Una de las mayores desventajas de Wix es que muchas de las plantillas realmente no pueden considerarse páginas de aterrizaje, ya que muchas de ellas carecen de llamadas a la acción, formularios y otros elementos que realmente necesitan tus páginas de aterrizaje.

Otra cosa que Wix carece y que muchos marketers y propietarios de negocios encontrarán frustrante es la incapacidad de agregar formularios personalizados y otros elementos a una página; si no está allí desde el principio, estás fuera de suerte. Esto podría ser particularmente irritante si encuentras una plantilla que te gusta mucho pero que carece de la funcionalidad que necesitas.

En general, Wix es un gran servicio para pequeñas empresas que necesitan una presencia web rápidamente, pero para construir una página de aterrizaje deja mucho que desear.

 

Menciones destacadas

Por supuesto, Unbounce y Wix están lejos de ser las únicas herramientas que pueden ayudarte a construir una página de aterrizaje. Otras menciones notables incluyen:

  • SquareSpace (soporte sólido de análisis, registro de dominios, servicios de alojamiento)
  • Moonfruit (diseños receptivos construidos en HTML5, amigables con el comercio electrónico)
  • Weebly (interfaz de arrastrar y soltar, soporte de análisis, precios mensuales bajos)

 

Sin embargo, ten en cuenta que si bien cada uno de estos servicios facilita la construcción de una página de aterrizaje, es posible que no ofrezcan la funcionalidad que necesitas, especialmente si planeas crear páginas de aterrizaje con llamadas a la acción altamente específicas que complementen tus esfuerzos de PPC.

 

Escritura del texto de la página de aterrizaje

Entonces, ahora tienes algunos métodos diferentes para construir una página de aterrizaje. Pero, como discutí anteriormente en este post, una página de aterrizaje solo es tan buena como las conversiones que genera. Y si no estás optimizando el texto de tu página de aterrizaje, no puedes esperar ver mucho retorno.

Aquí hay algunos consejos que debes tener en cuenta al escribir el texto de la página de aterrizaje.

 

Inyecta vida en tu CTA

Nada mata el entusiasmo de un prospecto como un CTA frío, distante y aburrido. Tu CTA de la página de aterrizaje se supone que es la pieza del rompecabezas que los inspira a convertir. Por lo tanto, tu CTA necesita ser convincente.

«Enviar», «Registrarse» y «Entrar» son lo opuesto a inspirador. Estos están garantizados para perder conversiones potenciales y hacer que tu CPA se dispare. No los uses.

«Obtener mi informe gratuito», «Envíame la guía» y «Empecemos a trabajar», por otro lado, son enérgicos y atractivos, son los tipos de CTA que emocionan a las personas sobre la conversión. Inyectar personalidad en tu CTA es una forma sorprendentemente fácil de impulsar más conversiones sin costo adicional.

 

Mantén tu mensaje consistente

Una forma segura de perder una conversión es desconcertar a tu prospecto con una página de aterrizaje que no suena nada como el anuncio que la precedió. Si el texto de tu anuncio de Facebook enfatiza todo el dinero que la gente puede ahorrar usando tu producto, pero la página de aterrizaje entra en los detalles de las características de tu producto, no puedes esperar que las personas conviertan. Es el mismo problema que tendrás si usas tu página de inicio como tu página de aterrizaje: confundirás a los prospectos fuera de la conversión.

Entonces, cuando estés escribiendo el texto de tu página de aterrizaje, saca el anuncio que dirigirá a las personas a la página de aterrizaje y asegúrate de mantener las cosas consistentes. Tono, propuesta de valor, oferta, todo eso.

 

Nunca dejes de hacer pruebas A/B

La optimización de la tasa de conversión es un negocio voluble. Aunque no es muy probable, los cambios más pequeños (por ejemplo, cambiar «Obtener la guía» por «Obtener mi guía») a veces pueden marcar grandes diferencias.

No importa cuán feliz estés con tu tasa de conversión actual o tu CPA, nunca debes dejar de hacer pruebas A/B con el texto de tu página de aterrizaje. Claro, algunas pruebas resultarán ser fracasos. Pero de vez en cuando, tropezarás con un cambio en el mensaje que impulsará un aumento sustancial en tu tasa de conversión. Además, las tendencias de las páginas de aterrizaje cambian.

Tampoco tengas miedo de ser audaz. Cambiar el color de tu botón de CTA es atractivo porque prácticamente no tiene riesgos. Pero probablemente tampoco tenga recompensa. Mientras estés monitoreando de cerca tus datos de conversión, puedes permitirte realizar pruebas arriesgadas y fuera de lo común.

Nunca se sabe. Tu idea más loca podría resultar ser la más lucrativa.

Autor: Jhonny Salas

Soy un apasionado del marketing digital y experto en la creación de embudos de venta y gestión de campañas de publicidad online (PPC). Ayudo a emprendedores y negocios a potenciar sus ventas mediante estrategias efectivas de marketing digital. No solo soy un profesional dedicado, también soy un apasionado por mi familia y por mantener un estilo de vida saludable. Me encanta pasar tiempo con mis seres queridos y dedicarme a mi entrenamiento físico.

Artículos Recientes

  • 6 min read

Tu página de destino de Google Ads es tu principal oportunidad para convencer al cliente de que se convierta. Después …

¿Cómo hacer un seguimiento de prospectos de ventas efectivo 8 mejores prácticas para conseguir más clientes.
  • 8 min read

¡Es momento de actuar! Tus campañas de marketing han dado resultado y has sido inundado con nuevos prospectos que esperas …

64 Subtítulos de Instagram para el Día de San Patricio
  • 7 min read

¿Estás tratando de idear un pie de foto (subtitulo) perfectamente creativo, único, divertido o lindo para tu Instagram en el …

Domina el arte de la publicidad en Instagram Guía completa para principiantes
  • 25 min read

Así que estás ejecutando anuncios pagados de búsqueda y display a través de Google, estás publicitando en Facebook, LinkedIn, Twitter …

  • 7 min read

Si quieres hacer crecer tu negocio en línea, ¿cuál es la cosa que más necesitas? Tráfico.Y para la mayoría de …

8 de Nuestros Mejores Consejos para la Redacción de Anuncios PPC
  • 14 min read

El marketing digital y PPC se mueven increíblemente rápido. Sin embargo, a pesar de todas las innovaciones tecnológicas y nuevas …

76 Subtítulos para Instagram para el Día de San Valentín
  • 9 min read

Entonces, como lo veo yo, si estás buscando subtítulos para Instagram para el Día de San Valentín en línea, estás …

22 Formas Fantásticamente Gratuitas de Promocionar tu Cuenta de Instagram
  • 22 min read

Con cientos de millones de usuarios activos diarios, Instagram es una de las mejores herramientas gratuitas para llegar a tu …

  • 10 min read

La búsqueda pagada es un canal bastante impresionante. Obviamente, soy un gran admirador, construí una empresa en torno a ella. …

Las 19 Mejores Estrategias de Marketing B2B (¡Basadas en Datos!)
  • 23 min read

Si realizas una búsqueda en Google sobre estrategias de marketing B2B, es muy fácil encontrarse con artículos que simplemente proporcionan …

Automatización del Marketing B2B 5 Trucos Sencillos para Nutrir, Convertir y Retener Clientes
  • 9 min read

A medida que el recorrido del consumidor hacia la compra se vuelve cada vez más intrincado, el recorrido del cliente …

¡33 Subtítulos épicos en Instagram! para potenciar tus Me Gusta
  • 21 min read

¿Listo para 33 Subtítulos épicos en Instagram que harán estallar tu contador de likes? ¡Vamos a sumergirnos!El primer paso para …

  • 10 min read

Operaciones de ingresos (RevOps) se ha convertido en un término común en el argot empresarial en tiempos recientes. Como su …

Biografía de Instagram la guía definitiva para crear un perfil irresistible
  • 27 min read

Si dicen que una imagen vale más que mil palabras, entonces yo digo cómo diablos encapsulas toda tu cuenta de …

120 de las Mejores Palabras y Frases para Hacer Marketing con Emoción
  • 12 min read

Todo propietario de negocio está en la búsqueda de esas campañas milagrosas que convertirán el tráfico orgánico de tu sitio …

Cómo conseguir más seguidores en Instagram 23 métodos inteligentes
  • 16 min read

Cosas que aumentan la dopamina en el cerebro:-Ejercicio-Cúrcuma. -Verduras de hoja verde. -Conseguir más seguidores en Instagram. ¿Estoy en lo cierto?  Pero con toda …

135 Subtítulos de Instagram de Año Nuevo que Dejarán a tus Seguidores Asombrados
  • 11 min read

¿Buscas en Google frases para Instagram en Año Nuevo y qué obtienes? ¡Exactamente, las mismas 70 u 80 frases en …

  • 8 min read

Presupuestos diarios vs vitalicios en Facebook Ads, ¿cuál es el mejor para lanzar campañas de Facebook Ads en tu negocio?  …

Anuncio de Facebook no aprobado ¿Qué hacer +10 formas de evitarlo
  • 16 min read

¿Te ha pasado que tu esfuerzo en la creación de un anuncio de Facebook se ve frustrado al recibir la …

Domina la Programación de Anuncios en Google Ads en 5 pasos
  • 9 min read

¿Estás aprovechando al máximo tu presupuesto publicitario en Google Ads? Descubre cómo la programación de Anuncios en Google Ads puede …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Sobre Nosotros

Somos la Agencia Embudos Web, tenemos más de 4 años en el mercado y somos especialistas en automatizar las ventas de los negocios a nivel online, lo hacemos a través de la implementación de estrategias de marketing como embudos de venta personalizados.

Síguenos en Redes sociales:

SUSCRIBETE A NUESTRO

WEBINARIO GRATUITO

Cómo Anunciarte en Google Ads para Generar Más Ventas en Tu Negocio

SUSCRIBETE A NUESTRO

WEBINARIO GRATUITO

Aprende Cómo Crear Anuncios de Clientes Potenciales en Facebook Ads este 2022

SUSCRIBETE A NUESTRO

WEBINARIO GRATUITO

Cómo Implementar un Embudo de Ventas para mi negocio

Suscribete a nuestro Boletín Informativo

Descubre cómo conducir a tus clientes por el embudo de ventas

Te enviaremos toda la información que necesitas para lograr que tus clientes confíen en tu marca. Aprende a construir una máquina de generación de leads predecible, escalable y orientada a los objetivos que realmente traen dinero a la mesa.

Solo tienes que rellenar el siguiente formulario para recibir los mejores artículos, guías e invitaciones especiales que te ayuden a llevar tu negocio a otro nivel.

Suscribete GRATIS