¿Qué son los bloques de WordPress y cómo utilizarlos en tu web?

Los bloques de WordPress ofrecen una nueva manera de personalizar el contenido y el diseño de un sitio web. Con estos bloques, los usuarios de WordPress pueden agregar y editar elementos como párrafos, imágenes y widgets.

Hay más de 90 bloques predeterminados disponibles en la versión actual de WordPress. Estos abarcan bloques de texto, medios, widgets y elementos de incrustación.

Además, el editor de bloques Gutenberg tiene la función de arrastrar y soltar, y una mejor previsualización del contenido que el editor clásico.

Como resultado, este nuevo enfoque de edición basado en bloques proporciona una experiencia más fácil de usar y una mayor variedad de opciones de personalización que el antiguo editor. Si quieres ampliar la funcionalidad del editor basado en bloques, instalar un plugin de bloques de WordPress añadirá aún más opciones de bloques de contenido.

Este artículo te explicará todo lo que necesitas saber sobre los bloques y cómo utilizar el nuevo editor de bloques de WordPress. También enumeraremos 10 plugins para ampliar la colección de bloques y así tener más posibilidades de personalización.

¿Por qué utilizar los bloques de WordPress?

El antiguo editor de WordPress era un editor TinyMCE centrado en la edición de texto. La interfaz era similar a la de un software editor de texto, sin elementos visuales que proporcionaran una vista previa de la página o la entrada.

En comparación, los bloques de contenido te permiten alterar el diseño de la página e insertar sin problemas diversos elementos visuales e interactivos, tareas que no eran posibles con el antiguo editor clásico.

Los bloques también han mejorado la facilidad de uso en muchos aspectos. Por ejemplo, incrustar medios externos como vídeos de YouTube es ahora tan sencillo como añadir el bloque específico al contenido y pegar la URL del vídeo.

Con el editor anterior, tal personalización del contenido podría haber requerido código HTML adicional.

La función de patrón de bloque sincronizado te permite guardar un bloque personalizado previamente para utilizarlo en el futuro, de modo que no tengas que volver a crear el contenido desde cero.

Otra opción es utilizar patrones de bloques regulares o no sincronizados, es decir, diseños de bloques preconstruidos disponibles para distintos fines.

Utilizar un tema de WordPress basado en bloques también es una buena forma de personalizar las plantillas con el editor de bloques y su interfaz de estilos globales. Esto facilita cambiar las plantillas o incluso el diseño de todo el sitio simplemente reordenando los bloques de contenido.

En general, el nuevo editor de WordPress proporciona una mejor experiencia de usuario para la edición de contenidos. También es una plataforma más fácil de usar para que los nuevos usuarios aprendan a utilizar WordPress.

¿Qué tipos de bloques de WordPress están disponibles en el editor de bloques?

Hay más de 90 bloques disponibles en la última versión de WordPress, divididos en seis categorías: texto, medios, diseño, widgets, tema e incrustaciones.

Vamos a ver todos los bloques del editor de bloques de WordPress y sus principales opciones de personalización.

Bloques de texto

Los bloques de texto te permiten añadir títulos, párrafos y otros elementos de texto al contenido. Algunos de los principales bloques de texto disponibles son:

• Párrafo
• Encabezado
• Lista
• Cita
• Párrafo de cita
• Clásico
• Detalles
• Preformateado
• Código
• Tabla
• Verso

Algunos de los bloques de texto también proporcionan distintas formas de mostrar el texto. Por ejemplo, el bloque de párrafo de cita ayuda a llamar la atención sobre un fragmento de texto, mientras que el bloque de tablas facilita la presentación y comparación de cualquier información.

Otros bloques como código y preformateado te permiten resaltar fragmentos de código.

Bloques de medios

Los bloques multimedia te permiten subir varios archivos a la biblioteca multimedia e incrustarlos en el contenido. Hay siete bloques multimedia:

• Imagen
• Galería
• Audio
• Fondo
• Archivo
• Medios y texto
• Vídeo

Los bloques de imagen y galería se encuentran entre los bloques multimedia más comunes.

Mientras que el bloque de imagen muestra una imagen individual, el bloque de galería te permite crear un grupo de imágenes. Dicho esto, las imágenes de la galería se tratan como bloques independientes con sus propios campos de texto alternativo.

El bloque de archivos puede aceptar cualquier tipo de archivo e incrustarlos en el sitio. Una característica notable de este bloque es el visor de PDF, que te permite incrustar un archivo PDF que los visitantes pueden leer directamente en el sitio o descargar.

Bloques de diseño

Utilizando el editor de bloques de WordPress, es posible personalizar fácilmente la disposición del contenido utilizando bloques de diseño. Aunque este tipo de bloque no añade contenido, ayuda a dar forma a cómo aparecerá el contenido a los visitantes del sitio.

Hay diez bloques de diseño disponibles:

• Botones
• Columnas
• Grupo
• Fila
• Pila
• Cuadrícula
• Más
• Salto de página
• Separador
• Espaciador

Las columnas, el grupo y la fila también son tipos de bloques contenedores de WordPress, lo que significa que pueden albergar bloques individuales en su interior.

Por ejemplo, utiliza el bloque de columnas para crear una barra lateral. Puedes dividir el ancho de la página en una proporción de 70:30, añadir contenido en el lado más grande e insertar widgets de WordPress y otros elementos en el lado más pequeño.

Utilizando el bloque fila, añade varios bloques en la misma posición horizontal. Por ejemplo, utilízalo para añadir elementos a la cabecera y al pie de página.

Bloques de widgets

Los widgets ahora vienen como bloques que puedes insertar en cualquier lugar de la página, incluidos el pie de página y las barras laterales.

Los 13 bloques de widgets disponibles en el editor de bloques de Gutenberg son:

• Archivos
• Calendario
• Lista de categorías
• HTML personalizado
• Últimos comentarios
• Últimas entradas
• Lista de páginas
• RSS
• Búsqueda
• Shortcode
• Iconos sociales
• Nube de etiquetas

Bloques de tema

La mayoría de los bloques de tema son dinámicos, ya que extraen información del contenido, como el contenido de la entrada, el bucle de consulta y los comentarios de la entrada, y la muestran en el sitio. Varios de ellos también son esenciales para mostrar la identidad del sitio, incluidos el logotipo, el título y el eslogan del sitio.

Hay 23 bloques temáticos en total. Los bloques relacionados con el diseño del sitio y del tema en general son:

• Navegación
• Logo del sitio
• Título del sitio
• Descripción corta del sitio
• Cabecera
• Pie de página
• Plantilla
• Entrar/Salir

También hay bloques que obtienen información del contenido de las entradas del blog:

• Título del post
• Extracto del post
• Imagen destacada del post
• Contenido del post
• Autor del post
• Fecha de publicación
• Categorías de posts
• Etiquetas
• Entrada siguiente
• Entrada anterior

Bloques de incrustación

El nuevo editor de bloques te permite incrustar fácilmente contenido externo copiando y pegando URLs. Por ejemplo, hay un bloque específico para incrustar un vídeo de YouTube.

Algunos de los bloques de incrustación que ofrece el nuevo editor son:

• Twitter
• YouTube
• Vimeo
• Spotify
• SoundCloud
• Pinterest

Si no encuentras la plataforma deseada, utiliza el bloque de incrustación y pega la URL para incrustar el medio.

Cómo utilizar los bloques de WordPress para personalizar tu sitio web

El editor de bloques Gutenberg es el editor predeterminado de WordPress para la creación de entradas y páginas. El editor de bloques también está disponible para la edición completa del sitio cuando se utiliza un tema de bloques.

