Explorar por categoría
GrapesJS Páginas web
Los plugins de páginas web para GrapesJS cubren todo lo necesario para construir una página, no un correo: plantillas de página completa, maquetaciones multisección y bases para landings, portfolios y sitios de marketing. Instala un pack de plantillas y tus usuarios abrirán el editor sobre una página terminada que pueden reelaborar, en lugar de un lienzo vacío. Explora packs gratuitos de la comunidad y librerías premium, todos con vista previa en vivo y detalles de compatibilidad de versiones.
Sobre GrapesJS Páginas web
Una página web en GrapesJS es un árbol de componentes en el lienzo, y los plugins de esta categoría te entregan ese árbol ya hecho. Se dividen en dos grupos. Las plantillas de página aportan una página completa y terminada —una landing con hero, características, testimonios y llamada a la acción; un portfolio con rejilla de imágenes y biografía; o una página de marketing extensa con navegación fija— que tus usuarios abren y reelaboran en lugar de montarla pieza a pieza. Las librerías de secciones aportan justamente las piezas, de modo que la página se construye apilando secciones prefabricadas en cualquier orden; se solapan con las librerías de bloques, pero están recortadas a escala de sección de página. Ambas se diferencian de un preset, que configura el propio editor, y de un constructor de sitios, que gestiona muchas páginas a la vez. Tres comprobaciones prácticas antes de instalar. Confirma que el framework CSS del pack se carga dentro del iframe del lienzo, porque el lienzo no hereda las hojas de estilo de tu aplicación. Verifica que la plantilla define estilos por breakpoint y no solo para escritorio. Y decide de antemano si guardarás las plantillas como JSON de proyecto, que sigue siendo editable, o como HTML exportado, que no lo es.
GrapesJS Páginas web — Preguntas frecuentes
- ¿Cuál es la diferencia entre una plantilla de página y un preset?
- Un preset configura el editor —paneles, bloques, sectores de estilo— y deja el lienzo vacío. Una plantilla de página no configura nada y llena el lienzo con una página terminada. Normalmente se usan ambos: el preset para montar el editor una vez y las plantillas para dar a los usuarios un punto de partida en cada página nueva.
- ¿Cómo cargo una plantilla de página en GrapesJS?
- Para una página terminada, editor.setComponents y editor.setStyle sustituyen el contenido del lienzo por el marcado y el CSS de la plantilla. Si la plantilla se distribuye como JSON de proyecto, editor.loadProjectData la restaura con el modelo de componentes intacto, que es la mejor vía porque todo sigue siendo plenamente editable.
- ¿Puede GrapesJS gestionar un sitio de varias páginas?
- Sí: la API de Pages gestiona varias páginas dentro de un mismo proyecto y editor.Pages.select cambia entre ellas. Los plugins de aquí actúan a nivel de página, es decir, rellenan una cada vez. Si necesitas listado de páginas, enrutado y publicación como función de producto, mira la categoría de constructores de sitios.
- ¿Son responsivas las plantillas de página de GrapesJS?
- Las buenas lo son, pero no es automático. GrapesJS escribe media queries reales cuando los estilos se aplican con un dispositivo seleccionado, así que una plantilla construida solo en escritorio no lleva reglas para móvil. Revisa la vista previa de la ficha en cada breakpoint antes de instalar y confirma que el pack indique para qué dispositivos se diseñó.
- ¿Por qué una plantilla se ve sin estilos dentro del editor?
- Porque el lienzo es un iframe y no hereda las hojas de estilo de tu aplicación. Una plantilla creada para Tailwind o Bootstrap se renderiza como HTML plano hasta que cargas ese framework en el lienzo mediante la opción de estilos del lienzo del editor. Es la causa más habitual de que un pack recién instalado parezca roto.
Explorar por etiqueta