Vista general del espacio de trabajo
El espacio de trabajo del editor se divide en tres áreas principales: los paneles de archivos y bloques a la izquierda, el lienzo central de vista previa y los paneles de edición a la derecha.
Barra superior
La barra superior contiene acciones del proyecto, herramientas de IA, herramientas de idioma, controles de vista previa, controles de dispositivos responsive, ayudas de visibilidad, deshacer y rehacer, controles de cuenta y estado de guardado.
Acciones comunes:
- Abrir el menú del proyecto.
- Recargar la vista previa.
- Alternar entre modo edición y modo vista previa.
- Cambiar entre tamaños de escritorio, tablet, móvil y pantalla completa.
- Forzar la visibilidad de elementos ocultos mientras se edita.
- Ocultar o restaurar barras de herramientas de secciones.
- Deshacer y rehacer cambios.
Menú principal
El menú principal se abre desde el logo de Teluyo en la barra superior. Primero pasa el ratón sobre el logo y luego haz clic para mostrar el menú del proyecto.
Desde el menú principal puedes iniciar el tour guiado, acceder a acciones de proyecto, gestionar opciones de importación y exportación y abrir las herramientas de importación/exportación de bibliotecas cuando estén disponibles para la cuenta. Es el lugar central para acciones que afectan a todo el proyecto, no solo al elemento o página seleccionados.
Barra lateral izquierda
La barra lateral izquierda contiene:
- Páginas: páginas HTML del proyecto.
- Recursos: imágenes, vídeo, audio y otros archivos cargados.
- Estilos y scripts: archivos CSS y JS del proyecto, además de un modo de biblioteca de scripts.
- Bloques: categorías de bloques listos y biblioteca personal de bloques.
- Bloques globales: secciones reutilizables que se mantienen sincronizadas entre páginas.
Cada panel se puede contraer, redimensionar y restaurar.
Lienzo central
El lienzo central muestra la página activa. En modo edición, los usuarios pueden seleccionar elementos, editar texto en línea, arrastrar bloques y elementos a la página y usar controles de sección. En modo vista previa, la página se comporta de forma más parecida al sitio exportado.
Barra lateral derecha
La barra lateral derecha contiene:
- Barra de elementos rápidos para insertar elementos HTML comunes.
- Árbol Elementos para seleccionar nodos de la página.
- Estilos y scripts de página para vincular archivos CSS y JS a la página actual.
- Ajustes de página y SEO para metadatos y campos de redes sociales.
- Secciones de datos para filtros por categoría y secciones basadas en datos.
- Propiedades del elemento para estilos, atributos, clases, eventos, enlaces, imágenes y traducciones.
Modo vista previa
El modo vista previa bloquea los paneles de edición y permite que scripts e interacciones funcionen de forma más cercana a la experiencia exportada. Actívalo con el botón de vista previa en la barra superior cuando quieras probar la página como la vería un visitante.
También puedes entrar temporalmente en modo vista previa manteniendo pulsada la tecla Alt. Mientras la tecla está pulsada, el lienzo se comporta como en vista previa; al soltarla, Teluyo vuelve a la edición normal. Algunos cambios generados por scripts pueden conservarse después de la vista previa si una sección está configurada para guardarlos.