Cómo crear una buena Landing Page con WordPress y Divi

Éste es un post de invitado de Pedro Suárez. Pedro es autor de la web pedrosuarezweb.com y se dedica al diseño web, estando especializado en WordPress y Divi.

Hacemos lo impensable para conseguir visitas mejorando el posicionamiento de nuestro blog cueste lo que cueste y publicitamos día y noche nuestros artículos, proyectos, cursos, etc...

Pero, ¿qué hay del contenido y diseño de tus páginas? ¿De qué sirve atraer miles de visitas si tus páginas no están optimizadas y no dan respuestas a las necesidades de tu lector ideal?

cabecera landing page wordpress divi

Imagen de Shutterstock - © Africa Studio

Tus visitas llegaran a tu blog, sí, pero probablemente un alto porcentaje de ellas se marchen tal como han venido. Es decir, tu blog no convertirá lo suficiente y sin conversión no habrá monetización.

Mi intención es evitar que esto también te ocurra, por eso he creado un artículo sobre las landing pages (también conocidas como páginas de aterrizaje), páginas web muy optimizadas que te ayudarán como ninguna otra a retener tu tráfico y, de paso, aumentar tus conversiones tanto como realmente lo necesites.

Vamos a ver paso a paso cómo crear una página de generación de leads o captación de suscriptores en WordPress. Para ello vamos a utilizar Divi, uno de los mejores temas WordPress premium que existen, sino el mejor, y que está arrasando en el mercado.

Con Divi viene integrado el plugin Divi Builder para la maquetación visual de páginas. No obstante, puedes usar Divi Builder también con cualquier otro tema WordPress, así puedes hacer exactamente lo mismo que lo que haré aquí con Divi con el tema WordPress que ya estás usando ahora mismo 😉

Lo veremos todo de forma rápida y muy sencilla, sin absolutamente nada de código, para que tú mismo te la puedas diseñar sin ningún tipo de problema.

Si llegados a este punto aún no sabes nada de Divi y su constructor Divi Builder, te recomiendo echarle un vistazo a estos dos artículos donde te muestro todas las bondades y características de estos productos:

cabecera disenar blog divi Cómo diseñar un blog con WordPress y Divi

WordPress es la mejor plataforma para páginas web y Divi la mejor plantilla de diseño. Imagínate lo que se puede hacer con las dos juntas...

tutorial divi mejor plantilla wordpress Tutorial Divi - Cómo sacar el 100% de la mejor plantilla WordPress

Muchos consideran Divi la mejor plantilla de WordPress. Sin ser diseñador puedes crear diseños increíbles. Aquí revelo todos sus secretos 🙂

De todas formas, no te preocupes; vas a disponer de varios vídeos donde verás con detalle el funcionamiento de estas herramientas, para que obtengas todo lo que necesites.

¿Qué es una landing page?

Quizás no tengas claro aún qué es exactamente una langing page. No te preocupes, te lo puede explicar muy fácil y en pocas palabras:

En el marketing online se llama landing page a una página autónoma dentro de una web, creada específicamente para una campaña concreta (venta de un producto, venta de un servicio, captación de suscriptores con una descarga gratuita en la home de un blog, etc.).

Es la página en la que "aterrizan" las visitas después de hacer clic en un anuncio, resultado de búsqueda u otros contenidos diseñados para llevarles a esa página.

La landing pages se diseñan con un sólo objetivo, conocido como llamada a la acción o CTA (de Call To Action en inglés). Por ejemplo: conseguir el clic en el botón de compra el producto.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Por eso, el principio de diseño fundamental en las landing pages es eliminar cualquier distracción que ponga en el peligro ese objetivo (botones sociales, barras laterales con enlaces, etc.).

Un buen diseño de landing page se centra en guiar el usuario para conseguir que siga la llamada a la acción. Por eso, las conversiones en las landing pages son mucho mejores que en una página "normal".

Estructura y elementos básicos de una landing page

Para elaborar tu página de aterrizaje he dividido nuestra landing page en varias secciones, intentando incluir en ella todos y cada uno de los elementos imprescindibles que toda página de aterrizaje debe poseer.

Dichos elementos son:

  1. Propuesta Única de Valor (USP)
  2. Problema (P).
  3. Atención (A).
  4. Solución (S).
  5. Listado de Beneficios.
  6. Declaración de apoyo.
  7. Pruebas Sociales.
  8. Argumento de cierre.
  9. CTA Final.

Primeros pasos para hacer una landing page en WordPress

Elección de tu paleta de color

Uno de los factores más importantes a la hora de diseñar no sólo en landing pages, sino en cualquier tipo de página web, es la legibilidad.

Para conseguir facilitar al máximo la experiencia de tus usuarios y lograr convertir adecuadamente, tus páginas deben ser legibles y eso pasa por utilizar colores que contrasten y una tipografía adecuada.

De otra forma sólo conseguirás generar confusión y con ello disminuir tu porcentaje de conversión drásticamente.

Con el fin de evitar esto, utilizaremos dos colores complementarios que estén en perfecta armonía y permitan diferenciar con claridad cualquier elemento de la página:

  • Rojo: #CB6063
  • Verde: #98C9C5
paleta colores
Elección de tu paleta de color con Paletton.

Para las fuentes utilizaremos colores oscuros y claros del tipo:

  • Oscuro: #363e50 y #444444
  • Claro: #ffffff

Para establecer tu paleta de color te recomiendo hacer uso de Paletton, una herramienta online gratuita muy sencilla pero muy práctica, a la vez que te ayudará a conseguir colores que estén en equilibrio y faciliten enormemente la lectura.

Además, si quieres investigar más sobre el uso de esta herramienta y aprender sobre determinados aspectos vinculados a los colores, te aconsejo este magnício artículo sobre los colores y la armonía de color.

Ajustes previos en tu landing page con WordPress y Divi

Para comenzar con el diseño de tu landing page con WordPress y Divi debemos establecer una serie de configuraciones básicas previas, para eliminar los puntos de fuga.

Los puntos de fuga no son más que enlaces que llevan a otras páginas de tu web (como los que se encuentran, por ejemplo, en tu menú de navegación y tu pie de página) o incluso a otras webs externas a tu proyecto.

Debemos deshacernos de todos ellos, ya que de otra forma incrementaremos las posibilidades de que tus lectores abandonen tu página de aterrizaje.

¿El resultado? Un descenso dramático de tus conversiones. Obtendrás menos suscriptores, generaras menos ventas, etc...

Afortunadamente, con WordPress y Divi lo tienes realmente fácil.

Con un sólo clic podrás deshacerte de tu menú de navegación y pie de página con precisión, en la página que realmente lo necesites.

Sólo tienes que acceder al back-end de tu página y en “Atributos de página > Plantilla” seleccionar “Blank Page” y listo.

blank page
Eliminando tu cabecera y pie de página.

Cómo crear una landing page. Ejemplo paso a paso

1. Crear la Propueta Única de Venta (USP)

En esta primera sección incluiremos lo que se conoce como USP (Unique Selling Proposition) o Propuesta Única de Venta, un elemento fundamental en cualquier landing page.

Con la USP lo que buscamos es plasmar una descripción breve y directa de tu oferta, así como los beneficios asociados a ella.

Tu USP estará formada por:

  • Título
  • Subtítulo
  • Hero shot (imagen de la oferta)
  • Listado de beneficios
  • CTA

La idea de tu USP es intentar convertir desde el principio gracias al poder de convicción del título, el subtítulo y los beneficios ligados a tu oferta.

De esta forma evitaremos que tu lector tenga que leer todo el contenido, que se canse y termine por abandonar definitivamente tu página de aterrizaje.

Además, con ese CTA en tu USP (es decir, el botón que una vez pulsado hará que tus lectores puedan suscribirse), más aquél que colocaremos al final de tu landing page nos aseguraremos que lectores los localicen con facilidad y conviertan con mayor probabilidad.

Bien, entonces .... ¿cómo diseñar tu USP con Divi sin complicaciones?

Pues bien fácil.

Utilizaremos el constructor Divi Builder y su diseño basado en secciones, filas, columnas y módulos:

  • Secciones: son los elementos que permiten que se inicie el proceso de maquetación. Permiten añadir filas, tantas como necesites.
  • Filas: estructuran el contenido en columnas con distintos porcentajes de anchuras. Dentro de esas columnas se instalarán los módulos.
  • Módulos: son los bloques funcionales. Permiten añadir textos, imágenes, botones. Todos ellos con funcionalidades específicas.

En nuestro caso lo que haremos será añadir una sección estándar crearemos dentro de ella filas y luego implementaremos módulos con un propósito específico.

La sección en este caso estará formada por una fila con dos columnas:

  1. Primera columna: incluiremos un módulo de imagen con la imagen del autor.
  2. Segunda columna: un módulo de texto con el título, otro con el subtítulo y uno más, que actua como CTA al incluir en él un shortcode que mostrará el panel pop-up.
usp
Sección: USP o Propuesta Única de Valor.
ajustes usp
Sección: USP o Propuesta Única de Valor en Divi Builder.

Crear el título principal de nuestra página de aterrizaje

Lo primero que hemos añadido es el titular, uno de los elementos más relevantes de cualquier landing page.

Un título que ataque los puntos de dolor del lector para causar un poder de atracción inmediato y provoque interés por la oferta.

Escogemos un elemento H1 para éste con ánimo de favorecer el SEO y hacemos uso de mayúsculas y un color blanco neutro para garantizar la legibilidad de este elemento.

Todo el diseño lo configuraremos con Divi Builder a través de los ajustes de diseño:

ajustes titulo
Ajustes de diseño: Título.

Crear el subtítulo de la landing page

Para completar el titular lo ideal es utilizar un subtítulo que aporte información extra.

Seguimos la estructura jerárquica de cara al posicionamiento y establecemos este elemento con la etiqueta HTML H2.

En este caso hemos utilizado un color oscuro en lugar de uno claro, para romper la monotonía y favorecer la lectura:

ajustes subtitulo
Ajustes de diseño: Subtítulo.

La llamada a la acción (CTA)

