ElegantThemes

Impress: Cómo usar bloques para crear un título de Post Hero

He estado obsesionado con la dirección de arte en la web desde que tengo memoria. El término se usa a menudo para describir el acto de diseñar una sola página alrededor del contenido en sí. Esto es lo contrario de cómo la mayoría de los usuarios suelen hacerlo cuando escriben una publicación. La plantilla o diseño está fuera de contacto con la palabra escrita.

Jasón Santa María sitio web Probablemente la impresión más citada para este tipo de publicación.Recomiendo encarecidamente mirar alrededor y especialmente mirar Artículos de carta de caramelos.

A veces, una historia necesita más énfasis visual. El diseño del contenido puede pintar un cuadro que no se puede pintar solo con palabras. A veces, estos son diseños de página completa bien diseñados. En otros casos, es la inserción de imágenes y otros elementos los que captan la atención del lector.

Esta es una de las razones por las que me ha gustado usar el tema Archeo de Automattic últimamente. Su modelo evoca los inicios de la lectura de revistas, antes del internet doméstico, cada una con su propia historia destacada.

A lo largo de los años, he intentado desarrollar varios sistemas para cada diseño de publicación, pero no siempre funcionan como yo quiero. Parte del problema es que no tengo un marco sólido para el desarrollo futuro que no voy a arreglar en una década o más.

Estas viejas ideas comenzaron a resurgir cuando WordPress lanzó su editor de bloques. ¿Permite que las personas cuenten sus historias visualmente y proporciona cierta seguridad de que el diseño no se romperá en las próximas compilaciones?

Hoy, creo que WordPress es más probable que nunca. Hay algunas cosas que podría hacer mejor, como ampliar su kit de herramientas CSS compartido y extender su gama de controles de diseño a más bloques. Pero, en esencia, un editor de bloques es un lenguaje de diseño que permite a los usuarios finales contar sus historias a través de elementos visuales y textuales. Esto solo mejorará en 6.0 y versiones posteriores.

Me gustaría describir brevemente cómo los usuarios pueden aprovechar estas herramientas para crear historias visualmente más únicas. Esta entrada de la serie Construyendo con bloques pretende proporcionar un punto de partida.

Para los siguientes, crearemos un título de publicación/sección de introducción para la historia ficticia sobre Gotham City:

Impress: Cómo usar bloques para crear un título de Post Hero 10

No es un diseño de página completa, pero espero que ayude a las personas a comenzar a experimentar más con su contenido. WordPress ahora tiene un montón de herramientas de diseño sólidas disponibles.

En realidad, armé dos patrones diferentes para este tutorial. Sin embargo, no me siento cómodo con el método utilizado por el método original:

Sección principal de ancho completo con fondo de imagen. A la izquierda, el título de la publicación, la firma y el contenido están en una columna.
Impress: Cómo usar bloques para crear un título de Post Hero 11

En particular, hay problemas con tener contenido alineado a la izquierda y en un contenedor de ancho máximo. Hay al menos dos formas de solucionarlo. El método más común es insertar un bloque de columnas 50/50, usando la primera columna como contenido y dejando la segunda columna en blanco. Tiene la máxima compatibilidad entre temas, pero puede resultar confuso en algunos tamaños de pantalla.

El segundo es confiar en el control de posicionamiento del bloque de portada para alinear un bloque de grupo interno a la izquierda. Esta es la mejor opción para diseños puramente receptivos. Sin embargo, su salida es inconsistente cuando se prueba contra múltiples temas de bloque.

Eventualmente, dejé el primer diseño a un lado. Sin embargo, quería al menos compartirlo con aquellos que quieran probarlo.

Crea un héroe de título de publicación

Para este modo, utilicé la versión 12.9 del complemento Gutenberg. Estoy tratando de mantener las funciones disponibles para los usuarios de WordPress 5.9, pero la interfaz anterior se siente más lenta y torpe que el complemento actualizado recientemente.

También uso un tema de bloque personalizado. Cualquiera debería funcionar, pero debería tener una plantilla «en blanco» o una opción equivalente de lienzo abierto de ancho completo.Si no, puedes Editor de plantillas incorporadoSolo necesita el bloque Publicar contenido.

Paso 1: crea el fondo

Editor de publicaciones de WordPress con bloque de portada insertado. A la derecha, aparecerá el panel Colores superpuestos y elegirá Degradado.
Agregue un bloque de portada con una imagen de fondo y una superposición de degradado.

Los bloques de portada son mi opción cuando creo muchos diseños. Es una de las opciones más versátiles de WordPress y allana el camino para muchos tipos de diseños. No es ninguna sorpresa que empiece aquí.

El primer paso es insertar un nuevo bloque de portada y elegir una imagen para él. Luego, configúrelo en ancho completo y active la opción de altura completa.

Según la imagen seleccionada, puede personalizar las opciones de superposición para que coincidan. Elegí un gradiente de Vivid Cyan a Vivid Purple con una Opacidad del 70%. Quiero suficiente imagen de fondo para echarle un vistazo, pero no quiero que abrume todo lo demás.

Paso 2: cuñas y grupos

Editor de publicaciones de WordPress con dos bloques espaciadores y un grupo anidado dentro de una portada. A la izquierda, se abre la vista de lista, que muestra la jerarquía.
Agregue un grupo entre dos bloques espaciadores.

En este punto, todavía estamos construyendo el diseño general del contenido. Dentro de la portada en el paso 1, agregue un espaciador, un grupo y otro espaciador.

