Panel de capas
El panel de capas muestra todos los elementos de la página actual en un árbol jerárquico. Haz clic en Capas en la barra lateral izquierda para abrirlo. Es la forma más fácil de acceder a elementos pequeños, ocultos detrás de otros o muy anidados.
Al abrir Capas, el lienzo cambia a Editar, ya que el árbol se genera a partir de la página que estás editando. El panel no está disponible en el editor de código.
Buscar y seleccionar elementos
Cada fila muestra el tipo de elemento o el nombre del componente. Haz clic en la flecha junto a una fila para expandirla o contraerla.
- Haz clic en una fila para seleccionar ese elemento. El lienzo se desplaza hasta él y el panel de edición muestra su configuración.
- Selecciona un elemento en el lienzo y el árbol se expande hasta la fila de ese elemento.
- Pasa el cursor sobre una fila para resaltar el elemento en el lienzo. Al pasar el cursor sobre un elemento en el lienzo, se marca el contorno de su fila.
- Haz clic en un espacio vacío del panel para quitar la selección.
También puedes recorrer el árbol con el teclado. Up y Down permiten moverte entre filas, Right expande una fila y Left la contrae, y Enter o Space seleccionan. Los atajos como Delete, ⌘C, ⌘V, ⌘X, ⌘D y ⌘Z (Ctrl en Windows) se aplican al elemento seleccionado, y ⌘K / Ctrl+K abre la barra Editar con IA debajo de la fila.
Reordenar elementos
Arrastra una fila hacia arriba o hacia abajo para cambiar el orden del elemento. Las filas se mueven entre elementos del mismo nivel, dentro del mismo elemento padre. El lienzo se actualiza en cuanto sueltas la fila.
Algunas filas no se pueden arrastrar porque WebTwizz no puede encontrarlas en tu código. Al pasar el cursor sobre una de ellas, aparece un aviso.
Menú del clic derecho
Haz clic derecho en una fila para abrir el mismo menú que aparece en el lienzo.
| Opción | Atajo | Qué hace |
|---|---|---|
| Editar | ⌘E | Selecciona el elemento y abre el panel de edición |
| Copiar, Pegar, Cortar | ⌘C, ⌘V, ⌘X | Copian, pegan y cortan elementos |
| Duplicar | ⌘D | Crea una copia del elemento |
| Eliminar | ⌫ | Elimina el elemento |
| Copiar estilo, Pegar estilo | ⌘⌥C, ⌘⌥V | Copian el estilo de un elemento y lo pegan en otro |
| Convertir en componente | ⌘⇧K | Lo convierte en un componente reutilizable |
| Editar con IA | ⌘K | Abre la barra Editar con IA para ese elemento |
En Windows, usa Ctrl en lugar de ⌘ y Alt en lugar de ⌥.
Mientras la IA trabaja
Mientras la IA edita tu sitio web, no puedes arrastrar filas y todas las opciones del menú del clic derecho están desactivadas. Todo vuelve a estar disponible cuando la IA termina.