Guía para principiantes: Cómo usar patrones de bloques de WordPress

Crear sitios de WordPress nunca ha sido tan fácil, y los patrones de bloques son una gran parte de eso. Cuando los descubrimos por primera vez, vimos su potencial para acelerar nuestro flujo de trabajo.

Ahora usamos patrones de bloques como bloques reutilizables para CTAs y botones de ofertas de cupones; se han vuelto esenciales para cómo creamos contenido.

Los patrones de bloques facilitan la obtención de diseños de aspecto profesional sin necesidad de habilidades de codificación o diseño web.

Son combinaciones preconstruidas de bloques que puedes insertar y personalizar rápidamente, dándote una ventaja en lugar de empezar desde cero cada vez.

Ya sea que estés creando tu primer sitio de WordPress o quieras trabajar más rápido, esta guía para principiantes te mostrará cómo encontrar, usar y crear patrones de bloques que ahorran tiempo en cada proyecto.

Aquí están los temas que cubriremos en esta guía:

¿Qué son los patrones de bloques de WordPress?

Los patrones de bloques de WordPress son colecciones de bloques prediseñadas que te ayudan a crear diseños personalizados de forma rápida y eficiente. Han sido un punto de inflexión para nosotros al construir páginas con plazos ajustados.

El editor de bloques en WordPress es intuitivo y permite a los usuarios diseñar diseños atractivos con bloques de contenido. Estos incluyen texto, imágenes, botones y otros elementos que puedes organizar según tus necesidades.

Sin embargo, no todos los usuarios tienen el tiempo o las habilidades de diseño para crear diseños desde cero cada vez. Nosotros mismos hemos enfrentado este desafío, por eso los patrones de bloques han sido una herramienta tan valiosa en nuestro flujo de trabajo.

Los patrones de bloques ofrecen una solución fácil. WordPress incluye una variedad de patrones preconstruidos por defecto, lo que facilita la adición de diseños de aspecto profesional en segundos.

Los temas populares de WordPress a menudo incluyen sus propios patrones personalizados. Estos patrones ahorran aún más tiempo al proporcionarte diseños listos para usar y adaptados a tu tema.

Los patrones pueden incluir diseños como diseños multicolumna, combinaciones de medios y texto, secciones de llamada a la acción, encabezados y botones personalizados. Esta flexibilidad los hace adecuados para una variedad de tipos de contenido.

También puedes encontrar más patrones de bloques en el sitio web de WordPress.org. Si disfrutas del diseño, incluso puedes crear y compartir tus propios patrones con la comunidad de WordPress.

A continuación, te mostraremos cómo usar patrones de bloques en WordPress para crear diseños impresionantes para tu sitio web.

Cómo usar patrones de bloques en WordPress

Por defecto, WordPress viene con varios patrones de bloques útiles que puedes usar en tu sitio web. Tu tema de WordPress y algunos complementos también pueden agregar sus patrones.

Para usar patrones de bloques, necesitas editar la publicación o página de WordPress donde quieras usar el patrón de bloques.

En la pantalla de edición de la publicación, haz clic en el botón Agregar bloque [+] para abrir el insertador de bloques. Desde aquí, cambia a la pestaña 'Patrones' para ver los patrones de bloques disponibles.

Puedes desplazarte hacia abajo para ver los patrones de bloques disponibles.

También puedes ver patrones de bloques en diferentes categorías, como destacados, botones, columnas, encabezados y más.

Alternativamente, también puedes hacer clic en el botón 'Explorar todos los patrones' para ver los patrones de bloques.

Aquí, puedes ver previsualizaciones más grandes en una ventana emergente.

Una vez que encuentres un patrón que quieras probar, simplemente haz clic para insertarlo en el área de contenido de tu publicación o página.

El patrón aparecerá en el editor de contenido con contenido de marcador de posición que puedes editar y reemplazar con el tuyo.

Simplemente apunta y haz clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según tus requisitos.

Aún tendrás todas las opciones que normalmente tienes para cada bloque. Por ejemplo, si es un bloque de portada, puedes cambiar el color de la portada o la imagen de fondo.

Puedes agregar tantos patrones como necesites para tus publicaciones o páginas de blog. También puedes eliminar un patrón para quitarlo de una publicación o página, al igual que eliminarías cualquier bloque de WordPress.

Usando patrones de bloques, puedes crear rápidamente diseños hermosos para tus artículos y tu sitio de WordPress.

En última instancia, los patrones de bloques te ayudan a ahorrar tiempo que de otra manera pasarías organizando bloques manualmente cada vez que necesites agregar un encabezado, una galería, botones y más.

Cómo crear patrones en el editor de bloques

WordPress hace que sea súper fácil crear patrones en el editor de bloques que puedes reutilizar más tarde.

Al editar una publicación o página, simplemente selecciona los bloques que deseas incluir en tu patrón y haz clic en ‘Crear patrón’.

Puedes seleccionar varios bloques presionando la tecla Shift en tu teclado y haciendo clic en ellos.

Sin embargo, si tus bloques están organizados de una manera que dificulta su selección, puedes usar la vista de Lista en la pestaña Resumen del Documento.

La creación de un patrón abrirá una ventana emergente.

Necesitarás proporcionar un nombre para tu patrón y elegir una categoría.

Debajo de eso, verás un interruptor para mantener el patrón Sincronizado o No Sincronizado.

Patrones Sincronizados: Cuando tú u otros usuarios editen el patrón, esos cambios se guardarán la próxima vez que se use ese patrón.

Patrones No Sincronizados: Los cambios realizados en esos patrones después de insertarlos en una publicación o página no afectarán al patrón original.

Haz clic en el botón ‘Crear’ para guardar tu patrón.

La próxima vez que quieras usar ese patrón, solo necesitas buscar su nombre o categoría en el insertador de bloques.

Cómo crear patrones en el editor del sitio

Si estás usando un tema de bloques con soporte para el editor de sitio completo, entonces también puedes crear patrones en el editor de sitio.

Abre el editor del sitio visitando la página Apariencia » Editor.

Ahora accederás a la interfaz del editor del sitio.

Haz clic en ‘Patrones’ en la barra lateral izquierda para continuar.

Verás todos los patrones y categorías disponibles.

Para crear un nuevo patrón, haz clic en el botón Añadir [+] y luego selecciona ‘Crear patrón’.

Esto abrirá una ventana emergente donde deberás proporcionar un nombre para tu patrón, elegir una categoría y decidir si quieres que el patrón esté sincronizado o no sincronizado.

Haz clic en ‘Crear’ para continuar.

WordPress creará un lienzo en blanco para que diseñes tu patrón.

Desde aquí, puedes añadir bloques para diseñar tu patrón.

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Guardar’ para almacenar tu patrón.

Administración de patrones en WordPress

Si estás utilizando un tema de bloques con soporte para el editor completo del sitio, entonces puedes administrar los patrones en el editor del sitio.

Abre el editor del sitio visitando la página Apariencia » Editor.

En la pantalla de Patrones, puedes hacer clic en un patrón para editarlo. También puedes hacer clic en el menú de tres puntos junto a un patrón para duplicarlo, exportarlo o eliminarlo.

Para administrar todos tus patrones, haz clic en la pestaña ‘Administrar todos mis patrones’ en la barra lateral.

Esto te mostrará una lista de todos tus patrones. Ahora, puedes editarlos, exportarlos o eliminarlos.

Si estás utilizando un tema clásico (temas de WordPress que no admiten el editor completo del sitio), entonces puedes administrar los patrones visitando la página Apariencia » Patrones.

Desde aquí, puedes añadir, eliminar y exportar tus patrones de bloques.

