Cómo diseñar una landing page creada con Divi y Extra

Las páginas de aterrizaje son muy eficaces para conseguir llamar la atención exclusivamente sobre una sola acción, como vender un producto, anunciar un evento, solicitar una suscripción a una newsletter o promocionar algo concreto. En este artículo vamos a aprender como diseñar una landing page creada con Divi o Extra.

La importancia de una buena landin page

Seguramente habrás leído o escuchado que la función principal de una landing page es convertir usuarios o visitantes en leads.

A mi me gusta ser más claro y evitar esas palabras que suenen extrañas y que quedan muy bonitas en una misma frase, pero que a la hora de la verdad solo transmiten confusión y más dudas a quien no está familiarizado con ellas.

Para empezar, diseñar una landing page creada con Divi, con otro constructor o publicada en cualquier plataforma, no es más que una página a la que enviamos a los usuarios, por medio un algún enlace, anuncio, correo o llamada de atención, para mostrar una información concreta de algo que consideramos que puede ser interesante o importante.

Es cierto que el uso más habitual es conseguir que el usuario nos deje sus datos a través de un formulario incluido en esa página (los famosos leads), para luego poder enviar campañas de otros productos o promociones a las personas registradas a través de campañas de mailmarketing, otra palabra rara.

Pero las landing pages pueden usarse para otras funciones menos habituales, como promocionar un producto concreto en el que la única opción es adquirirlo, anunciar un evento o espectáculo, indicar una cuenta atrás de la apertura de una nueva web o campaña promocional...

Dependiendo de la función de la landing page, el contenido y lo atractiva y directa que pueda ser esta, podremos conseguir diferentes resultados.

Qué debe contener una landing page

En este caso seguiremos la tendencia más habitual de las landing page de conseguir datos personales, como el nombre y el email para poder utilizarlos con posterioridad.

Estas páginas no suelen ser navegables, no aparecen en ningún menú y sólo se accede de forma puntual desde un enlace estratégico o llamada a la acción, colocados dentro de nuestra web (en artículos o widgets) o fuera (redes sociales, anuncios comprados...).

Lo más importante es eliminar distracciones que eviten al visitante a centrarse en lo que realmente queremos.

Para conseguir que el visitante deje sus datos hay que ofrecer un contenido atractivo, con información concreta y sin florituras.

Y sobre todo cumplir la ley y la famosa RGPD (Reglamento General de Protección de datos). Por lo que tendremos que pedir el consentimiento explícito de la suscripción.

• El consentimiento puede hacerse con una casilla de verificación o con un correo de confirmación a través de lo que se llama "doble Op-tin", un email automático para confirmar que los datos introducidos son correctos
• Es necesario añadir una pequeña información muy clara de lo que haremos cons los datos almacenados (información de primer nivel).

Sería interesante seguir las indicaciones de la siguiente lista para conseguir lo que deseamos en nuestra landing page.

• Contenido claro y conciso, en el mismo lenguaje que nuestro visitante, con textos cortos y listados con información comprensible, mostrando que sacará el visitante de todo lo que ofrecemos.
• Utilizar sólo los campos necesarios en el formulario, en muchos casos sólo con el email es más que suficiente, solicitar muchos datos puede echar para atrás a cualquiera.
• Ocultar los menús de la web y los enlaces que puedan distraer.
• Utilizar contenido multimedia, imágenes o vídeos. "Una imagen vale más que mil palabras".
• Incluir enlaces para compartir en redes sociales, para que los visitantes que consideren importante el contenido puedan expandirlo.
• Añadir información adicional relevante, como testimonios, premios o reconocimientos, en caso de tenerlos y considerarlos importantes para el contenido de la landig page.

Configurar landing page creada con Divi o Extra

La gran ventaja de utilizar el tema Divi (también el tema Extra o el constructor Divi Builder), es que gracias a sus módulos podemos configurar cualquier tipo de página.

Comprar DIVI con un 10% de descuento

Es cierto que en Divi podemos diseñar la página de aterrizaje desde el mismo editor de WordPress, eligiendo una página en blanco desde los "Atributos de página", lo que elimina la cabecera y el footer automáticamente.

Pero en Extra, o en cualquier otro tema que tenga instalado Divi Builder, esa opción no existe. Así que vamos a unificar el proceso para los tres sitios.

Crear una página nueva

Para empezar, hay que añadir una nueva página que llamaré "Landing Page con formulario", y en vuestro caso con un título optimizado que indique de que trata la página, para que Google pueda indexarlo mejor.

En las opciones de la derecha desactivamos los comentarios, la barra lateral y ocultamos el título con la información meta. No siempre tendremos todas las opciones, pero si están, las desactivamos.

