¿Qué son los patrones de bloques de WordPress y cómo usarlos?

Publicado: 2022-05-20

Prefacio
¿Por qué debería preocuparse por los patrones de bloques?
¿Qué son los patrones de bloque en WordPress?
¿Cuáles son las ventajas de los patrones de bloques?
- Velocidad de desarrollo
- Diseño unico
- Base de código confiable
- Reutilización
- Libertad creativa
Cómo usar patrones de bloques
- Uso de la biblioteca de patrones de bloques del editor de Gutenberg
- Uso del directorio de bloques de WordPress
- Uso de patrones de bloques basados ​​en temas
Cómo crear patrones de bloques
Conclusión

Hace un par de años, WordPress introdujo una nueva forma de crear páginas web. Esta innovación se conoce como Gutenberg , también conocido como el editor de bloques de WordPress o simplemente el editor de WordPress. Gutenberg proporciona una forma sencilla para que cualquiera pueda crear contenido enriquecido de una manera fácil. Lo hace con los bloques de WordPress y los patrones de bloques de WordPress.

Los bloques son la piedra angular del poder de Gutenberg. Al igual que el amado juguete de los niños, los bloques de WordPress le permiten construir una página apilándolos de la forma que desee. Puede eliminar los que no desea y es fácil comenzar de nuevo si no le gusta lo que ha construido.

Puede usar bloques para agregar videos, imágenes y diseños creativos a su sitio sin conocimientos técnicos o de codificación. Aún más fácil, puede usar una colección de bloques, conocida como patrones de bloques, para darle a su sitio un diseño listo para usar. ¡Personaliza estos patrones de bloques con tu contenido y listo!

Hoy, el proyecto Gutenberg ha evolucionado a un nivel completamente nuevo. A medida que continúa evolucionando, está dando paso al próximo Editor de sitio completo, que viene con la actualización de WordPress 6.0 a finales de este mes, lo que le brinda una forma de aplicar Bloques a todas las partes de su sitio en lugar de solo publicaciones y páginas. ¡Pronto será aún más fácil construir sitios increíbles y editarlos con el tiempo! Hablaremos más sobre esto en una próxima publicación.

Por ahora, sin embargo, hablemos de los patrones de bloques de WordPress, qué hacen y por qué son importantes para ti...

¿Por qué debería preocuparse por los patrones de bloques?

Incluso los sitios más atractivos necesitan actualizaciones de vez en cuando, pero mantenerse al día con las demandas cada vez mayores de los negocios en línea le presenta un problema. Debe realizar los cambios rápidamente, incluso si no sabe codificar.

Si comienza desde cero, terminará en una situación similar. Necesita armar su sitio rápidamente. Como propietario de un sitio, desea concentrarse en crear contenido y ganar dinero, y definitivamente no desea perder el tiempo lidiando con el código. Sin embargo, crear un nuevo diseño puede llevar días o incluso semanas.

Ahí es donde entran los patrones de bloques: te permiten construir tu sitio de una manera rápida y hermosa. Puede probar diferentes combinaciones de bloques para ver qué funciona mejor para usted. Como descubrirá, hay cientos de ideas disponibles para usted.

Por otro lado, si no usa patrones de bloques, es posible que se vea obligado a aprender a codificar. Incluso si usa un tema premium de WordPress, tendrá que editar el código de back-end para satisfacer sus necesidades. El tiempo necesario para hacer modificaciones puede ser más de lo que puede pagar y su presupuesto aumentará si contrata a un profesional para que se encargue de esto por usted.

Los patrones de bloques eliminan gran parte de ese dolor: editar su sitio se vuelve (nos atrevemos a decirlo) muy divertido. Puede elegir varios patrones, probar varias combinaciones y rápidamente tener un sitio web en funcionamiento que sorprenda a sus visitantes.

¿Qué son los patrones de bloque en WordPress?

Los patrones de bloques de WordPress son combinaciones preconstruidas de bloques que puede modificar como desee. Puede tener un patrón que represente una página web completa o puede seleccionar uno que represente una sección de su sitio, como un menú de iconos sociales. No necesita saber cómo codificar para usarlos y, gracias a las funciones de edición de Gutenberg, tiene control sobre cómo se ve el patrón al final.

¿Cuáles son las ventajas de los patrones de bloques?

Gutenberg y los patrones de bloques son conceptos relativamente nuevos. Tradicionalmente, los sitios de WordPress se crean con creadores de sitios o creando una plantilla desde cero. Si bien esos enfoques funcionan muy bien, a menudo requieren una amplia capacitación o experiencia en codificación para obtener los mejores resultados. Muchos usuarios de WordPress también se quejan de que los creadores de sitios crean páginas torpes que tardan mucho en cargarse.

