Cómo crear Landing Page en WordPress

Landing Page WordPress

Seguro que más de una vez has entrado en una página sin cabecera ni menú, que solo te permite hacer scroll hacía abajo o hacer click en uno de los botones, que curiosamente suele llevar a una misma acción.

Este tipo de páginas son las llamadas páginas de aterrizaje o landing page, que utilizan muchas empresas y emprendedores para conseguir una acción concreta.

Podemos usar este tipo de páginas para conseguir leads, solicitando su correo electrónico a cambio de algo gratuito (lead magnet), para vender un producto o cualquier otra acción que nos interese en nuestro caso.

En este artículo veremos cómo crear una página de aterrizaje o landing page, así como consejos de cómo estructurarla, cómo diseñarla y cómo optimizarla. ¿Empezamos?

Qué es una Landing Page

Una landing page es una página que tiene una estructura clara, sin distracciones en la que se usan textos trabajados, limpios y llamativos con el objetivo de conseguir que el usuario realice una acción concreta.

Esta acción puede ser por ejemplo descargarse un PDF a cambio de dejar su correo electrónico, suscribirse a una membresía con pago recurrente – como por ejemplo Netflix, Spotify o HBO -, o vender un producto de pago único.

Ejemplo de página de aterrizaje sin distracciones: Shopify
Ejemplo de página de aterrizaje sin distracciones: Shopify

Las páginas de aterrizaje no permiten al usuario realizar otra acción que no sea la que busca la página. El usuario solo tiene dos opciones: realizar esa acción o cerrar la página.

Por lo general las landing pages no tienen cabecera, menú ni pie de página. El objetivo es que el usuario solo vea lo que nos interesa y pueda realizar esa acción concreta.

Elementos que debe tener una landing page

Una landing page se compone de una serie de elementos bien definidos, que deben estar optimizados para llamar la atención del usuario y conseguir el objetivo que nos marquemos, ya sea una venta, un correo, un registro, un contacto a través de un formulario u otra acción.

Título y subtítulo que llamen la atención

Al entrar en una landing page debe verse, sin hacer scroll, qué estamos ofreciendo y cuál es nuestra propuesta de valor.

Podemos hacer hincapié en el número de usuarios registrados como en el caso de Shopify:

Ejemplo de título y subtítulo para una Landing Page: Shopify
Ejemplo de título y subtítulo para una Landing Page: Shopify

O aprovechar para la atención destacando beneficios del producto y ofreciendo garantías como en el caso de Netflix:

Esto será lo primero que vea el usuario al llegar a la página de aterrizaje, por lo que es importante:

  • Que destaque, para lo que usaremos un tamaño de letra más grande que en el resto de la página.
  • Dejar claro qué va a aportar al usuario nuestro producto o servicio de forma breve y concisa.
  • Debemos conocer a nuestro usuario para hablar en su mismo lenguaje. Ha de ser un lenguaje que encaje con tu forma de ser y que les resulte cercano. Evita usar el plural, háblale de forma directa al usuario.
  • Los textos han de estar bien pensados y ofrecer una solución para el problema o punto de dolor que tenga nuestro usuario objetivo.

Llamada a la acción o CTA llamativo

Una vez que hemos captado la atención del usuario con nuestro título, debemos indicarle qué queremos que haga en nuestra página, para esto usaremos una llamada a la acción, también conocida como CTA (del inglés Call To Action).

Por ejemplo en el caso de Netflix buscan que el usuario deje su email para suscribirse a su servicio:

Ejemplo de CTA llamativo: Netflix
Ejemplo de CTA llamativo: Netflix

En el caso de Shopify también piden el email y a cambio ofrecen 14 días de prueba gratuita sin necesidad de poner los datos de pago:

Ejemplo de CTA: Shopify
Ejemplo de CTA: Shopify

Spotify en lugar de pedir un email pone un botón con la llamada a la acción de conseguir Spotify de forma gratuita:

Ejemplo de llamada a la acción con botón: Spotify
Ejemplo de llamada a la acción con botón: Spotify

Como hemos visto, el CTA debe tener un texto corto, estar destacado respecto al resto de los elementos y debe indicar qué va a conseguir o hacer el usuario al hacer click o realizar la acción que le indiquemos.

Textos profesionales y trabajados (Copy)

Una de las partes más importantes de nuestra página de aterrizaje es el copy o textos que utilizamos en ella.

Deben ser textos alineados con la estrategia y objetivos que hayamos definido, debe cuidarse la ortografía y deben ser claros, directos y enfocados a la conversión.

Es común delegar la creación de estos textos a un profesional, a ser posible alguien que esté especializado en copy para páginas de venta, ya que no siempre es fácil encontrar las palabras adecuadas.

Si delegamos los textos, es importante que la persona que los haga entienda bien nuestro producto o servicio – si está especializado en nuestro sector mejor – para poder transmitir la esencia del mismo y qué beneficios debe destacar de cara al usuario.

Ejemplo de textos para una landing page: Shopify.
Ejemplo de textos para una landing page: Shopify.

Imágenes y vídeos

Las landing page suelen condensar muchos conceptos en una sola página, por lo que es importante añadir contenido audiovisual como imágenes, vídeos o gifs para facilitar la lectura y no perder la atención del usuario.

Usar imágenes que representen lo que decimos en los textos ayuda a que el usuario entienda mejor de qué estamos hablando y a que recuerde mejor nuestra propuesta de valor.

Un buen ejemplo es la página de Netflix, que mezcla textos breves y de fácil lectura con imágenes y pequeños vídeos dentro de estas imágenes que ayudan a dar un toque dinámico a la página:

Ejemplo de copy: Netflix.
Ejemplo de copy: Netflix

Una práctica común es intercalar secciones que incluyen texto a la izquierda y contenido audiovisual a la derecha con secciones que usan el orden inverso.

Ejemplo de Landing Page que intercala el orden de texto y contenido audiovisual.
Ejemplo de Landing Page que intercala el orden de texto y contenido audiovisual.

También se puede mezclar un título llamativo con iconos y textos cortos para llegar más rápidamente a la mente de nuestro usuario, como hace Spotify en el apartado Premium:

Testimonios

Por último, antes de colocar de nuevo nuestro CTA, podemos generar confianza añadiendo testimonios de clientes que ya están utilizando nuestro producto o servicio:

Ejemplo de testimonio: Shopify
Ejemplo de testimonio: Shopify

El objetivo de los testimonios es aumentar el deseo del usuario por realizar la acción que nos interesa, por ejemplo en el caso de una compra, disminuir el miedo a que el producto no cumpla con lo que promete.

Es importante que estos testimonios sean naturales, no estén forzados y que reflejen cómo nuestro producto o servicio ha ayudado a resolver el problema o punto de dolor de nuestros usuarios.

CTA final

Una vez que el usuario se ha informado del producto y está interesado, es importante ponerle las cosas lo más fácil posible, por eso añadiremos de nuevo una llamada a la acción al final de nuestra landing page, resumiendo qué le vamos a aportar.

Como ejemplo podemos ver el CTA final de la landing page de LeadPages:

Ejemplo de CTA final en una Landing Page: LeadPages


Cómo crear una Landing Page con WordPress en 3 pasos

Podemos crear Landing Page de muchas formas, nuestra preferida es usar WordPress como base, para poder aprovechar todo el potencial que aporta este CMS y sus plugins.

Como comentábamos en el punto anterior, una página de aterrizaje debe evitar distracciones y enfocarse en un único objetivo: La conversión.

Estos son los pasos que deberíamos seguir para crear una Landing Page con WordPress:

Elegir un buen tema

Para crear una Landing Page, lo ideal es usar una plantilla que permita ocultar / desactivar cualquier elemento que distraiga al usuario del objetivo.

Algunos themes interesantes para crear una página de aterrizaje son por ejemplo Astra y GeneratePress, que tienen ambos una versión gratuita y otra pago y que nos permiten hacer ajustes en el theme que pueden ser interesantes para nuestro caso.

En este caso vamos a ver cómo crear una Landing Page con Astra, un theme ligero y bien optimizado que nos da la opción de ocultar elementos de forma sencilla.

Eliminar lo innecesario