Establezca cada espaciador en 2rem o su valor preferido. Esto es solo para mostrar más imágenes de fondo en la parte superior e inferior del patrón. Alternativamente, puede ajustar las opciones de relleno en el bloque de la cubierta exterior para lograr el mismo efecto.

Para el bloque de grupo, solo cambié la configuración del borde.elegí 3px Para Anchura, establezca Estilo en Color sólido y elija Blanco como Color.

notas: El bloque de grupo en este paso no será necesario en el futuro. Idealmente, podríamos comenzar a insertar la cubierta desde el paso 3. Sin embargo, aún no admite bordes personalizados.tener un abierto boleto para agregar funciónNo está claro si WordPress proporcionará esta función para las portadas en la próxima versión 6.0. Ahora, tenemos que agregar un envoltorio extra.

Paso 3: Cubierta interior

Editor de publicaciones de WordPress con un bloque de portada anidado dentro de un bloque de grupo y anidado dentro de otra portada.
Agregue una portada dentro de un grupo dentro de una portada.

Desde el paso 2, agregue un nuevo bloque de portada dentro del grupo. Configúrelo para que se alinee al ancho completo y habilite la altura completa. Luego, elija un color de fondo de su elección y ajuste la opacidad para que se adapte a su diseño. La capa debe ser lo suficientemente oscura para que su texto sea legible. Puede optar por modificarlo más tarde, dependiendo de cómo se vea todo.

Para aquellos que prueban con la última versión de Gutenberg, consulte la nota al final del siguiente paso.

Paso 4: Grupos de contenido

Un bloque dentro de un grupo dentro de un grupo dentro de una portada en el editor de publicaciones de WordPress.
Otra capa más de contenedores.

Garantizo que este es el último nivel de contenedores anidados que hace que este patrón funcione. Para este paso, inserte un nuevo bloque de Grupo dentro de la Portada del paso 2.

La única configuración necesaria es activar la opción «Heredar diseño predeterminado» en el panel de la barra lateral del bloque.Ajusté la configuración de «Espaciado de bloques» a 4rem Dale al contenido suficiente espacio para respirar, pero esto puede variar según el tema. También debe elegir blanco u otros colores claros para el texto y las opciones de color del enlace.

notas: Esta es nuevamente una situación en la que WordPress 5.9 apenas proporciona las herramientas que necesitamos para reducir algunas de las molestias. El bloque Cubrir en el paso 3 es necesario para un fondo transparente. Sin embargo, WordPress 6.0 permite a los usuarios ajustar la opacidad de cualquier color. Para aquellos que prueban con el complemento de Gutenberg, simplemente puede usar un bloque de grupo y ponerle un fondo transparente en este paso.

Paso 5: captura un titular

Editor de publicaciones de WordPress con encabezados en negrita y de gran tamaño.
Ve a lo grande o vete a casa con los títulos de las publicaciones.

Ahora, llegamos a la parte divertida: el contenido real. Recuerda, con WordPress 6.0 los pasos anteriores se pueden reducir a la mitad.

Al querer espacio adicional entre el encabezado y su contenedor, inserté un bloque espaciador 2rem La altura dentro del bloque de Grupo en el paso #3. Después de eso, agregué el bloque de título de la publicación y lo configuré para alinear el ancho completo. Recuerde, estamos usando una plantilla «en blanco» para esta publicación, por lo que necesitaremos agregar un título en alguna parte.

Aquí es donde las cosas se ponen peligrosas, así que he optado casi por completo por no compartir este tutorial en particular. El tamaño de fuente en WordPress es tan bueno como su tema activo. La plataforma central no tiene un manejo receptivo de ellos y sus alturas de línea asociadas, y cada tema puede ser muy diferente de las opciones que ofrece.

Si el tema del bloque de título de la publicación lo proporciona, su mejor opción es elegir un tamaño de fuente bastante grande. Un diseño integral ofrecerá una variedad de opciones y las manejará para adaptarse a pantallas más pequeñas. Si no está disponible, deberá agregar un tamaño de fuente personalizado y una altura de línea.Los valores utilizados en mi configuración son 6rem y 1respectivamente.

Luego, elija la opción «Negro» para las opciones de apariencia o peso, según lo que esté disponible.

Paso 6: Agregar imágenes

Editor de publicaciones de WordPress con imagen de ancho completo, encabezado de demostración y borde negro.
Agregue imágenes de ancho completo a las publicaciones.

Hay dos opciones para este paso: publicar una imagen destacada o un bloque de imágenes. El primero no tiene tantas configuraciones en WordPress 5.9. Su tema activo también puede hacer que ciertos estilos personalizados estén disponibles para uno pero no para el otro.

Elegí el bloque de imagen principalmente porque quería agregar un pie de foto a la foto. Luego lo configuro para alinear el ancho completo y selecciono el estilo de «borde» disponible para mi tema para separarlo un poco del fondo.

Paso 7: envuélvelo

Editor de publicaciones de WordPress con imágenes, seguido de un párrafo y un espaciador, en un conjunto de contenedores con un fondo morado.
Agregue párrafos y bloques espaciadores.

Disfrútalo a partir de ahora. Agregué un encabezado para mi historia ficticia y otro bloque espaciador, pero puede modificar otras opciones, como mostrar el autor y la fecha de la publicación.

Se siente como mucho trabajo en conjunto. Sin embargo, WordPress 6.0 debería facilitar las cosas.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.