Cómo crear una landing page con WordPress

A diferencia de las páginas normales en las que el usuario explora la información de su interés, las landing page están desarrolladas con el fin de centrar al usuario en un solo objetivo. Entre estos objetivos está el comprar un producto, suscribirse a una lista de correo, descargar algún archivo o alguna otra acción y más.

En este tipo de páginas se omiten los factores de distracción o salida, como los enlaces a redes sociales, banners, menús, entre otros. La idea es que el usuario realice la acción propuesta o en su defecto se evite salir de la página.

Ahora bien, por lo general para incluir una landing page es preciso pagar por los plugins y herramientas que nos facilitan su creación. No obstante, en el presente post te enseñaremos como hacerlo en WordPress sin necesidad de pagar nada en absoluto.

Plugins gratis de WordPress para crear lading page

WordPress posee diversos plugins gratuitos que nos permiten editar eficazmente las páginas a fin de conseguir nuestra propia Landing Page. Los mejores y más populares son los siguientes.

Elementor

Editor visual, ideal para crear una landing page. Con este plugin no tendrás necesidad de usar código, sencillamente usaras el drag & drop de siempre (arrastrar y soltar).

Beaver Builder

Plugin gratuito que proporciona distintos módulos para diseñar tu landing page fácilmente. Una de sus grandes ventajas es la posibilidad de adaptar los diseños a los distintos dispositivos móviles, de manera que se podrá visualizar perfectamente incluso en las pantallas más pequeñas.

Elementos innecesarios en una landing page

Como bien hemos mencionado, debemos evitar las distracciones para que el usuario se centre en realizar la acción establecida. Por ello, debemos ocultar algunas partes o elementos que aparecen por defecto en una página web. Podemos hacerlo mediante una plantilla o simplemente editando la hoja de estilo CSS.

Ocultar elementos mediante CSS

Mostraremos brevemente como mantener oculto el header en una página haciendo modificaciones en el CSS. Cabe destacar que los pasos que procederemos a efectuar sirven para el resto de elementos que no queremos en nuestra landing page.

  1. Abre el inspector de elementos de Chrome. Puedes hacerlo utilizando la tecla F12, con la combinación Ctrl+Shift+i o con la opción Inspeccionar del menú contextual.
  2. Luego ubica la etiqueta header de tu web y copia la clase CSS que aparezca. Por lo general, esta tiene la clase o ID site-header.
  3. Una vez obtenida la clase, instala y activa el plugin Simple CSS. Con este plugin podrás introducir tu propio CSS y este afectará únicamente la página actual.
  4. Abre el panel del plugin llamado Simple CSS y allí introduce la clase recién copiada. Primero coloca un punto (.) antes de site-header para que la clase sea reconocida, luego añádele la siguiente instrucción display:none. Esto deshabilitará la cabecera en esta página después de guardar los cambios.

Add Comment