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

por | 0 Comentarios

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.

Recogida de leads
Recogida de datos a través de una landig page

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.

Landing Page atractiva y llamativa
Página de aterrizaje atractiva

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.

Crear nueva página para landing page creada con Divi
Nueva página para Landing Page con Divi

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.

Generador de Temas de Divi
Generador de Temas de Divi (también en Extra)

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».

Seleccionar página de la Landing Page en Divi
Seleccionar página de la Landing Page

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.

Ocultar cabecera y pie en pagina de aterrizaje

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.

Añadir desde la biblioteca de Divi
Añadir diseño desde la biblioteca de Elegant Themes

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

landing page preconfigurado de la biblioteca divi
Cargar diseño pre-configurado

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.

Editar página cargada

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.

Módulo de formulario OPTIN

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.

informacion de primer nivel proteccion de datos
Texto de información de primer nivel

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.

Aspecto final de landing page con Divi
Aspecto final de landing page con Divi

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido