Cómo crear una landing page en WordPress [Tutorial]

Una landing page es un elemento fundamental dentro de la estrategia de cualquier página web, ya que van a permitir que los usuarios que lleguen a ella tengan 2 opciones: cumplir el objetivo o irse.

Por ello, una landing page es una página con un único objetivo: convertir.

Nuestra tarea será crear páginas de aterrizaje optimizadas al objetivo que hayamos establecido y lograr que la tasa de conversión de estas sea elevada y dé el resultado que estamos buscando.

Si sabemos crear una página web, el proceso de cómo hacer una landing page te va a ser muy sencillo, por lo que hoy te voy a enseñar paso a paso cómo crear landing pages en WordPress de forma rápida y fácil, ya sea con constructores, herramientas o a código.

Además podrás seguir los pasos con un vídeo tutorial que tendrás más adelante en el que te enseño visualmente a realizar todos estos pasos.

Cómo hacer una Landing Page en WordPress con tu theme

Podemos crear landing pages con plugins o herramientas, pero también podemos hacerlo mediante un diseño a medida o con plantillas prediseñadas para landing pages desde los propios temas de WordPress.

Como existen muchas plantillas para WordPress, voy a enseñarte cómo hacerlo con las más famosas, populares y que considero muy buenas para un diseño web: Bridge, GeneratePress y Divi.

Si no tienes alguno de estos themes, no te preocupes porque más adelante te enseñaré cómo crear tu landing page a código o con otro tipo de herramientas.

En este vídeo podrás ver todo lo que te voy a explicar de forma visual y rápida, para que no te pierdas ningún punto.

Lo primero que vamos a ver es cómo crear landing pages con la plantilla Bridge de forma rápida.

Aunque Bridge es un theme que trabaja con Visual Composer y es un poco más complicado que los constructores que vamos a ver más adelante, es una buena opción.

Para crear una página de ventas o de aterrizaje en esta plantilla, lo primero que haremos es crear y diseñar la página de WordPress (una promoción, descarga de un producto o lo que necesitemos).

Una vez la tengamos construida, iremos a “Atributos de página”, “Plantilla” y seleccionaremos la opción de “Landing Page”. 

Cuando recargues la página, fíjate como te habrán desaparecido el menú, logotipo y el footer sin necesidad de saber ni un mínimo de código.

Fácil, ¿verdad?

Vamos a ver lo mismo ahora con la plantilla de GeneratePress.

Una vez tengamos listo el diseño de la landing o la plantilla, bajamos hacia abajo de todo de la página de WordPress hasta la opción de “Diseño de pantalla”, y seleccionamos “Desactivar Elementos”.

Seleccionaremos el top bar, header, primary navigation y footer de la siguiente forma:

Ahora ya no tendríamos menús a la vista en esta página.

En el caso de la plantilla de Divi, funcionará similar a Bridge, ya que acudiremos a “Atributos de página” y seleccionaremos la plantilla “Blank Page”.

Crear Landing Pages en WordPress con código CSS

Si estás en un nivel más avanzado de WordPress, te voy a explicar cómo hacer este proceso de creación de squeeze pages, landings o páginas de aterrizaje mediante código CSS.

Para crear landing pages de forma rápida con código CSS lo primero que haremos es ir a la página que queramos eliminar el menú y footer desde el navegador de Google Chrome y pulsar en el botón derecho del ratón o touchpad y seleccionar “Inspeccionar”.

Una vez cliquemos se nos abrirá la consola con todo el HTML de la página.

Clicaremos sobre la flecha que encontramos arriba a la izquierda del todo, y pulsaremos con ella sobre el menú (luego haremos el mismo proceso con el footer).

Una vez hayamos localizado cuál es el selector o elemento que queramos personalizar (en este caso es .site-header), añadiremos una propiedad, que será la siguiente:

display: none;

Con esta propiedad lo que haremos es decirle que el elemento seleccionado desaparezca de nuestra página, por lo que podremos quitar el menú y el footer de forma muy rápida.

En el caso de la imagen en mi web, para que mi menú desapareciese se incluiría de la siguiente forma:

Pero ahora bien, si yo incluyo este código sin asignarle un ID de página, el menú desaparecería de toda mi web, y esto no es precisamente lo que quiero, sino en una página en concreto.

Lo que haré será ir a la página dentro del panel de WordPress y ver qué ID le está asignando a esta URL en concreto como ves en la imagen (en este caso la 16).

Ahora, delante del elemento asignaremos ese ID que hemos localizado de la siguiente forma:

Una vez lo tengamos, tenemos que acceder dentro del WordPress e insertarlo en la hoja de estilos, que podemos hacer por dos vías:

1. La primera y más sencilla es acudir a “Apariencia”, “Personalizar”, “CSS personalizado” y pegar lo que hemos copiado del inspector.
2. La segunda es ir a la hoja de estilos del tema hijo y pegarlo. Para esta opción iremos a “Apariencia”, “Editor de temas”, buscaremos la hoja de estilos style.css, y pegaremos lo copiado en el inspector.

