En este post vamos a ver cómo podemos crear una landing page o página de aterrizaje. Para ello vamos a usar WordPress, el gestor de contenidos más utilizado a nivel mundial. También utilizaremos Divi, mi plantilla favorita para WordPress.

DESCUENTO PLANTILLA DIVI

 

1.- ¿QUÉ ES UNA LANDING PAGE O PÁGINA DE ATERRIZAJE?

 

¿QUÉ ES UN LEAD?: Un Lead es una persona que ha facilitado algunos de sus datos (normalmente email y nombre) al rellenar un formulario. Este formulario se sitúa en lo que se conoce como una landing page.

Los datos del lead pasan a formar parte de una base de datos generada por la persona creadora de la web.

En muchas ocasiones se utilizan aplicaciones online de email marketing como Mailchimp, Mailrelay, etc. para la gestión de los leads y poder enviarles una newsletter u otro tipo de correos.

 

¿QUÉ ES UN LEAD MAGENT?: Un lead magnet es un contenido de calidad que se ofrece para motivar al visitante desconocido a convertirse en un lead. Es decir, a facilitar sus datos.

 

¿QUÉ ES UNA LANDING PAGE?: Una landing page o página de aterrizaje es una página creada con la finalidad de convertir visitantes desconocidos en Leads.

La forma más habitual de conseguir un leads es a través de un lead magnet.

Una landing page es una página dentro de un sitio web. Es decir, podemos crear diferentes landing pages dentro de un mismo sitio web. Lo que sí es importante es no mostrar el típico header con los diferentes ítems de menú del sitio web para no desviar al visitante de su objetivo, que es rellenar el formulario. Es decir, que la landing page no debe tener el header y menú que aparece en el resto de páginas del sitio web.

También podríamos crear un sitio web que solo estuviera formado por una landing page.

 

 

2.- CÓMO HACER UNA LANDING PAGE CON WORDPRESS Y DIVI

 

Claro, para hacer la landing page utilizaremos WordPress. De hecho crearemos la landig page dentro de nuestro sitio web realizado con WordPress. Para crear una landig page no necesitamos comprar una plantilla específica para ello, utilizaremos Divi nuestra plantilla favorita para WordPress y en mi opinión, la mejor del mercado.

 

 

2.1.- CÓMO ELIMINAR EL HEADER Y MENÚ SUPERIOR DE LA LANDING PAGE CON DIVI

 

Ya hemos comentado que la landig page no debe mostrar el menú superior del header o encabezamiento ni el footer que aparece en el resto de la web. La finalidad de esto es no desviar la atención del visitante es el objetivo de convertirse en un valioso lead.

Para ello, al crear la nueva página en wordpress buscaremos el bloque denominado “Atributos de página”. En el selector plantilla elegiremos: “Blank page”. De esta manera estaremos creando una página en blanco que no compartirá el header ni el footer del resto de páginas del sitio web.

 

como poner la landing page sin header ni footer

Quitar el header y footer de la landing page

 

 

2.2.- ESTRUCTURA DE LA LANDING PAGE QUE VAMOS A CREAR

 

La estructura de la landing page o página de aterrizaje que vamos a crear estará formada por:

a.- Título: título de la página que colocaremos en la parte superior de la página. Con el título debemos conseguir que el visitante continúe visualizando la página, por lo que tendrá que ser un título que llame su atención. Para ello utilizaremos un módulo de texto del page builder de Divi

b.- Imagen: pondremos una imagen en el lateral izquierdo de la landing. Esta será la imagen principal del producto o servicio. Para la imagen utilizaremos el módulo imagen de Divi

c.- Formulario suscripción: En la landing page podemos usar un simple formulario de contacto o un formulario de suscripción conectado a una aplicación de email marketing que nos permita gestionar los usuarios que se vayan registrando como por ejemplo MailChimp.

En nuestro ejemplo utilizaremos un formulario de suscripción, por lo que utilizaremos el módulo “Correo electrónico optin” conectado con mailchimp.

