Cómo crear una página de destino con el editor de bloques en WordPress

¿Se pregunta si es posible crear una página de destino con el editor de bloques que se ha lanzado como parte de WordPress 5.0? De hecho, y esta publicación te mostrará cómo. Gracias a los nuevos enfoques de “bloqueo”, ahora tiene la capacidad de configurar héroes, llamadas de acción (CTA) y otros elementos importantes de una página de destino.
Para ayudarlo a aprovechar esta nueva funcionalidad, le mostraré exactamente cómo crear una página de destino con el editor de bloques, paso a paso.
Aprenda a crear una página de destino con el nuevo editor de bloque #Wordpress (alias #Gutenberg)
Haga clic para enviar un tweet
¿Cuál es el nuevo editor de bloques en WordPress? El editor de Block es un nuevo editor de contenido que se ha convertido en el editor predeterminado que comienza con WordPress 5.0. Durante su desarrollo, el nuevo editor se llamaba “Gutenberg”. Sin embargo, dado que se ha convertido en parte del núcleo, ahora es solo el “editor de WordPress” o el “editor de bloque” si desea ser más específico.
Si no está seguro de lo que estoy hablando, escribí 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, continúe leyendo para averiguar cómo usarlo para crear una página de destino … un bloque rápido del editor de bloques ahora, antes de comenzar el proceso de construcción, aquí un recorrido rápido con el Interfaz de uso del editor de bloques. Para agregar nuevos bloques, trabajará en la ventana emergente a la izquierda. Y después de haber agregado un bloque, podrá personalizar información importante como colores, en una barra lateral derecha:


Hay cinco secciones únicas para dividir los bloques que puede usar: Bloques comunes: contiene todos los elementos comunes, como párrafo, título, lista, cita y otros elementos básicos de contenido.
Formateo: bueno para agregar un código personalizado, editar un bloque con el editor WP (clásico) o agregar una tabla.
Elementos de apariencia: tiene elementos para mejorar la apariencia general, como las columnas.
Widgets: le permite agregar widgets de WordPress ordinarios a sus dibujos.
Incorpora: lo ayuda a incorporar contenido de plataformas externas, como YouTube, Twitter y más.
También puede agregar nuevos bloques y funcionalidad a través de complementos de tercera parte. Por ejemplo, con los bloques de nutria de complementos, puede obtener nuevos bloques, como una tabla de precios, testimonios, mapas de Google y más.
Cómo crear una página de destino con el editor de bloques de WordPress
Para tener una idea de lo que aprenderá, aquí está la página de destino básica que construiremos con el nuevo editor de bloques: más allá del aspecto, el tiempo de carga rápido es esencial para una página de destino de buena calidad. Así que asegúrese de que el tema que use sea compatible con el nuevo editor de bloques y la carga rápida.
Elegí el tema NEVE gratuito de Themitisle para crear una página de destino con el editor de bloques. Más allá de ser gratuito y fácil, Neve está diseñado para funcionar bien con el nuevo editor de bloques y le brinda muchas opciones de apariencia, por lo que puede crear una página de destino real.

Una vez que haya configurado su sitio web, todo lo que tiene que hacer es acceder a páginas → Agregar un nuevo y comenzar a trabajar. Paso 1: Elija el aspecto de Paginitus para dar suficiente espacio a su página de destino, querrá elegir un aspecto sin una barra lateral. Otra ventaja de usar el tema Neve es que puedes hacer esto bastante fácil. Puede seleccionar una apariencia del lado derecho debajo de la sección del documento. El uso de cualquiera de los aspectos libres es una buena opción. Para el diseño de la prueba, no elegimos barras laterales con el contenido centrado (en lugar del ancho completo).
Paso 2: Planifique el diseño básico de su página de destino, luego desea hacer un plan para el diseño general de su página de destino para que sepa qué artículos deberá incluir. Por ejemplo, si intenta vender un servicio, puede ser esencial que su página de destino tenga una tabla de precios (en caso afirmativo, los bloques de nutria de complementos le brindan un bloque). O, si intenta expandir su lista de correo electrónico, es posible que desee un formulario de registro de correo electrónico al frente y al centro. Para este tutorial, utilizaré un ejemplo de una página de destino simple para un seminario web.

Más allá de pensar en los elementos que necesita, considere cómo desea organizar estos elementos. Un enfoque común es el uso de un modelo Z. Este modelo es bueno para las páginas de 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 vaya a la esquina inferior izquierda y luego regrese a la derecha (siempre que la página no esté contenida) duro) . Este diseño es utilizado por algunas plataformas populares como Shopify, Facebook y muchos más. Establecido para usar cualquier tipo de diseño para su página de destino, siempre que respete los buenos principios de diseño web.
Paso 3: Use bloques para agregar elementos a su página de destino ahora que tiene información importante, está listo para comenzar a construir su página. Por lo general, es más fácil comenzar a construir en la parte superior de la página y moverse 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 de portada es una buena opción para la parte superior de la página, ya que le permite incluir una imagen grande, así como un texto sobre esa imagen. Lo usaré para incluir un título y un subtítulo sobre una superposición de naranja.


Una vez que haya agregado el bloque de portada, cargue una buena imagen para su página de destino. Para que el texto sea más visible, puede usar la barra lateral derecha para agregar el color de la superposición y la opacidad del fondo. Para agregar el texto, simplemente haga clic y escriba. Llamada principal a la acción (CTA) Después de que haya terminado con el bloque de cubierta, puede agregar el CTA principal debajo con el bloque de botones. Puede usar la barra lateral derecha para personalizar los colores del botón. Puede ver que he agregado un botón iniciar debajo de la portada: así es como todo se combina hasta ahora en la vista previa en vivo:
Detalles del producto / cuadro de presentación general Para agregar un cuadro de detalles del producto, puede usar los medios y el cuadro de texto. Como su nombre indica, este bloque crea una apariencia con dos columnas, con una imagen en un lado y cualquier tipo de texto en el otro. Decidí usar una lista de texto. Puedes verlo a continuación:

Para mejorar la apariencia, 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 de la nave espacial.

Después de haber agregado el contenido y la imagen al bloque Media y Text. Se verá así:

La llamada final a la acción (CTA) para agregar el CTA final al final de su página de destino, puede usar otro botón. O, si prefiere usar un formulario en su lugar, el complemento WPFFORMS incluye su propio bloque WPFFORMS que puede usar para incorporar cualquier tipo de formulario. Poner 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: mientras no se podía ver mientras trabajaba en el editor de los bloques, las barras laterales de Neve le dan a las barras laterales de Neve. Diseño final mucho espacio en blanco en el frente. ¡Y eso es todo lo que existe! El nuevo editor de bloques no es exactamente un creador de páginas: las opciones de personalización actuales no pueden competir con los constructores de páginas en términos de apariencia y estilos. Sin embargo, veremos algunos excelentes suplementos que se lanzarán gradualmente a medida que los desarrolladores se acostumbrarán al nuevo editor en 2019, lo que debería reducir la brecha y facilitar aún más crear una página de destino con el editor de bloques. Si desea ver cómo se compara el nuevo editor de bloques con otras 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

elemento

Constructor de la década

¿Tiene alguna otra pregunta sobre cómo crear una página de destino con el editor de bloques de WordPress 5.0? ¡Dinos en los comentarios! por Bhardwaj Pulkit

Aprenda a crear una página de destino con el nuevo editor de bloque #Wordpress (alias #Gutenberg)
Haga clic para enviar un tweet