Ten en cuenta que incluso algunos temas clásicos como Hestia ahora administran los patrones de manera similar a los temas de Edición Completa del Sitio, mientras que otros todavía usan la interfaz anterior que se muestra en la captura de pantalla a continuación.

Así que, cómo administras los patrones de bloques realmente depende del tema que estés usando.

Encontrar más patrones de bloques para usar en tu sitio web

Por defecto, WordPress viene con algunos patrones de bloques de uso común. Los temas de WordPress también pueden agregar sus propios patrones a tu sitio web.

Sin embargo, puedes encontrar muchos más patrones de bloques que los disponibles en el insertador de bloques en tu sitio web.

Simplemente ve al sitio web del Directorio de Patrones de WordPress para ver muchos más patrones de bloques.

Aquí, encontrarás patrones de bloques enviados por la comunidad de WordPress.

Para usar uno de estos patrones de bloques, simplemente haz clic para ver el patrón y luego haz clic en el botón 'Copiar patrón'.

A continuación, necesitas regresar a tu blog de WordPress y editar la publicación o página donde deseas insertar este patrón de bloques.

En la pantalla de edición, simplemente haz clic derecho y selecciona 'Pegar' en el menú del navegador o presiona CTRL+V (Comando + V en Mac).

Cómo crear y compartir tus patrones de bloques

¿Quieres crear tus propios patrones de bloques de WordPress y compartirlos con el mundo?

WordPress hace que sea súper fácil crear patrones de bloques y usarlos en tus propios sitios web o compartirlos con todos los usuarios de WordPress en todo el mundo.

Simplemente visita el sitio web del Directorio de Patrones de WordPress y haz clic en el enlace 'Nuevo Patrón'.

Nota: Necesitarás iniciar sesión o crear una cuenta gratuita de WordPress.org para guardar tus patrones.

Una vez que hayas iniciado sesión, llegarás a la página del editor de patrones de bloques. Es idéntica al editor de bloques predeterminado de WordPress, y puedes usarla para crear tu patrón.

Simplemente agrega bloques para crear el diseño de tu patrón.

Puedes usar bloques de diseño como grupo, portada, galería y más para organizar tu diseño.

También hay imágenes libres de derechos disponibles para usar en tus bloques multimedia. La biblioteca multimedia de WordPress te permitirá encontrar y usar fácilmente estas imágenes en tus patrones.

Una vez que estés satisfecho con tu patrón de bloques, puedes guardarlo como borrador o enviarlo al directorio de patrones.

Antes de poder enviar tu patrón de bloques al directorio de patrones, asegúrate de haber leído las directrices del directorio de patrones de bloques.

Puedes administrar todos tus patrones de bloques haciendo clic en el enlace 'Mis Patrones'. Mostrará todos los patrones de bloques que has compartido, los patrones en borrador y los patrones que has marcado como favoritos.

Si solo quieres crear patrones de bloques para tu propio uso, puedes guardarlos como borradores. Después de eso, cópialos y pégalos desde la página Mis Patrones a tu sitio web de WordPress.

Creación manual de patrones de bloques de WordPress

También puedes crear patrones de bloques manualmente y agregarlos a tu tema de WordPress o a un plugin de fragmentos personalizados como WPCode.

Simplemente crea una nueva publicación o página en WordPress. En el área de contenido, usa bloques para crear un diseño personalizado o una colección de bloques que quieras guardar como patrón.

Después de eso, cambia al modo Editor de Código.

Desde aquí, necesitas copiar todo el contenido que ves en el editor de código.

A continuación, abre un editor de texto plano como el Bloc de notas y pega ese código. Lo necesitarás en el siguiente paso.

Ahora, estás listo para registrar tus bloques como un patrón.

Para hacer eso, simplemente copia y pega el siguiente código en el archivo functions.php de tu tema o en un plugin de fragmentos de código como el plugin gratuito WPCode (recomendado).

