¿Cómo crear y usar patrones de bloques en WordPress?

Publicado: 2023-08-08

Una vez. Dos veces. Diez veces. cincuenta veces Crear el mismo contenido en docenas y docenas de publicaciones diferentes puede volverse tedioso rápidamente. Y, sobre todo, requiere mucho tiempo. Consume mucho tiempo.

Puede evitar esta pérdida de tiempo y energía con solo unos pocos clics, gracias a una característica útil: los patrones de bloqueo de WordPress .

Una mujer levanta los brazos y aplaude.
Sí, lo sé, es una locura.

¿Quiere crear un pequeño inserto de texto para integrarlo en todas las publicaciones de su blog? Esta característica puede hacer tu vida mucho más fácil. Lo mismo ocurre si desea agregar una llamada a la acción o una tabla personalizada a todas sus páginas.

¿Estás emocionado? Al final de este artículo, sabrá cómo crear, personalizar y administrar un patrón de bloques como un profesional . ¿Listo para comenzar? Sigue la guía.

Descripción general

  1. ¿Qué es un patrón de bloque en WordPress?
    1. ¿Para qué se puede utilizar un patrón sincronizado?
      1. Cómo crear un patrón de bloque en WordPress
        1. Cómo usar patrones de bloques en WordPress
          1. ¿Cómo administrar sus patrones de bloques en el Editor del sitio?
            1. Conclusión

              ¡Tus mejores proyectos de WordPress necesitan el mejor anfitrión!

              WPMarmite recomienda Bluehost: gran rendimiento, gran soporte. Todo lo que necesitas para un gran comienzo.

              Prueba Bluehost
              CTA Bluehost WPMarmite

              ¿Qué es un patrón de bloque en WordPress?

              Un patrón de bloque es un conjunto de bloques (p. ej., un bloque de título + un bloque de imagen + un bloque de botón) creado con el editor de contenido de WordPress (Gutenberg).

              Una vez que haya guardado el contenido y el formato en la opción "Crear patrón", puede elegir sincronizar este conjunto de bloques para reutilizarlos en las diversas publicaciones de su sitio : publicaciones, páginas y otros tipos de publicaciones personalizadas, a través de un simple cambio.

              Si elige sincronizarlo, cuando lo modifique, el contenido de este patrón se actualizará automáticamente donde sea que esté integrado en su sitio.

              Un bloque de Gutenberg es un contenedor que ofrece el editor de contenido de WordPress (Gutenberg). Se puede usar para mostrar texto, medios, widgets y contenido incrustado. También se puede utilizar para crear estructuras y personalizar el estilo de sus publicaciones.

              Los bloques reutilizables, disponibles antes del lanzamiento de la versión 6.3 de WordPress en agosto de 2023, se han renombrado como "patrones sincronizados". Puede encontrarlos en el insertador de bloques, en la pestaña "Patrones sincronizados", o en el Editor del sitio, en el menú "Patrones".
              Las partes de la plantilla también se han convertido en patrones desde WordPress 6.3 y se pueden encontrar en el Editor del sitio (Apariencia > Editor), en el menú "Patrones".

              Un enfoque en patrones sincronizados

              Antes de entrar en los detalles de la creación de un patrón de bloque en WordPress, echemos un vistazo a algunos de los detalles de los patrones sincronizados:

              • La función de "patrones sincronizados" ha estado presente de forma nativa en el editor de contenido de WordPress desde el lanzamiento de la versión 6.3 en agosto de 2023 , cuando reemplazó la antigua función de "bloques reutilizables".
              • Un patrón sincronizado significa que no tiene que volver a crear contenido idéntico para todo su sitio cada vez.
              • Los patrones sincronizados se utilizan con mayor frecuencia para modificar bloques ubicados en el área de contenido principal de sus publicaciones.
              • El contenido de un patrón sincronizado se sincroniza en todo su sitio de WordPress . Si modifica un patrón sincronizado en un lugar de su sitio (por ejemplo, en una publicación de blog), la modificación se reflejará en todas las demás publicaciones que contengan su patrón sincronizado.
              • Se puede crear y guardar un patrón sincronizado con solo unos pocos clics , directamente desde el editor de contenido de WordPress o la interfaz del Editor del sitio (volveremos a esto más adelante).

              ¿Sabías? Puede copiar y pegar patrones de bloques en su sitio desde el directorio oficial de WordPress.

              Directorio de patrones de bloques de WordPress.
              Algunos de los patrones de bloques disponibles en el directorio oficial de WordPress

              ¿Para qué se puede utilizar un patrón sincronizado?

              La función de patrón sincronizado de WordPress (inicialmente llamado bloque reutilizable) será de su interés si está acostumbrado a usar el mismo contenido en varias páginas o publicaciones en su sitio.

              Gracias a esta función, no necesitará volver a crear un bloque cada vez que agregue un nuevo tipo de contenido.

              Para ayudarlo a ver las cosas con mayor claridad, aquí hay una serie de situaciones en las que el uso de un patrón sincronizado tiene sentido. Piénselo si necesita agregar:

              • Un inserto de "Autor" al final de todas las publicaciones de su blog, con una pequeña foto suya y un breve texto introductorio
              • Enlaces a tus redes sociales al final de las publicaciones de tu blog, para animar a tus lectores a seguirte en estas plataformas
              • Llamadas a la acción (CTA) para alentar a sus visitantes a realizar una acción específica, como suscribirse a su boletín informativo o descargar un libro blanco
              • Un formulario de contacto en varios lugares estratégicos, además de su página de Contacto. Esto podría integrarse en una página de Servicios y/o Acerca de, por ejemplo.
              • Un formulario de reserva u horario de apertura de tu negocio en tus publicaciones
              • Insertos que contienen enlaces de afiliados para promocionar productos y servicios que recomienda a sus lectores

              ¿Es eso bueno para ti? ¡Entonces sigamos con el plato principal!

              Si usa Elementor , debe saber que este creador de páginas ofrece un complemento similar a la función de "patrón sincronizado" que ofrece WordPress. Llamado Bloques de Elementor para Gutenberg , este complemento le permite agregar un conjunto de widgets ensamblados con Elementor directamente a una página o artículo .
              En WPMarmite, lo usamos para nuestras diversas llamadas a la acción, como esta para promocionar Elementor, precisamente. Échale un vistazo :

              Construye tu sitio web con Elementor

              Diseñe fácilmente la apariencia de su sitio web de WordPress con el famoso creador de páginas.

              Prueba Elementor
              Icono de Elementor CTA

              Cómo crear un patrón de bloque en WordPress

              Este es el método paso a paso para crear un patrón de bloques con solo unos pocos clics, de manera muy simple.

              A los efectos de este tutorial, utilizaremos un ejemplo práctico: la creación de un inserto de llamada a la acción.

              Paso 1: Crear o modificar un contenido

              Para comenzar, agregue una nueva publicación yendo a Publicaciones > Agregar nuevo (también puede modificar la publicación o la página de su elección).

              Asigne un título a su publicación y luego agregue el texto de su elección.

              Agregar una nueva publicación en WordPress.

              Paso 2: crea un patrón de bloque de WordPress

              Para crear nuestro inserto de llamada a la acción, necesitamos fusionar varios bloques en uno. Para ello, utilizaremos el bloque “Cubierta” , que permite añadir fácilmente una imagen de fondo.

              No obstante, también puedes optar por el bloque “Grupo”, que te permitirá agrupar varios bloques en un mismo contenedor.

              Agregue el bloque "Cubierta" usando el insertador de bloques, en la parte superior izquierda de su página:

              Crear patrones de bloques desde el insertador de bloques en una publicación.

              Haga clic en el botón "Cargar" para agregar la imagen de su elección al fondo. Por ejemplo, encontré una imagen en Unsplash, un banco de imágenes libres de regalías.

              Subir una imagen al bloque "Cubierta" en WordPress.

              Continúe agregando el título de su elección, luego personalícelo yendo a la configuración del bloque:

              Las opciones de personalización del bloque "Cubierta".

              Ahora simplemente necesita agregar un bloque "Botón" dentro de su bloque "Banner". Para hacer eso, haga clic en cualquier lugar dentro del bloque "Banner" para que aparezca un insertador y agregue el bloque "Botón".

              Personaliza este bloque tal como personalizaste el título. Por ejemplo, puede cambiar el tamaño, el color de fondo, los márgenes, los bordes, etc.

              Aquí está el resultado final con el que terminarás:

              Creación de un patrón de bloque utilizando el bloque "Cubierta".

              Por supuesto, puede crear un patrón de bloque hecho de un solo bloque. El proceso es exactamente el mismo para un patrón de bloque compuesto por múltiples bloques, excepto que esta vez, agrega el bloque que desea (por ejemplo, bloque "Párrafo", bloque "Tabla", bloque "imagen", etc.).

              Paso 3: Guarde el patrón de bloques

              Cuando esté satisfecho con el resultado, haga clic en el bloque "Banner" para que aparezca la configuración del bloque (los tres pequeños puntos).

              Haz clic en él y elige la opción “Crear patrón”. Nombre el bloque (por ejemplo, "Bloque CTA"), luego haga clic en "Guardar":

              Guardar un patrón de bloque en WordPress.

              Bravo, tu patrón de bloques de WordPress ya está guardado y listo para ser utilizado en las publicaciones que elijas.

              Para su información, existe otro método para agregar patrones de bloques a su sitio de WordPress desde el editor de contenido. Cuando edite una publicación o página, haga clic en las opciones de página (tres pequeños puntos) en la esquina superior derecha. Luego, en la sección "Herramientas", elige "Administrar patrones". En la interfaz que se abre, cree su patrón haciendo clic en el botón "Crear patrón":

              Gestión de patrones en WordPress.

              Paso 4: agregue un patrón de bloque a una publicación

              Ahora, imagine que desea agregar su patrón de bloque al final de su nueva publicación de blog.

              Crea una nueva publicación (ya sabes qué hacer). Elija el lugar donde le gustaría agregar su patrón de bloques. Puede colocarlo fácilmente al final de su publicación, o incluso en medio del contenido.

              Luego, vaya al insertador de bloques. En la pestaña que representa dos diamantes superpuestos (número 2 en la captura de pantalla a continuación), encontrará sus patrones sincronizados (inicialmente llamados bloques reutilizables), mientras que la pestaña "Patrones" (número 1) muestra el resto de los patrones disponibles.

              El editor de contenido de WordPress tiene una pestaña para insertar patrones de bloques.

              Aquí es donde encontrará los patrones (no sincronizados) que ha creado en la primera categoría: "Mis patrones". Las siguientes categorías contienen patrones listos para usar, divididos en diferentes categorías: Texto, Galería, Encabezados, etc.

              Simplemente haga clic en el patrón de su elección para agregarlo a su contenido. Si le gusta esta función de patrón y encuentra que se adapta a sus necesidades, pronto tendrá una lista que puede ser bastante importante.

              Entonces será útil administrar sus patrones de bloques a medida que avanza, para organizarlos lo mejor que pueda.

              Te cuento más en la siguiente sección.

              Únase a los suscriptores de WPMarmite

              Obtenga las últimas publicaciones de WPMarmite (y también recursos exclusivos).

              SUSCRÍBASE AHORA
              Boletín en inglés de WPMarmite

              Cómo usar patrones de bloques en WordPress

              ¿Cómo administrar sus patrones de bloqueo en la administración de WordPress?

              Para administrar mejor sus patrones de bloques, vaya a la página "Patrones". Para llegar a esta pantalla, puede ir al editor de contenido y hacer clic en el botón "Administrar mis patrones", en la pestaña "Patrones sincronizados" (inicialmente llamado "Bloques reutilizables") del insertador de bloques:

              Puede administrar sus patrones de WordPress desde el insertador de bloques.

              A partir de ahí, llega a una lista de todos los patrones de bloques que ha creado . En particular, se enumeran los siguientes elementos:

              • El nombre del patrón de bloque.
              • La fecha en que fue creado

              Tenga en cuenta que también puede elegir mostrar la fecha o no, así como elegir la cantidad de elementos por página, haciendo clic en "Opciones de pantalla":

              Las opciones de pantalla en el menú de gestión de Patrones.

              Puede ver las acciones que se pueden realizar en cada patrón al pasar el mouse sobre el nombre del patrón que desea modificar. Puede:

              • Modificar el patrón
              • Eliminarlo (Papelera)
              • Exportarlo como un archivo JSON , para importarlo a otro sitio, por ejemplo

              Por último, al seleccionar varios patrones de bloques en WordPress, puede realizar acciones masivas. Por ejemplo, puede eliminar varios patrones de bloques a la vez o editarlos.

              Se pueden realizar acciones masivas en varios patrones de bloques a la vez.

              Esta última acción te permite modificar el estado de los patrones de bloques, por ejemplo (público, privado, pendiente de revisión o borrador).

              ¿Cómo administrar sus patrones de bloques en el Editor del sitio?

              También puede administrar todos sus patrones en el Editor del sitio (en el menú Apariencia > Editor ), en "Patrones".

              Se dividen en dos categorías distintas: "Synced" y "Standard".

              Puede administrar sus patrones de bloque desde el editor de sitios de WordPress.

              Desde esta interfaz, puede hacer clic en los tres pequeños puntos debajo de su patrón de bloques para:

              • cambiarle el nombre
              • duplicarlo
              • bórralo

              Para modificar el contenido, haga clic en su patrón y realice los ajustes necesarios.

              Conclusión

              En esta publicación, aprendiste sobre la función de patrón de bloque de WordPress.

              Ahora sabe cómo crear y administrar patrones de bloques en su sitio. Utilice este conocimiento si necesita crear secciones de contenido idéntico en varios lugares de su sitio .

              Ganará un tiempo precioso, al tiempo que garantiza la uniformidad en la presentación visual de sus publicaciones.

              ¿Necesitas crear #patrones de bloque en tu sitio de #WordPress? ¡Esta guía completa te enseñará todo al respecto!

              Haz clic para twittear

              ¿Utiliza patrones de bloque en su sitio de WordPress? Comparta sus comentarios y mejores prácticas con nosotros dejando un comentario.