Explorar por categoría
GrapesJS Bloques
Las librerías de bloques de GrapesJS aportan secciones HTML listas para arrastrar y soltar en tu editor. En lugar de construir cabeceras, tarjetas, secciones hero y pies de página desde cero, instala un pack de bloques y empieza a colocar secciones prefabricadas y totalmente personalizables en el lienzo. Explora colecciones de la comunidad y librerías premium: cada ficha incluye una vista previa en vivo para que veas exactamente qué añades a tu proyecto antes de instalarlo.
Sobre GrapesJS Bloques
Los bloques de GrapesJS son las unidades básicas de arrastrar y soltar que los usuarios colocan en el lienzo para construir una página. Un bloque puede ser desde un único elemento de imagen hasta una sección compleja de varias columnas con componentes anidados, estilos e interacciones ya configurados. Los plugins de librerías de bloques en GJS.Market van desde packs mínimos —unos pocos bloques limpios y utilitarios para cabeceras y texto— hasta sistemas de diseño completos con más de 50 tipos de sección que cubren banners hero, rejillas de características, carruseles de testimonios, tablas de precios, acordeones de preguntas frecuentes y formularios de contacto. Las librerías de bloques premium suelen incluir variantes en modo oscuro, vistas previas por breakpoint responsivo y organización por categorías dentro del panel de bloques de GrapesJS. Los packs de la comunidad tienden a centrarse en un lenguaje de diseño o framework concreto como Tailwind, Bootstrap o Bulma, y están disponibles gratuitamente. Al evaluar una librería de bloques, revisa los filtros de versión de GrapesJS y de framework: los bloques creados para Bootstrap 4 no se renderizarán correctamente sin el CSS correspondiente cargado en la vista previa del lienzo. Todas las librerías premium de GJS.Market incluyen una vista previa en vivo de cada bloque del paquete.
GrapesJS Bloques — Preguntas frecuentes
- ¿Qué es un bloque de GrapesJS?
- Un bloque es una entrada del panel de bloques del editor que inserta contenido al arrastrarla al lienzo. Se define con una etiqueta, una miniatura de vista previa y el contenido en sí: HTML o una definición de componente. Los bloques son la manera en que el usuario final añade secciones a una página; son la mitad visible de una librería de bloques.
- ¿Cómo añado bloques personalizados a GrapesJS?
- Usa la API BlockManager para añadir un bloque con su id, etiqueta, categoría y contenido. El contenido puede ser una cadena HTML o un objeto de componente, y esto último es preferible porque aguanta mejor la edición. Envolver un conjunto de llamadas add en un plugin las convierte en un pack de bloques reutilizable que puedes instalar en varios proyectos.
- ¿Los bloques de GrapesJS necesitan Tailwind o Bootstrap?
- Solo si el pack se creó para uno de ellos. Los bloques llevan marcado con nombres de clase, así que un pack de Tailwind se verá como HTML sin estilos a menos que Tailwind CSS esté cargado dentro del iframe del lienzo: el lienzo no hereda automáticamente las hojas de estilo de tu aplicación. Añade el framework mediante la opción de estilos del lienzo del editor y revisa el filtro de framework de esta página antes de instalar.
- ¿Puedo organizar los bloques por categorías?
- Sí. Cada bloque declara una categoría y GrapesJS agrupa el panel según ella, con cabeceras plegables. Las buenas librerías traen categorías sensatas de fábrica —hero, características, precios, pie— algo que importa en cuanto superas unas pocas decenas de bloques. Puedes sobrescribir la categoría al registrarlo para integrar un pack de terceros en tu propia agrupación.
- ¿Hay librerías de bloques gratuitas para GrapesJS?
- Sí. grapesjs-blocks-basic es oficial y gratuita, y muchos packs de la comunidad orientados a un lenguaje de diseño concreto como Tailwind, Bootstrap o Bulma tampoco tienen coste. Usa el filtro de precio para ver solo las gratuitas. Las librerías premium suelen añadir muchos más tipos de sección, variantes en modo oscuro, vistas previas responsivas y una vista previa en vivo de cada bloque.
Explorar por etiqueta