Para más detalles, aquí tienes la guía completa para agregar código personalizado en WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Ahora, copia y pega los datos del bloque sin formato que copiaste anteriormente como valor para el parámetro de contenido. En otras palabras, deberás reemplazar el texto que dice 'Your block content code goes here' con el código de tu bloque. Asegúrate de dejar las comillas simples que rodean el texto.

Por último, no olvides cambiar el título y la descripción por los tuyos y guarda tus cambios.

Ahora puedes visitar tu sitio web y editar una publicación o página. Tu patrón de bloque recién registrado aparecerá en el insertador de bloques.

Cómo eliminar un patrón de bloques en WordPress

Puedes eliminar o anular el registro de cualquier patrón de bloque en WordPress fácilmente. Digamos que quieres eliminar el patrón de bloque que creaste en el ejemplo anterior.

Todo lo que necesitas hacer es copiar y pegar el siguiente código en el archivo functions.php de tu tema o en WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

En este ejemplo, 'my-plugin/my-awesome-pattern' es el nombre del patrón que usamos al registrarlo.

Puedes usar este código para anular el registro de cualquier patrón de bloque creado por tu tema o un plugin. Todo lo que necesitas saber es el nombre utilizado para registrar el patrón.

Eliminar patrones principales de WordPress

Los patrones principales de WordPress están disponibles para todos los usuarios de WordPress. Esto significa que pueden ser usados en exceso y es posible que ni siquiera coincidan con el resto de tu tema de WordPress.

Si no quieres usar un patrón, simplemente puedes evitar agregarlo a tu contenido. Sin embargo, si administras un sitio de WordPress con múltiples autores, es posible que desees evitar que todos los usuarios utilicen estos patrones principales.

Para eliminar todos los patrones principales de WordPress, necesitas agregar el siguiente código al archivo functions de tu tema o a WPCode:

remove_theme_support( 'core-block-patterns' );

¿Qué pasó con los bloques reutilizables?

Los patrones de bloques y los bloques reutilizables tenían como objetivo resolver un problema similar: proporcionar a los usuarios opciones para agregar fácilmente bloques de uso común.

Para solucionar esto, el equipo principal de WordPress fusionó los bloques reutilizables en patrones.

Para tener la misma funcionalidad que los bloques reutilizables, ahora puedes usar Patrones Sincronizados. Cuando tú u otros usuarios editen el patrón, esos cambios se guardarán la próxima vez que se use ese patrón.

Preguntas frecuentes

Aquí hay algunas preguntas que nuestros lectores hacen con frecuencia sobre los patrones de bloques.

¿Dónde puedo encontrar patrones de bloques adicionales?

Además de los patrones predeterminados en WordPress, puedes explorar el Directorio de Patrones de WordPress en línea para encontrar aún más opciones creadas por la comunidad.

¿Los patrones de bloques pueden ralentizar mi sitio web?

No, los patrones de bloques en sí mismos no afectan la velocidad de tu sitio. Son una forma de estructurar contenido, pero asegúrate de usar imágenes y bloques optimizados para un mejor rendimiento.

Para obtener consejos, consulta nuestra guía definitiva sobre velocidad y rendimiento de WordPress.

Recursos adicionales

Si deseas personalizar el diseño de tu sitio de WordPress, encontrarás útiles los siguientes recursos:

• Cómo Crear Fácilmente un Tema Personalizado de WordPress (Sin Código)
• Cómo Rediseñar un Sitio Web de WordPress (Guía para Principiantes)
• Problemas Comunes del Editor de Bloques de WordPress y Cómo Solucionarlos
• Cómo Estilizar el Formulario de Comentarios de WordPress (Guía Definitiva)
• Cómo Personalizar el Color de Fondo del Editor de Bloques de WordPress

Esperamos que esta guía te haya ayudado a aprender cómo usar los patrones de bloques de WordPress en tu sitio web. También puedes consultar nuestra guía sobre cómo dominar el editor de bloques de WordPress o echar un vistazo a estos prácticos atajos de WordPress para ser más productivo.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.