Recibe el boletín informativo, todos los lunes, y descarga nuestros ebooks exclusivos.

Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

Ahora puedes convertir tu WordPress en un museo del arte de bloques. Anne McCarthy anunció el lanzamiento del Museo de Block Art. El proyecto consiste en mostrar piezas de arte construidas exclusivamente mediante bloques del editor de Gutenberg. El Museo del Arte de Bloques no está abierto al público pero las piezas se pueden compartir mediante el hashtag #WPBlockArt.

Como ejercicio práctico, hemos realizado la siguiente pieza de #WPBlockArt a partir de una imagen descargada de Canva Pro. Mediante la app Skitch (Mac) obtuvimos los cuatro fragmentos de la foto y los subimos como archivos independientes a la biblioteca multimedia. Hay apps para móviles que realizan el split de una imagen automáticamente.

La instalación de WordPress, en Local, poseía WordPress 5.9.2 con el tema de bloques Twenty Twenty Two más el plugin Gutenberg 12.7.1 instalado.

Para aplicar estilo a las imágenes se utilizó la opción de «Duotone». Y este fue el resultado:

BLOCK-ART-2-POST-IG-1024x1024 Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)
Girl in duotones

A continuación, se explica cómo construir una rejilla utilizando el bloque de columnas y el bloque de grupo. Al final, podrás copiar el código para que puedas ejercitarte y construir tus propias obras de #WPBlockArt.

1. Cómo hacer una cuadrícula básica con los bloques de columna y grupo

cuadricula-basica Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

El bloque de columnas permite implementar fácilmente una rejilla. Para simular las filas, inserta un bloque de grupo debajo de otro dentro de cada columna. Para modificar la altura de cada fila, si no está determinada por una imagen ( por ejemplo ), usa el bloque espaciador. Para reducir o ampliar la distancia entre columnas, modifica el valor del parámetro «Espaciado del bloque» dentro de las dimensiones del bloque de columnas. La distancia entre filas, necesitará también del bloque espaciador.

La ventaja de emplear el bloque de grupo, dentro de las columnas, es que se les puede aplicar un color (incluso con degradado), un borde e insertar dentro cualquier bloque.

No se te olvide configurar «Apilar en móvil» en el bloque de columna para que el diseño se vea bien en los dispositivos móviles.

En el GIF, se muestra cómo se lleva a cabo la creación de una rejilla de 2×2 con cuatro colores diferentes. Trata de cambiar tú, las celdas de color por imágenes de la biblioteca de medios. ¿Las imágenes tienen las mismas dimensiones?

Copia el código para ejercitarte:

<!-- wp:columns {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"vivid-red"} -->
<div class="wp-block-group has-vivid-red-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"vivid-green-cyan"} -->
<div class="wp-block-group has-vivid-green-cyan-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"vivid-cyan-blue"} -->
<div class="wp-block-group has-vivid-cyan-blue-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"luminous-vivid-amber"} -->
<div class="wp-block-group has-luminous-vivid-amber-background-color has-background"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

2. Código completo de la pieza «Girl in duotones»

Copia las siguientes instruicciones en el portapapeles y pégalo en el editor en modo código, para reproducir la obra «Girl in duotones».

El espaciado entre las imágenes de cada fila, se realiza aplicando el valor de 5px al espaciado del bloque, dentro del apartado «Dimensiones».

Para introducir un espaciado entre las dos imágenes de cada columna, en lugar del bloque espaciador se utilizó el valor de 5px en el margen superior, dentro del apartado «Dimensiones» del bloque de grupo, correspondiente a la imagen inferior.

<!-- wp:columns {"style":{"spacing":{"blockGap":"5px"}}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"id":536,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#ffc7f3"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-sup-izq.png" alt="" class="wp-image-536"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"5px","bottom":"0px"}}}} -->
<div class="wp-block-group" style="margin-top:5px;margin-bottom:0px"><!-- wp:image {"id":538,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#f6ffc7"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-inf-izqda.png" alt="" class="wp-image-538"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:image {"id":537,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#000000","rgb(199, 255, 244)"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-sup-drcha.png" alt="" class="wp-image-537"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"5px"}}}} -->
<div class="wp-block-group" style="margin-top:5px"><!-- wp:image {"id":539,"sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":["#1a4548","#d33e4d"]}}} -->
<figure class="wp-block-image size-full"><img src="https://antoniocambronero.com/wp-content/uploads/2022/03/foto-inf-drcha.png" alt="" class="wp-image-539"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
FSE-NEWS-1024x576 Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

FSE NEWS son posts rápidos con tips, tools y noticias sobre Gutenberg y Full Site Editing (FSE). Consulta la página principal para acceder a todos los posts de FSE NEWS. Consulta el FAQ para aclarar los términos generales que se utilizan.

Comparte en Mastodon:

mastodon Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

Y aún hay más…

Cómo se hace un sitio web

Una revisión a vista de pájaro de todo lo necesario para crear un sitio web de WordPress.

Recursos

La lista de recursos recomendada en Blogpocket.

Mi lista de plugins

La lista de plugins de WordPress recomendada en Blogpocket

UN-BLOG-DE-21-MAS-1-COVER-3D-1024x944 Convierte tu WordPress en un museo del arte de bloques (cómo implementar una cuadrícula con bloques)

Suscríbete a la newsletter

En la newsletter «WP al día» recopilamos las ideas, trucos y noticias de actualidad acerca de WordPress, Gutenberg y la Edición completa del sitio. Recíbela todos los lunes a primera hora.

Suscríbete ahora y descarga, entre otros, nuestro último ebook «Un blog de 21 años (la historia jamás contada)!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido