Explorar por categoría
GrapesJS Capas
Los plugins de gestor de capas de GrapesJS mejoran el panel de capas con controles adicionales, funciones de agrupación y herramientas de jerarquía visual. El panel de capas es la vía por la que los usuarios navegan y seleccionan componentes anidados: estas extensiones lo hacen más rápido, más intuitivo y más potente. Explora plugins de gestor de capas gratuitos y premium para GrapesJS, todos con guías de instalación e información de compatibilidad de versiones.
Sobre GrapesJS Capas
El panel de capas de GrapesJS muestra el árbol del documento con todos los componentes del lienzo: una vista jerárquica en la que los usuarios pueden seleccionar, renombrar, mostrar u ocultar y reordenar elementos. Por defecto el panel es mínimo: muestra los nombres de los componentes, un conmutador de visibilidad y tiradores de arrastre. Los plugins de gestor de capas en GJS.Market añaden funcionalidad que hace el panel mucho más útil en estructuras de página complejas y profundamente anidadas. Las incorporaciones más habituales incluyen indicadores de tipo de componente codificados por color, para distinguir al instante bloques, componentes y nodos de texto; controles de bloqueo que evitan ediciones accidentales en secciones ya terminadas; selección múltiple con Mayús+clic; búsqueda de capas por nombre de componente o selector; y encabezados de grupo plegables que permiten ocultar las ramas del árbol con las que no se está trabajando. Algunos plugins sincronizan además con la selección del lienzo: al hacer clic en una capa, el lienzo se desplaza suavemente hasta ese componente y abre su panel de estilos. Todos los plugins de gestor de capas de GJS.Market son compatibles con el modelo de componentes nativo de GrapesJS y no requieren cambios en tus bloques o componentes existentes.
GrapesJS Capas — Preguntas frecuentes
- ¿Qué es el panel de capas de GrapesJS?
- Es la vista en árbol de todos los componentes del lienzo, que refleja el modelo de componentes y no el DOM renderizado. Desde ahí los usuarios seleccionan, renombran, reordenan y muestran u ocultan elementos. En páginas muy anidadas suele ser la única forma práctica de llegar a un componente que está detrás o dentro de otro.
- ¿Cómo renombro una capa en GrapesJS?
- Haz doble clic sobre el nombre de la capa en el panel y escribe. El valor se guarda en el componente como nombre personalizado y solo afecta al editor: tu HTML exportado no cambia. También puedes definirlo por código con component.set('custom-name', 'Hero'), que es lo que hacen las librerías de bloques para dar etiquetas legibles a sus secciones.
- ¿Puedo ocultar o bloquear componentes desde el panel de capas?
- Ocultar viene integrado: el icono del ojo aplica display:none al componente, así que también afecta a la exportación. El bloqueo no forma parte del panel por defecto; los plugins de esta categoría añaden un control de bloqueo que impide seleccionar en el lienzo las secciones terminadas, la solución habitual cuando los usuarios desmontan una cabecera sin querer.
- ¿Por qué un componente no aparece en el panel de capas?
- Casi siempre porque su tipo define layerable como false, que es la forma en que los envoltorios y elementos auxiliares se mantienen fuera del árbol. Los nodos de texto hijos también están ocultos por diseño. Si falta uno de tus propios componentes, revisa los flags layerable, selectable y hoverable en la definición de su tipo.
- ¿El panel de capas puede buscar o filtrar componentes?
- De serie no: el panel integrado no tiene campo de búsqueda. Los plugins de esta categoría añaden búsqueda por nombre de componente o selector CSS, encabezados de grupo plegables e indicadores de tipo por color, que es lo que mantiene el panel manejable cuando una página llega a cientos de nodos. Se apoyan en el modelo de componentes nativo, así que no hay que tocar tus bloques existentes.