Cuando añadas una nueva entrada de blog o página, el editor te proporcionará por defecto un bloque de párrafo para que puedas empezar a escribir directamente. Cuando pulses Intro, el bloque de párrafo será también el nuevo bloque por defecto, haciendo que el proceso de escritura sea fluido.

Alternativamente, añade un nuevo bloque pulsando el botón más (+) en el área de contenido. Aparecerá una pequeña ventana emergente con seis bloques utilizados recientemente y una barra de búsqueda. Utiliza la barra de búsqueda para encontrar un bloque específico y haz clic en él para insertarlo en el contenido.

Otra opción es abrir el insertador de bloques haciendo clic en el botón más (+) de la esquina superior izquierda de la pantalla.

Aparecerá un nuevo panel en el lado izquierdo con todos los bloques disponibles. Puedes utilizar la barra de búsqueda para localizar la opción que deseas. A continuación, haz clic en el bloque para añadirlo al contenido.

Para reorganizar los bloques, el editor de bloques de WordPress tiene una función de arrastrar y soltar. Selecciona cualquier bloque, haz clic en el icono Arrastrar de su barra de herramientas y suéltalo en el lugar deseado.

También puedes utilizar las flechas arriba y abajo de la barra de herramientas del bloque.

Todos los bloques de contenido de WordPress tienen diferentes herramientas de configuración. Para configurar cualquiera de ellas, selecciona un bloque y abre el panel de configuración del bloque haciendo clic en el botón Configuración de la esquina superior derecha de la pantalla.

El panel de configuración aparecerá en el lado derecho. Por ejemplo, el bloque de párrafo tiene opciones para personalizar el color, la tipografía y otros elementos de diseño.

10 mejores plugins de bloques de WordPress en 2024

Instalar un plugin de WordPress es una buena forma de añadir diferentes opciones de bloque al editor de WordPress.

Existen varios plugins de WordPress de WordPress para ampliar la biblioteca de bloques con bloques de contenido adicionales, herramientas de personalización e incluso plantillas de diseño.

Sin embargo, cada plugin de bloques ofrece un conjunto diferente de bloques. Por ello, para ayudarte a encontrar la mejor opción, vamos a enumerar los 10 mejores plugins de bloques para WordPress.

1. Genesis Blocks

Estadísticas del plugin:

• Descargas: 60.000+
• Valoración: 4.5/5
• Características destacables: tabla de precios y bloques de llamada a la acción preconstruidos
• Ideal para: blogs y pequeñas empresas
• Precio: freemium (desde 360 dólares al año)

El plugin Genesis Blocks añade 14 nuevos bloques al editor de bloques de WordPress. Puede que no parezcan muchos, pero su conjunto de bloques puede ayudar a llevar un sitio web empresarial al siguiente nivel.

El bloque Precios es una de las principales novedades. El bloque ayuda a crear una tabla de precios sin tener que construirla desde cero utilizando el bloque de tabla. Te permite añadir hasta cuatro columnas de precios, con un botón de llamada a la acción.

El bloque de llamada a la acción te permite añadir una sección de llamada a la acción al sitio. Admite un fondo de imagen y un diseño de ancho completo para que destaque del resto del contenido.

La versión premium del plugin, Genesis Pro, añade dos bloques más y permisos de usuario a nivel de bloque para que sólo los usuarios seleccionados tengan acceso a determinados bloques.

En definitiva, este plugin es adecuado para blogs y sitios web de pequeñas empresas que busquen bloques adicionales sencillos.

2. Getwid

Estadísticas del plugin:

• Descargas: 50.000+
• Valoración: 5/5
• Características destacables: plantillas prediseñadas, gran variedad de bloques de contenido
• Ideal para: blogs, pequeñas empresas, portafolios
• Precio: gratis

Getwid es el plugin de bloques gratuito con la gama más amplia de bloques Gutenberg adicionales. Ofrece 38 bloques únicos y más de 35 plantillas prediseñadas para ayudarte a crear un bonito diseño web sin tener que instalar demasiados plugins.

