Editor visual

El editor visual tiene una interfaz moderna con cuatro áreas: • Barra superior – Guardar, publicar, vista previa responsive (móvil/tableta/escritorio), cambiar tema • Barra lateral (izquierda) – Pestañas para Páginas, Capas, Medios y Bloques • Lienzo (centro) – Tu página como la ven los visitantes • Inspector (derecha) – Configuración del bloque seleccionado Haz clic en un bloque en el lienzo para seleccionarlo. La configuración aparece a la derecha.

El panel de Páginas (barra lateral izquierda) muestra todas las páginas de tu sitio web. Haz clic en una página para abrirla en el editor. La página actual está marcada. Puedes buscar por nombre de página.

El panel de Capas muestra la estructura de árbol de todas las secciones en la página actual. Haz clic en una capa para seleccionar la sección correspondiente en el lienzo (y viceversa). Útil para páginas complejas con muchas secciones.

• Panel de Medios – Navega por tu biblioteca de medios y arrastra imágenes al lienzo • Panel de Bloques – Todos los componentes disponibles por categoría. Arrastra un bloque al lienzo para añadirlo Los componentes están agrupados en categorías como Básico, Diseño, Formularios y Medios.

Haz clic en los iconos de móvil, tableta o escritorio en la barra superior para ver cómo se ve tu página en diferentes tamaños de pantalla. Usa Ctrl+1 (móvil), Ctrl+2 (tableta) o Ctrl+3 (escritorio) como atajo.

El editor admite atajos de teclado para acciones comunes. Los atajos no funcionan cuando un campo de texto está activo (excepto Escape). • Ctrl+S – Guardar • Ctrl+Mayús+P – Publicar • Ctrl+Z – Deshacer • Ctrl+Mayús+Z – Rehacer • Ctrl+K – Abrir paleta de comandos • Ctrl+D – Duplicar sección seleccionada • Supr / Retroceso – Eliminar sección seleccionada • Ctrl+1 – Vista móvil (375px) • Ctrl+2 – Vista tablet (768px) • Ctrl+3 – Vista escritorio (100%) • Ctrl+\ – Mostrar/ocultar barra lateral • Ctrl+Mayús+\ – Mostrar/ocultar inspector • Escape – Deseleccionar o cerrar overlay

Pulsa Ctrl+K (o Cmd+K en Mac) para abrir la paleta de comandos. Escribe una acción para navegar rápidamente o ejecutar acciones: • Guardar / Publicar • Cambiar tema (oscuro/claro) • Ir a Páginas • Abrir historial de versiones • Mostrar/ocultar barra lateral o inspector • Activar/desactivar chat IA • Vista móvil / tablet / escritorio Navega con las teclas de flecha y pulsa Enter para ejecutar una acción. Escape cierra la paleta.

La barra lateral y el inspector son redimensionables. Arrastra el borde entre un panel y el lienzo para ajustar el ancho. • Barra lateral: mínimo 200px, máximo 400px • Inspector: mínimo 240px, máximo 480px El ancho se ajusta en tiempo real mientras arrastras (sin retraso).

Selecciona una sección en el editor y busca el campo "Animación" en el inspector. Elige un preset: • Fade – Aparecer gradualmente • Slide up/down/left/right – Deslizar desde una dirección • Scale / Zoom – Hacer zoom • Bounce – Rebotar Elige en "Disparador" si la animación se reproduce al hacer scroll o al cargar. La animación solo es visible en el sitio web en vivo.

El editor incluye un analizador de encabezados que advierte si la jerarquía de encabezados no es correcta (ej. un H1 seguido de un H3 sin H2). Esto es importante para la accesibilidad y el SEO.

