¿Cómo utilizar los patrones de bloques de WordPress? Consejos prácticos y tutoriales en vídeo
Publicado: 2024-03-27Tabla de contenido
WordPress nos mantiene alerta cuando se trata de nuevas funciones y actualizaciones constantes, por lo que es importante mantenerse al día con todas las innovaciones.
Hoy, cubriremos todo lo que vale la pena saber sobre los patrones desde WordPress 6.3, incluido qué son los patrones, cómo crearlos y administrarlos en el Editor de bloques o en el Editor del sitio, y sus principales ventajas. Entonces, ¡entremos en las plantillas de bloques de patrones de WordPress!
En esta publicación:
- una guía paso a paso sobre los patrones de bloques de WordPress.
- mi video tutorial sobre patrones de bloques de WordPress (desplácese hacia abajo).
¿Qué es un patrón en WordPress?
La definición simple de patrones es que son diseños de bloques predefinidos y listos para insertar que puede agregar a las publicaciones y páginas de su sitio y luego ajustarlos para satisfacer sus necesidades utilizando infinitas opciones de personalización.
Esta agrupación de bloques puede ser creada por diseñadores y colaboradores, proporcionada por el autor de su tema, o puede crear un patrón usted mismo. Los patrones como diseños prefabricados te ayudarán a acelerar la creación de la página o plantilla. Pueden constar de un bloque o tener un diseño de página completa.
¿Cómo encontrar patrones en el editor de bloques?
Primero, abrimos una nueva página o publicación donde planeamos agregar un nuevo diseño. De lo contrario, puedes simplemente editar la página o publicación existente.
Luego hacemos clic en este botón de inserción en la esquina superior izquierda de la barra de herramientas de su sitio web. Ahora hay tres pestañas en la parte superior del insertador. La que veremos más de cerca es la pestaña de patrones. Esto nos abre una serie de patrones y todos están organizados en diferentes categorías. Puede encontrar todos los patrones disponibles en todos los patrones. Estoy usando el tema Prime FSE para capturas de pantalla y ejemplos de patrones.
Mis patrones de bloques de WordPress son aquellos creados por los usuarios. Si hace clic en Explorar todos los patrones, le resultará aún más conveniente ver vistas previas más grandes de los diseños y buscar los patrones necesarios.Pero recuerda que es imposible editar, eliminar o crear patrones desde esta pantalla.
Cómo insertar patrones de bloques de WordPress ya preparados
WordPress ofrece algunos patrones integrados como banners, llamadas a la acción, funciones, pies de página y encabezados, galerías, publicaciones, etc. Además de eso, cada tema de bloque de WordPress normalmente proporciona a los usuarios una colección adicional de patrones creados por sus autores.
Puede agregar estos patrones al contenido de su sitio, creando así nuevos diseños y luego personalizándolos fácilmente. Una vez que encuentre un patrón que desee insertar, simplemente haga clic en él y el diseño se agregará a su diseño.
Cómo personalizar un patrón
Para modificar el patrón, elija cualquier bloque colocado dentro del diseño y comience a editar un bloque a la vez como cualquier otro bloque usando la configuración de bloque individual. Para abrir la configuración del bloque, haga clic en el ícono de Configuración en la esquina superior derecha.
Al editar, recomiendo usar una vista de Lista. Los patrones suelen estar formados por numerosos bloques dentro de un bloque contenedor, por ejemplo, unbloque de grupo. Alternativamente, el patrón puede constar de un solo bloque, por lo que depende. La vista de lista es una gran herramienta que ayuda a navegar entre un montón de capas de contenido y grupos de bloques.
Para guardar los cambios después de la personalización, haga clic en el bloque principal de nivel superior para que aparezca su barra de herramientas. Luego navegue hasta el ícono de tres puntos y elija la opción para crear un nuevo patrón. En la ventana emergente, debes elegir el nombre del patrón y asignarlo a una categoría (solo si deseas mantener todos los patrones bien organizados). A continuación, alterna entre el tipo sincronizado o no sincronizado.
Patrones de bloques de WordPress sincronizados y no sincronizados
Un patrón sincronizado actúa de manera similar a los bloques reutilizables. En consecuencia, modificar el elemento sincronizado lo actualiza en todos los lugares donde se utiliza en las páginas o publicaciones del sitio web. Como ya habrás comprendido, la noción de bloques reutilizables ha sido repensada y reetiquetada según patrones sincronizados desde que se lanzó la versión 6.3 de WordPress.
Las ediciones realizadas en el tipo de patrones de bloques de WordPress no sincronizados solo influyen en esa muestra específica. Estas modificaciones no se utilizarán para ningún otro modelo que ya se haya incluido en publicaciones o páginas. Ahora puedes distinguir estos dos tipos de patrones.
Muy a menudo tienes que hacer algunos ajustes al patrón sincronizado; para realizar estos ajustes, primero tendrás que desconectarlo para que vuelva a un bloque normal. También cabe señalar que la desconexión sólo es posible si el patrón sincronizado no está bloqueado.
El símbolo que recuerda a un diamante con otro diamante detrás puede detectar todos los patrones sincronizados. Lo verá en la barra de herramientas del bloque, en la barra lateral de configuración del bloque a la derecha y en la Vista de lista. El área de ruta de navegación también le mostrará el nombre del patrón.
Crea un patrón completamente nuevo usando bloques
Además de personalizar los patrones creados profesionalmente que vienen con el tema, eres libre de crear nuevos patrones de bloques personalizados de WordPress.
Para ello, utilizamos bloques individuales para construir un grupo de bloques con el diseño que desee. Después de terminar el diseño, seleccione su bloque contenedor para que aparezca su barra de herramientas encima de él. Al hacer clic en las elipses, entre otras opciones útiles, podrás elegir la opción de crear un nuevo patrón.
Asígnale un nombre relevante y una categoría, lo cual es útil si tienes muchos patrones que deseas mantener organizados. Cambie la opción Sincronizado que ya mencioné y presione el botón Crear. Ahora ya terminaste.
Cómo incluir un patrón del directorio de patrones
Sin embargo, si carece de habilidades de diseño o simplemente no quiere ensuciarse las manos, puede optar por patrones del directorio de patrones de wordpress.org.
Primero, debe encontrar el patrón que desea agregar y hacer clic en el botón copiar. Después de esto, regrese a su página o publicación, haga clic derecho con el mouse y seleccione pegar. Si es necesario, puede jugar con la configuración para ajustar aún más el diseño y realizar algunos pequeños ajustes para lograr la mejor apariencia.
Cómo crear y administrar patrones en el editor del sitio
Los patrones de bloques de WordPress también se pueden manejar utilizando el Editor del sitio (en caso de que su tema de WordPress lo admita). En la pestaña Apariencia, busque Editor y haga clic en él. Después de esto, tómate tu tiempo mientras la interfaz necesita cargarse y luego, en el lado izquierdo de la pantalla, verás Patrones.
Los patrones generalmente se clasifican en varias categorías de patrones. Por ejemplo, los patrones del autor del tema se guardan en una carpeta separada. Los patrones creados por los usuarios se guardan en otra carpeta llamada "Mis patrones".
Además, al crear un nuevo patrón, puedes crear una nueva categoría en cuestión de clics. Vale la pena mencionar que no podemos editar patrones de complementos y temas, ya que no pueden editarse. La razón de esto es bastante simple: no se guardan en la base de datos. Pero existe una gran solución. Puede hacer clic en el botón de acciones de cada patrón bloqueado y duplicarlo para crear una copia editable de ese patrón. Todos los duplicados se pueden encontrar en "Mis patrones".
Mira mi vídeo para ver cómo funciona:
También hay una herramienta de ayuda en la parte superior derecha de la interfaz, por lo que puede alternar para ordenar todos los patrones, patrones sincronizados o no sincronizados. Al hacer clic en un elemento que pertenece a la categoría "Mis patrones", se abrirá su ventana de vista previa. Este menú le permite editar el patrón haciendo clic en el icono del lápiz o haciendo clic en el patrón mismo. Para cambiar el nombre, duplicar, exportar o eliminar ese tipo de patrón, nuevamente necesitará el botón de acción.
Si tiene muchos patrones, buscar el patrón necesario es fácil usando una barra de búsqueda (un ícono de lupa). La Paleta de comandos es otra gran herramienta para este propósito, sólo necesitas recordar el nombre del patrón que estás buscando.
A partir dela versión 6.3 de WordPress, es posible crear nuevos patrones de sitios web a través del Editor del sitio.
Hay un ícono más (+) al lado del título de la barra lateral de patrones para que puedas hacer clic en él para crear un nuevo patrón.
Cuando haces clic en ese botón, una nueva ventana emergente te permite asignar un nombre a tu patrón, opcionalmente una categoría para él, y especificar el tipo de patrón que crearás, sincronizado o no sincronizado. Después de eso, estará listo para hacer clic en el botón "Crear".
El mismo modal que en el editor de bloques. Ahora estás en el modo de enfoque del patrón y puedes comenzar a crear un nuevo patrón.
Como es habitual, puede constar de un único bloque o de varios bloques. Si decide utilizar varios bloques, deberá colocarlos dentro de un bloque "principal" o de nivel superior, como un grupo, una columna o una fila. De esta forma, todos tus bloques permanecerán juntos. Una vez que esté satisfecho con el resultado, presione el botón Guardar.
Hay dos enlaces en la parte inferior de la sección Patrón del editor del sitio. Uno de ellos se llama "Administrar todos mis patrones". Después de hacer clic en él, serás redirigido a una vista de administrador de WordPress con una tabla que contiene tus patrones. Esta vista puede resultar ventajosa si desea importar, exportar patrones y aplicar acciones masivas. Desde aquí, también es posible editar los patrones de bloques de WordPress.
Si creó un patrón en un sitio web y decidió usarlo en otro sitio, coloque el mouse sobre el patrón que desea exportar y seleccione la opción "Exportar como JSON". Es posible que también desee importar un patrón; para ello, seleccione el botón "Importar desde JSON" y elija el archivo JSON de su patrón desde su PC. También hay un botón para crear un nuevo patrón.
Para concluir sobre los patrones de bloques que ofrece WordPress
En su camino hacia el dominio de WordPress, aprender a utilizar patrones es un paso esencial. WordPress 6.3 ha hecho que trabajar con patrones sea aún más fluido y eficiente.
Los usuarios ahora pueden crear patrones directamente desde el editor de bloques y desde el editor de sitio. Puedes crear diseños atractivos por tu cuenta. De lo contrario, opte por patrones preparados profesionalmente que se puedan insertar con un solo clic. Pueden ser patrones del directorio de patrones de WordPress o de la biblioteca de patrones de bloques de WordPress del tema.
Los patrones proporcionan una forma sencilla y que ahorra tiempo de trabajar con el contenido de su sitio web. Dependiendo del tipo de patrón, puede resultar útil repetir el mismo diseño, contenido o ambos. Por lo tanto, recomendamos encarecidamente utilizar patrones de bloques de WordPress para una experiencia de creación de sitios sin esfuerzo.
¿Alguna vez ha utilizado patrones de bloques al crear su sitio web? En caso afirmativo, comparte con nosotros tu experiencia en la sección de comentarios.
Preguntas más frecuentes
¿Qué son los patrones de bloqueo de WordPress y cómo pueden ayudarme?
Los patrones de bloques de WordPress son diseños prediseñados compuestos por bloques que puede insertar fácilmente en las páginas y publicaciones de su sitio web. Vienen en varias categorías, como pancartas, llamados a la acción, encabezados y más. Estos patrones le ahorran tiempo al proporcionar diseños listos para usar que puede personalizar para satisfacer sus necesidades.
¿Cómo puedo agregar un patrón de bloque a mi sitio de WordPress?
¿Puedo crear mis propios patrones de bloques de WordPress?
¡Sí! Puede crear sus propios patrones de bloques personalizados utilizando bloques individuales. Simplemente cree el diseño que desee con bloques, luego seleccione el bloque contenedor y elija "Crear nuevo patrón" en el menú de opciones. Puedes darle un nombre a tu patrón, asignarlo a una categoría y elegir si está sincronizado o no. Los patrones sincronizados se actualizan en todos los lugares donde se usan en su sitio, mientras que los patrones no sincronizados solo se actualizan en la página o publicación específica donde los usa.