Editor
Cómo usar el editor de tu sitio: modos Diseño y Código, vista previa por dispositivo, edición de textos, agente de IA y puntos de control.
Abre el editor
El editor de cada negocio vive en /dashboard/<negocio>/website/edit. Allí se abre el espacio de código de tu sitio: la vista previa, los paneles laterales y el agente de IA. Si tu sitio viene de una generación en vivo, el botón Abrir editor te lleva directo (consulta Generación en vivo).
Tu rol en el negocio decide si puedes cambiar cosas: con permiso de solo lectura puedes mirar los archivos, pero Nimlio te avisa cuando no tienes permiso para editarlos.
El editor siempre se muestra en tema oscuro, sin importar el tema de tu panel o de tu sistema.
Modos Diseño y Código
El selector Modo del editor tiene dos opciones: Diseño y Código.
- Diseño: trabajas sobre la vista previa, seleccionas elementos y cambias textos directamente.
- Código: editas los archivos de tu sitio y revisas la consola y los errores de compilación con herramientas para desarrolladores.
El modo Código aparece como «Disponible en el plan Pro». Está disponible en los planes Pro y Enterprise; en otros planes verás la invitación Ver planes.
Vista previa por dispositivo
La vista previa muestra tu sitio en tres marcos a la vez, uno junto al otro: escritorio (1280 px de ancho), tableta (768 px) y celular (390 px). Puedes acercar, alejar y Ajustar el zoom del lienzo, y mover el lienzo con la Herramienta mano (H).
- Abrir en modo vista previa: abre un dispositivo a pantalla completa y puedes interactuar con tu sitio como un visitante. El atajo es ⌘P.
- Recargar vista previa y Abrir vista previa en una pestaña nueva están en la barra del modo vista previa.
- Si aún no hay vista previa, Nimlio la prepara solo (Preparando la vista previa de tu sitio…, menos de un minuto). Si falla, usa Reintentar.
Si ves Este es el sitio base, no un sitio generado, tu sitio todavía no se ha modificado y la publicación está desactivada hasta que lo cambies.
Edita textos directamente
- Selecciona el texto
En modo Diseño, haz clic en el texto de la vista previa para seleccionarlo y luego haz doble clic para empezar a editarlo.
- Escribe el cambio
Escribe el nuevo texto y presiona Enter o haz clic fuera del texto para confirmarlo (Escape lo cancela). Nimlio guarda el cambio en el código de tu sitio.
- Espera la vista previa
Nimlio verifica que el sitio no haya cambiado mientras tanto y reconstruye la vista previa. Si el cambio no se pudo guardar, la vista previa conserva lo que escribiste y Nimlio te lo avisa.
Textos que no se editan en línea
Algunos textos no se pueden editar directamente. Nimlio te dice por qué y a dónde ir:
| Mensaje de Nimlio | Qué hacer |
|---|---|
| Este texto se calcula en el código | Cámbialo en el espacio de código o usa Pedir a IA. |
| Este texto viene del perfil de tu negocio | Edítalo en Configuración. |
| Este texto viene de tu catálogo | Edítalo en Productos. |
| Este texto viene de tus servicios | Edítalo en Servicios. |
| Este texto viene de los perfiles de tu equipo | Edítalo en Personal. |
| Este texto viene de tu galería | Edítalo en Galería. |
| Nimlio no puede saber cuál copia de este texto seleccionaste / no puede rastrear de dónde viene | Edítalo en el espacio de código o usa Pedir a IA. |
| Este texto cambió en otro lado / La vista previa ya no coincide con tu código | Recarga la vista previa e inténtalo de nuevo. |
El agente de IA en el editor
El panel Agente IA recibe tus instrucciones sobre el sitio. Tiene dos modos: Construir y Discutir. Con Enter envías el mensaje y con Shift+Enter haces un salto de línea; también puedes dictar. Si envías varios mensajes seguidos quedan en cola (Prompts en cola); cuando la cola se llena, quita uno antes de agregar otro.
Cada cambio que hace el agente aparece en Cambios con el número de archivos tocados y un botón Deshacer. Si un archivo cambió después de que la IA lo editó, no se puede deshacer ese cambio, y Nimlio lista los archivos en conflicto. Espera a que la IA termine antes de deshacer.
Historial y puntos de control
Historial reúne los puntos de control de tu sitio: los que crea la IA, los que guardas tú (Guardar punto de control, con una etiqueta opcional) y los que se crean al publicar. Nimlio conserva los últimos 50 puntos de control de código de este sitio. Puedes ver la Diferencia de cada uno, con los archivos modificados, agregados y eliminados.
- Abre Historial
Elige el punto de control que quieres recuperar.
- Pulsa Restaurar
Esto reemplaza los archivos de código actuales. Si tienes cambios sin guardar, Nimlio te muestra cuáles se perderán.
- Confirma
Pulsa Restaurar punto de control. Nimlio guarda primero un punto de control Antes de restaurar, así que puedes volver atrás.
Guardado, conflictos y publicación
- El estado de cada archivo se muestra como Sin guardar, Guardando o Conflicto; si un guardado falla, usa Reintentar guardado.
- Si un archivo cambió en otra pestaña, Nimlio muestra Este archivo cambió fuera de esta pestaña y te deja elegir Conservar mío, Usar remoto o Ver diferencia.
- Si el editor encuentra cambios que no llegaron a guardarse, ofrece Recuperar cambios para revisarlos antes de recuperarlos.
- Publicar sube tu sitio; si la construcción tiene errores, al hacer clic se abre el panel de problemas en lugar de publicar, para que los corrijas primero. Más detalle en Dominios y publicación.