Muchos bloques ahora tienen ajustes granulares que te permiten crear docenas de variaciones sin elegir un bloque diferente. Abre un bloque en el inspector y verás campos adicionales: • HeroSection – layout (centered/left/right/split), mediaType (image/video/none), badge, 2 botones CTA, overlay, estadísticas en línea • FeatureCardsSection – columnas (2-6), iconPosition (top/left/inline/none), cardStyle (elevated/bordered/flat/glass), hoverEffect (none/lift/glow/border-color), contentAlign • TestimonialSection – layout (grid/carousel/masonry/single), avatarShape (circle/square/rounded), quoteStyle, visualización de valoraciones • PricingSection – highlightStyle (border/background/badge/glow), toggle de facturación, priceSize, checkStyle • CTABannerSection – layout (centered/left-right/stacked/minimal), backgroundType, badge de urgencia, posición del icono • FooterSection – layout (simple/columns/centered/minimal), socialPosition, campo de newsletter, estilo de separador Todos los ajustes son opcionales — los bloques existentes siguen funcionando con sus valores predeterminados.

El bloque VideoHeroSection te permite establecer un vídeo como fondo. Fuentes compatibles: • YouTube – Pega una URL de YouTube (ej. https://youtube.com/watch?v=...) • Vimeo – Pega una URL de Vimeo • MP4 – Sube un archivo .mp4 o pega una URL directa El vídeo se reproduce automáticamente (silenciado, en bucle). En móvil se muestra una imagen póster para una carga más rápida. Ajustes en el inspector: • videoUrl – La URL de tu vídeo • posterImage – Imagen de respaldo (se muestra durante la carga y en móvil) • overlayOpacity – Opacidad del overlay sobre el vídeo (0-100%) • overlayColor – Color del overlay • contentAlign – Texto a la izquierda, centrado o a la derecha • showVideoOnMobile – Mostrar vídeo también en móvil (desactivado por defecto)

Cada bloque ahora tiene un panel "Avanzado" en el inspector con un campo de texto _customCSS. Aquí puedes escribir CSS libre que solo se aplica a ese bloque específico. Ejemplos: • Glassmorphism: background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); • Sombra personalizada: box-shadow: 0 20px 60px rgba(0,0,0,0.3); • Animación de borde: border: 2px solid transparent; transition: border-color 0.3s; El CSS se aplica automáticamente con scope para que solo afecte a este bloque, no al resto de la página.

Cada bloque ahora admite dos campos de animación: • _animation – El tipo de animación (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, bounce) • _animationTrigger – Cuándo se reproduce la animación (scroll o load) Encontrarás estos campos en el inspector bajo el bloque seleccionado. La animación solo es visible en el sitio web en vivo, no en el editor. Durante una importación URL, las animaciones se detectan automáticamente y se asignan a los bloques correctos.

Cada bloque ahora tiene más opciones de estilo a través de StyleOverrides. Encuéntralos en el inspector bajo "Estilo": • textColor – Sobrescribir el color del texto • accentColor – Color de acento para resaltados • buttonBackground / buttonTextColor / buttonBorderRadius – Estilo de botones • paddingTop / paddingBottom – Espacio vertical arriba/abajo del bloque • marginTop – Espacio arriba del bloque • borderColor – Color del borde • backdropFilter – Efectos de fondo (blur, saturate, brightness, etc.) • backgroundImage – Imagen de fondo (solo degradados, sin URLs externas) Para componentes de tarjeta (FeatureCards, ServiceCards, Pricing, Team, BentoGrid) también hay estados hover: • cardHoverBoxShadow – Sombra al pasar el ratón • cardHoverTransform – Transformación al pasar el ratón (ej. scale(1.02)) • cardHoverBorderColor – Color del borde al pasar el ratón

Puedes activar un modo oscuro por sitio. Si el sitio admite modo oscuro, aparece un icono de sol/luna en el sitio web para que los visitantes puedan cambiar. Cómo configurarlo: 1. Ve a la configuración del sitio → Design Tokens 2. Rellena los darkColors (color de fondo, color de texto, color primario para modo oscuro) 3. Guarda — el toggle aparece automáticamente en el sitio web La preferencia del visitante se guarda en localStorage y se mantiene en la siguiente visita. Si no hay darkColors configurados, el toggle no se muestra.