Edición y estilo
La mayoría de las ediciones se hacen seleccionando un elemento en el lienzo o en el árbol de elementos y usando la barra lateral derecha.
Árbol de elementos
El panel Elementos muestra la estructura de la página actual. Permite expandir, contraer, ver solo el primer nivel, mostrar avisos de elementos ocultos y guardar filtros por clase o atributo.
Usa el filtro del árbol de elementos para limitar el árbol a elementos que coincidan con una clase o atributo. Esto ayuda a encontrar componentes repetidos, atributos de datos concretos o elementos muy anidados sin expandir manualmente toda la página.
Propiedades del elemento
El panel Propiedades del elemento puede editar:
- ID del elemento, que también se usa como destino para enlaces de ancla hacia ese elemento.
- Clases CSS, clases de animación añadidas al entrar en vista y clases de animación eliminadas al entrar en vista.
- Sección de datos y categoría.
- Atributos de datos.
- Dimensiones, display, posición, z-index, gap, overflow y relación de aspecto.
- Controles de ajuste de imagen.
- Margen y padding.
- Tipografía.
- Fondo y borde.
- Eventos JavaScript.
- Ajustes de enlace.
- Origen de imagen, texto alt y comportamiento de carga.
- Ajustes de script inline.
Edición de texto
La edición de texto en línea incluye una barra flotante para negrita, cursiva, subrayado, enlaces, color de texto, color de fondo, fuente y tamaño.
Editor CSS
Los archivos CSS se abren en el editor CSS, donde los usuarios pueden editar el código de estilos y pedir ayuda a la IA con CSS.
Editor JavaScript
Los archivos JavaScript se abren en el editor JS, donde los usuarios pueden editar código de scripts y pedir ayuda a la IA con JavaScript.
Editor de iconos SVG
Los iconos SVG se pueden editar en un modal dedicado. Los usuarios pueden ajustar ancho, alto, relleno, trazo, clases, elegir iconos Tabler o guardar iconos personalizados en la biblioteca personal.
El modal del editor de iconos SVG permite cambiar los colores del icono, reemplazar el SVG por otro icono o importar un SVG personalizado. Es útil para adaptar los iconos al diseño de la página sin editar manualmente el código SVG.
Panel SEO
El panel Ajustes de página y SEO edita título de página, meta descripción, palabras clave, campos Open Graph, comportamiento robots, URL canónica y campos SEO específicos por idioma cuando i18n está habilitado.