Bloques como el deslizador de imágenes, la caja de imágenes y la galería de imágenes apiladas proporcionan nuevas formas de presentar imágenes en tu contenido. Getwid también incluye bloques de Instagram y Google Maps que amplían las opciones de incrustación existentes.

Las plantillas prefabricadas son similares al patrón de bloques de WordPress. Sin embargo, Getwid utiliza el bloque de biblioteca de plantillas en lugar del insertador de patrones para seleccionar e insertar la plantilla en el contenido.

Puedes desactivar los bloques que no utilices para mantener la velocidad y simplicidad de tu editor. Ve a Panel -> Configuración -> Getwid y abre la pestaña Bloques para seleccionar qué bloques desactivar.

3. Spectra – WordPress Gutenberg Blocks

Estadísticas del plugin:

• Descargas: 500.000+
• Valoración: 4.9/5
• Características destacables: bloques de esquema, plantillas de página completa y patrones de bloques
• Ideal para: blogs, pequeñas empresas, restaurantes
• Precio: gratis y de pago

Spectra – WordPress Gutenberg Blocks es uno de los plugins de bloques de WordPress más atractivos. Además de 33 bloques diferentes, Spectra también proporciona 81 plantillas de página completa, 284 patrones de bloques y 56 wireframes.

Bloques como la cuadrícula de entradas, la mampostería de entradas y el carrusel de entradas muestran tus entradas en varios formatos.

El bloque de lista de precios es perfecto para mostrar el menú de un restaurante u otros precios de productos. También es posible insertar una imagen para cada artículo utilizando las herramientas de diseño del bloque.

Spectra incluye varios bloques de esquemas para contenido de instrucciones, reseñas y preguntas frecuentes. Estos bloques no sólo ayudan a configurar el contenido más rápidamente, sino que mejoran su clasificación en los motores de búsqueda.

Las plantillas, patrones y wireframes del plugin están disponibles para entradas y páginas e incluyen opciones como portafolios y testimonios. Haz clic en el botón Plantillas Spectra en la parte superior del editor para encontrar todas las opciones disponibles.

4. Premium Blocks for Gutenberg

Estadísticas del plugin:

• Descargas: 3.000+
• Valoración: 5/5
• Características destacables: gestor de bloques, herramientas de diseño específicas para cada bloque
• Ideal para: pequeñas empresas
• Precio: gratis

Premium Blocks for Gutenberg es un plugin gratuito que añade 14 nuevos bloques que tienen un impacto mínimo en el rendimiento y la velocidad del sitio web.

Uno de los bloques exclusivos que ofrece este plugin es el Encabezado Dual, que divide los encabezados en dos partes que puedes personalizar individualmente. El bloque Texto de fantasía te permite añadir animación entre las partes del texto.

Al ofrecer bloques adicionales limitados, este plugin se centra en las opciones de configuración de cada bloque para ayudarte a ajustar, editar y diseñar el contenido.

Por ejemplo, puedes modificar la capacidad de respuesta de cada bloque y el estilo del contenedor, mientras que varios bloques también vienen con herramientas de diseño únicas.

Existe la opción de activar o desactivar bloques para minimizar el impacto del plugin. Dirígete a Panel de control -> Premium Blocks for Gutenberg -> Configuración de bloques y, a continuación, elige los bloques que deseas activar y desactivar.

5. PublishPress Blocks

Estadísticas del plugin:

• Descargas: 30.000+
• Valoración: 4.7/5
• Características destacadas: bloqueo de acceso, inclusión por correo electrónico, interfaz de configuración de bloqueos
• Ideal para: empresas, blogs de varios autores, tiendas online
• Precio: gratis

PublishPress Blocks incluye 22 bloques avanzados que puedes personalizar a través del panel de administración de WordPress.

