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.
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.
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:
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:
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.
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.
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:
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.
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.
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.
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.