¡Y ya estaría listo!

Plugins para el diseño de Landing Page en WordPress

Mediante constructores o maquetadores web podemos crear landing pages de forma muy sencilla (como te comentaba en la opción de crear la landing a través del theme), ya que puedes realizar el proceso del diseño con el constructor y luego convertirlo en landing.

Te voy a dejar cuáles son los constructores que más me gustan y más se están utilizando hoy en día para estas funciones.

Todos ellos son de pago, pero es un precio que si quieres invertir en tus diseños, vale la pena pagar.

Elementor Pro

Elementor es mi constructor favorito y el que utilizo en toda mi página web, ya que tiene una versatilidad increíble a la hora de maquetar.

Es sencillo de utilizar, muy cómodo y su evolución está siendo BRUTAL (en mayúsculas, porque cada día que pasa me sorprende más). Además, tiene una versión gratuita para que puedas trastear con él.

Puedes combinarlo con la plantilla de GeneratePress y crear una landing muy visual en tu WordPress.

Divi Builder

Divi es el maquetador con el que empecé, con él aprendí todo lo que viene a ser WordPress y la verdad es que no tengo ni una sola queja.

Tienen un soporte increíble, y una curva de aprendizaje también muy corta comparado con otros plugins de maquetación para landings.

Thrive Architect

Thrive es otro competidor muy potente, ya que funciona de la misma manera que los dos anteriores (drag&drop), por lo que arrastrando y soltando elementos podrás dar con la landing page que estás buscando.

Es muy buena opción y estoy segura de que si se te da bien el diseño web, sabrás cogerte a este constructor muy rápido.

WP Bakery

El famoso Visual Composer es muy buena opción, pero a nivel aprendizaje, cuesta un poquito más que los anteriores. Bien es cierto que si sabes cómo utilizar este plugin, los otros te serán más fáciles y sabrás dónde acudir en cada uno de ellos para cualquier personalización.

Así que, si te gusta trastear, pruébalo algún día.

Otras herramientas para crear landing pages

Además de todo lo que te acabo de contar, encontramos herramientas que nos ayudan a crear landing pages o páginas de aterrizaje de forma sencilla, al igual que si se tratase de un constructor visual como Divi o Elementor (los plugins de landing pages que acabamos de ver).

Te voy a hacer un listado de algunas que considero relevantes.

Lead pages

Es una herramienta muy sencilla de utilizar, con la que además de diseñar tu landing, podrás medir todo lo que necesites, y por lo tanto, será más sencilla de optimizar y llegar a la conversión (aun así ya sabes que con las otras herramientas podemos utilizar Google Analytics).

Tiene un montón de plantillas prediseñadas, por lo que no necesitarás calentarte la cabeza.

Precio: 37$, 79$ o 321$ al mes dependiendo del tipo de licencia.

Instapage

Esta es otra muy buena opción que funciona como la anterior: diseñar, medir y optimizar.

En su página web dice que el promedio de las conversiones de las landing pages generadas con esta herramienta es de un 22%.

Lo mejor de todo es que puedes crearte una cuenta y probar la herramienta de forma gratuita durante 14 días.

Precio: 129$/mes o personalizado.

Unbounce

¿Qué te voy a contar? Pues otra vez lo mismo de antes jajaja, es una herramienta que funciona de la misma forma que las anteriores. Al final esto se trata de probar y de elegir la que más te guste y se adapte a ti.

Tiene unos potentes test A/B y más de 125 plantillas que podrás utilizar en tus diseños de landing pages. En su web encontrarás la biblioteca donde podrás filtrar por lo que necesites.

Precio: 99$,199$ o 499$ en función de la licencia.

OptimizePress

Esta herramienta tiene más de 300 plantillas a elegir (que no son pocas) y está muy especializada en temas de infoproductos, portales de membresía y embudos, por lo que es una muy buena opción. Funciona como plantilla para WordPress con plugins exclusivos, por lo que no podrás tener otro theme en tu CMS.

Es una herramienta con muy buen soporte, por lo que tendrás ayuda en todo momento que lo necesites.

Precio: 97$ o 197$ según la licencia.

¿Necesito saber diseñar páginas de aterrizaje en mi web?

Si lo que quieres es convertir en cualquiera de los sentidos, ya sea mediante un recurso gratuito, una venta de producto, una visualización de un vídeo o cualquier otra objetivo, una página sin puntos de fuga conseguirá ese aumento de conversión que necesitas.

Por lo tanto, como diseñadora web wordpress en la provincia de Valencia, para mí es esencial que las tengas en cuenta dentro de la estrategia de marketing digital de tu proyecto, y que tú u otra persona se encargue de diseñarlas.

También funcionan muy bien para campañas de Google Ads, Facebook Ads o Instagram Ads, así que te animo a que pruebes y nos cuentes el cambio que has notado en tu conversión.

¿Te parece complicado el diseño de landing pages?
¿Crees que es esencial tener una landing page en cualquier estrategia digital?