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

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

Ahora utilizamos patrones de bloques como los bloques reutilizables para las CTA y los botones de oferta de cupones, que se han convertido en elementos esenciales de nuestra forma de crear contenido.

Los patrones de bloques simplifican la obtención de diseños de aspecto profesional sin necesidad de conocimientos de código o diseño web.

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

Tanto si estás construyendo tu primer sitio en WordPress como si quieres trabajar más rápido, esta guía para principiantes te mostrará cómo encontrar, utilizar y crear patrones de bloques que te permitirán ahorrar tiempo en cada proyecto.

Estos son los debates que trataremos en esta guía:

¿Qué son los patrones de bloques de WordPress?

Los patrones de bloques de WordPress son colecciones prediseñadas de bloques que te ayudan a crear diseños personalizados de forma rápida y eficaz. Para nosotros han supuesto un cambio radical a la hora de crear páginas con plazos ajustados.

El editor de bloques de WordPress es intuitivo y permite a los usuarios diseñar hermosos diseños 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 los conocimientos de diseño necesarios para crear diseños desde cero cada vez. Nosotros mismos nos hemos enfrentado a este reto, y 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 sencilla. WordPress incluye una gran variedad de patrones predefinidos por defecto, lo que facilita la creación de diseños profesionales en cuestión de segundos.

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

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

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

A continuación, le mostraremos cómo utilizar patrones de bloques en WordPress para crear diseños sorprendentes para su sitio web.

Cómo utilizar patrones de bloques en WordPress

Por defecto, WordPress viene con varios patrones de bloque útiles que puede utilizar en su sitio web. Tu tema de WordPress y algunos plugins también pueden añadir sus patrones.

Para utilizar patrones de bloques, debe editar la entrada o página de WordPress en la que desea utilizar el patrón de bloques.

En la pantalla de edición de la entrada, haga clic en el botón Añadir bloque [+] para abrir el insertador de bloques. Desde aquí, cambia a la pestaña “Patrones” para ver los patrones de bloques disponibles.

Puede desplazarse hacia abajo para ver los patrones de bloques disponibles.

También puede ver patrones de bloques en distintas categorías, como destacados, botones, columnas, cabeceras, etc.

También puede hacer clic en el botón “Explorar todos los modelos” para ver los modelos en bloque.

Aquí puede ver vistas previas más grandes en un mensaje / ventana emergente.

Una vez que encuentre un patrón que desee probar, sólo tiene que hacer clic para insertarlo en el área de contenido de su entrada o página.

El patrón aparecerá en el editor de contenidos con un marcador de posición que podrá editar y sustituir por el suyo propio.

Basta con apuntar y hacer clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según sus necesidades.

Seguirás teniendo todas las opciones que normalmente tienes para cada bloque. Por ejemplo, si se trata de un bloque de portada, puedes cambiar el color de la portada o la imagen de fondo.

Puedes añadir tantos patrones como necesites para la entrada o página de tu blog. También puede quitar / eliminar un patrón de una entrada o página, de la misma manera que eliminaría cualquier bloque de WordPress.

Usando patrones de bloques, puede hacer rápidamente hermosas disposiciones para sus artículos y sitio de WordPress.

En última instancia, los patrones de bloques le ayudan a ahorrar tiempo que, de otro modo, emplearía en organizar manualmente los bloques cada vez que necesite añadir una cabecera, una galería, botones, etc.

Cómo crear patrones en el editor de bloques

WordPress facilita enormemente la creación de patrones en el editor de bloques que podrás reutilizar más adelante.

Al editar una entrada o página, sólo tiene que seleccionar los bloques que desea incluir en su patrón y hacer clic en “Crear patrón”.

Puede seleccionar varios bloques pulsando la tecla Mayús del teclado y haciendo clic sobre ellos.

Sin embargo, si sus bloques están dispuestos de forma que resulte más difícil seleccionarlos, puede utilizar la vista Lista en la pestaña Vista general del documento.

Al crear un patrón aparecerá un mensaje / ventana emergente.

Deberá dar un nombre a su patrón y elegir una categoría.

Debajo verás un conmutador para mantener el patrón sincronizado o sin sincronizar.

Patrones sincronizados: Cuando usted u otros usuarios editen el patrón, esos cambios se guardarán la siguiente vez que se utilice ese patrón.

Patrones no sincronizados: Los cambios realizados en esos patrones después de insertarlos en una entrada 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 quiera utilizar ese patrón, sólo tiene que buscar su nombre o categoría en el insertador de bloques.

Cómo crear patrones en el Editor de Sitios

Si está utilizando un tema de bloques con soporte completo para el editor de sitios, también puede crear patrones en el editor de sitios.

Abra el editor del sitio visitando la página Apariencia ” Editor.

Ahora aterrizará en la interfaz del editor del sitio.

Haga clic en “Patrones” en la barra lateral izquierda para continuar.

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

Para crear un nuevo patrón, haga clic en el botón Añadir [+] y seleccione “Crear patrón”.

Aparecerá una ventana emergente en la que deberá indicar un nombre para el patrón, elegir una categoría y decidir si desea que el patrón se sincronice o no.

Haga clic en “Crear” para continuar.

WordPress creará un lienzo en blanco para que crees tu patrón.

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

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar” para almacenar tu patrón.

Gestión de patrones en WordPress

Si está utilizando un tema de bloques con soporte completo para el editor del sitio, puede gestionar los patrones en el editor del sitio.

Abra el editor del sitio visitando la página Apariencia ” Editor.

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

Para gestionar todos tus patrones, haz clic en la pestaña “Gestionar todos mis patrones” de la barra lateral.

Esto le mostrará un anuncio / catálogo / ficha de todos sus patrones. Ahora puede editarlos, exportarlos o borrarlos.

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

Desde aquí puede añadir, borrar y exportar sus patrones de bloques.

Tenga en cuenta que incluso algunos temas clásicos como Hestia gestionan ahora los patrones de forma similar a los temas de edición completa del sitio, mientras que otros siguen utilizando la interfaz antigua que se muestra en la captura de pantalla siguiente.

Por lo tanto, la forma de gestionar los patrones de bloques depende del tema que se utilice.

Más patrones de bloques para su sitio web

Por defecto, WordPress viene con algunos patrones de bloque de uso común. Los temas de WordPress también pueden añadir sus propios patrones a su sitio web.

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

Sólo tiene que ir al sitio web del Directorio de patrones de WordPress para ver muchos más patrones de bloques.

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

Para utilizar uno de estos patrones de bloques, simplemente haga clic para ver el patrón y, a continuación, haga clic en el botón “Copiar patrón”.

A continuación, debe volver a su blog de WordPress y editar la entrada o página en la que desea insertar este patrón de bloques.

En la pantalla de edición, haz clic con el botón derecho y selecciona “Pegar” en el menú del navegador o pulsa CTRL+V (Comando + V en Mac).

Cómo crear y compartir sus patrones de bloques

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

WordPress hace que sea superfácil crear patrones de bloques y utilizarlos en tus propios sitios web o compartirlos con todos los usuarios de WordPress del mundo.

Sólo tiene que visitar el sitio web del directorio de patrones de WordPress y hacer clic en el enlace “Nuevo patrón”.

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

Una vez iniciada la sesión, llegarás a la página del editor de patrones de bloques. Es idéntico al editor de bloques predeterminado de WordPress, y puedes usarlo para crear tu patrón.

Simplemente añade bloques para crear la disposición de tu patrón.

Puedes utilizar bloques de disposición como grupo, portada, galería, etc. para organizar tu disposición.

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

Cuando esté satisfecho con su patrón de bloques, puede guardarlo como borrador o enviarlo al directorio de patrones.

