Para crear tu landing page debes tener en cuenta tres cosas muy importantes: el objetivo, los fundamentos básicos y las herramientas. Por ejemplo, un objetivo puede ser: captar leads, vender un producto o servicio, descarga de un Ebook o simplemente visibilizar tu marca. Nuestro objetivo es proporcionarte los otros dos criterios: los fundamentos y las herramientas.
Por ello, en este artículo lograrás crear una landing page sin necesidad de tener los conocimientos avanzados de diseño o programación. Tampoco es necesario que sepas WordPress, Wix, Squarespace o Instapage, que ofrecen plantillas prediseñadas y fáciles de personalizar. Será suficiente que cuentes con una cuenta en Gmail y sigas al pie de la letra los siguientes pasos.
Cómo crear tu landing page sin conocimiento técnico
Paso 1: Creación de base de leads
Crea una carpeta y una hoja de cálculo en Google Drive. Para poder seguir nuestro modelo, debes respetar cada parte que te presentamos: el nombre de la hoja denominada leads y en la cabecera los datos como firtsName (nombre), lastName (apellido), email, teléfono y fecha son lo datos que se van a registrar desde el formulario. Ejemplo:
Paso 2: Iniciar Scripting
Inicia sesión el App Script con con la misma cuenta de Gmail. Ingresa aquí si no conoces la ruta.
Ahora dale click en el botón Start Scripting y debe llevarte a la siguiente pantalla:
Selecciona «nuevo proyecto», coloca un nombre y de forma predeterminada se te va mostrar en la columna de archivo un Código.gs. Elimina todo lo que aparece y coloca el siguiente código:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index.html')
}
function processForm(firstName, lastName, email, telefono) {
// ID del Google Sheet
var sheetId = 'COLOCAR_ID_DE_HOJA_DE_CALCULO';
//nombre de la hoja
var sheetName = 'leads';
var sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
sheet.appendRow([firstName, lastName, email, telefono, new Date()]);
}En la variable var sheetId debes colocar el ID de la hoja de cálculo de Excel que creamos en el paso anterior.
Paso 3: codificación
Agrega el siguiente HTML como se ve en la imagen. Haz clic en agregar y seleccionar la opción de html. El nombre debe ser index.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page Guia de SEO</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/registrations/registration-9/assets/css/registration-9.css">
<style>
</style>
</head>
<body>
<section class="h-100 bg-primary py-3 py-md-5 py-xl-8">
<div class="container">
<div class="row gy-4 align-items-center">
<div class="col-12 col-md-6 col-xl-7">
<div class="d-flex justify-content-center text-light">
<div class="col-12 col-xl-9">
<img class="img-fluid rounded mb-4" loading="lazy" src="https://scontent.flim38-1.fna.fbcdn.net/v/t39.30808-1/440430310_122144495030209002_316571591894823225_n.jpg?stp=dst-jpg_p200x200&_nc_cat=102&ccb=1-7&_nc_sid=5f2048&_nc_ohc=89-JOAcKfqgQ7kNvgGhfWa3&_nc_ht=scontent.flim38-1.fna&oh=00_AYCiW4ZFfkAfRzQ4wlTZRsELMb_sS6HMtaOnNVjHNxo0Ng&oe=66507A10" width="100" height="100" alt="Guia de SEO">
<hr class="border-primary-subtle mb-4">
<h2 class="h1 mb-4">Aprende a cómo crear una Landing Page.</h2>
<p class="lead mb-5">Mejoras tus ventas con una landig y sin necesidad de tener conocimientos técnicos.</p>
<div class="text-endx">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-grip-horizontal" viewBox="0 0 16 16">
<path d="M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</svg>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-5">
<div class="card border-0 rounded-4">
<div class="card-body p-3 p-md-4 p-xl-5">
<div class="row">
<div class="col-12">
<div class="mb-4">
<h2 class="h3">Regístrate</h2>
<h3 class="fs-6 fw-normal text-secondary m-0">Ingreso tus datos</h3>
</div>
</div>
</div>
<form id="leads">
<div class="row gy-3 overflow-hidden">
<div class="col-12">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name" required>
<label for="firstName" class="form-label">Nombres</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="First Name" required>
<label for="lastName" class="form-label">Apellidos</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" required>
<label for="email" class="form-label">Email</label>
</div>
</div>
<div class="col-12">
<div class="form-floating mb-3">
<input type="phone" class="form-control" name="telefono" id="telefono" value="" placeholder="Teléfono" required>
<label for="telefono" class="form-label">Teléfono</label>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" name="iAgree" id="iAgree" required>
<label class="form-check-label text-secondary" for="iAgree">
Acepto <a href="#" class="link-primary text-decoration-none">los término y condiciones</a>
</label>
</div>
</div>
<div class="col-12">
<div class="d-grid">
<button class="btn btn-primary btn-lg" type="submit">Registrarme</button>
</div>
</div>
</div>
</form>
<div id="successMessage" class="alert alert-success mt-4" role="alert" style="display: none;">
¡Registro exitoso!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
document.getElementById('leads').addEventListener('submit', function(event) {
event.preventDefault();
google.script.run.withSuccessHandler(function() {
//alert('Datos guardados correctamente.');
document.getElementById('leads').style.display = 'none';
document.getElementById('successMessage').style.display = 'block';
document.getElementById('leads').reset();
}).processForm(document.getElementById('firstName').value, document.getElementById('lastName').value, document.getElementById('email').value, document.getElementById('telefono').value);
});
</script>
</body>
</html>
Luego de copiar y pegar el HTML puedes cambiar los textos y la url de logo para que se vea tu marca y el mensaje que quieres comunicar.
Para visualizar los cambios elige la opción de implementar y dale clic en implementar de prueba como se ve a continuación:
Paso 4: Configuración de la publicación
Para publicar nuestro landing page, dirígete al área de implementación y selecciona la opción «nueva implementación«. Nos saldrá un modal, y en ese espacio buscamos el icono de configuración que está en la parte izquierda. Haz clic y ahora selecciona «Aplicación web«. Luego coloca el nombre de la versión y en la opción «Quien tiene acceso» colocamos «cualquier usuario«.
Para obtener la url de producción tendrás que copiar la url como aparece en la siguiente imagen:
Paso 5: Publicación final
Para publicar el sitio ingrese al siguiente url: https://sites.google.com/
Una vez dentro selecciona la opción «Sitio en blanco». Esta te conducirá a una ventana similar a una diapositiva como la que se ve en la imagen. Elimina la cabecera (flecha roja) y coloca el nombre con el que se publicará en la url. Ahora en la parte derecha elige insertar (flecha azul) y en el espacio en blanco pega la url que acabamos de copiar de AppScript. Finalmente redimensiona y dale publicar.
El resultado final es el siguiente:
¿Cómo se hace una landing page?
Para diseñar y desarrollar una landing page efectiva, es crucial considerar todos los aspectos y propósitos de tu página web. La creación de una landing page implica más que simplemente codificar e instalarla; requiere una planificación estratégica integral, que abarca desde la definición de objetivos hasta el seguimiento y análisis posterior. A continuación, te presentamos los pasos clave para crear una landing page exitosa:
Paso 1: Define tu objetivo
Debes tener claro el objetivo de tu landing page. ¿Quieres captar leads, promocionar un producto o servicio, o simplemente informar sobre algo? Define tu objetivo para posteriormente orientar el diseño y contenido de la página.
Paso 2: Elige una herramienta de creación de landing pages
Hay varias opciones disponibles como WordPress, herramienta que cuenta con plugins especializados como Elementor o Divi. También puedes encontrar plataformas especializadas como Instapage o Unbounce, así como aplicaciones constructoras de sitios web como Wix o Squarespace. Elige la que mejor se adapte a tus necesidades y conocimientos técnicos.
Paso 3: Selecciona una plantilla
La mayoría de las herramientas de creación de landing pages ofrecen una variedad de plantillas prediseñadas. Elige una que se ajuste a tu objetivo y estilo de marca.
Paso 4: Personaliza la plantilla
Edita el contenido de la plantilla para que se ajuste a tu marca y mensaje. Añade tu logo, imágenes relevantes, texto persuasivo y un llamado a la acción claro y atractivo. Si tu objetivo es captar leads, añade un formulario de contacto o suscripción. También puedes incluir elementos interactivos como botones de llamado a la acción, testimonios de clientes o imágenes deslizantes.
Paso 5: Optimiza para SEO
Asegúrate que tu landing page esté optimizada para motores de búsqueda (SEO). Utiliza palabras clave relevantes en el contenido y las etiquetas meta, y asegúrate que la página se cargue rápidamente y sea fácil de navegar.
Paso 6: Prueba y ajusta
Antes de publicar tu landing page, pruébala para asegurarte que funcione correctamente en diferentes dispositivos y navegadores. Realiza ajustes según sea necesario para mejorar la experiencia del usuario y la tasa de conversión.
Paso 7: Publica y promociona
Una vez que estés satisfecho con tu landing page, publícala en tu sitio web o en la plataforma elegida. Promociónala a través de tus redes sociales, campañas de email marketing y otros canales para atraer tráfico y aumentar las conversiones.
¿Dónde se hace un landing page?
Una landing page se hace en una plataforma o herramienta específica que permita crear y editar páginas web. Debes priorizar que esta página tenga una variedad de plantillas prediseñadas y herramientas de personalización que faciliten el proceso de creación de una landing page. Además, las mismas aplicaciones suelen contar con funciones integradas de análisis y seguimiento que te permiten evaluar el rendimiento de tu landing page y realizar ajustes según sea necesario.
¿Dónde se crea una landing page?
Una landing page se crea típicamente en una plataforma en línea que ofrece herramientas de diseño web y alojamiento. Además, esta depende directamente de tus necesidades y preferencias. Aquí te presento algunas opciones populares:
- Plataformas de creación de sitios web:
- Wix
- Squarespace
- Weebly
- WordPress
- Herramientas de creación de landing pages:
- Unbounce
- Instapage
- Leadpages
- ClickFunnels
- Plataformas de marketing digital:
- HubSpot
- Marketo
- Pardot
- Servidores de alojamiento web:
- Bluehost
- HostGator
- SiteGround
- Herramientas de diseño gráfico:
- Adobe XD
- Sketch
- Figma
¿Cuál es la mejor herramienta para hacer una landing page?
La elección de la mejor herramienta para crear una landing page depende de tus necesidades específicas y tu nivel de experiencia. Puedes considerar los siguientes factores, tales como:
- Facilidad de uso
- Personalización
- Integración con otras herramientas
- Costo
- Flexibilidad
Aquí te resumimos lo que te ofrecen algunas de las herramientas de creación de landing pages más importantes:
- WordPress con complementos de diseño como Elementor o Divi: Ideal si prefieres tener control total sobre el diseño y la funcionalidad de tu landing page.
- Instapage: Ofrece una amplia gama de plantillas prediseñadas y herramientas avanzadas de personalización y optimización.
- Unbounce: Conocida por su facilidad de uso y sus capacidades avanzadas de prueba A/B y personalización.
- Wix: Perfecta para usuarios principiantes, ofrece una amplia variedad de plantillas y herramientas de diseño intuitivas.
- Squarespace: Con su enfoque en el diseño visual, Squarespace es ideal para crear landing pages estéticamente atractivas.
- Leadpages: Ofrece una variedad de plantillas y herramientas de conversión para ayudarte a crear landing pages efectivas.
La mejor herramienta para ti dependerá de tus necesidades. Te recomendamos probar algunas opciones y ver cuál se adapta mejor a tus requerimientos. Recuerda que, independientemente de la plataforma o herramienta que elijas, es importante diseñar una landing page que sea atractiva, clara y efectiva para alcanzar tus objetivos.
¿Dónde alojar una landing page gratis?
Para alojar una landing page de forma gratuita, puedes considerar las siguientes opciones:
- GitHub Pages. Te permite alojar sitios estáticos de forma gratuita utilizando GitHub como repositorio. Es ideal si estás familiarizado con Git y quieres un alojamiento simple para tu landing page.
- Netlify. Ofrece alojamiento gratuito para sitios estáticos y proporciona funciones avanzadas como despliegue continuo y formularios de contacto.
- Firebase Hosting. Parte de la plataforma de desarrollo de Google, ofrece alojamiento gratuito para sitios estáticos con soporte para funciones dinámicas si las necesitas.
- Google Cloud Platform. Ofrece un año de uso gratuito en su nivel gratuito, lo que incluye alojamiento para un sitio web estático.
- Vercel. Anteriormente conocido como Zeit, ofrece alojamiento gratuito para sitios estáticos con soporte para funciones avanzadas como prerenderización y despliegue continuo.
Estas opciones te permiten alojar tu landing page de forma gratuita, pero ten en cuenta que algunas de ellas pueden tener limitaciones en términos de almacenamiento, ancho de banda o funciones avanzadas. Es importante revisar las condiciones de uso de cada plataforma antes de elegir la más adecuada para tu proyecto.
¿Cómo subir un landing page?
Para subir una landing page, sigue estos pasos generales. Ten en cuenta que los detalles pueden variar según la plataforma que estés utilizando:
- Prepara tu landing page: Diseña y desarrolla tu landing page en un editor de páginas web o utilizando un constructor de landing pages.
- Exporta tu landing page: Si estás utilizando un constructor en línea, es posible que puedas exportar tu landing page como un archivo HTML o ZIP. Si estás utilizando un CMS como WordPress, simplemente guarda los cambios.
- Accede a tu plataforma de alojamiento: Ingresa a tu cuenta en la plataforma de alojamiento donde deseas subir tu landing page. Esto podría ser un servidor web, una plataforma de hosting específica o un servicio en la nube.
- Sube tu landing page: Utiliza las herramientas de la plataforma de alojamiento para subir tu landing page. Esto puede implicar arrastrar y soltar archivos, utilizar un cliente FTP o seguir los procedimientos de carga específicos de la plataforma.
- Configura tu landing page: Una vez que tu landing page esté subida, es posible que necesites configurarla para que se muestre correctamente. Esto puede incluir ajustar los permisos de archivo, configurar redireccionamientos y más.
- Prueba tu landing page: Antes de hacerla pública, asegúrate de probar tu landing page en diferentes navegadores y dispositivos para verificar que se vea como esperas y funcione correctamente.
- Publica tu landing page: Una vez que estés seguro que todo está correcto, puedes hacer tu landing page pública para que los visitantes la vean.
Recuerda seguir las mejores prácticas de diseño web y SEO al subir tu landing page para asegurarte que tenga el mayor impacto posible en tu audiencia.
¿Dónde publicar una landing page?
Una vez que hayas creado tu landing page, puedes publicarla en tu propio dominio web o en una plataforma de alojamiento gratuito para maximizar su alcance y efectividad. También puedes promocionarla en redes sociales, blogs y otros canales de marketing digital. Aquí te presento algunas opciones populares para publicar tu landing page:
- En tu propio sitio web: Puedes integrar tu landing page como una página adicional. Esto te permite aprovechar el tráfico existente y dirigirlo hacia tu oferta o mensaje específico.
- En plataformas de alojamiento de landing pages: Herramientas especializadas como Instapage, Unbounce o Leadpages, estas plataformas te permitirán publicar tu landing page directamente en su dominio o en un subdominio.
- En redes sociales: Comparte el enlace de tu landing page en tus perfiles de redes sociales para llegar a tu audiencia y generar interés.
- A través de campañas de email marketing: Envía un correo electrónico a tu lista de contactos promocionando tu landing page y animando a los destinatarios a visitarla.
- En publicidad online: Utiliza plataformas de publicidad como Google Ads, Facebook Ads o LinkedIn Ads para promocionar tu landing page y llegar a una audiencia más amplia.
- En foros y comunidades online: Si tu landing page ofrece contenido útil o relevante para una comunidad específica, compártela en foros o grupos relacionados para generar tráfico cualificado.
- A través de colaboraciones y alianzas: Si tienes relaciones establecidas con otros negocios o influencers, puedes pedirles que compartan tu landing page con su audiencia.
Al publicar tu landing page en diferentes canales, puedes aumentar su visibilidad y oportunidades de conversión, llegando así a un público más amplio y potencialmente interesado en tu oferta.
¿Cómo se promociona una landing page?
Para promocionar tu landing page, puedes utilizar estrategias de marketing digital como la optimización para motores de búsqueda (SEO), la publicidad en redes sociales, el marketing por correo electrónico y la colaboración con influencers. Aquí te dejo algunas estrategias efectivas para promocionar tu landing page:
- SEO: Optimiza tu landing page para los motores de búsqueda utilizando palabras clave relevantes en el contenido y las etiquetas meta. Esto ayudará a que tu página aparezca en los resultados de búsqueda orgánica.
- Publicidad en línea: Utiliza plataformas de publicidad como Google Ads, Facebook Ads, LinkedIn Ads o Twitter Ads para promocionar tu landing page a tu público objetivo. Puedes segmentar tus anuncios según la demografía, intereses y comportamientos de los usuarios.
- Email marketing: Envía correos electrónicos a tu lista de suscriptores promocionando tu landing page. Asegúrate que el contenido del correo sea relevante y persuasivo para aumentar las probabilidades de conversión.
- Redes sociales: Comparte el enlace de tu landing page en tus perfiles de redes sociales y utiliza anuncios pagados para llegar a una audiencia más amplia. Aprovecha las funciones de segmentación y análisis de las redes sociales para mejorar la efectividad de tus campañas.
- Contenido de valor: Crea contenido relevante y útil relacionado con tu landing page y compártelo en blogs, redes sociales y otros canales. Esto ayudará a generar interés y tráfico hacia tu landing page.
- Colaboraciones y alianzas: Establece colaboraciones con otros negocios o influencers para promocionar tu landing page a su audiencia. Esto puede ayudarte a llegar a nuevos públicos y aumentar la credibilidad de tu oferta.
- Pruebas A/B: Realiza pruebas A/B en tu landing page para identificar qué elementos funcionan mejor y optimizar tu estrategia de promoción en consecuencia.
Al utilizar estas estrategias de promoción de manera efectiva, podrás aumentar la visibilidad y el éxito de tu landing page, convirtiéndola en una poderosa herramienta de generación de leads y ventas.
Hacer tu propia landing page no tiene por qué ser complicado. Con las herramientas adecuadas y un poco de creatividad, puedes crear una landing page efectiva que impulse el éxito de tus campañas de marketing digital. Si deseas continuar aprendiendo sobre el proceso de creación de una landing page, te invitamos a revisar nuestro webinar gratuito que se encuentra a continuación:
