Cómo crear una landing page con Gutenberg

En este tutorial de CursoWpress.com te mostramos cómo crear una landing page con Gutenber el nuevo editor visual de WordPress.

Lo que debes saber antes de crear tu landing page con GutenbergLawyer Landing Page

Las landing pages también conocidas como páginas de aterrizaje, son unas herramientas de uso frecuente en el mundo del marketing online. Si eres un webmaster o blogger experimentado ya estarás familiarizado con las páginas de aterrizaje.

Nosotros, en entregas anteriores te hemos hablado in extenso sobre ellas. Pero si no sabes muy bien de qué va el rollo de las landings, bien puedes pasarte por nuestro tutorial:

Qué es una landing page y cómo crear una en WordPress

En esta ocasión aprovecharemos las ventajas que ofrece Gutenberg, el nuevo editor visual de WordPress, para diseñar una página de aterrizaje atractiva.

Lo que necesitas para crear una landing page con Gutenberg

Para crear una de estas páginas para tu web necesitarás:

  1. Tener activado el editor Gutenberg. Vendrá por default en WordPress a partir de la versión 5. Pero por ahora lo puedes instalar como te explicamos en:

Conoce a Gutenberg, el nuevo editor visual de WordPress

  1. Activar el plugin Stackable del que te hablamos en:

Los mejores plugins para Gutenberg

  1. Seguir los siguientes pasos:

Creando una landing page con Gutenberg

1.     Planeando tu landing page

Una vez activados los plugins que te mencionamos en la previa y, antes de lanzarnos a diseñar, es necesario tener una idea clara de lo que queremos.

Si bien es cierto que cada landing page es distinta, atendiendo al contenido, publico objetivo, y un largo etcétera. Todas las páginas de aterrizaje tienen elementos y características en común.

Características tales como:

  • Tener un objetivo claro
  • Incluir alguna llamada a la acción (o Call to Action)
  • Ser visualmente atractivas (Eye Candy)
  • Sencillas (menos es mas)
  • Tener unos textos (copys) poderosos.

Con esto en mente, bien podemos bosquejar una landing page efectiva.

Es importante recordar que el diseño de la página de aterrizaje dependerá al cien por cien del texto. Por lo que la comunicación con nuestro copywriter es vital.

2.     Creando nuestra landing page con Gutenberg

Stackable

Si ya activaste el Gutenberg y el plugin complementario Stackable, nos podemos poner manos a la obra.

1.     Crear una nueva página

En nuestro escritorio de WordPress seguimos la siguiente ruta:

Paginas > Añadir nueva

Nos aparecerá una nueva página. Para este tutorial  llamaremos a nuestra página de ejemplo Landing Gutenberg (tu puedes ponerle el nombre que gustes).

2.     Ubicamos el texto de la página de aterrizaje

Ubicamos el texto o copy que llevará nuestra landing. En función de lo que diga el texto ubicaremos imágenes adecuadas.

Un inciso sobre las imágenes:  

Tienen que ser libres de derechos de autor. Podemos hacerlas nosotros mismos, contratar a un fotógrafo o bajarlas de un banco de imágenes libres de derechos.

También el texto nos dirá dónde se ubican los call to actions y otros elementos especiales como botones, acordeones, descansos.

El texto de nuestro ejemplo tiene la siguiente estructura:

  • Texto breve.
  • Botón de Call to Action.

3.     Agregando un encabezado

Para agregar un encabezado en Gutenberg situamos el cursor sobre el botón de la H.

Ahora escribimos nuestro encabezado:

Nosotros en un derroche de inspiración le pusimos: Encabezado Landing (tu puedes ponerle el nombre que gustes).

4.     Agregando texto

Para agregar un elemento en Gutenberg situamos el cursor sobre el símbolo “más” (+) o Añadir Bloque.

Luego seleccionamos el botón Párrafo. A continuación añadimos nuestro texto:

Podemos también cambiar el color del texto, o del fondo del texto si y solo si, consideras que el color favorecerá al mensaje. Y si, además, el color encaja con la estética de tu proyecto.

5.     Agregando un botón de Call to Action

 

Los call to action o llamadas a la acción son vitales si queremos generar conversiones. Tan importantes son, que hicimos un tutorial dedicado integro al tema: Tutorial Call to Actions.

Para hacer un call to action en Gutenberg:

Ubicamos el símbolo “más” (+) para Añadir Bloque. Y ubicamos los Layout Elements. Ahí encontraremos la opción de botón.

Agregamos el texto al botón.

Cambiamos los colores que trae el botón default para elegir unos más atractivos. El principio es el mismo que utilizamos para cambiarle el color a nuestro texto en el paso anterior (4).

Entonces le colocamos la URL a la que dirigiremos a nuestros clientes.

Y ya tenemos nuestro call to action.

Y nuestra landing page creada con Gutenberg.

Con este nuevo editor las posibilidades son ilimitadas. Bien puedes añadir tantos elementos requieras.

Siguiendo estos mismos conceptos y teniendo en cuenta el propósito de las landing pages puedes llegar a crear auténticas joyas. Y todo sin necesidad de usar complicados maquetadores visuales. Y sin requerir los servicios de un diseñador.

Recuerda, si quieres ser un experto en desarrollo web  y todo lo referente al mundo del WordPress apúntate al mejor curso en línea y en español del mejor gestor de contenidos: WordPress.org