Panel Superior

• Plantillas: Accede a plantillas predefinidas para diferentes tipos de sitios web
• Nuevo: Comienza un nuevo proyecto en blanco
• Escritorio/Tablet/Móvil: Cambia el tamaño del canvas para ver cómo se adapta tu diseño
• Exportar HTML: Exporta tu diseño como un archivo HTML completo
• Exportar Todo: Exporta HTML, CSS y JS en archivos separados
• Guardar/Cargar: Guarda tu proyecto para trabajar en él más tarde

Panel de Componentes

Todos los componentes se pueden arrastrar al canvas:

• Layout: Contenedores, secciones, filas, columnas y layouts en cuadrícula
• Texto: Títulos, párrafos, listas y elementos de texto
• Medios: Imágenes, videos e iframes
• Formularios: Inputs, textareas, botones, checkboxes, radios y selects
• Componentes: Botones, cards, navbars, footers y hero sections
• UI Avanzado: Pestañas, acordeones, modales, carruseles, alertas y badges

Búsqueda: Usa la barra de búsqueda para encontrar componentes rápidamente

Canvas

• Seleccionar: Haz clic en cualquier elemento para seleccionarlo
• Editar texto: Haz doble clic en elementos de texto para editarlos
• Eliminar: Usa el botón de cruz roja en las esquinas de los elementos seleccionados
• Previsualización: Ve cómo se verá tu diseño en diferentes tamaños de pantalla

Panel de Propiedades

Cuando seleccionas un elemento, puedes cambiar sus propiedades:

• General: ID, clases CSS y tag HTML
• Dimensiones: Ancho, alto, y valores máximos
• Espaciado: Padding y margin para cada lado
• Posicionamiento: Valores de display y position
• Tipografía: Tamaño, peso, color y alineación de texto
• Fondo y Bordes: Colores, anchos, estilos y radios
• Sombra y Efectos: Sombra, opacidad y transiciones
• Flexbox: Control avanzado para layouts flexibles
• Grid: Control para layouts basados en cuadrícula
• Atributos: Atributos específicos según el tipo de elemento

Atajos de Teclado

• Supr o Delete: Eliminar elemento seleccionado
• Ctrl+S: Guardar proyecto

Componentes Avanzados

Los componentes de UI Avanzado incluyen:

• Pestañas: Muestra contenido en pestañas interactivas
• Acordeón: Contenido colapsable en secciones
• Modal: Ventanas emergentes con contenido
• Carrusel: Galería de contenido deslizable
• Alertas: Mensajes de notificación con diferentes estilos
• Badges: Elementos pequeños para resaltar información