Uno de los bloques exclusivos es el formulario de inicio de sesión/registro, que proporciona una interfaz de inicio de sesión prefabricada dentro del editor de bloques.

PublishPress Blocks también ofrece bloques de Boletín de noticias y Formulario de contacto para la generación de clientes potenciales.

Este plugin tiene una función de acceso a bloques para activar o desactivar bloques específicos para cada uno de tus roles de usuario de WordPress. Ve a Bloques -> Configuración para activar la función y gestionarla a través del panel de acceso a bloques en la página de configuración del plugin.

La sección Configuración del bloque te permite modificar los estilos globales de cada bloque de PublishPress. Cada bloque tiene sus propios ajustes, pero cubren principalmente el color, las opciones de borde y otras opciones de diseño.

Si quieres utilizar CSS personalizado para tu sitio de WordPress, este plugin también tiene un panel de Estilos personalizados para añadir clases CSS.

6. Stackable

Estadísticas del plugin:

• Descargas: 70.000+
• Valoración: 4.9/5
• Características destacables: plantillas de diseño y kits de interfaz de usuario prediseñados, ajustes detallados de personalización de bloques
• Ideal para: todo tipo de sitios web
• Precio: freemium (desde 49 dólares/año)

Stackable es uno de los plugins de bloques más versátiles. Su versión gratuita añade 35 bloques, 100 diseños de bloques preconstruidos, ocho kits de interfaz de usuario y 37 wireframes, mientras que Stackable premium aumenta las opciones de diseño con 403 diseños de bloques preconstruidos y 33 kits de interfaz de usuario.

Los diseños de bloques y kits de interfaz de usuario predefinidos están disponibles para entradas y páginas. Encuentra todas las opciones disponibles haciendo clic en el botón biblioteca de diseños en la parte superior de la pantalla del editor.

Stackable proporciona una amplia gama de herramientas de personalización de bloques con los ajustes bloque, estilo y avanzado de cada bloque.

Los ajustes de bloque contienen algunas configuraciones básicas de diseño como borde, alineación y espaciado, mientras que los ajustes avanzados te permiten configurar la capacidad de respuesta del bloque y la etiqueta HTML. También es posible añadir un efecto de movimiento con la versión premium.

7. Ultimate Blocks

Estadísticas del plugin:

• Descargas: 40.000+
• Valoración: 4.9/5
• Características destacables: gestor de bloques, marcado schema, soporte comunitario
• Ideal para: blogueros, vendedores
• Precio: gratis

Ultimate Blocks se centra en blogueros y vendedores. Añade 22 bloques como reseña, compartir en redes sociales y llamada a la acción para aumentar el compromiso del sitio web. El plugin también incluye marcado schema en los bloques reseña y cómo hacerlo para mejorar el SEO.

El gestor de bloques te permite activar y desactivar bloques. Para abrir el gestor de bloques, ve a Panel de control -> Ultimate Blocks. 

Ultimate Blocks tiene un foro comunitario activo con más de 400 miembros. Si encuentras dificultades al utilizar el plugin, consulta los debates existentes o publica tus preguntas en el foro.

También hay disponible un formulario de contacto en Panel de control -> Ultimate Blocks -> Contacto.

8. Kadence Blocks

Estadísticas del plugin:

• Descargas: 200.000+
• Valoración: 5/5
• Características destacables: sección de edición personalizada, gestor de bloques, secciones preconstruidas
• Ideal para: todo tipo de sitios web
• Precio: freemium (desde 69 dólares/año)

Kadence Blocks ofrece herramientas para facilitar la creación de diseños complejos en entradas de blog o páginas. La versión gratuita añade 15 bloques al editor, mientras que Kandace Blocks Pro viene con 12 bloques premium, incluido un carrusel de productos y un vídeo emergente.

Kadence también ofrece secciones preconstruidas y plantillas de inicio. Abre la biblioteca de diseños de Kadence haciendo clic en el botón biblioteca de diseños situado en la parte superior del editor de entradas o páginas.

