Me frustré un poco la semana pasada al compartir un tutorial sobre un encabezado de publicación estilo héroe. Había planeado crear un diseño con un grupo alineado a la izquierda de ancho máximo, como se muestra en la siguiente captura de pantalla:
Esto permitiría que el punto focal de la imagen de fondo se viera a la derecha. Sin embargo, ninguna de las dos técnicas conocidas parecía ser ideal.
Uno de los métodos más comunes es usar un bloque de columnas 50/50, dejando la columna derecha en blanco. Esto fue complicado en algunos tamaños de pantalla. Sin embargo, como señaló Andrew Starr en los comentarios, establecer un ancho específico para la columna de la izquierda y borrar el ancho de la columna de la derecha soluciona este problema. Felicitaciones a él por encontrar una manera de trabajar dentro del sistema. Sin embargo, no es el método más intuitivo y deja un hueco
Mi instinto me dijo que mi solución preferida era la correcta. También fue el más fácil de implementar sin recurrir a la piratería de columnas. Utiliza el control de matriz de alineación de contenido para el bloque de portada en combinación con un ancho establecido para un bloque de grupo interno. Sin embargo, tuve problemas con él, pero no entendí por qué. Eso fue hasta que volví a hacerlo esta semana (hablaré de eso más adelante). Además, soy lo suficientemente terco como para seguir intentándolo hasta que mágicamente funcione.
Así que volví a la mesa de dibujo. Cansado de mirar el diseño anterior, saqué una de las primeras ideas de patrones que tuve hace aproximadamente un año y la recreé usando las últimas herramientas de diseño:
También quería asegurarme de que esta solución funcionaría bien en cualquier tamaño de pantalla. A medida que pasa a ventanas de visualización más pequeñas, el contenido debería ocupar más espacio hasta que llegue al borde. El método en este tutorial maneja esto maravillosamente:
Esta entrada en la serie Building with Blocks lo guiará a través de la creación de este diseño. Como beneficio adicional, también muestro cómo hacer esto con el nuevo bloque Stack en WordPress 6.0 para casos en los que un contenedor de portada no tiene sentido.
Edificio con un bloque de cubierta
Para este tutorial, estoy usando un tema personalizado. Sin embargo, también probé con Archeo, Avant-Garde y Twenty Twenty-Two. Funcionó consistentemente en todo el grupo. También estoy usando WordPress 6.0 Beta 1 sin el complemento Gutenberg activo.
Paso 1: Agregar bloque de portada
Bloque de portada con contenido alineado a la izquierda.
Para este paso, inserte un nuevo Bloque de portada junto con su imagen preferida. La mayoría de los ajustes no importan. Elegí la opción Altura completa y Ancho completo.
La parte más importante de este paso es seleccionar una opción del control Matriz de alineación de contenido. En la barra de herramientas se convierte en un icono con nueve cuadrados pequeños, casi puntos (ver captura de pantalla). Para alinear los bloques de los próximos pasos en el centro izquierdo del contenedor, seleccione el primer «punto» en la segunda fila. Por supuesto, siéntase libre de jugar con diferentes opciones.
Todo lo demás sobre el diseño de la portada depende de ti.
Paso 2: agregar un grupo de ancho fijo
Agregar un bloque de grupo de ancho específico.
Para contener el contenido que agrega en el paso 3, agregue un bloque de grupo a la portada del paso 1.
La pestaña «Diseño» en la barra lateral del bloque contiene las únicas opciones necesarias que debe configurar. Es necesario definir el contenido y las opciones amplias.
Aquí es donde encontré un obstáculo en mi prueba anterior. Las unidades de porcentaje (%) se comportan de manera diferente a cualquier otra. Cuando se usa, el bloque de grupo siempre ocupa el ancho completo y su contenido siempre está centrado. Nadie más tiene este problema. Sin embargo, no todos se pueden usar para este diseño en particular. Las unidades Viewport Width (vw) y Viewport Height (vh) se alinean como se esperaba, pero no se extienden por la pantalla en dispositivos más pequeños.
Es importante recordar usar un tipo de unidad como px, em o rem. También puede seleccionar «Heredar diseño predeterminado», pero su comportamiento depende de su tema activo.
Establecí las opciones de «Contenido» y «Ancho» en 40 rem (para este tipo de diseño, la configuración de «Ancho» no necesita ser mayor que «Contenido»). Técnicamente, este es un valor de ancho máximo en lugar de un ancho fijo. Esto le permite adaptarse a tamaños de pantalla más pequeños.
Paso 3: Agregar contenido
Adición de contenido personalizado.
Para el paso final, simplemente necesita agregar su contenido favorito en el grupo del paso 2. Elegí agregar bloques de encabezado, párrafo y botón. Esto puede ser lo que quieras, no hay reglas.
Construir con un bloque de apilamiento
WordPress 6.0 presentará un nuevo tipo de pila del bloque de grupo. En lugar del típico flujo de arriba hacia abajo, es un diseño flexible vertical. Cubrí este nuevo bloque en la publicación de lanzamiento de Gutenberg 13.0 de esta semana.
Para probar la técnica a continuación, debe instalar WordPress 6.0 Beta 1 o la última versión del complemento Gutenberg. La alternativa es esperar unas semanas para el lanzamiento general.
Paso 1: agregar un bloque de pila
Agregue una pila y alinee a la izquierda su contenido.
Para el primer paso, agregue un nuevo bloque Stack al área de contenido. Puedes elegir darle un color de fondo o un degradado. Elegí este último por diversión.
A diferencia del bloque de grupo, Stack tiene controles para la alineación del contenido. Si ha superado la primera parte de este tutorial, probablemente ya debería saber a qué me refiero. Hay un control de Alineación en la barra lateral para alinear bloques anidados a la izquierda, al centro o a la derecha. También hay una opción de duplicado en la barra de herramientas.
Al igual que con Cover Block, puedes jugar con las opciones. De lo contrario, colóquelo en «izquierda» para unirse.
Paso 2-3: Enjuague y repita
Grupo de ancho fijo justificado a la izquierda dentro de una variación de pila.
Los pasos n.° 2 y n.° 3 son literalmente los mismos que usar el bloque de cubierta como contenedor exterior. Por lo tanto, todo lo que tienes que hacer es repetir el proceso descrito anteriormente. Nuevamente, lo más importante es definir un ancho fijo para el bloque de grupo.
Esto fue sorprendentemente fácil después de la frustración que tuve la semana pasada. Este también es un ejemplo de cuán poderoso se ha vuelto el editor de bloques y cómo la experiencia del usuario a veces puede no cumplir con las expectativas. Como alguien que vive y respira WordPress casi cada momento, si encuentro obstáculos, es probable que otros usuarios encuentren los mismos problemas. Espero haber arrojado algo de luz sobre al menos un aspecto de la creación de diseños en este tutorial.
Categoría: Construyendo con bloques
