Vista general del editor
El editor es donde diseñas y creas tu sitio web. Tu sitio web funciona en tiempo real en el lienzo del centro. Los paneles de la izquierda te permiten agregar elementos, gestionar páginas y conversar con la IA. El panel de edición de la derecha ajusta el estilo de lo que selecciones.
La barra de herramientas
De izquierda a derecha:
- Logo de WebTwizz abre el menú del logo: Ir al panel, Archivo, Editar, Historial de versiones, Ajustes del sitio web, Preferencias (tema claro, oscuro o del sistema), Ayuda (documentación y atajos de teclado) y Ajustes de la cuenta.
- Explorar y Editar cambian el comportamiento del lienzo. Consulta Explorar y editar más abajo.
- Selector de código (el interruptor
<>) abre el editor de código. Haz clic de nuevo para volver al lienzo. - Menú de ancho (el icono de dispositivo) establece el ancho del lienzo. Consulta Diseño adaptable.
- Barra de ruta muestra la página en la que estás, como
/o/about. Haz clic en ella y escribe para ir a otra página. El botón de actualización dentro de la barra recarga el lienzo. - Deshacer y Rehacer.
- Vista previa (icono de ojo) abre tu sitio web en una nueva pestaña del navegador. Consulta Vista previa y publicación.
- Guardar muestra si tu trabajo está guardado. Cuando todo está guardado, muestra una marca de verificación y, al hacer clic, abre el historial de versiones. Consulta Guardar tu trabajo.
- Mejorar plan aparece en el plan Free.
- Publicar abre el panel de publicación.
Mientras Ajustes o Datos está abierto, la barra de ruta se oculta y el lado derecho de la barra de herramientas solo muestra Vista previa, Mejorar plan y Publicar.
La barra lateral izquierda
Cada icono de la franja izquierda abre un panel:
- Elementos permite agregar elementos, diseños y componentes. Consulta Panel de elementos.
- Asistente de IA abre el chat con la IA.
- Capas muestra todos los elementos de la página en forma de árbol. Consulta Panel de capas.
- Páginas permite agregar, renombrar y organizar páginas. Consulta Panel de páginas.
- Datos permite gestionar tus colecciones y fuentes de datos. Consulta Datos y CMS.
- Ajustes abre los ajustes del sitio web.
Haz clic de nuevo en el icono del panel abierto para contraer la barra lateral, o presiona ⌘B / Ctrl+B.
El lienzo
El lienzo es tu sitio web real funcionando en tiempo real. Los cambios aparecen en cuanto los haces.
Explorar y editar
Usa los botones Explorar y Editar de la barra de herramientas para cambiar de modo.
- Explorar te permite usar el sitio web como visitante. Los enlaces te llevan a otras páginas, los botones y menús funcionan, y los formularios se pueden enviar. No se selecciona ningún elemento.
- Editar te permite cambiar la página. Pasa el cursor para resaltar un elemento, haz clic para seleccionarlo, haz doble clic en el texto para escribir, haz clic derecho para abrir el menú contextual y arrastra para mover elementos.
El editor recuerda el último modo que usaste. La primera vez que lo abres, se inicia en el modo Explorar. Al abrir el panel Capas, cambia al modo Editar. Los botones no están disponibles mientras la IA está trabajando, en el editor de código ni en el historial de versiones.
El panel de edición
Cuando seleccionas un elemento, el panel de edición de la derecha muestra sus estilos y ajustes. Presiona ⌘E / Ctrl+E para mostrarlo u ocultarlo, o haz clic en la flecha del borde derecho. Consulta Panel de edición.
Cambios rápidos con Editar con IA
Selecciona un elemento y presiona ⌘K / Ctrl+K para abrir la barra Editar con IA debajo de él. Escribe un cambio como "más grande" o "texto azul marino" y ve cómo queda en la página antes de elegirlo. Consulta Editar con IA.
En un teléfono
En una pantalla más estrecha que una tablet, el editor está pensado para conversar con la IA y revisar el resultado:
- Las pestañas Chat y Vista previa de la parte superior permiten alternar entre el chat con la IA y tu sitio web. Toca Vista previa de nuevo para recargarlo.
- El lienzo funciona como el modo Explorar. Para seleccionar elementos y usar el panel de edición o el editor de código, necesitas una pantalla más ancha.
- El botón de guardar está junto al logo. Tu trabajo también se guarda automáticamente unos 30 segundos después de que dejas de editar.
- El menú del logo incluye un menú Vista previa para abrir la vista previa en una nueva pestaña, recargarla o reiniciar el servidor de vista previa. Los ajustes están en Ajustes del sitio web, y Volver al editor te lleva de vuelta a tu sitio web.
Atajos esenciales
| Acción | Mac | Windows |
|---|---|---|
| Deshacer | ⌘Z | Ctrl+Z |
| Rehacer | ⌘⇧Z | Ctrl+Shift+Z |
| Guardar | ⌘S | Ctrl+S |
| Editar con IA (con un elemento seleccionado) | ⌘K | Ctrl+K |
| Eliminar elemento | ⌫ | Backspace o Delete |
| Deseleccionar | Esc | Esc |
| Mostrar u ocultar el panel de edición | ⌘E | Ctrl+E |
| Mostrar u ocultar la barra lateral | ⌘B | Ctrl+B |
| Historial de versiones | ⌘H | Ctrl+H |
Consulta Menú contextual y atajos para ver la lista completa.