Los patrones de bloques vienen con un nuevo enfoque y ventajas únicas. Son una ventaja tanto para principiantes como para diseñadores web experimentados. Examinemos los beneficios más críticos.

Velocidad de desarrollo

La ventaja más importante es la velocidad a la que puede crear un sitio sin conocimientos de codificación. Dado que los patrones de bloques están prefabricados, solo tiene que elegir los que desee. Colóquelos en la página y reorganícelos hasta que esté satisfecho con el aspecto de su sitio.

Los patrones de bloques permiten una fácil personalización. Puede usar sus imágenes preferidas y aplicar colores que coincidan con su marca. ¡Tendrá un sitio web en funcionamiento listo para impulsar su negocio en un par de días, incluso horas!

Diseño unico

Este beneficio es importante para cualquier propietario de sitio que no quiera un diseño de sitio web estándar. Puede reorganizar los patrones de bloques según sus necesidades específicas. Elige, mezcla y reorganiza los patrones de bloques hasta que encuentres la combinación que te gusta. Fácilmente terminará con un sitio único que se destaca de la competencia.

Base de código confiable

Lo más probable es que no quieras perder tu tiempo codificando. Aún así, desea confiar en que su sitio es sólido. Su sitio debe verse bien en todos los dispositivos, con diferentes tamaños de pantalla. Los patrones de bloques resuelven este problema por diseño.

La mayoría de los patrones provienen de desarrolladores apasionados por su trabajo. Estos profesionales valoran su reputación. Entonces, cuando elige un patrón de bloque, puede relajarse sabiendo que está bien codificado y probado.

Descubrirá que los patrones también tienen beneficios de velocidad y rendimiento. El tiempo de carga de su sitio afecta su SEO, por lo que esto puede tener un impacto en su tráfico. En particular, los patrones de bloques tienden a ser más ligeros y están mejor optimizados que muchos temas creados con creadores de sitios populares.

Reutilización

Otro aspecto divertido de usar patrones de bloques es que puedes reutilizarlos. Si tiene diferentes sitios web, esta característica es muy útil. También puede reutilizar sus patrones en diferentes páginas de su sitio.

Si crea sitios para otros, el uso de patrones de bloques podría ser la diferencia entre cumplir con una fecha límite y perder un cliente. Guarde sus patrones favoritos y luego personalícelos para cada sitio que construya.

Libertad creativa

Uno de los beneficios más atractivos de los patrones de bloques es la libertad creativa que obtienes. Un sitio creado a partir de una plantilla te obliga a permanecer dentro de un concepto. Para las personas a las que les gusta expresarse, eso puede ser molesto. Pero, con los patrones de bloques, puedes explorar diferentes ideas con facilidad.

Todo lo que tiene que hacer es desplazarse por las muchas bibliotecas de patrones enriquecidas disponibles para usted. Puede elegir entre opciones que se ajusten a cada presupuesto; muchos patrones son gratis. La mejor parte es que no tienes que comprometerte con ninguna combinación. Si cambia de opinión, puede explorar una nueva idea con solo unos pocos clics.

Puede encontrar patrones de bloques para cualquier sección de su sitio; menús, publicaciones destacadas, pies de página y encabezados, tablas de precios y más. Te sorprenderá lo que puedes hacer por ti mismo, sin necesidad de conocimientos técnicos.

Cómo usar patrones de bloques

Uso de la biblioteca de patrones de bloques del editor de Gutenberg

La forma más fácil es acceder a la biblioteca de patrones de bloques en su editor de Gutenberg. Aquí están los pasos básicos.

  • Haga clic en el botón azul "más" en la esquina superior derecha de su editor.
    Patrones de bloques de WordPress Toggle Block Inserter
  • Luego, haga clic en la pestaña "Patrones". Verá una selección de patrones entre los que puede elegir.
    Seleccione la pestaña Patrones
  • Haga clic en el patrón que desee y aparecerá en el editor.
    Editar patrón de bloque
  • Ahora puede personalizar el patrón ajustándolo para que se ajuste a sus necesidades.
    Editar patrón de bloque

Uso del directorio de bloques de WordPress

También puede visitar el directorio de patrones de bloques de WordPress en wordpress.org/patterns. Este directorio contiene una extensa colección de patrones que puede comenzar a usar de inmediato.
Directorio de patrones de bloques de WordPress

Los patrones se organizan en función de la funcionalidad que proporcionan. Puede encontrar diseños de página, galerías, diseños basados ​​en videos y más. Puedes ver cuáles son los más recientes. O, si lo prefieres, puedes ordenarlos por popularidad.

También hay una lista seleccionada de patrones destacados. Esta es una selección de algunos de los mejores diseños que puedes encontrar. Todos ellos son de uso gratuito y se pueden utilizar en sitios comerciales.

