Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo seleccionar y utilizar bloques anidados en WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres aprender a seleccionar y utilizar bloques anidados en WordPress?

La característica de bloques anidados de Gutenberg te permite añadir varios bloques dentro de un bloque padre. Así, puedes personalizar diferentes elementos de bloque al mismo tiempo, organizar el contenido de las entradas de forma eficiente y acceder a una mayor flexibilidad de diseño.

En este artículo, le mostraremos cómo seleccionar y utilizar fácilmente los bloques anidados de WordPress.

Select and use nested blocks in WordPress

¿Qué son los bloques anidados de WordPress?

La característica de bloques anidados de WordPress Gutenberg permite insertar (o “anidar”) uno o más bloques dentro de otro bloque.

Los bloques anidados le ayudan a crear estructuras / disposiciones / diseño / plantillas más complejas en su sitio web de WordPress añadiendo varios bloques uno dentro de otro. Esto permite una mayor flexibilidad a la hora de diseñar y dar formato al contenido de páginas y entradas.

Por ejemplo, puedes anidar varios bloques Imagen dentro de un bloque Grupo para mostrar un conjunto de fotos de un evento concreto o una serie de obras de arte creadas con una técnica determinada.

Preview of WordPress nested blocks

Además, la característica de bloques anidados le permite editar bloques individuales por separado. Esto significa que puede personalizar cada bloque según sus necesidades sin afectar a los demás bloques.

A su vez, esto se traduce en una mejor organización de los contenidos, los hace más atractivos y agiliza el proceso creativo.

Dicho esto, veamos cómo puedes seleccionar y utilizar fácilmente los bloques anidados de WordPress Gutenberg.

Cómo utilizar los bloques anidados de WordPress

Puedes anidar fácilmente varios bloques juntos utilizando el bloque Grupo o Columnas en el editor de bloques de Gutenberg.

En primer lugar, debe abrir una entrada existente o nueva en el editor de bloques desde la barra lateral del administrador de WordPress.

Desde aquí, basta con hacer clic en el botón “+” de añadir bloque en la esquina superior izquierda de la pantalla y buscar el bloque Grupo. Al hacer clic en él y añadirlo a la página, debe seleccionar una estructura / disposición / diseño / plantilla para los bloques que anidará juntos.

Para este tutorial, seleccionaremos la estructura / disposición / diseño / plantilla “Grupo”.

Select Group block from the block menu

A continuación, basta con hacer clic en el botón “+” de la pantalla para empezar a añadir contenido dentro del bloque padre.

Para este tutorial, añadiremos un bloque Imagen.

Add an image block within the Group block

Tras añadir el bloque, basta con hacer clic en el botón “Agrupar” de la barra de herramientas de bloques de la parte superior para seleccionar el bloque padre.

A continuación, haga clic en el botón “+” para abrir de nuevo el menú de bloques, desde el que podrá elegir otros bloques para añadir.

Open the block menu to add another block within the Group block

Cómo configurar los ajustes de los bloques anidados de WordPress

Una vez que haya anidado varios bloques, puede configurar sus ajustes individuales al hacer clic en cada bloque. Se abrirán los ajustes del bloque en la columna derecha de la pantalla.

Desde aquí, puede ajustar el color de fondo, el color del texto y el tamaño de los bloques individuales sin que ello afecte a los demás bloques anidados en su interior.

Configure the individual block settings

Para configurar los ajustes de todos los bloques anidados juntos, tendrás que hacer clic en el botón “Agrupar” de la barra de herramientas de bloques de la parte superior. Se abrirán los ajustes del bloque padre en la columna de la derecha.

Ahora puede configurar la justificación, la orientación, el color de fondo, el color del texto y la tipografía de todos los bloques anidados.

Tenga en cuenta que estos ajustes afectarán a todos los bloques anidados dentro del bloque padre.

Configure the settings of the Group block

También puede convertir un bloque individual existente en bloques anidados al hacer clic en el botón “Opciones” de la barra de herramientas superior de cualquier bloque.

Se abrirá una indicación de menú en la que deberá seleccionar la opción “Crear patrón”.

Create a pattern

Una vez hecho esto, se abrirá una indicación pidiéndole que dé un nombre y elija una categoría para su nuevo bloque reutilizable.

A continuación, haz clic en el botón “Crear” para almacenar tus ajustes.

Add a name for the pattern

Cuando esté satisfecho, no olvide hacer clic en el botón “Publicar” o “Actualizar” para guardar los cambios.

En nuestro ejemplo, hemos anidado un bloque Título, Imagen y Párrafo dentro de un bloque Grupo.

Este es el aspecto de los bloques anidados en nuestro sitio web de demostración.

Preview of WordPress nested blocks

Bonificación: utilice el plugin Wayfinder para seleccionar fácilmente bloques anidados

A veces, puede resultar difícil seleccionar un bloque individual y configurarlo cuando hay varios bloques anidados juntos.

Por suerte, el plugin Wayfinder facilita enormemente la selección de bloques anidados a partir de un bloque padre e incluso te indica el tipo y la clase de los bloques.

En primer lugar, tendrás que instalar y activar el plugin Wayfinder. Para más instrucciones, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez activado, dirígete a la página Ajustes ” Wayfinder desde la barra lateral del administrador de WordPress.

Una vez allí, todos los ajustes estarán ya activados. Solo tienes que desmarcar la casilla siguiente a los ajustes que no quieras utilizar.

Por ejemplo, si desea que Wayfinder muestre los tipos de bloque de todos los bloques del editor, marque / compruebe la casilla siguiente a la opción “Mostrar tipo de bloque”.

Configure the Wayfinder plugin settings

Sin embargo, si no desea que el plugin muestre las clases en bloque, sólo tiene que desmarcar la casilla situada junto a esa opción.

Después de establecer los ajustes, no olvides hacer clic en el botón “Guardar cambios”.

A continuación, debe abrir una entrada existente o nueva en el editor de bloques de WordPress desde el escritorio.

Una vez allí, al pasar el cursor sobre cualquier bloque interior se mostrará un contorno con su nombre. También podrá ver el contorno y el nombre de los bloques anidados dentro del bloque principal.

GIF for the Wayfinder plugin

Esto le ayudará a identificar todos los bloques diferentes que están anidados dentro de un bloque de Grupo o Columna.

Desde aquí, puede seleccionar fácilmente un bloque individual del bloque padre para establecer sus ajustes.

Use Wayfinder plugin to easily select a block

También puede seleccionar todos los bloques anidados al mismo tiempo simplemente haciendo clic en el encabezado “Columnas” o “Grupo”. Se abrirán los ajustes del bloque principal en la columna de la derecha.

Una vez configurados los ajustes del bloque, basta con hacer clic en el botón “Actualizar” o “Publicar” para guardar los cambios.

Click the Group block outline to open its settings

Esperamos que este artículo te haya ayudado a aprender a seleccionar y utilizar los bloques anidados de WordPress. Puede que también quieras ver nuestro tutorial paso a paso sobre cómo cambiar la altura y anchura de los bloques en WordPress y nuestra selección de los mejores plugins de WordPress para hacer crecer tu sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

4 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph says

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support says

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      Administrador

  3. Jiří Vaněk says

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.