Crea una página de aterrizaje en Squarespace
Cómo crear una landing page en Squarespace ocultando el menú de navegación y el pie de página del sitio web
Tutorial de video abajo👇
¿Qué es una página de aterrizaje o landing page y por qué necesito una?
Esa fue una de las primeras preguntas que me hice cuando comenzaba mi carrera digital porque todo el mundo hablaba de lo estratégico que era dirigir el tráfico a una página así, pero no acababa de quedarme claro qué la caracterizaba o hacía diferente a cualquier otra página de mi web.
Ni siquiera acababa de ubicar que una landing page y una página de aterrizaje son lo mismo.
Además me hacía pelotas con otros términos como:
Página de gracias
Sandwich page o Squeeze page
Whaaaaaat??? 🧐
Así que en esta entrada te comparto:
¿Qué es una página de aterrizaje?
Trucos para construir tu landing en Squarespace
Si quieres ver en acción la página sandwich y la página de gracias, te invito a que cheques el siguiente artículo de mi web donde explico más al respecto:
De la landing page a la página de gracias
IMPORTANTE:
Los códigos que te comparto en este es un tutorial, te servirán sólo si te encuentras en el plan empresa o los planes comerciales de Squarespace. Inyectar código en la cabecera de determinadas páginas cuenta como una función Premium y es por ello que no es posible utilizar este método en el plan Personal.
Ahora, si ya estás planeando implementar estrategias de e-mail marketing, escenario donde una página de aterrizaje se vuelve imprescindible, estar en el plan empresa o uno mayor en Squarespace te facilitará mucho varias tareas al momento de integrar tu herramienta de e-mail marketing, colocar formularios de suscripción y demás.
Si por ahora te quieres mantener en el plan Personal, lo que puedes hacer es crear la landing con tu proveedor de email marketing y en tu web colocar un botón que dirija a dicha página externa.
Más sobre email marketing en este episodio de Círculo Mínimo Viable, el canal de Youtube que llevo con mi co-anfitriona Bárbara Centeno: ¿Ya tienes lista de correos? Aplica estrategias de email marketing para vender más | Mínimo Viable
¿Qué es una página de aterrizaje o landing page?
Es una página en tu web a la que se le quita el menú de navegación y el pie de página para que no tenga más enlaces (distracciones) y que solamente dirija a los usuarios a una única llamada a la acción.
Cuáles pueden ser estas acciones:
Suscribirse a un recurso gratuito
Comprar
Rellenar algún formulario o encuesta
Solicitar una llamada de descubrimiento de tu servicio premium
Si lanzas una campaña de Facebook, Google ADS o similares, por ejemplo, lo más recomendable es que dirijas el público a una página de aterrizaje. Esto te ayudará a que los usuarios no se pierdan en otras secciones de tu web y así realicen la acción que deseas y por la que estás pagando la publicidad.
Esta es la mayor importancia de una página de aterrizaje para tu estrategia, concentrar la atención de los visitantes en una sola acción.
Te dejo el ejemplo del diseño de landing que incluye mi plantilla premium.
¿Qué herramientas necesitas para crear una página de aterrizaje?
Muchos de los proveedores de email marketing ofrecen algún tipo de constructor de páginas, a veces desde los planes gratuitos como es el caso de MailerLite (el software de email- marketing que yo uso y recomiendo), mientras que en otros sí es necesario tener el plan de pago.
Otro constructor popular es Lead Pages que además te brinda una analítica muy completa.
Sin embargo, algunos contras de utilizar estos métodos es que muchas veces no lograremos empatar al 100% el branding de estas herramientas con el de nuestra web. Por ejemplo, no siempre se podrá cargar nuestra tipografía.
Además de que softwares como Lead Pages pueden resultar costosos si no aprovechas las funciones que te ofrece en su totalidad.
De hecho, resulta mucho más económico simplemente usar el plan empresa de Squarespace y aplicar lo que te enseñaré en este tutorial (guiño, guiño 😉).
Crear una landing page o página de aterrizaje en Squarespace
Vamos a inyectar código para ocultar el menú de navegación y pie a la página que deseemos que nos sirva como landing page.
Para comenzar, dirígete a la tuerquita de configuración de tu futura página de aterrizaje.
Encontrarás que aparece la opción de Avanzado y aquí es donde podrás inyectar código para mejorar partes específicas de una página, en este caso para convertirla en una landing.
Copia el código que te dejaré más abajo según aplique y colócalo en el recuadro, después haz click en guardar.
En la versión 7.1 desaparecerá el menú de navegación, la barra de anuncios y el pie de página. Tampoco aparecerá en la versión móvil.
Para la versión 7.0 debemos colocar otro fragmento para indicar que la navegación no se muestre en móvil, y otro si deseas ocultar la barra de anuncios.
Página de aterrizaje en Squarespace 7.1
Código para ocultar menú de navegación y pie de página:
<!-- Ocultar navegación y pie de página --> <style> .header, #footer-sections {display:none !important;} </style>
Código para ocultar menú de navegación:
<!-- Ocultar navegación --> <style> .header {display:none !important;} </style>
Código para ocultar pie de página:
<!-- Ocultar pie de página --> <style> #footer-sections {display:none !important;} </style>
Página de aterrizaje en Squarespace 7.0 (familia de plantillas Brine)
Código para ocultar menú de navegación y pie de página:
<!-- Ocultar navegación y pie de página --> <style> .Header, .Footer {display:none !important;} </style> <!-- Ocultar en movil --> <style> .Mobile-bar.Mobile-bar--top {display:none !important;} </style>
Código para ocultar menú de navegación:
<!-- Ocultar navegación --> <style> .Header {display:none !important;} </style> <!-- Ocultar en movil --> <style> .Mobile-bar.Mobile-bar--top {display:none !important;} </style>
Código para ocultar pie de página:
<!-- Ocultar pie de pagina --> <style> .Footer {display:none !important;} </style>
Si usas la barra de anuncios y deseas ocultarla también:
<!-- Ocultar barra de anuncios --> <style> .sqs-announcement-bar {display: none !important;} </style>
Navega por categorías
y recuerda:
#SéDiferenteHazLaDiferencia
