24 min

Mejora tu web con los bloques de Gutenberg Diseño web

    • Empresa

Hoy tenemos un programa super interesante, en el que te voy a contar como puedes mejorar el diseño de tu web de una forma muy sencilla, pero antes te recomiendo que te apuntes a mi newsletter, dicen que de vez en cuando comparto algo interesante…¡Qué sabe la gente! Aunque si no te apuntas nunca lo sabrás… pampua.es/regalo







¿Que es Gutenberg?







Como ya sabrás, y si no, yo te lo cuento, a finales de 2018 se lanzó WordPress 5.0 que trajo consigo el editor Gutenberg, basado en bloques. Con el nuevo editor, cada trocito de contenido es un bloque. Un párrafo, una imagen, un vídeo de YouTube, una tabla, etc., es un bloque separado. Este nuevo paradigma de edición nos abre nuevas posibilidades de diseño para la creación de páginas y entradas.







Los bloques de Gutenberg







De fábrica, Gutenberg te viene con un conjunto de bloques bastante completo que los podríamos dividir en:







* Bloques de texto para crear párrafos, listas, encabezados, tablas y botones.* Bloques multimedia para insertar imágenes, galerías de imágenes, audios, vídeos, objetos incrustados y shortcodes.* Bloques para insertar citas y versos.* Bloques de creación de código y HTML.* Bloques de formato de columnas, separadores, espaciadores…







Pero Gutenberg no los agrupa por las categorías que te he comentado. Lo que hace es que primero te muestra los que considera bloques comunes:







Bloques comunes del editor Gutenberg







Luego, los bloques que te permiten crear formatos distintos:







Bloques de formatos







Bloques para crear elementos de diseño:







Elementos de diseño







Bloques para crear widgets:







Bloques de widgets







Y finalmente, los bloques para incrustar elementos externos:







Algunos de los bloques para incrustrar elementos externos, pero hay muchos más…







De partida te parece que tienes un montón de bloques, pero enseguida te das cuenta de que te gustaría incluso tener más posibilidades. Y es por este motivo que han aparecido plugins para WordPress que te proporcionan nuevos bloques que te facilitan el diseño del contenido de entradas y páginas. Estos son los que te recomiendo (pero no te los instales todos de golpe; mira a ver cuál se ajusta mejor a tus necesidades):







Los 9 plugins que te recomiendo















1.- Gutenberg Blocks







Este es uno de los que más me gusta, te proporciona 22 nuevos bloques que vas a poder personalizar de manera muy sencilla. No tiene nada que envidiar a Elementor o otros constructores visuales.







* Encabezado Avanzado: El bloque Encabezado Avanzado le permite agregar una combinación de un encabezado y un subencabezado con un separador en medio. Puede seleccionar la etiqueta de encabezado para el encabezado y administrar otras configuraciones y personalizaciones también.* Columnas Avanzadas: Este bloque Columnas avanzadas ofrece opciones avanzadas para insertar varias columnas en una sola fila. Dispone de varias opciones de personalización para gestionar el aspecto de todo el bloque y las columnas individuales de la página con divisores de forma avanzados, anchos variables, etc.* Cita: Este bloque de cita le permite mostrar el texto de la tabla de citas en un formato de moda y de diseño con muchas opciones d...

Hoy tenemos un programa super interesante, en el que te voy a contar como puedes mejorar el diseño de tu web de una forma muy sencilla, pero antes te recomiendo que te apuntes a mi newsletter, dicen que de vez en cuando comparto algo interesante…¡Qué sabe la gente! Aunque si no te apuntas nunca lo sabrás… pampua.es/regalo







¿Que es Gutenberg?







Como ya sabrás, y si no, yo te lo cuento, a finales de 2018 se lanzó WordPress 5.0 que trajo consigo el editor Gutenberg, basado en bloques. Con el nuevo editor, cada trocito de contenido es un bloque. Un párrafo, una imagen, un vídeo de YouTube, una tabla, etc., es un bloque separado. Este nuevo paradigma de edición nos abre nuevas posibilidades de diseño para la creación de páginas y entradas.







Los bloques de Gutenberg







De fábrica, Gutenberg te viene con un conjunto de bloques bastante completo que los podríamos dividir en:







* Bloques de texto para crear párrafos, listas, encabezados, tablas y botones.* Bloques multimedia para insertar imágenes, galerías de imágenes, audios, vídeos, objetos incrustados y shortcodes.* Bloques para insertar citas y versos.* Bloques de creación de código y HTML.* Bloques de formato de columnas, separadores, espaciadores…







Pero Gutenberg no los agrupa por las categorías que te he comentado. Lo que hace es que primero te muestra los que considera bloques comunes:







Bloques comunes del editor Gutenberg







Luego, los bloques que te permiten crear formatos distintos:







Bloques de formatos







Bloques para crear elementos de diseño:







Elementos de diseño







Bloques para crear widgets:







Bloques de widgets







Y finalmente, los bloques para incrustar elementos externos:







Algunos de los bloques para incrustrar elementos externos, pero hay muchos más…







De partida te parece que tienes un montón de bloques, pero enseguida te das cuenta de que te gustaría incluso tener más posibilidades. Y es por este motivo que han aparecido plugins para WordPress que te proporcionan nuevos bloques que te facilitan el diseño del contenido de entradas y páginas. Estos son los que te recomiendo (pero no te los instales todos de golpe; mira a ver cuál se ajusta mejor a tus necesidades):







Los 9 plugins que te recomiendo















1.- Gutenberg Blocks







Este es uno de los que más me gusta, te proporciona 22 nuevos bloques que vas a poder personalizar de manera muy sencilla. No tiene nada que envidiar a Elementor o otros constructores visuales.







* Encabezado Avanzado: El bloque Encabezado Avanzado le permite agregar una combinación de un encabezado y un subencabezado con un separador en medio. Puede seleccionar la etiqueta de encabezado para el encabezado y administrar otras configuraciones y personalizaciones también.* Columnas Avanzadas: Este bloque Columnas avanzadas ofrece opciones avanzadas para insertar varias columnas en una sola fila. Dispone de varias opciones de personalización para gestionar el aspecto de todo el bloque y las columnas individuales de la página con divisores de forma avanzados, anchos variables, etc.* Cita: Este bloque de cita le permite mostrar el texto de la tabla de citas en un formato de moda y de diseño con muchas opciones d...

24 min