Si utilizáramos un simple formulario de contacto, pues podríamos utilizar el módulo “formulario de contacto”.

d.- Beneficios: Debajo del formulario enumeraremos los beneficios del producto o servicio ofrecido en la landing page, para lo que utilizaremos un simple módulo de texto de Divi.

 

Estructura de módulos de la landing page

Estructura de la landing page

 

 

2.3.- EL TÍTULO DE LA LANDIGN PAGE CON UN MÓDULO DE TEXTO

 

Para el título de la landing page utilizaremos un módulo de texto, que en el ejemplo que estoy haciendo he titulado como “Curso wordpress online” ya que vamos a hacer una landing de ejemplo sobre un curso de wordpress online.

En el ejemplo como podéis ver en la siguiente imagen he elegido la fuente “Gloria Hallelujah”, con un tamaño de 55 px y color: #336699

 

Crear el título de la landing page con Divi

Módulo de texto para crear el título de la landing page

 

 

2.4.- IMAGEN DE LA LANDING PAGE

 

Para añadir la imagen de la página de aterrizaje utilizaremos un módulo de imagen que colocaremos en el lateral izquierdo en una fila dividida en dos columnas (1 /2 + 1 /2).

Subiremos la imagen en la configuración del módulo de imagen y rellenaremos las etiquetas title y alt del módulo.

 

Añadir imagen a la landing page

Poner imagen en la landing page

 

 

2.5.- FORMULARIO DE SUSCRIPCIÓN DE LA PÁGINA DE ATERRIZAJE

 

Para el formulario utilizaremos el módulo “Correo electrónico optin” que conectaremos con nuestra cuenta de mailchimp.

Para poder conectar tu cuenta de mailchimp con el módulo deberás ir primero a: “Divi > Opciones del tema” e introducir tu API de mailchimp en el campo: “Clave de API de MailChimp”.

 

Conectar mailchimp con wordpress y divi

Introducir Clave API de mailchimp

 

A continuación insertaremos el módulo en la parte izquierda y lo configuraremos:

Proveedor de servicio: en este campo elegiremos mailchimp para poder conectar el módulo con dicho proveedor de servicio de email marketing.

Lista de Mailchimp: si has introducido tu clave de API como antes hemos comentado, en el selector te aparecerán las diferentes listas de suscripción que tengas creadas en mailchimp con dicha cuenta. Elige la que quieras asociar con el formulario.

Personaliza el texto del botón en el campo: “Texto del botón” y el color de fondo del formulario: “color de fondo”.

 

Configuración formulario de suscripcion de la landing page

Configurar formulario de la landig

 

En la pestaña de diseño del formulario de la landing page personalizaremos el diseño del botón como se puede ver en la imagen, personalizando el tamaño del texto del botón, color de fondo y borde del texto (en el ejemplo #f48d18), y el radio frontera a 23 px.

 

Personalizar diseño del botón de la caja de suscripcion

Personalizar botón CTA de suscripción de la landing page

 

En el ejemplo también personalizaremos las opciones de “hover” para que al poner el ratón sobre el botón éste cambie el color de fondo. En el ejemplo hemos puesto:

Botón hover color de fondo: #f4ba77

Botón hover color de borde: #f4ba77

 

 

2.6.- MODULO DE TEXTO PARA LAS VENTAJAS

 

Bajo el módulo de suscripción utilizaremos un módulo de texto para mostrar las ventajas de la suscripción. En mi opinión un elemento bastante importante en una landig page que se precie.

El resultado final de la landing page o página de aterrizaje es el siguiente:

 

landing page con wordpress y divi terminada

Landing page terminada

 

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO ELEMENTOR (14 Clases)
4.- CURSO BLOOM + MAILCHIMP (7 Clases)
5.- CURSO SEO (19 Clases)
6.- CURSO BLOG WORDPRESS (32 Clases)
7.- CURSO WOOCOMMERCE (39 Clases)
8.- CURSO FLATSOME WORDPRESS (36 Clases)
9.- CURSO COLORES WEB (9 Clases)
10.- CURSO ANALYTICS (10 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.