En los atributos de página podemos dejar la opción "Plantilla por defecto", da igual la opción que quede marcada ya que utilizaremos otra pantalla para crear la página.

Publicamos sin tocar nada más y volvemos a la administración de WordPress.

Abrir el Generador de Temas de las opciones de Divi o Extra

En el menú de la administración encontramos, dentro de las opciones de Divi, una pestaña llamada "Generador de temas". Una función que nos va a permitir tener total libertad sobre el diseño de la landing page creada con Divi.

Aparecerá un constructor especial donde podemos configurar cabeceras, cuerpos y pies totalmente personalizados, y diferentes a los que trae el tema por defecto.

La primera casilla es para generar un aspecto general para toda la web, pero como no vamos a cambiar los valores por defecto, la dejamos en blanco y picamos en el segundo cuadro "Agregar nueva plantilla".

Se abrirá una nueva ventana emergente donde marcaremos la página que hemos creado antes, en mi caso "Landing Page con formulario".

Ocultar la cabecera y el pie de página

En esta sección podemos hacer dos cosas, ocultar por completo la cabecera y el footer, o crearlos nuevos totalmente personalizados para la landing page.

En esta ocasión, por ser la primera vez, vamos a ocultarlo y dejar un lienzo totalmente en blanco para diseñar una landing page creada con Divi a nuestro gusto.

Ocultamos esas secciones picando y tachando el icono del ojo que hay a la derecha de cada sección, dejando sólo visible el del cuerpo.

Si tenemos curiosidad por ver si funciona, guardamos los cambios antes de salir, y al visualizar la página nos encontraremos que no hay nada, ni enlaces ni cabecera, ni menú, todo blanco.

Después de saciar nuestra curiosidad, debemos volver al "Generador de temas para continuar".

Diseño del cuerpo personalizado

Ahora picamos en la opción de "Añadir cuerpo personalizado" para empezar a construir nuestra landing page creada con Divi.

No voy a entretenerme en recomendar que módulos o secciones hay que colocar, puesto que, con las indicaciones de la introducción de este artículo, y las necesidades que tengáis, cada uno usará una composición diferente.

Si no sabes muy bien como empezar, puedes insertar alguna landing ya creada del repositorio y modificarla con vuestro contenido, que es lo que voy a hacer yo.

En esta biblioteca podéis encontrar todo tipo de opciones entre cientos de diseños pre-configurados.

Esta opción sólo está disponible para los usuarios que son suscriptores de Elegant Themes, una buena razón para suscribirse si no lo estáis ya.

Una vez que termine de cargarse podemos empezar a modificar las opciones picando en el icono del lapicero para editar el nuevo diseño.

Módulo de suscripción

De entre todos los módulos que podamos utilizar, hay uno llamado "Correo electrónico Optin", que será el que utilicemos para recoger los correos electrónicos y los datos personales.

Para almacenar los datos necesitaremos darnos de alta en algún servicio de mailmarketing, como por ejemplo Mailpoet, Mailchimp, Sendinblue...

Todos estos servicios tienen un plan gratuito inicial, muy básico, pero perfecto para cuando estamos empezando.

Este tipo de formulario no necesita una casilla de verificación, el servicio que contratemos se encargará, de forma automática, de enviar un correo de comprobación al email introducido para confirmar la suscripción.

Hasta que ese correo no es confirmado, el usuario no formará parte de nuestra base de datos.

En el caso de utilizar un formulario externo y no insertar este módulo para configurar la landing page creada con Divi, es muy posible que sí haya que añadir esa casilla adicional.

Texto de primer nivel RGPD

Para cumplir con la ley a la hora de recopilar datos, hay que indicar el uso que vamoa a hacer con los datos recogidos.

En el mismo módulo, tenemos varias casillas para escribir texto adicional, podemos añadir la información necesaria antes de las casillas del formulario o después.

Os dejo el siguiente texto para que lo modifiques con tus datos, también puedes buscar otras opciones navegando por internet. Recuerda colocar el enlace a tu página de "Política de privacidad" que debes tener con información ampliada.

Usaremos la información que nos facilites en este formulario para ofrecerte noticias, ofertas de contenido y servicios personalizados. Ver política de provacidad.
Responsable de los datos: (TU NOMBRE).
Finalidad: Envío por email de noticias y ofertas.
Legitimación: Tu consentimiento expreso.
Destinatario: Lista de suscriptores alojada en (SERVICIO DE MAILMARKETING).
Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Cuando tengamos toda la landing page creada con Divi, guardamos los cambios, cerramos el constructor de páginas específicas y volvemos a guardar los cambios en la ventana del "Generador de temas".

Y ya dispondremos de nuestra LANDIG PAGE completa y personalizada con el formulario correcto para recoger los datos de nuestros usuarios.