Una vez que haya seleccionado un patrón en la biblioteca, desplace el cursor sobre la imagen de la pantalla. Verá un botón que dice "Copiar". Haga clic en él y luego péguelo en el Editor de Gutenberg. Si tiene experiencia con la codificación, también puede pegarlo en su editor de código favorito para realizar cambios.

Alternativamente, haga clic en la miniatura para obtener una vista previa del patrón. Esto le mostrará cómo se ve el diseño en una página web. Verá un botón azul que le permite copiar el patrón para usarlo en su diseño. Una vez que hayas copiado el patrón, abre tu editor de Gutenberg. Haga clic para indicar dónde desea que aparezca el patrón. Pégalo y podrás modificarlo a tu gusto.

Uso de patrones de bloques basados ​​en temas

Algunos temas le dan acceso a colecciones exclusivas de patrones. Estos pueden ser gratuitos o de pago. Cada tema difiere ligeramente en cómo se agregan los patrones a su sitio. En general, debería ver una opción para navegar a través de los diseños. A continuación, puede importar ese patrón que desee en su página.

Cómo crear patrones de bloques

Si está preparado para la tarea, cree un patrón de bloque personalizado. Un diseño personalizado es el mejor enfoque si tiene una idea única que no está disponible en ninguna biblioteca. Esta opción también tiene sentido si te gusta crear algo que es solo tuyo.

El primer paso para crear un patrón de bloques es decidir qué propósito o función tendrá. ¿Es este un patrón que usará en todas sus páginas? ¿Necesita un diseño que usará para mostrar sus productos en su sitio? Tómese su tiempo para averiguarlo y escribir sus pensamientos.

Luego, desea tener un boceto de lo que irá en el patrón en una hoja de papel. No te preocupes por lo bien que se ve. No tienes que crear una obra maestra artística. Un simple diseño de lo que quieres es más que suficiente. Lo que importa es que tengas claro lo que estás tratando de crear. Este paso también le ahorrará tiempo.

Soporte de WordPress 24/7

de verdaderos expertos de WordPress

APRENDE MÁS

El paso final es crear el código para su patrón de bloque. La forma más fácil de realizar el proceso es usar un complemento. Vaya al repositorio de complementos de WordPress. Escriba la palabra clave "patrones de bloque" como su frase de búsqueda. Verá varios complementos que le permiten crear patrones. Pruebe algunos de ellos para ver cuál se ajusta a su flujo de trabajo preferido.

Si su idea es demasiado complicada para que la maneje un complemento, aún puede crear su patrón de bloque. El desafío es que si no está familiarizado con la codificación, deberá contratar a alguien para que lo ayude con eso. Sin embargo, aún puede proponer sus propias ideas e instruir a su desarrollador sobre lo que desea. El Codex de WordPress proporciona documentación detallada sobre cómo codificar un patrón de bloque.

Una vez que termine de crear su patrón, puede compartirlo con la comunidad haciéndolo parte de la biblioteca de patrones de bloques de WordPress. Esta es una gran manera de contribuir. Inicie sesión en su cuenta de WorPress.org y siga las instrucciones si desea compartir su patrón de bloqueo.

Conclusión

Los patrones de bloques en WordPress han hecho que la creación de sitios sea accesible para personas de todos los niveles. No necesita mucho dinero para tener un sitio que se destaque entre la competencia. Su sitio tiene un diseño que es único más rápido que nunca. También ganará la confianza de que está trabajando con un código creado específicamente para el ecosistema de WordPress. Los patrones de bloques seguirán evolucionando. Entonces, cuando los usa, puede ser parte del progreso natural de esta tecnología.

Gracias a los patrones de bloques de WordPress, puedes concentrarte en crear contenido. ¡Ya no perderá el sueño preocupándose por cómo va a construir su sitio!

Todo lo que tiene que hacer es seleccionar un buen host de WordPress, configurar su sitio, seleccionar el tema y comenzar a crear las páginas más rápido que nunca con Block Patterns.

Como siguiente paso, date un tiempo para experimentar. Juega con las ideas y ve cuál se adapta a tus gustos. Si no está listo para comenzar a crear su sitio, explore algunas de las bibliotecas de patrones de bloques. Desplácese por los diseños y vea lo que está disponible para usted. Es solo cuestión de tiempo hasta que te sientas inspirado.

Claro, puede haber una curva de aprendizaje si este concepto es nuevo para usted. Eso es perfectamente normal. La buena noticia es que no hay reglas estrictas y rápidas. ¡Usted decide cómo quiere usar los patrones de bloques de una manera que se adapte a sus necesidades y puede comenzar hoy mismo!

Rendimiento web

¡El tiempo de carga importa! ¿Sabes qué tan rápido es tu sitio?

APRENDE MÁS