Además, es posible establecer estilos globales para los bloques haciendo clic en el logotipo de Kadence Blocks junto al icono de Configuración. Te permite cambiar la paleta de colores y los estilos globales de cada bloque.

9. Otter Blocks

Estadísticas del plugin:

• Descargas: 100.000+
• Valoración: 4.7/5
• Características destacables: configuración de bloques por defecto, secciones preconstruidas, gestor de bloques
• Ideal para: blogs, pequeñas empresas
• Precio: gratis

Otter Blocks es un ligero plugin gratuito que añade 29 nuevos bloques al editor, incluyendo Google Maps y bloques de añadir al carrito.

Hay una opción para establecer el bloque sección como bloque predeterminado para las páginas nuevas. Alternativamente, abre la biblioteca de plantillas para elegir entre 51 secciones preconstruidas para crear contenido rápidamente.

Ajusta la configuración predeterminada de los bloques haciendo clic en el logotipo de Otter Blocks situado en la esquina derecha de la cabecera y seleccionando valores predeterminados globales. Podrás cambiar el color, la tipografía y el espaciado por defecto de cada bloque.

El plugin también tiene funciones de animación y CSS personalizadas aplicables a los bloques Otter y a los bloques predeterminados de WordPress. Por ejemplo, al escribir un número utilizando el bloque de párrafo predeterminado, puedes añadirle una animación de recuento.

La función de CSS personalizado también es diferente de la clase CSS por defecto, ya que te permite escribir el código CSS directamente en el editor.

10. CoBlocks

Estadísticas del plugin:

• Descargas: 500.000+
• Valoración: 4.3/5
• Características destacadas: función de arrastrar para cambiar el tamaño, bloques de incrustación únicos
• Ideal para: restaurantes, pequeñas empresas, blogs
• Precio: gratis

CoBlocks es un plugin gratuito que añade una experiencia flexible de creación de páginas al editor de bloques de Gutenberg. Viene con 31 bloques nuevos, incluido el tipo de bloque comida y bebida para crear un menú de restaurante y el bloque resaltar para enfatizar texto importante.

El complemento también ofrece nuevas posibilidades de incrustación. OpenTable te permite incrustar un widget de reservas para el sitio de tu restaurante, y con el bloque Gist, puedes mostrar un fragmento de código de GitHub Gist.

Otra característica única de CoBlocks es la función de arrastrar para cambiar el tamaño de ciertos bloques como fila. Puedes ajustar la anchura de la columna dentro de un bloque de fila haciendo clic en él y arrastrándolo o utilizando el canal personalizado en los ajustes de fila.

Conclusión

Los bloques, junto con temas adaptados a ellos, se han convertido en la base para una edición completa del sitio y una mejor experiencia de usuario.

Los bloques de WordPress facilitan la personalización del contenido, ya que te permiten crear composiciones y diseños visuales atractivos sin necesidad de utilizar código o plugins adicionales.

También hay otras ventajas al compararlo con el editor anterior. Por ejemplo, los patrones de WordPress te permiten guardar un bloque prediseñado para utilizarlo en el futuro, lo que simplifica el proceso de creación de páginas y posts. 

La función de arrastrar y soltar, disponible en la barra de herramientas de bloques, te permite reorganizar rápidamente el contenido.

Actualmente, WordPress tiene más de 90 bloques predeterminados, divididos en seis categorías. 

Aunque son suficientes para crear un sitio o blog básico de WordPress, los plugins de bloques de WordPress pueden ampliar la biblioteca de bloques y proporcionar más herramientas de personalización para satisfacer tus necesidades de diseño.

Esperamos que esta guía te haya sido de utilidad. Si tienes algún comentario o pregunta, escríbela en la sección de abajo. ¡Buena suerte!

Bloques de WordPress – Preguntas frecuentes

Aquí tienes las preguntas más comunes sobre los bloques de WordPress.