Antes de enviar su patrón de bloques para el directorio de patrones, asegúrese de haber leído las directrices del directorio de patrones de bloques.

Puede gestionar todos sus patrones de bloques haciendo clic en el enlace “Mis patrones”. Aparecerán todos los patrones de bloques que hayas compartido, los borradores y los patrones que hayas marcado como favoritos.

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

Creación manual de patrones de bloques en WordPress

También puede crear patrones de bloques manualmente y añadirlos a su tema de WordPress o a un plugin de fragmentos de código personalizados como WPCode.

Basta con crear una nueva entrada o página en WordPress. En el área de contenido, utilice bloques para crear una estructura / disposición / diseño / plantilla personalizada o una colección de bloques que desee guardar como patrón.

A continuación, cambie al modo Editor de código.

A partir de aquí, tienes que copiar todo el contenido que veas 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 ya puede registrar sus bloques como patrón.

Para ello, simplemente copie y pegue el siguiente código en el archivo functions.php de su tema o en un plugin de fragmentos de código como el plugin gratuito WPCode (recomendado).

Para más detalles, aquí está la guía completa para añadir 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, copie y pegue los datos de bloque sin procesar que copió antes como valor para el parámetro de contenido. En otras palabras, tendrás que sustituir el texto que dice “El código de contenido de tu bloque va aquí” por el código de tu bloque. Asegúrate de dejar las comillas simples alrededor del texto.

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

Ahora puede visitar su sitio web y editar una entrada o página. El patrón de bloques recién registrado aparecerá en el insertador de bloques.

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

Puede eliminar o dar de baja fácilmente cualquier patrón de bloque en WordPress. Supongamos que desea eliminar el patrón de bloques que creó 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 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 utilizamos al registrarlo.

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

Quitar / eliminar patrones de núcleo de WordPress

Los patrones del núcleo de WordPress están disponibles para todos los usuarios de WordPress. Esto significa que pueden estar sobreutilizados y puede que ni siquiera encajen con el resto de tu tema de WordPress.

Si no desea utilizar un patrón, puede simplemente evitar añadirlo a su contenido. Sin embargo, si tienes un sitio WordPress con varios autores, puede que quieras evitar que todos los usuarios utilicen estos patrones básicos.

Para eliminar todos los patrones del núcleo de WordPress, debe añadir el siguiente código al archivo de funciones de su tema o WPCode:

remove_theme_support( 'core-block-patterns' );

¿Qué ha sido de los bloques reutilizables?

Tanto los patrones de bloques como los bloques reutilizables pretendían resolver un problema similar: ofrecer a los usuarios opciones para añadir fácilmente bloques de uso común.

Para corregirlo, el equipo del núcleo de WordPress fusionó los bloques reutilizables en patrones.

Para tener la misma funcionalidad que los bloques reutilizables, ahora puede utilizar patrones sincronizados. Cuando usted u otros usuarios editen el patrón, esos cambios se guardarán la siguiente vez que se utilice ese patrón.

Preguntas frecuentes

He aquí algunas preguntas frecuentes de nuestros lectores acerca de los patrones de bloques.

¿Dónde puedo encontrar más patrones de bloques?

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

¿Los patrones de bloqueo pueden ralentizar mi sitio web?

No, los patrones de bloques en sí no afectan a la velocidad de tu sitio. Son una forma de estructurar el contenido, pero asegúrese de utilizar imágenes y bloques optimizados para obtener el máximo rendimiento.

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

Recursos adicionales

Si desea personalizar el diseño de su sitio WordPress, los siguientes recursos le resultarán útiles:

• Cómo crear fácilmente un tema de WordPress personalizado (sin código)
• Cómo rediseñar un sitio web en WordPress (Guía para principiantes)
• Problemas comunes del editor de bloques de WordPress y cómo solucionarlos
• Cómo dar estilo al 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 a utilizar 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.

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.