El Call To Action o CTA es el botón que hará posible que la conversión se lleve a cabo y, por tanto, uno de los elementos más importantes de tu landing page.

Lo hemos diseñado con un color rojizo (#CB6063) en armonía con el color verde principal (#98C9C5) y que debe utilizarse principalmente para los CTA de la página.

Importante también añadir el uso de mayúsculas, un color claro que contraste así como textos que animen al lector a tomar acción:

ajustes cta fondo
Ajustes de diseño: CTA.

Al pulsar este CTA se mostrará inmediatamente después un un pop-up con el formulario de suscripción para que de esa forma cualquier persona se pueda suscribir.

¿Cómo lo hemos logrado?

Pues con el plugin Thrive Leads, la que es en mi opinión la herramienta de creación de formularios opt-in más completa del mercado:

popup opt in
Formulario op-in pop-up con Thrive Leads.

Thrive Leads te permite diseñar con facilidad una gran variedad de formularios opt-in según tus necesidades:

interfaz thrive leads
Interfaz de diseño de Thrive Leads.

Tras su diseño obtendrás un shortcode que deberás implementar en tu web como texto. Esto hará posible que al pulsar ese botón se muestre el pop-up con el formulario:

ajustes cta shortcode
Implementación de shortcode de Thrive Leads.

El "Hero Shot"

El Hero Shot no es más que una imagen que representa visualmente tu oferta, en este caso una guía gratuita.

Este tipo de imágenes son típicas en las landing pages, ya que ayudan algo más a aumentar las conversiones, al dar una sensación de valor intrínseco asociado a la oferta.

En mi caso, en lugar de añadirla en la sección con Divi Builder, la he incluido en el formulario opt-in creado con Thrive Leads:

hero shot
Hero Shot.

El listado de beneficios

Muchos se centran en mostrar las características de la oferta en lugar de los beneficios asociados a ella. Y esto es sinceramente un error grave.

Las características de tu producto ayudarán a la conversión, pero son los segundos los que realmente harán que tu landing page convierta como ninguna otra.

Y es que a tus lectores no les interesa tanto qué incluye tu oferta, sino lo que obtendrán como resultado de haberla adquirido.

En este caso, ubicaremos dichos beneficios en dos lugares distintos dentro de la landing page:

  • En el propio formulario opt-in, junto al Hero Shot.
  • Más adelante, en una sección media de tu landing page para que el lector pueda captar esos beneficios, en caso de no haber pulsado el CTA con anterioridad.
beneficios opt in
Listado de beneficios en formulario opt-in.

Principios de diseño

Con el objetivo de mejorar aún más las tasas de suscripción, hemos aplicado dos principios de diseños básicos destinados a la conversión, muy sencillos pero que funcionan de verdad:

1. Pistas Direccionales

Las Pistas Direccionales son elementos que facilitan la localización de un área de especial importancia; en nuestro caso, el lugar donde se encuentra ubicado tu CTA.

Incluimos una imagen de autor que apunte directamente hacia esa zona de conversión:

pistas direccionales
Principio de diseño: Pistas Direccionales.
2. Encapsulación

Con este principio lo que buscamos es encapsular o agrupar esa área de importancia con el objetivo de que ésta destaque sobre los demás y capte la atención de los lectores con rapidez.

Solo tenemos aplicar un fondo con un color que contraste con el color de fondo de tu sección y que agrupe a los elementos más importantes de tu USP, es decir, tu título, el subtítulo y tu CTA:

encapsulacion
Principio de diseño: Encapsulación.

2. Plantear el Problema (P) que vamos a resolver

Una vez hemos captado la atención de tu lector es hora de comenzar a conectar con él para incrementar la posibilidad de convertir, a medida que éste va accediendo al contenido de toda tu página de aterrizaje.

Lo haremos a través una vieja técnica de marketing conocida como “PAS” (Problema, Atención, Solución).

Lo que buscamos con este técnica es dirigir sutilmente al lector hacia aquella parte de nuestra página que realmente más nos interese:

  1. Problema: en esta primera etapa haremos lo posible por captar la atención del lector atacando sus puntos de dolor.
  2. Atención: mantenemos esa atención generando empatía y conectando más con esa persona.
  3. Solución: finalmente, es hora de dar solución a esos problemas y necesidades desvelando quién eres y cómo podrás ayudarle.

En esta sección nos centraremos en la primera parte y para ello incluiremos una sección con dos filas:

  1. Fila: dos módulos de texto con un título y subtítulo.
  2. Fila: cuatro módulos de anuncios, donde se incluyen esos puntos de dolor del lector ideal cada uno de ellos, acompañados de un icono de atención.
problemas
Sección: Problemas.
ajustes problemas
Sección: Problemas en Divi Builder.

Para añadir esas frases que definan los puntos de dolor de tu lector ideal hemos hecho uso de los módulos de anuncios de Divi Builder ya que gracias a su versatilidad te permiten añadir en un mismo bloque un título, texto, iconos o imágenes.

ajustes anuncio problemas
Ajustes de diseño: Anuncios.

3. Mantener la Atención (A) conectando con el prospecto

Lo siguiente que haremos será conectar un poco más con esa persona a través de la empatía, haciéndole ver que entiendes sus frustraciones pero que hay una solución para todos y cada uno de sus problemas.

He incluído una fila con dos columnas:

  1. Columna: un módulo de imagen que representa al autor en “modo frustración”.
  2. Columna: un módulo de texto con información sobre su pasado, un pasado con ciertas similitudes con la situación actual del lector ideal.
atencion
Sección: Atención.
ajustes atencion
Sección: Atención en Divi Builder.

4. Presentar la Solución (S) al problema

Tras conectar es hora de mostrar la solución a todos esos problemas: tú mismo. ¿Quién si no?

Preséntate a tu audiencia, explica quién eres y por qué eres la persona ideal para ayudarle a resolver todos los obstáculos que encontrará por el camino.

Solo tenemos que incluir dos filas:

  1. Fila: con un módulo de texto que incluya un elemento de cabecera que impacte desde el principio.
  2. Fila: con dos columnas:
    1. Columna: un módulo (o dos) de texto para que puedas incluir toda la información sobre ti y tu historia.
    2. Columna: un módulo de imagen sobre ti en “modo éxito”.
solucion
Sección: Solución.
ajustes solucion
Sección: Solución en Divi Builder.

5. Listado de beneficios

Lo siguiente son los beneficios asociados a tu oferta, un elemento que, como ya sabes, es fundamental en toda página de aterrizaje.

Como te comenté anteriormente, estos fueron incluidos previamente en el formulario opt-in que se muestra al pulsar sobre el CTA.

Para aumentar tus conversiones lo incluiremos en tu landing page directamente, en una zona media.

Para implementarlos utilizamos dos filas:

  1. Fila: dos módulos de texto para incluir un título y un subtítulo para esa sección.
  2. Fila: tres módulos de anuncio relacionados con tres temáticas diferentes. En cada uno de ellos incluimos un icono o imagen representativa de esa temática, un titular y texto describiendo lo que ese lector logrará al seguirte a través de tu newsletter.
beneficios
Sección: Listado de beneficios.
ajustes beneficios
Sección: Listado de beneficios en Divi Builder.

Gracias a los módulos de anuncio de Divi Builder añadiremos un icono para cada uno de ellos, su título y contenido correspondiente:

beneficios anuncio
Ajustes de diseño: Anuncios.

6. Declaración de apoyo

Lo siguiente es la Declaración de apoyo, la cual tiene una función y características muy parecidas a las del titular.

La inclusión de este tipo de elementos se debe al "factor prisa" que prácticamente todos los usuarios de internet tienen al acceder y leer el contenido de una página.

Debido a esto, rara vez leemos el contenido de toda la página, sino que en lugar de ello hacemos un barrido visual centrándonos en los elementos que destaquen más.

Por esta razón, debemos incluir en la parte media de la página de aterrizaje un elemento parecido al titular, que refuerce el mensaje principal y ayude a convertir más.

En esta sección sólo necesitarás una fila con una columna que ocupe todo el ancho.

Inserta allí un módulo de texto donde incluya los beneficios nombrados con anterioridad o incluso añade otros nuevos si lo estimas conveniente:

declaracion apoyo
Sección: Declaración de apoyo.
ajustes declaracion apoyo
Sección: Declaración de apoyo en Divi Builder.

Para darle más fuerza a esa declaración podemos añadir de forma totalmente opcional otra sección con una fila formada por dos columnas:

  1. Columna: en ella añadimos texto que refuerce a la declaración de apoyo.
  2. Columna: una imagen que represente visualmente el mensaje que queremos transmitir a través de un módulo de imagen.
declaracion apoyo
Sección: Declaración de apoyo extra.
ajustes declaracion apoyo extra
Sección: Declaración de apoyo extra en Divi Builder.

7. Pruebas Sociales

Las Pruebas Sociales son un elemento indispensable en cualquier landing page ya que incrementará tu credibilidad mucho más y con ellos las posibilidades de que tus lectores se suscriban o adquieran algunos de tus productos.

En este caso incluiremos testimonios de clientes que han trabajado con el autor de la landing page así como empresas con las que ha colaborado.

Incluiremos un testimonio a a través de dos secciones:

Sección: formada por una fila con dos columnas donde se puede añadir un testimonio de gran importancia:

  1. Columna: módulo de imagen del testimonio
  2. Columna: módulo de texto con el testimonio escrito
testimonios
Sección: Testimonios.
ajustes testimonios
Sección: Testimonios en Divi Builder.

En el caso de las empresas añadiremos una sección formada por dos o más filas:

  1. Fila: módulos de texto para los títulos y subtítulos de la sección.
  2. Filas: varios módulos de imagen donde se incluyen los logotipos de las empresas con las que el profesional ha trabajado.
colaboraciones
Sección: Colaboraciones.
ajustes colaboraciones
Sección: Colaboraciones en Divi Builder.

Si quieres añadir más de uno cabría la posibilidad de añadir un slider con testimonios que se visualizarán uno a uno de forma automática:

testimonios slider
Sección: Testimonios Slider.
ajustes testimonios slider
Sección: Testimonios Slider en Divi Builder.

8. Argumento de cierre + CTA final

Para terminar sólo queda añadir el Argumento de cierre, un elemento con unas características similares al titular y que sirva de antesala al CTA final, tu última oportunidad de convertir.

Solo necesitarás en esa sección una fila con un 3 módulos:

  1. Módulo de texto: para incluir el texto que conforme tu Argumento de cierre.
  2. Módulo de texto (opcional): para añadir información previa sobre tu CTA.
  3. Módulo de texto: tu CTA final, creado también a través de un shortcode, en este caso con el plugin Thrive Leads.
argumento cierre
Sección: Argumento de cierre + CTA.
ajustes argumento cierre
Sección: Argumento de cierre + CTA en Divi Builder.

Con todo esto ya tendrías tu landing page diseñada y lista para convertir, pero como puede que tengas dudas sobre el proceso de maquetación te dejo a tu disposición un primer vídeo donde te explico todo el proceso, paso a paso:

Cómo adaptar tu landing page en dispositivos móviles con Divi

Una vez terminado el diseño de tu landing page, debes adaptar éste a los diferentes dispositivos móviles, es decir, las tablets y smartphones.

Afortunadamente Divi te lo ponen fácil ya que te permite configurar, por ejemplo, los tamaños de tus letras, así como la altura de las secciones y filas en los distintos dispositivos gracias a las opciones de su herramienta el “Personalizador de temas”:

personalizador temas
Ajustes responsive generales con el Personalizador de Temas.

Una vez establecidos esos ajustes generales es hora de ser más específicos y para ello Divi Builder te ayuda a aplicar los cambios necesarios en cada uno de los elementos de tu página.

Con el constructor podrás realizar cambios sobre múltiples opciones, como por ejemplo:

  • Margen o separación de los elementos básicos de Divi (secciones, filas y módulos).
  • Relleno de esos elementos.
  • Tamaño.
  • Tamaño de las fuentes.
  • Altura de línea de las fuentes.
  • Espacio entre letras de esas fuentes.
ajustes responsive divi builder
Ajustes responsive específicos en Divi Builder.

Para que veas por ti mismo lo sencillo que es la adaptación a dispositivos móviles con Divi te dejo otro vídeo donde te lo muestro todo con detalle:

Con esto obtendrás todo lo necesario para que el contenido de tu landing page se adapte a la perfección a los distintos dispositivos móviles.

Extra: Cómo diseñar tu Squeeze Page con Divi

Con todo lo visto anteriormente podría dar por concluido el artículo pero me gustaría ir más allá y aportarte más valor, para maximizar tu conversiones de leads en tu proyecto.

La verdad es que este tipo de landing page funcionará mejor que cualquier otra página poco optimizada, pero si quieres obtener suscriptores a diario necesitas una página de aterrizaje super optimizada que sea sinónimo de éxito.

Una página que podrás compartir en cualquier lugar, tanto de forma online como offline, como por ejemplo en conferencias, en tus ponencias, etc…

Me refiero a tu Squeeze Page.

Y es que todos, absolutamente todos los emprendedores online de renombre tienen una y, la verdad, no quiero que tú seas menos.

Por ello voy a mostrarte los pasos necesarios para diseñar tu propia Squeeze Page con Divi y, por supuesto, sin complicaciones.

¿Te parece?

Vamos a ello.

Estructura básica de una Squeeze Page

Para elaborar correctamente tu Squeeze Page incluye siempre que puedas los siguientes elementos:

  1. URL: la dirección de tu página donde alojar tu Squeeze Page. No me refiero a incluir esa dirección en tu Squeeze Page, sino que elabores una URL sencilla de recordar y que esté relacionada directamente con tu oferta. Con incluir una estructura de este tipo es más que suficiente: https://www.tudominio.com/regalo.
  2. Titulo.
  3. Subtítulo.
  4. Listado de beneficios.
  5. Hero Shot.
  6. CTA con formulario de suscripción.
  7. Spam: un mensaje para dejar claro que no enviarás correo basura a tus suscriptores.
elementos squeeze page
Estructura básica de una Squeeze Page.

Diseñando tu Squeeze Page con Divi

El proceso de diseño con Divi es bastante más sencillo que el de una landing page estandar, ya que tu Squeeze Page tendrá menos elementos que incluir.

Solo necesitas una sección con dos filas:

  1. Fila: formada por dos módulos de texto. En el primero dejaremos claro que se trata de un producto totalmente gratuito. En el segundo incluiremos el título de tu Lead Magnet. Además, añadiremos un separador para facilitar la legibilidad de tu página..
  2. Fila: compuesta simplemente por dos columnas:
    1. Columna: un módulo de imagen que represente tu Lead Magnet.
    2. Columna: módulos de anuncio que actúen en forma de bullets, más un módulo de texto con el shortcode para mostrar el formulario.

Obtendríamos algo parecido a lo siguiente:

squeeze page
Squeeze Page diseñada con Divi.
ajustes squeeze page
Sección: Squeeze Page en Divi Builder.

Como en el caso anterior, el formulario de suscripción está implementado a través de un shortcode dentro del CTA creado con Divi Builder.

Una vez pulsado éste, se mostrará un pop-up con más información sobre la oferta y el formulario:

popup opt in squeeze page
Formulario opt-in pop-up con Thrive Leads en Squeeze Page.

Para terminar, como siempre, un vídeo explicativo para que no te quede ningún tipo de dudas sobre el diseño de este tipo de páginas:

Como ves, el proceso es bien sencillo y en un par de minutos tendrás lista una página de aterrizaje que disparará tus conversiones como ninguna otra.

¡Y si no me crees haz la prueba, diseña tu propia Squeeze Page, mide las conversiones y me cuentas!

Conclusión

Como ves, diseñar una landing page en una tarde es algo que está prácticamente al alcance de cualquier persona. Si le echas ganas y trabajo, con lo que hemos visto en este post ya deberías tener bastante información para hacer landing pages bien diseñadas.

Por otra parte, Divi y su constructor visual Divi Builder te facilitan enormemente esta tarea y funciona también a la perfección con plugins para el diseño de formularios opt-in como Thrive Leads.

Un último punto esencial es que mejores tus conversiones mediante la implementación de test A/B. Es sorprendente el grado de mejora que se puede conseguir. No son raros los casos en los cuales, tras varias iteraciones, se consiguen duplicar o triplicar las conversiones.

Aunque en este post hemos visto todo lo esencial, quizás quieres profundizar aún más sobre el diseño de landing pages, los elementos que la conforman, principios de diseños y otros aspectos como el desarrollo de páginas de ventas para monetizar tu negocio. Si es así, ya es necesario un curso profesional como mi curso Cómo Diseñar Landing Pages que Conviertan.

En este curso te explico el diseño con landing pages de una manera aún mucho más detallada a través de 6 módulos, con toda la información necesaria para diseñar tus páginas de aterrizaje, acceso de por vida al contenido, actualizaciones, descuentos exclusivos y extras que te ayudarán a mejorar mucho el diseño de tus páginas de aterrizaje.

Y por supuesto, si tienes alguna duda, cuestión o problema simplemente formúlala en los comentarios.

Estaré encantado de ayudarte. 😉

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Pedro Suárez

Soy diseñador web. especializado en WordPress y Divi. Trabajo ayudando a aquellas personas que quieren mejorar sus vidas gracias al potencial de internet y las nuevas tecnologías implementando la web que realmente necesitan.

Descarga ahora mi guía gratuita para comenzar a diseñar tu web con WordPress sin complicaciones.


26 comentarios en «Cómo crear una buena Landing Page con WordPress y Divi»

  1. Pedro,
    excelente el artículo, ya lo estoy poniendo en práctica. Está muy bien explicado y detallado.
    Siguiendo los pasos tengo el siguiente inconveniente:
    En el paso de Eliminar los Puntos de Fuga, tengo un inconveniente al realizar lo siguiente:
    "Sólo tienes que acceder al back-end de tu página y en “Atributos de página > Plantilla” seleccionar “Blank Page” y listo"
    Cuando hago eso, no me deja cambiar algunos formatos, como por ejemplo el del botón CTA, y otros aspectos. Como que no aplica los cambios de color, fuente, etc.
    Esto es normal? lo mismo si le pongo "Full Width" para eliminar menúes y demás puntos de distracción.

    Agradezco tus comentarios!

    Responder
    • ¡Hola Sebastián!

      ¿Qué tal?

      Me alegro mucho que te haya resultado de utilidad.

      En atributos al seleccionar “blank page” lo que haces es eliminar en esa página el menú de navegación y tu pie de página. Sólo eso.

      Con respecto a lo demás no entiendo bien lo que te pasa. Nada de eso en principio está relacionado con la funcionalidad “blank page”

      Ten en cuenta que los cambios generales de tu web: colores, tipografía, etc.. lo tienes que hacer con el Personalizador de temas.

      Los cambios en elementos concretos como por ejemplo los módulos lo haces desde el propio módulo en cuestión.

      Espero haberte ayudado

      Abrazos

      Responder
  2. Hola.
    Gracias por la guia, me ha servido mucho para empezar. Algo que no he logrado es mostrar la página estática ó landing page cuando alguien entra al dominio. Igualmente no he podido modificar la pagina principal ¿podrias orientarme?
    saludos.

    Responder
    • Buenas Arnaldo,

      Para hacer que tu página se muestre como página inicial debes seleccionarla previamente. En "WordPress ve a Ajustes > Lectura > Tu portada de muestra" y elige: "Una página estática". En "Portada" escoge tu landing page. Dale a Guardar cambios y listo.

      Abrazos

      Responder
  3. Hola Pedro, gracias por la guía, estoy empezando a usar landings y la verdad es que no sabía por donde empezar a cogerlas. La herramienta que nos muestras me parece muy útil pues según nos muestras hace el diseño mucho más fácil, que es precisamente lo que yo estaba buscando. Pondré en práctica los consejos 🙂

    Responder
    • ¡Hola!

      Un placer verte por aquí.

      Pues sí, Divi es bastante sencillo a la hora de crear no sólo este tipo de páginas sino páginas estándar en general.

      La clave es practicar y practicar y verás como en un periquete lo tienes hecho. 😉

      ¡Ah! Y todo sin nada de código que siempre se agradece.

      Un abrazo

      Responder
  4. Hola Pedro,

    Gracias por tu artículo, está súper completo. Yo personalmente estuve debatiendo con mi equipo si utilizar Divi, GeneratePress con Elementor o continuar trabajando con plantillas premium.

    Probé con GeneratePress y Elementor, y se nos quedó algo corto. Tuve también oportunidad de trabajar con Divi en un proyecto en colaboración, y la verdad es que es súper intuitivo, lo recomiendo para usuarios con menos experiencia.

    Por el momento hemos decidido seguir trabajando con plantillas, pero no cualquier plantilla (hemos tenido problemas con muchas de ellas...) Recomiendo por ejemplo The 7 theme, bastante intuitiva, buen código, personalizable y amigable en SEO.

    Bajo nuestra experiencia es la mejor herramienta que hemos trabajado por el momento.

    Un abrazo!

    Responder
    • Hola Esther,

      ¿Qué tal? Muchas gracias por pasarte por aquí y compartir tu experiencia 😉

      Sí, todos esos productos que comentas son de gran calidad no sólo por las posibilidades que ofrecen sino también por su estabilidad.

      Como bien reflejas en tu caso no creo que existan un producto perfecto. Todo depende de las circunstancias de cada uno y del nivel de conocimientos en diseño que éste tenga.

      Al final es probar y probar hasta conseguir aquello que se adapta más a tus necesidades y cubra tus expectativas.

      La verdad es que no he probado aún The7theme pero si tengo tiempo seguro que le echo un vistazo porque suena muy interesante.

      Por ahora sigo con Divi ya que además de permitirme customizar las webs de mis clientes con eficacia éstos quedan encantados con la facilidad de uso a posterior.

      Un fuerte abrazo y seguimos en contacto

      Responder
  5. Hola.

    Muy útil el artículo. Solo tengo una duda y es que cuando visito una landing page como, por ejemplo, la que se enlaza al final del post para el curso de landing page de 6 módulos, no existe para el usuario una forma de escapar de ella y continuar la navegación en el resto de la página si no adquieres el producto (que no sea modificar la url).

    ¿Esto no es contraproducente para retener visitas que pudiesen estar interesadas en otro producto? ¿O simplemente se convertirían en suscriptores y futuros clientes?

    Gracias.

    Responder
    • Hola Ricardo,

      ¿Qué tal? Un placer verte por aquí.

      Pues en esto consiste básicamente una landing page 😉

      La única vía de escape debe ser la conversión, es decir, que el lector haga clic en el/los botones de la página.

      Otra opción sería modificar la url o cerrar directamente la ventana como tú muy bien dices.

      Ten en cuenta que en las landing pages intentamos aumentar al máximo el % de conversión . Así que cuanto menos puntos de fugas (enlaces) añadas mejor que mejor.

      Lo que necesites no dudes en avisarme.

      Abrazos!

      Responder
  6. Chicos, sigo con la duda sobre qué plantilla es más recomendable, si Generatepress premium o Divi.

    Ahora aparece Orbital, de Romuald Fons; sinceramente, este tema me está mareando.

    Qué recomiendan ustedes para la landing page, ¿construirla en generate press con elementor pro o en divi con Divi Builder? ¿El plugin divi builder se puede usar en generatepress?

    ¿Qué recomendarían, elementor pro o Divi Builder?

    Gracias.

    Responder
    • Hola Francisco,

      Mira muchos defienden Génesis, otros Generate Press, otros Divi y para plugins Divi Builder, Thrive Architect, Beaver Builder y Elementor.

      Un lío.

      En mi opinión el producto perfecto no existe porque cada persona tiene unas necesidades diferentes, un capital a gastar diferente y un nivel de conocimientos distinto.

      Lo importante es que todos los productos que he mencionado más los que comentas, salvo Orbital ya que no lo conozco, son productos premium de calidad.

      Tu elección vendrá dada por tu capacidad económica y tus conocimientos en diseño así como del tiempo del que dispongas para aprender.

      Por ejemplo, Génesis está más orientado a diseñadores/desarrolladores o personas con un conocimiento medio en lenguajes web.

      Divi y Generate Press tienen una curva de aprendizaje más asequible y una muy buena usabilidad.

      Yo recomiendo Divi porque lo he probado a fondo, de hecho lo utilizo para mis clientes y además con cualquiera de las licencias lo tienes todo: Divi, más de 80 temas y hasta 3 plugins, actualizaciones de por vida y uso ilimitado en tantas webs como quieras.

      Lo ideal si usas Divi es hacer la landing page con Divi Builder ya que el plugin viene integrado con el tema.

      No obstante podrías también combinar Generate Press con Divi Builder aunque igual tienes que gastar más dinero al ser producto de empresas distintas.

      Espero haberte ayudado,

      Pedro

      Responder
  7. Hola y muchas gracias por compartir este contenido.

    Muy interesante la squeeze page; ya había escuchado sobre sus beneficios, pero no estaba clara en cómo usarlas. Yo intento impulsar un sitio que promueve y vende paquetes turísticos culturales a Cuba pero a través de B&B, no playa y Resorts, como es más habitual.

    Una vez más gracias por todo y si tengo problemas cuando empiece a construir mi landing page, ¡¡vuelvo!!

    Responder
    • ¡Hola, Lilian! ¿Cómo estás?

      Me alegro de que te hay gustado el artículo. 😉

      Pues sí, una Squeeze Page es básica en cualquier emprendedor online, porque como has visto es una landing page muy centrada, sin puntos de fuga y que ofrece algo gratuito que soluciona un problema específico para una audiencia en concreto.

      Es muy raro que un público realmente interesado en esa temática no se suscriba a tu newsletter a través de tu Squeeze Page.

      Y una vez tu lista de contactos aumente las posibilidades de monetizar, lo harán de la misma forma. Es así.

      Tu idea de negocio me parece muy interesante y con potencial.

      Si incluyes páginas de ventas siguiendo un modelo tipo landing page con los elementos básicos y centrándote en el desarrollo de buenos textos, estoy seguro de que aumentarás tus posibilidades de conversión (ventas).

      Si quieres más información simplemente avísame, ¿ok?

      ¡Un abrazo!

      Responder
  8. ¡Hola, buen día!

    La verdad, yo recién me estoy preparando para finalmente incursionar en ésto de darme a conocer profesionalmente. Y en la medida que voy leyendo para saber por dónde empezar, me quedo no sé si confundida y abrumada al ver tooodo lo que no sé y me falta por aprender. Pero estoy dispuesta a no abandonar.

    Una de las primeras dudas que se me presentaron fueron las de qué y cómo debo hacer. ¿Hago un blog o hago una página web?

    Leyendo esté artículo (el cual debo decir que esta muy bien y completo), decidí que ésta es una buena opción, así que una vez construya mi blog lo enlazaré a futuro con una Landing Page.

    Espero no perderme en el camino; ya ví que no es fácil.

    ¡Un abrazo y agradecida por los consejos!

    Responder
    • ¡Hola, Ofila!

      ¿Qué tal? Gracias por pasarte por aquí. 😉

      Lo primero de todo darte la enhorabuena por decidirte a lanzar tu proyecto digital para darte a conocer profesionalmente, puesto que vas a aprender muchísimo; conocerás a gente muy interesante y podrás obtener unas rentabilidad más que interesantes.

      Todo es cuestión de estrategia, actitud e ilusión por mejorar.

      En mi opinión, tener un blog es fundamental por muchísimas razones: te sirve para posicionar mejor tu proyecto en Google, te muestras a tu audiencia como profesional especializado en tu materia y muchas cosas más.

      Mi recomendación es tener un sitio web y en él incluir una sección dedicada al blog, es decir, a tus artículos. Con eso matas dos pájaros de un tiro.

      Con respecto a las landing pages pues también.

      Lo ideal es tener una o varias landing pages en función de tus necesidades y el objetivo de conversión que te hayas marcado.

      Por ejemplo, podrías tener una Squeeze Page donde ofrezcas tu producto de regalo o lead magnet y otra donde ofrezcas tus servicios como profesional o vendas un productos (página de ventas).

      De esta forma conseguirás optimizar tu sitio web de cara a tu público ideal y no dependerás tanto al principio de las visitas.

      Una vez tengas tu proyecto optimizado te puedes centrar en atraer tráfico publicando en el blog, a través de redes sociales, etc…

      No es algo fácil que se consiga en dos días pero con constancia los resultados llegan. Te lo aseguro.

      Para lo que necesites por aquí estaremos, ¿ok?

      Mucho ánimo y un abrazo.

      Responder
    • Hola Livier,

      ¿Qué tal? Muchas gracias por pasarte por aquí y dedicarme unos minutos. La verdad es que se agradece mucho 😉

      Y nada más. Para cualquier duda aquí estamos y si implementas alguna vez tus landing pages con Divi pásate por aquí y nos cuentas tu experiencia.

      Un saludo

      Responder
  9. Gracias por las recomendaciones, me llegan en un momento muy oportuno... Estoy "peleando" con la idea de logo y nombre para mi proyecto. Me han dado una buena mano ya estoy decidida.
    En breve les cuento más!!
    De nuevo ¡Gracias!

    Responder
    • ¡Hola, Claudia!

      ¡Genial! Me alegra muchísimo saber que el tutorial te está siendo de ayuda para lanzar tu proyecto. 😉

      Divi te va a poner las cosas realmente fáciles a la hora de diseñarte tu propia web. Ya lo comprobarás. 😉

      Pues nada, mucho ánimo y a seguir aprendiendo con constancia e ilusión.

      Mientras tanto, por aquí estaremos.

      Saludos.

      Responder
  10. Hola, Pedro.

    Estoy usando Divi y el constructor visual para realizar un blog. Tengo problemas, ya que al editar contenido desde la propia página con la herramienta visual, no funciona el doble click para abrir la barra de herramientas.

    Gracias. Un saludo.

    Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).