Para que nuestra página de aterrizaje tenga éxito deberemos evitar las distracciones y para eso tendremos que prescindir de algunos de los elementos que vienen por defecto en cualquier theme de WordPress.

En Astra lo tenemos bastante fácil. Si creamos o editamos una página, tenemos en la barra lateral derecha varias casillas para desactivar elementos.

Podemos elegir el formato de la barra lateral, en este caso seleccionaremos: Sin barra lateral.

El diseño del contenido, en este caso elegiremos Ancho completo / Estirado para poder abarcar todo el ancho.

Y también nos permite desactivar la cabecera, el título, las migas de pan, la imagen destacada y la el pié de página.

Ajustes de Astra

Maquetar nuestra Landing page

Ahora que ya tenemos un lienzo en blanco y sin distracciones podemos empezar a crear nuestra página de aterrizaje, para ello podemos usar el editor por defecto de WordPress: Gutenberg.

Ejemplo con bloques de Gutenberg.
Ejemplo con bloques de Gutenberg.

Gutenberg nos permite usar diferentes bloques y asignarles clases CSS (lenguaje que se suele usar para dar estilo a las páginas web) para cambiar su apariencia:

Opciones de bloque en Gutenberg.
Opciones de bloque en Gutenberg.

Como las opciones del editor por defecto son algo limitadas, veremos a continuación varias herramientas que nos facilitarán la tarea.

Mejores herramientas para crear Landing Pages en WordPress

Para ayudarnos en la tarea de construir nuestra página de aterrizaje disponemos de multitud de herramientas tanto gratuitas como de pago.

En este artículo vamos a huir de opciones como Lead Pages, Kickpages y similares. Suelen ser muy caras y tener opciones limitadas. También vamos a evitar hablar de constructores visuales pesados como WpBakery. Sobre todo veremos herramientas más ligeras, versátiles y baratas.

Kadence Blocks

Kadence Blocks en el repositorio de WordPress.
Kadence Blocks en el repositorio de WordPress.

Este plugin mejora las opciones de bloque y nos permiten hacer ajustes más avanzados que no nos permite de serie Gutenberg, como por ejemplo ajustar los márgenes, el relleno o añadir secciones con una imagen de fondo.

Opciones de bloque para el bloque Row Layout de Kadence Blocks.
Opciones de bloque para el bloque Row Layout de Kadence Blocks.

Además añade bloques interesantes que podemos usar como complemento de los que vienen por defecto o en su lugar:

  • Row layout: Nos permite crear una fila o sección con una o más columnas y ajustar los márgenes, el fondo, el relleno, etc. Lo usaremos de base para todas nuestras secciones.
  • Form: Un formulario al que le podemos dar estilo.
  • Advanced Gallery: Un bloque de galería de fotos con opciones avanzadas como por ejemplo poner enlaces, hacer un carrusel, elegir el tamaño, etc.
  • Advanced Button: Con este bloque podemos añadir uno o más botones en la misma fila y ajustar qué pasará cuándo se pase por encima de ellos.
  • Icon: Podemos añadir un icono SVG a elegir entre los más de 1500 disponibles.
  • Spacer/Divider: Un divisor que podemos usar para dar espacio entre columnas.
  • Advanced Heading: Es como el bloque encabezado pero en este caso nos permite también elegir H1 (para el título principal si desactivamos el de la página como hemos visto más arriba) y podemos cambiar su apariencia.
  • Tabs: Nos permite hacer pestañas horizontales o verticales y ajustar el estilo.
  • Info Box: Una caja de información con un icono o imagen y opcionalmente un título, descripción y botón de leer más.
  • Accordion: Permite crear acordeones, útiles por ejemplo para preguntas frecuentes en las que al hacer click en una se abre su contenido.
  • Icon List: Nos permite hacer una lista, pero en lugar del punto que viene por defecto podemos usar un icono.
  • Testimonials: Nos permite añadir testimonios en cuadricula o en carrusel.

Las ventajas de usar este plugin, en lugar de un constructor visual, son que no carga prácticamente nada la página, se integra muy bien con el editor por defecto (Gutenberg) y que es gratuito.

Las desventajas son que para algunos usuarios puede no ser tan intuitivo como un constructor visual como podría ser por ejemplo Elementor. Además, tiene menos opciones a nivel visual.

Elementor

Otra herramienta que podemos utilizar para crear Landing Pages en WordPress es Elementor, que tiene una versión gratuita, disponible en el repositorio de WordPress y una versión de pago anual.

En este caso hablaremos de la versión gratuita de Elementor, que nos da bastante juego.

Como theme podemos usar Astra, GeneratePress o Hello by Elementor, que se integran muy bien con Elementor y tienen plantillas de página específicas para usar con este plugin:

  • Elementor Canvas: Quita automáticamente la cabecera, menú, pié de página y resto de elementos y usa el ancho completo.
  • Elementor ancho completo: No quita elementos pero usa el ancho completo de la página.

Hello by Elementor solo agrega los estilos básicos que necesita Elementor, siendo la plantilla más ligera que podemos usar con Elementor y una buena opción si vamos a crear una página 100% con Elementor.

Astra y GeneratePress son buenas opciones para mezclar páginas hechas con Elementor y páginas que no estén hechas con Elementor, como puede ser el caso de una página que tenga landing pages creadas con Elementor pero no lo use para el blog o la tienda por ejemplo.

Astra y GeneratePress son buenas opciones

Por defecto usaremos la plantilla de página Elementor Canvas para crear nuestras Landing Pages, podemos seleccionarla al crear una nueva página, en la barra lateral derecha:

Ajustes de página en WordPress.
Atributos de página en WordPress.

O en Elementor si vamos a la pestaña de la rueda dentada (Ajustes) en la barra lateral izquierda:

Ajustes de página en Elementor.
Ajustes de página en Elementor.

En este apartado podemos cambiar algunos ajustes de la página como el título, el estado de publicación, si queremos esconder el titulo y la estructura de página, que es lo que nos interesa:

Elementor funciona con widgets en lugar de bloques, podemos usar los widgets por defecto de WordPress, de otro plugin que hayamos instalado que lo permita o los que trae el propio Elementor.

En la versión gratuita disponemos de los siguientes widgets:

  • Sección interior: Nos permite añadir una sección con columnas, similar a lo que hacíamos en Kadence blocks.
  • Encabezado: Podemos seleccionar si se trata de un título principal (H1) o un subtítulo (de H2 a H6).
  • Imagen: Nos permite poner un efecto o una imagen diferente al pasar por encima, nos da la opción de poner un borde con o sin radio y una sombra.
  • Editor de texto: Un widget de texto normal o código HTML.
  • Vídeo: Podemos añadir un vídeo de YouTube, Vimeo, DailyMotion o alojado en el propio servidor y ajustar algunas características.
  • Botón: Añadir un botón con enlace, efectos e icono.
  • Separador: Una linea de separación.
  • Espaciador: Un espacio en blanco para espaciar secciones.
  • Google Maps: Nos permite añadir un mapa indicando ubicación, zoom y alto del mismo.
  • Icono: Podemos añadir un icono con o sin enlace.

Una opción interesante si no queremos crear una página de aterrizaje desde cero y queremos usar una plantilla de base, es añadir una de las plantillas que trae Elementor. Hay algunas que son gratuitas y otras que son de pago (las que ponen PRO).

Podemos añadirlas si le damos al icono de la carpeta, que vemos al lado del + que nos permite añadir widgets:

Al hacer click nos saldrá una ventana modal para elegir la plantilla que nos interesa añadir:

Plantillas de elementor
Plantillas de Elementor

Si nos ponemos encima nos dará la opción de insertarla o añadirla a favoritos. Si le damos a insertar nos añadirá todos los widgets y estilos de esa plantilla a continuación de lo que hayamos puesto:

Lo bueno de Elementor es que nos permite también guardar, insertar, exportar e importar nuestras propias plantillas, por lo que si creamos una plantilla base y queremos usarla para crear otra Landing Page en Elementor.

Podemos hacerlo con unos pocos clicks, primero le damos a la flecha al lado de «Actualizar» y hacemos click en «Guardar como plantilla»:

Guardar una plantilla en Elementor.
Guardar una plantilla en Elementor.

Le ponemos un nombre, le damos a guardar y listo:

Guardar una plantilla en la biblioteca de Elementor.
Guardar una plantilla en la biblioteca de Elementor.

Para importarla seguiremos el mismo proceso que para una plantilla predefinida, pero esta vez iremos al apartado Mis plantillas:

Apartado de Mis plantillas en Elementor.
Apartado de Mis plantillas en Elementor.

Dentro de cada sección o widget tenemos tres apartados: Disposición, Estilo y Avanzado. Nos permiten hacer diferentes cambios en función de lo que hayamos seleccionado.

Por ejemplo, en las imágenes de abajo vemos el caso de una sección, pero también se pueden editar columnas o widgets.

Las ventajas de Elementor son que podemos ver el resultado al mismo tiempo que modificamos la página, tenemos la posibilidad de añadir plantillas predefinidas o crear unas propias y que la interfaz es muy intuitiva y fácil de usar.

Las desventajas son que la versión gratuita tiene un número limitado de widgets. No nos permiten exprimir el 100% de la herramienta y que, en comparación con usar Gutenberg + Kadence Blocks, la página cargará más lenta, sobre todo si hacemos uso de elementos animados.

La versión de pago nos permite hacer uso de las plantillas y los widgets PRO, así como de su herramienta Theme Builder. Nos permite modificar casi cualquier elemento de nuestro theme con Elementor y aplicar estas modificaciones de forma condicional, dejando de depender del theme.

¿Quieres que dediquemos un artículo o ciclo a Elementor Pro y sus posibilidades para diseño web? Puedes dejarme un comentario o enviarme un mensaje por la sección de contacto 😉

Ejemplos de Landing Pages efectivas

(Dividir en diferentes H3, añadir capturas y explicación de la estrategia de cada landing).

Y ahora que ya sabemos cómo crear una página de aterrizaje, vamos a ver algunos ejemplos de Landing Pages efectivas.

Shopify

Si entramos en la página web de Shopify y seleccionamos prueba gratuita, veremos una Landing Page sencilla, directa y eficaz.

En primer lugar vemos su logo, un título y subtítulo que llaman la atención y describen qué aportan al usuario y debajo un CTA con un objetivo claro, que el usuario pruebe gratis la herramienta para que siga utilizándola si le gusta :

A continuación añaden un elemento audiovisual y mezclan iconos con características del producto descritas de forma breve:

Y para terminar nos ponen logos de empresas que utilizan esta herramienta y un testimonio de uno de sus clientes, seguido de un botón de CTA final:

Netflix

Otro ejemplo interesante es el de Netflix, en este caso veremos que tienen un elemento de menú por si la persona ya está registrada, pero que no afecta mucho visualmente, seguido también de un título, subtítulo y CTA llamativos y descriptivos:

Justo después vemos textos cortos y de fácil lectura describiendo características de la plataforma. Amenizados por imágenes que integran vídeos cortos pero llamativos que añaden un elemento dinámico a la página y llaman la atención:

Para terminar en lugar de testimonios añaden preguntas frecuentes, por si el usuario tiene alguna duda antes de suscribirse. Y luego vuelven a añadir la llamada a la acción por si el usuario ha llegado hasta el final de la página y está interesado en suscribirse:

Como hemos podido verla estructura y elementos son similares, pero el enfoque es diferente en función del objetivo y el tipo de producto y cliente.

¿Necesito saber diseñar para crear landing pages que conviertan?

Independientemente del nivel de experiencia que podamos tener haciendo webs, no hace falta saber diseñar para crear una landing page. No necesitamos un presupuesto alto para hacerlo por nuestra cuenta.

Pero si queremos que nuestra página de aterrizaje nos ayude a conseguir conversiones de leads o ventas, necesitamos ponernos en manos de expertos. Es una decisión muy acertada, delegar los textos, el diseño, las ilustraciones e incluso la estrategia en profesionales.

Si quieres puedes solicitar más información de nuestros servicios de diseño web y despreocuparte de todo esto 😉

Deja un comentario

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