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.
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.
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 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
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.
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”.
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”.
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 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 terminada
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquín, muy bueno tu Blog, tengo una consulta, uso WordPress, Divi y el Mailchimp pero hay una forma de captar los suscriptores sin solicitar confirmación a las personas, es decir, como hago para que mail chimp no envíe mail de confirmación(Se que en Europa se requiere la confirmación pero en mi caso en Americana latina aún no) y almacene directamente en mailchimp? Por cierto tiene desactivado el doble opt in. A la espera de tus comentarios
Buenas,
Eso lo debes configurar en tu cuenta de MailChimp. Lo que comentas corresponde a la opción: «Opt-in único» (sin email de confirmación). En este artículo de mailChimp tienes todos los detalles sobre este tema: Opt-in único y doble con Mailchimp
Hola Joaquín,
Gracias por tu respuesta, vi el artículo y la opción de Opt-in Doble) Con email de confirmación) está deshabilitada pero aún así me envía el email de confirmación. Será en Divi o WordPress que tengo que realizar alguna configuración? Agradezco de antemano tu respuesta. Saludos
Buenas,
Imagino que será algo de Mailchimp. Si usas bloom, creo recordar que en la creación del formulario (dependiendo del tipo) en algunos casos también preguntaba el tipo de Opt-in doble o sencillo
Hola Joaquín.
Normalmente una Lnading page despues de meter los datos y validarlos te manda a otra página donde dás las gracias, además ambas páginas pueden meterse con un pixel de facebook para dar seguimiento y retargeting, ¿esto se puede con divi? de antemano gracias
Hola Cesar,
si utilizas el módulo formulario de contacto de Divi en la landing page, éste tiene la opción de redirigir al visitante a otra página que tu elijas cuando el formulario se rellene correctamente.
Saludos Joaquín, excelente post, al principio del mismo hablabas sobre los email marketings, y nombrastes a mailrelay, la pregunta es como hago para integrarlo con divi, ya que no me sale una integración con la plantilla, gracias de antemano por tu respuesta y comentario saludos, excelente tu blog
Cón divi hay un módulo que se llama: «Correo electrónico optin» este es el módulo para crear un formulario de suscripción. Pero he visto que entre los muchos programas de email marketing con los que se puede conectar el módulo no está mailrelay.
Pero si usas divi también tendrás acceso al plugin Bloom (también de elegant themes) que seguramente si permitirá crear un formulario de suscripción conectado a mailrelay (pero hay que confirmarlo no estoy seguro)
Gracias por aclarar.. Estoy por comprar el tema Divi en estos días ya que le servia a un amigo que estudio diseño gráfico conmigo. Pero me saltaron dos dudas si me puedes ayudar por favor
1 Se puede integrar una landing de Getresponse con este tema
2 al ver la página de Home de Divi me pareció grandiosa la Fuente que utiliza pero no sabrás donde se consigue esa fuente específicamente porque al parecer no viene integrada en los temas de Divi.. Gracias por responder
Hola Mynor,
1.- no conozco la herramienta Getresponse pero por lo que leo parece que es una herramienta para crear landing pages pero no integrables con WordPress sino independientes.
2.- Todas las fuentes que se incluyen en la demo de divi las tiene la plantilla incorporadas. En cualquier caso te dejo un enlace donde puedes ver todas las fuentes que incluye Divi
En cualquier caso, como puedes ver en el siguiente post podemos añadir también más fuentes de google a Divi
Un saludo
Muchas gracias por tu respuesta Joaquin!
Un saludo.
Jorge
Gracias a ti Jorge,
Un saludo
Buenas tardes Joaquin!
Excelente blog, muchas gracias por tu ayuda e informacion.
Una duda que tengo al respecto de Divi, a ver si como experto que eres me puedes ayudar por favor.
He comprado el plan developer de Eleghant Themes y utilizo la plantilla Divi,
Me gustaria saber si se puede utilizar y actualizar la misma plantilla Divi en 2 proyectos o dominios diferentes a la vez.
Por ejemplo usarla en restaurantejuanito.com y en restaurantepepito.com
Muchas gracias y un saludo!
Jorge.
Hola Jorge,
puedes usar y actualizar al mismo tiempo la plantilla Divi en todos los proyectos diferentes que quieras. El plan developer de Elegant Themes tiene licencia para hacer todos los sitios web que quieras y podrás actualizarlos todos.-> Descuentos planes elegant themes
Un saludo