¿Se pregunta si es posible crear una página de destino con el editor de bloques que se lanzó como parte de WordPress 5.0? De hecho, lo es, y esta publicación le mostrará cómo.
Gracias al nuevo enfoque de «bloqueo» , ahora tiene la capacidad de configurar secciones principales, llamados a la acción (CTA) y otros elementos importantes de una página de destino.
¿Qué es el nuevo editor de bloques en WordPress?
El editor de bloques es un editor de contenido completamente nuevo que se convirtió en el editor predeterminado a partir de WordPress 5.0 . Durante su desarrollo, el nuevo editor se llamó “Gutenberg”. Sin embargo, dado que se ha convertido en parte del núcleo, ahora es solo el «editor de WordPress» o el «editor de bloques» si desea ser más específico.
Si no está seguro de lo que estoy hablando, hemos escrito un puñado de publicaciones sobre el nuevo editor. Puede obtener una introducción básica aquí y un tutorial más general aquí .
O, si ya está familiarizado con el nuevo editor, siga leyendo para aprender a usarlo para crear una página de destino…
Un recorrido rápido por la interfaz del editor de bloques
Ahora, antes de comenzar con el proceso de construcción, aquí hay un recorrido rápido que presenta la interfaz de usuario del editor de bloques.
Para agregar nuevos bloques, trabajará en la ventana emergente de la izquierda. Y una vez que haya agregado un bloque, podrá personalizar información importante, como colores, en una barra lateral a la derecha:
Hay cinco secciones únicas para dividir los bloques que puedes usar:
- Bloques comunes : contiene todos los elementos comunes como el párrafo, el encabezado, la lista, la cita y otros elementos básicos de contenido.
- Formateo : bueno para agregar código personalizado, editar un bloque con el editor WP (clásico) o agregar una tabla.
- Elementos de diseño : tiene elementos para mejorar el diseño general, como columnas.
- Widgets : le permite agregar widgets regulares de WordPress a sus diseños.
- Inserciones : lo ayuda a incrustar contenido de plataformas externas, como YouTube, Twitter y muchas más.
También puede agregar nuevos bloques y funciones a través de complementos de terceros. Por ejemplo, con el complemento Otter Blocks , puede obtener nuevos bloques, como una tabla de precios, testimonios, Google Maps y más.
Cómo crear una landing page con el editor de bloques en WordPress
Elegí el tema Neve gratuito de Themeisle para crear una página de destino con el editor de bloques. Más allá de ser gratuito y liviano, Neve está diseñado para funcionar bien con el nuevo editor de bloques y le brinda muchas opciones de diseño para que pueda crear una verdadera página de destino.
Una vez que haya configurado su sitio web , todo lo que necesita hacer es ir a Páginas → Agregar nuevo y comenzar su trabajo.
Paso 1: elige el diseño de tu página
Para darle suficiente espacio a su página de destino, querrá elegir un diseño sin barra lateral. Otro beneficio de usar el tema Neve es que puede hacerlo con bastante facilidad.
Puede seleccionar un diseño del lado derecho debajo de la sección del documento. Usar cualquiera de los diseños sin barra lateral es una buena opción. Para el diseño de prueba, no elegí barras laterales con el contenido centrado ( en lugar de ancho completo ).
Paso 2: Planifique el diseño básico de su página de destino
A continuación, desea hacer un plan para el diseño general de su página de destino para que sepa qué elementos deberá incluir.
Por ejemplo, si está tratando de vender un servicio, puede ser esencial que su página de destino tenga una tabla de precios (si es así, el complemento Otter Blocks le brinda un bloque para eso). O, si está tratando de hacer crecer su lista de correo electrónico , es posible que desee un formulario de suscripción de correo electrónico al frente y al centro.
Para este tutorial, usaré un ejemplo de una página de destino simple para un seminario web.
Más allá de pensar en qué elementos necesitará, también considere cómo desea organizar esos elementos.
Un enfoque común es usar un patrón Z. Este patrón es bueno para páginas con contenido mínimo.
La regla Z se basa en el hecho de que un usuario comienza a ver la página de izquierda a derecha en la barra de menú, luego va a la esquina inferior izquierda y luego vuelve a ir al lado derecho (siempre que la página no tenga contenido). pesado). Este diseño es utilizado por algunas plataformas populares como Shopify, Facebook y muchas más.
Siéntase libre de usar cualquier tipo de diseño para su página de destino, siempre y cuando siga buenos principios básicos de diseño web.
Paso 3: Use bloques para agregar elementos a su página de destino
Ahora que tiene la información importante, está listo para comenzar a crear su página. Por lo general, lo más fácil es empezar a construir en la parte superior de la página y seguir hacia abajo.
Para nuestro ejemplo, comenzaré con el título principal y el subtítulo.
Título, subtítulo e imagen de fondo
El bloque Portada es una buena opción para la parte superior de su página porque le permite incluir una imagen grande, así como texto encima de esa imagen.
Lo usaré para incluir un título y un subtítulo encima de una imagen de fondo con una superposición naranja.
Una vez que haya agregado el bloque de portada, cargue una hermosa imagen para su página de destino. Para que su texto sea más visible, puede usar la barra lateral derecha para agregar el color superpuesto y la opacidad del fondo.
Para agregar el texto, solo necesita hacer clic y escribir.
Llamada a la acción principal (CTA)
Una vez que hayas terminado con el bloque Portada , puedes agregar tu CTA principal debajo usando el bloque Botón . Puede usar la barra lateral derecha para personalizar los colores de su botón. Puede ver que he agregado un botón Comenzar debajo de la portada:
Y así es como todo hasta ahora se une en la vista previa en vivo:
Detalles del producto/cuadro de descripción general
Para agregar un cuadro de detalles de producto atractivo, puede usar el cuadro Medios y texto . Como sugiere el nombre, este bloque crea un diseño de dos columnas con una imagen en un lado y cualquier tipo de texto en el otro. Decidí usar una lista para el texto. Puedes verlo a continuación:
Para mejorar el diseño, puede agregar espacio entre la sección anterior y esta sección agregando un bloque espaciador . Puede ajustar la distancia entre los dos bloques a través del punto azul en el bloque espaciador.
Una vez que haya agregado el contenido y la imagen en el bloque Multimedia y texto . Se verá así:
Última llamada a la acción (CTA)
Para agregar el CTA final al final de su página de destino, puede usar otro bloque de botón . O, si prefiere usar un formulario, el complemento WPForms incluye su propio bloque WPForms que puede usar para incrustar cualquier tipo de formulario.
Poniendolo todo junto
Después de usar todos esos bloques para crear una página de destino con el editor de bloques, aquí hay otro vistazo al diseño final de la página de destino:
Si bien no pudo verlo mientras trabajaba en el editor de bloques, la plantilla sin barra lateral de Neve le brinda a su diseño final mucho espacio en blanco en la parte frontal. ¡Y eso es todo!
El nuevo editor de bloques no es exactamente un creador de páginas : las opciones de personalización actuales no pueden competir con los creadores de páginas en términos de diseño y estilos. Sin embargo, veremos algunos complementos excelentes que se lanzarán gradualmente a medida que los desarrolladores se acostumbren más al nuevo editor en 2019, lo que debería reducir la brecha y facilitar aún más la creación de una página de destino con el editor de bloques.
Si desea ver cómo se compara el nuevo editor de bloques con otros creadores de páginas para este caso de uso, también tenemos tutoriales sobre cómo crear páginas de destino con:
- Creador de páginas de SiteOrigin
- Elementor
- Constructor de divisiones
