1. Cuenta e inicio de sesión

Antes de usar HtmlDrag, necesitas crear una cuenta. Ofrecemos múltiples métodos de registro e inicio de sesión para ayudarte a empezar rápidamente.

1.1 Registrarse

HtmlDrag utiliza registro por correo electrónico. Simplemente completa algunos datos básicos para crear tu cuenta. Después del registro exitoso, iniciarás sesión automáticamente y serás redirigido a la página de inicio.

Registro por correo electrónico

En la página de registro, completa los siguientes pasos para crear tu cuenta:

• Introducir correo electrónico: Proporciona tu dirección de correo electrónico habitual. Será tu credencial de inicio de sesión y canal de notificaciones. Asegúrate de que el formato del correo sea correcto, por ejemplo, [email protected].
• Establecer contraseña: La contraseña debe contener letras y números, con una longitud de 8-32 caracteres. Recomendamos usar una contraseña segura para proteger tu cuenta.
• Confirmar contraseña: Vuelve a introducir la contraseña para asegurarte de que ambas coincidan.
• Establecer apodo (opcional): Puedes personalizar tu apodo. Si lo dejas en blanco, el sistema generará automáticamente un apodo predeterminado.
• Aceptar términos: Marca "He leído y acepto los Términos de servicio y la Política de privacidad", luego haz clic en el botón "Registrarse" para completar el registro.

Página de registro: Introduce el correo y la información básica para crear la cuenta

Verificación de correo y recompensa de créditos

Después del registro exitoso, el sistema enviará un correo de verificación a tu bandeja de entrada. Al completar la verificación, recibirás créditos de bonificación que puedes usar para las funciones de Generador IA e Importar URL. Si no recibes el correo, revisa tu carpeta de spam; puedes hacer clic en "Reenviar" para solicitar otro correo de verificación después de 3 minutos.

Consejo: Completar la verificación de correo no solo te otorga créditos de bonificación, sino que también desbloquea la experiencia completa y mejora la seguridad de tu cuenta.

1.2 Iniciar sesión

HtmlDrag admite múltiples métodos de inicio de sesión. Elige la opción más conveniente según tu preferencia.

Inicio de sesión con correo y contraseña

Inicia sesión usando el correo electrónico y la contraseña con los que te registraste:

1. Introduce tu dirección de correo electrónico en la página de inicio de sesión
2. Introduce tu contraseña (haz clic en el icono del ojo para mostrar/ocultar la contraseña)
3. Haz clic en el botón "Continuar" para completar el inicio de sesión

Después de iniciar sesión correctamente, serás redirigido automáticamente a la página de inicio donde podrás empezar a crear.

Inicio de sesión con terceros (Google / GitHub)

Para un acceso más rápido, puedes iniciar sesión usando tu cuenta de Google o GitHub:

• Iniciar sesión con Google: Haz clic en el botón "Iniciar sesión con Google". En la ventana emergente de autorización de Google, selecciona tu cuenta y confirma la autorización.
• Iniciar sesión con GitHub: Haz clic en el botón "Iniciar sesión con GitHub". Serás redirigido a la página de autorización de GitHub. Después de confirmar, volverás automáticamente a HtmlDrag.

Página de inicio de sesión: Admite correo/contraseña y cuentas de terceros

Consejo: Usar el inicio de sesión con Google o GitHub crea automáticamente una cuenta; no se necesita registro separado. En tu primer inicio de sesión con terceros, el sistema creará automáticamente una cuenta vinculada para ti.

Enlace de contraseña olvidada

Si has olvidado tu contraseña, haz clic en el enlace "¿Olvidaste tu contraseña?" en la parte inferior derecha de la página de inicio de sesión para acceder al proceso de restablecimiento (ver Sección 1.3).

1.3 Olvidé mi contraseña

Si has olvidado tu contraseña, puedes restablecerla usando un código de verificación por correo electrónico. Todo el proceso se completa en una sola página sin redirecciones.

Proceso de restablecimiento de contraseña

Sigue estos pasos para restablecer tu contraseña:

1. Introducir correo electrónico: Proporciona la dirección de correo que usaste durante el registro
2. Obtener código de verificación: Haz clic en el botón "Enviar código". El sistema enviará un correo con un código de verificación de 6 dígitos
3. Introducir código de verificación: Introduce el código de 6 dígitos que recibiste en el campo de código de verificación
4. Establecer nueva contraseña: Introduce tu nueva contraseña (debe contener letras y números, 8-32 caracteres)
5. Confirmar nueva contraseña: Vuelve a introducir la nueva contraseña para asegurarte de que coincidan
6. Haz clic en "Restablecer contraseña": Completa el restablecimiento de contraseña. Después de ver el mensaje de éxito, serás redirigido automáticamente a la página de inicio de sesión

Olvidé mi contraseña: Restablecer mediante código de verificación por correo

Validez del código de verificación

El código de verificación tiene un período de validez limitado; por favor, úsalo rápidamente después de recibir el correo. Si el código ha expirado, puedes hacer clic en el botón "Reenviar" para solicitar un nuevo código (deberás esperar a que termine la cuenta regresiva antes de reenviar).

Nota: Si tu correo electrónico no está registrado en el sistema, el código de verificación no podrá enviarse. Asegúrate de introducir la dirección de correo que usaste durante el registro.

2. Perfil

El Perfil es el centro de gestión de la información de tu cuenta, trabajos y pedidos. Haz clic en el avatar en la esquina superior derecha para acceder.

Perfil: Gestiona cuenta, trabajos y pedidos en un solo lugar

2.1 Configuración del perfil

El módulo de Configuración del perfil te permite gestionar la información básica de tu cuenta, incluyendo avatar, apodo, correo electrónico, biografía y configuración de contraseña.

Cambiar avatar

Haz clic en el botón "Cambiar avatar" en el área del avatar y selecciona un archivo de imagen local para subir. El sistema recortará y guardará automáticamente tu nuevo avatar.

Cambiar apodo

Haz clic en el botón de edición junto a tu apodo, introduce un nuevo nombre y haz clic en "Guardar". Tu apodo se mostrará en todos tus trabajos y comentarios.

Gestión de correo electrónico

La sección de correo electrónico muestra tu dirección actual y el estado de verificación:

• Verificado: Tu correo ha sido verificado y todas las funciones están disponibles
• No verificado: Haz clic en "Enviar correo de verificación" para completar la verificación y obtener créditos de bonificación
• Cambiar correo: Primero debes verificar tu correo actual, luego introducir una nueva dirección de correo para completar el cambio

Biografía

Introduce tu presentación personal en el área de biografía (recomendado: no más de 200 caracteres), luego haz clic en "Guardar" para actualizar.

Cambiar contraseña / Establecer contraseña

Haz clic en el botón "Cambiar contraseña" para abrir el diálogo de configuración de contraseña:

• Usuarios con contraseña existente: Introduce tu contraseña actual, luego establece una nueva contraseña (8-32 caracteres, incluyendo letras y números)
• Usuarios sin contraseña: Establece una nueva contraseña directamente. Después de establecerla, podrás iniciar sesión con correo y contraseña

Eliminar cuenta

Para eliminar tu cuenta, haz clic en el botón "Eliminar cuenta" en la parte inferior de la página. Por seguridad, deberás verificar tu identidad mediante un código de verificación por correo.

Nota: Después de enviar la solicitud de eliminación, tu cuenta entrará en un período de retención (normalmente 30 días) durante el cual no podrás iniciar sesión. Después de este período, el sistema eliminará permanentemente tus trabajos, créditos e historial.

Perfil: Gestiona avatar, apodo, correo y contraseña

2.2 Uso de almacenamiento

El módulo de Uso de almacenamiento muestra el consumo de almacenamiento de tu cuenta, ayudándote a entender el espacio restante y planificar tus creaciones.

Resumen de almacenamiento

La sección superior muestra tu uso general, incluyendo:

• Usado: El espacio de almacenamiento actualmente en uso
• Total: El límite de almacenamiento de tu cuenta (los usuarios del Pro disfrutan de mayor capacidad)
• Restante: Espacio disponible para crear nuevos trabajos
• Trabajos guardados: Número actual de trabajos guardados y el límite

Desglose de almacenamiento

El sistema categoriza el almacenamiento en tres tipos:

• Contenido HTML: Espacio utilizado por el código de las páginas web de tus trabajos
• Recursos de imagen: Espacio utilizado por archivos de imagen subidos
• Otros recursos: Espacio utilizado por otros archivos adjuntos

Límite de cantidad de trabajos

Los usuarios del Free y del Pro tienen diferentes límites de cantidad de trabajos. Cuando alcances el límite, deberás eliminar algunos trabajos o actualizar tu plan antes de crear nuevos.

Actualizar almacenamiento y mejorar plan

Haz clic en el botón de actualizar para refrescar la información de almacenamiento. Para obtener más espacio, haz clic en "Mejorar almacenamiento" para visitar la página de Precios y elegir un plan adecuado.

Consejo: Si el almacenamiento de tu cuenta está lleno o la cantidad de trabajos alcanza el límite, el sistema congelará la creación de nuevos trabajos. Por favor, elimina algunos trabajos o mejora tu plan para restaurar los permisos de subida.

2.3 Archivos

El módulo de Gestión de trabajos muestra todos los trabajos que has creado, con soporte para ver, editar, compartir y eliminar.

Lista de trabajos y filtros

Los trabajos se muestran como tarjetas o en lista. Puedes filtrarlos usando:

• Buscar: Introduce el código o título del trabajo para buscar
• Filtro por tipo: Filtrar por Generador IA, Subir archivo, Captura de URL, Pegar código, etc.
• Rango de fechas: Selecciona fechas de inicio y fin para filtrar trabajos de un período específico
• Ordenar por: Ordenar por más reciente, más antiguo, cantidad de me gusta o cantidad de vistas

Gestión de trabajos: Ver, filtrar y gestionar todos los trabajos

Ver y editar trabajos

Haz clic en el botón "Ver" en una tarjeta de trabajo para previsualizarlo. En la interfaz de vista previa, puedes:

• Editar el título del trabajo (doble clic en el título para editar)
• Hacer clic en "Editar" para entrar al editor visual y continuar editando
• Ver el historial de guardado del trabajo y restaurar a una versión específica

Gestión del estado de compartir

Los usuarios del Pro pueden compartir trabajos, permitiendo que otros los vean mediante un enlace:

• Habilitar compartir: Haz clic en el botón "Compartir" para generar un enlace válido por 7 días
• Actualizar enlace: Los trabajos ya compartidos pueden tener sus enlaces actualizados, renovando el período de validez
• Dejar de compartir: Haz clic en "Dejar de compartir" para invalidar inmediatamente el enlace

Eliminar trabajos

Haz clic en el botón "Eliminar" en una tarjeta de trabajo para eliminarlo. El sistema mostrará dos diálogos de confirmación para prevenir eliminaciones accidentales:

1. Primera confirmación: Pregunta si deseas eliminar este trabajo
2. Segunda confirmación: Te recuerda que la eliminación es irreversible

Consejo: Puedes eliminar hasta 3 registros a la vez. Después de eliminar un trabajo, su espacio de almacenamiento será liberado.

2.4 Créditos

El módulo de Historial de créditos muestra el historial de transacciones de créditos de tu cuenta, incluyendo registros de consumo y ganancias.

Historial de transacciones de créditos

Los registros de créditos se muestran en una tabla con la siguiente información:

• Fecha: Cuándo ocurrió el cambio de créditos
• Tipo: El tipo de operación del cambio de créditos
• Cambio de créditos: Créditos añadidos (positivo) o deducidos (negativo)
• Descripción: Explicación detallada del cambio

Puedes usar filtros de rango de fechas para ver registros de un período específico.

Tipos de créditos

• Generador IA: Créditos consumidos al usar la función de Generador IA
• Importar URL: Créditos consumidos al usar la función de Importar URL
• Recompensa de registro: Créditos otorgados a nuevos usuarios después del registro y verificación de correo
• Bonificación de la plataforma: Créditos regalados por la plataforma
• Regalo mensual: Asignación mensual de créditos para usuarios del Pro
• Recarga de créditos: Créditos obtenidos mediante compras
• Ajuste de administrador: Créditos ajustados manualmente por administradores

Historial de créditos: Ver detalles de transacciones de créditos

Consejo: Los usuarios del Pro reciben créditos adicionales cada mes. Los créditos pueden usarse para funciones de pago como Generador IA e Importar URL.

2.5 Pedidos

El módulo de Historial de pedidos muestra tu historial de compras y registros de pago, facilitando la consulta y gestión de pedidos.

Gestión de pedidos

La lista de pedidos muestra tus registros de compra. Puedes:

• Ver el estado y detalles del pedido
• Usar filtros para encontrar rápidamente pedidos específicos
• Continuar el pago de pedidos pendientes
• Cerrar o eliminar pedidos que ya no necesites

Consejo: Si encuentras problemas de pago, puedes cerrar el pedido actual y crear uno nuevo.

2.6 Portafolio

La página de Portafolio es tu espacio dedicado para ver y gestionar todas tus creaciones. Accede rápidamente desde la barra lateral o el menú de usuario.

Visualización de trabajos

La página muestra todos tus trabajos como tarjetas, cada una conteniendo:

• Vista previa en miniatura: Vista previa visual del trabajo para identificación rápida
• Título del trabajo: Muestra el nombre del trabajo, haz clic para editar
• Fecha de creación: Registra cuándo se creó el trabajo
• Estado de compartir: Muestra si el trabajo está actualmente compartido

Portafolio: Ver y gestionar todas tus creaciones en un solo lugar

Acciones rápidas

Cada tarjeta de trabajo proporciona botones de acción convenientes:

• Editar: Entrar al editor visual para continuar creando
• Compartir: Generar o gestionar enlaces de compartir (solo Pro)

3. Navegación lateral

HtmlDrag ofrece múltiples formas de importar contenido al editor, cubriendo todos los escenarios desde la creación desde cero hasta el procesamiento secundario. Usa la barra lateral izquierda para cambiar rápidamente entre puntos de entrada.

Navegación lateral: Acceso rápido a diferentes puntos de entrada de creación

3.1 Inicio

Inicio es el punto de entrada predeterminado de HtmlDrag, con el Generador IA. Introduce tu contenido aquí para generar rápidamente diseños web profesionales.

3.2 Importar URL

Importar URL te permite introducir cualquier enlace de página web pública, y el sistema capturará automáticamente el contenido de la página y generará un trabajo editable. Esta es la forma ideal de obtener rápidamente diseños web existentes para su posterior edición.

Introducir URL

Pega la dirección de la página web que deseas capturar en el campo de entrada. Solo se admiten enlaces públicos http/https; no se permiten direcciones privadas o locales.

Importar URL: Introduce la URL, captura la página web al instante

Confirmación de deducción de créditos

Después de hacer clic en "Iniciar captura", aparecerá un diálogo de confirmación de deducción de créditos, mostrando los créditos requeridos para esta operación, tu saldo de créditos actual y los créditos de bonificación mensuales. Los créditos de bonificación mensuales se deducen primero, con cualquier costo restante deducido de tus créditos actuales.

Progreso y estado de captura

Una vez confirmado, el sistema comienza a capturar el contenido de la página. Por favor, no abandones la página durante la captura para evitar interrupciones. Después de una captura exitosa, serás redirigido automáticamente al editor.

Consejos:

Algunos sitios web no pueden ser capturados: Los sitios web que requieren verificación de inicio de sesión o usan frameworks frontend complejos (como algunas aplicaciones SPA) pueden no capturarse o estar incompletos.

Sitios de audio/video: El contenido dinámico de sitios de audio y video puede no capturarse correctamente.

Página demasiado grande: Si el contenido de la página excede el tamaño permitido por el servidor, la captura puede fallar. Intenta con una página más simple.

3.3 Subir HTML

La función Subir HTML te permite importar archivos HTML locales a HtmlDrag. El sistema realizará un escaneo de seguridad y generará un trabajo editable. Esto es ideal para plantillas HTML existentes o diseños de correo que necesitan edición adicional.

Formato de archivo y límites de tamaño

Admite formatos de archivo .html y .htm. El tamaño de archivo único no debe exceder el límite del sistema (consulta la interfaz de subida para límites específicos). Los archivos subidos pasan por procesamiento avanzado, lo que puede aumentar significativamente el tamaño de almacenamiento real en comparación con el archivo original. Asegúrate de tener suficiente capacidad restante.

Subir HTML: Arrastra y suelta o haz clic para subir archivos HTML

Escaneo de seguridad

El sistema escanea los archivos subidos en busca de seguridad, detectando y eliminando scripts maliciosos potenciales, etiquetas peligrosas y recursos externos sospechosos. Según el nivel de riesgo (bajo, medio, alto, crítico), el sistema proporcionará advertencias apropiadas o bloqueará el guardado.

Nota: No subas archivos que contengan código malicioso. Las subidas maliciosas pueden resultar en la suspensión de la cuenta.

Vista previa y guardar

Después de analizar el archivo, puedes previsualizar el resultado en el área de vista previa. Una vez confirmado, haz clic en "Guardar trabajo" para guardar el trabajo en tu cuenta, y puedes entrar al editor visual para editar en cualquier momento.

3.4 Pegar código

La función Pegar código te permite pegar directamente código HTML, y el sistema realizará un escaneo de seguridad y lo convertirá en un diseño visual. Este es el método de importación más flexible, adecuado para desarrolladores o usuarios que necesitan control preciso sobre el código.

Pegar código HTML

Pega tu código HTML en el área de entrada de código. Opcionalmente puedes completar un título de trabajo (si se deja en blanco, el sistema usará el nombre predeterminado "Trabajo sin título").

Pegar código: Pega directamente código HTML para empezar a editar

Escaneo de seguridad

Similar a la subida de archivos, el sistema realiza detección de seguridad en el código pegado. Si el nivel de riesgo del código es demasiado alto, la política de seguridad del sistema rechazará procesar este contenido. Por favor, revisa el código e inténtalo de nuevo.

Nota: No pegues código o scripts maliciosos. El uso malicioso puede resultar en la suspensión de la cuenta.

Generar vista previa y guardar

Después de introducir el código, haz clic en el botón "Generar vista previa". Una vez que el código pase la verificación de seguridad, la vista previa se generará automáticamente. Después de confirmar el resultado, haz clic en "Guardar trabajo" para guardar el trabajo en tu cuenta.

3.5 Generador IA

Generador IA funciona mejor con material real: PDF, PPT/PPTX, Excel/XLSX, CSV, Word, Markdown, TXT, JPG/PNG o texto libre. Describe el objetivo: resumen, producto, evento, curso, explicación interna, datos, seguimiento comercial, portfolio o prueba temporal.

1. Sube el material o escribe el prompt con audiencia, propósito y estilo.
2. Deja que la IA organice títulos, párrafos, listas, tarjetas y secciones.
3. Revisa contenido, jerarquía, imágenes, tablas y orden del texto.
4. Refina en el lienzo de HtmlDrag textos, imágenes, bloques, colores y layout.
5. Guarda, comparte o descarga el HTML.

Textos largos, hojas de cálculo, PPT, imágenes y PDF se tratan de forma distinta según su contenido.

3.6 Precios

La página de Precios es donde gestionas tu suscripción y recargas de créditos. Elige el plan que mejor te convenga y desbloquea más posibilidades creativas.

Planes de Suscripción

HtmlDrag ofrece planes de suscripción Pro y Pro Max. Después de suscribirte, podrás usar los beneficios incluidos durante el periodo activo de la suscripción:

Pro: Para creadores habituales que necesitan el flujo completo de edición HTML, generación con IA, uso compartido y exportación.

Pro Max: Para creación con IA más intensiva, proyectos más grandes y límites de uso más altos.

Las suscripciones se renuevan según el ciclo de facturación mostrado en el checkout. Puedes gestionar o cancelar la renovación desde tu cuenta o desde el proveedor de pago.

Precios: Elige el plan que mejor te convenga

Recargar créditos

Si solo necesitas uso temporal de las funciones de generación IA o Importar URL, puedes optar por recargar créditos. Los créditos comprados nunca expiran, y puedes recargar en cualquier momento cuando te queden pocos, sin necesidad de esperar.

Comparación de características

Las principales diferencias entre el Free y el Pro son las siguientes:

Característica	Free	Pro
Generación de contenido IA	✓	✓
Todas las plantillas y estilos	✓	✓
Editor visual	✓	✓
Descargar como PNG	✓	✓
Descargar como HTML	✗	✓
Compartir trabajos	✗	✓
Edición de código en vivo	✗	✓
Créditos mensuales	Cuota básica	Cuota premium
Capacidad de almacenamiento	Capacidad básica	Mayor capacidad

Guía de uso de créditos

Cada generación de IA consume una cantidad fija de créditos. Los usuarios del Free reciben créditos de bonificación mensuales básicos, mientras que los usuarios del Pro reciben más. Los créditos comprados nunca expiran, y puedes recargar en cualquier momento cuando te queden pocos, sin esperar la recuperación de cuota.

3.7 Historial

En la barra lateral izquierda, "Mis trabajos" (Historial) proporciona acceso rápido a tus creaciones pasadas. Lista todos tus registros de edición en orden cronológico.

Selección y edición rápida

Haz clic en cualquier registro de la lista para cargarlo rápidamente en el editor y continuar donde lo dejaste, sin necesidad de reimportar.

Detalles de la ventana de vista previa

Pasa el cursor sobre un registro de historial para ver su ventana de vista previa. En la ventana de vista previa, puedes:

• Editar título directamente: Haz clic en el texto del título para modificar el nombre del trabajo al instante.
• Ver estado de compartir: Los iconos indican si el trabajo está actualmente compartido.
• Acciones rápidas: Accede a editar, eliminar y otros atajos.

Historial: Vista previa rápida y gestión de trabajos anteriores

4. Editor visual

El corazón de HtmlDrag es un potente editor WYSIWYG que te permite trabajar directamente en un entorno HTML real, eliminando la necesidad de editar código.

4.1 Vista general de la interfaz del editor

El editor utiliza un diseño clásico de tres columnas: navegación izquierda con historial de trabajos, área central de lienzo de vista previa y panel funcional derecho. Las barras superior e inferior proporcionan acciones de trabajo y controles de edición.

Interfaz del editor: Navegación izquierda, lienzo central, panel derecho

Navegación izquierda e historial

La navegación izquierda proporciona puntos de acceso rápido. Haz clic en "Mis trabajos" para expandir la lista de historial de trabajos para navegación y cambio rápido. Los trabajos compartidos muestran una insignia "Compartido" para ayudarte a gestionar el estado de compartir.

Área central del lienzo

El lienzo es la ventana de vista previa en vivo donde puedes seleccionar, arrastrar y editar directamente los elementos de la página. Admite operaciones de zoom y panorámica mediante el controlador de zoom en la parte inferior. Todas las ediciones se reflejan en tiempo real.

Panel derecho (Editar / Componentes / Capas / Biblioteca)

El panel derecho contiene cuatro pestañas: Editar (ajustes de estilo y conmutadores de modo), Componentes (insertar nuevos elementos), Capas (lista de capas y operaciones por lotes), y Biblioteca (biblioteca personal de componentes). Haz clic en cualquier pestaña para cambiar entre funciones.

Barra de título superior y acciones

La barra superior muestra el título del trabajo (doble clic para editar), con botones de acción a la derecha para compartir, descargar como imagen y descargar como HTML. Algunas funciones requieren privilegios del Pro.

Barra de herramientas inferior

La barra de herramientas inferior proporciona botones de Vista previa (abre en nueva ventana), Deshacer, Rehacer, Actualizar vista previa, Restaurar último estado guardado, Restaurar HTML inicial y Guardar para los controles de edición principales.

4.2 Operaciones básicas

HtmlDrag proporciona operaciones visuales intuitivas: pasar el cursor, clic simple, doble clic y clic derecho cubren la mayoría de las tareas de edición.

Reconocimiento de elementos

Pasa el cursor sobre cualquier elemento en el lienzo, y el sistema lo detecta automáticamente y muestra un borde discontinuo para ayudarte a identificar rápidamente los elementos accionables. El reconocimiento cubre texto, imágenes, botones, contenedores y otros elementos HTML.

Reconocimiento de elementos: Aparece borde discontinuo al pasar el cursor

Modo arrastrar

Clic simple en cualquier elemento para entrar en modo arrastrar, que muestra un borde de selección con ocho controladores de redimensionamiento. Puedes: arrastrar el elemento para reposicionarlo; arrastrar los controladores de esquina para escalar proporcionalmente; arrastrar los controladores de borde para redimensionar en una dirección. Mientras está seleccionado, el panel "Editar" de la derecha muestra las propiedades de estilo del elemento para ajuste.

Modo arrastrar: Haz clic para seleccionar, mueve y redimensiona libremente

Modo edición

Doble clic en un elemento de texto para entrar en modo edición; el cursor se posicionará dentro del texto para edición directa. En modo edición, el panel derecho muestra herramientas de estilo de texto para fuente, tamaño, color, negrita, cursiva y más. Haz clic fuera del elemento o presiona Esc para salir del modo edición.

Modo edición: Doble clic para entrar, edita texto directamente

Menú contextual

Clic derecho en un elemento seleccionado para abrir el menú contextual, proporcionando acceso rápido a Copiar, Pegar, Añadir a biblioteca, edición de enlaces, operaciones de capas, Bloquear, Ocultar, Eliminar y más. Ver 4.9 Menú contextual para detalles.

Selección múltiple

Mantén presionado Shift y haz clic en múltiples elementos para seleccionarlos juntos para operaciones por lotes. En modo de selección múltiple, el panel derecho muestra herramientas de alineación (alinear bordes izquierdo/derecho/superior/inferior, centrar horizontal/verticalmente, distribuir horizontal/verticalmente) para organización rápida del diseño.

Selección múltiple: Mantén Shift y haz clic para seleccionar múltiples elementos

4.3 Barra de acceso rápido Mis trabajos

La barra de acceso rápido "Mis trabajos" a la izquierda te permite expandir/contraer la lista de trabajos y cambiar entre trabajos rápidamente, facilitando transiciones suaves entre múltiples creaciones.

Expandir y contraer

Haz clic en el botón "Mis trabajos" en la esquina superior izquierda para expandir la lista de trabajos de la barra lateral. Haz clic de nuevo o haz clic fuera de la barra lateral para contraerla. Cuando está expandida, puedes ver visualmente las miniaturas y títulos de tus trabajos del historial.

Cambiar de trabajo

Haz clic en cualquier tarjeta de trabajo en la lista para cargar inmediatamente su contenido en el editor. Esto te permite comparar y modificar rápidamente diferentes borradores de diseño sin volver a la página de inicio o al perfil.

4.4 Atajos del lienzo

Dominar los atajos de teclado puede aumentar significativamente tu eficiencia de edición. Aquí están los principales atajos admitidos en el área del lienzo:

Acción	Atajo
Zoom	Ctrl / Cmd + Rueda del ratón
Panorámica	Espacio + Arrastrar ratón
Selección múltiple	Shift + Clic
Copiar	Ctrl / Cmd + C
Pegar	Ctrl / Cmd + V
Deshacer	Ctrl / Cmd + Z
Eliminar	Delete / Backspace

4.5 Panel derecho - Pestaña Editar

La pestaña "Editar" es el área más utilizada, proporcionando conmutadores de modo y herramientas de ajuste de estilo ricas. Después de seleccionar un elemento, el panel muestra inteligentemente opciones de edición basadas en el tipo de elemento.

Pestaña Editar: Conmutadores de modo y herramientas de estilo

Conmutadores de modo

La parte superior del panel proporciona cuatro interruptores de modo para controlar el comportamiento de interacción del editor. Cada conmutador puede activarse o desactivarse de forma independiente, con una notificación de mensaje que indica el estado actual.

Modo	Descripción
Edición de componentes	Cuando está habilitado, puedes seleccionar y ajustar componentes funcionales interactivos (como botones, campos de formulario, etc.); cuando está deshabilitado, solo se puede editar el contenido de texto. Ideal para escenarios que requieren manipulación precisa de elementos de formulario.
Navegación de enlaces	Cuando está habilitado, hacer clic en elementos con enlace en modo edición navega directamente a la URL de destino; cuando está deshabilitado, la navegación se bloquea para que puedas editar el elemento de enlace en sí. Nota: Esta configuración no afecta la funcionalidad de enlaces en vista previa o descarga.
Modo eliminar	Cuando está habilitado, puedes eliminar elementos simplemente haciendo clic en ellos sin usar el menú contextual; cuando está deshabilitado, se reanuda el modo de edición normal. Ideal para limpiar rápidamente múltiples elementos.
Capas decorativas	Cuando está habilitado, puedes identificar y editar contenedores vacíos y elementos decorativos (como contenedores de borde, capas de fondo, etc.); cuando está deshabilitado, solo se reconocen elementos con contenido real. Para diseños de página complejos, habilitar esta función permite un control más fino sobre los elementos decorativos.

Consejo: La navegación de enlaces está deshabilitada por defecto durante la edición para permitir la edición de componentes. Para seguir enlaces, activa el interruptor "Navegación de enlaces" en el panel Editar. El envío de formularios también está bloqueado en modo edición para proteger tu contenido.

Estilo de texto

Después de seleccionar un elemento de texto o entrar en modo edición, el panel muestra herramientas completas de estilo de texto con las siguientes opciones de formato:

Estilo de texto: Configuración de fuente, tamaño y color

Característica	Descripción
Fuente	Elige entre fuentes del sistema, fuentes inglesas (Inter, Roboto, Open Sans, etc.) y fuentes chinas (SimSun, SimHei, Microsoft YaHei, Source Han Sans, etc.).
Tamaño de fuente	Múltiples tamaños preestablecidos desde 12px hasta 72px, o introduce un tamaño personalizado manualmente.
Color de fuente / Color de fondo	Establece el color del texto y el resaltado de fondo mediante el selector de color, con soporte para selector de color del lienzo.
Negrita, Cursiva, Subrayado, Tachado	Alternancia con un clic para efectos de negrita, cursiva, subrayado y tachado.
Alineación	Cuatro opciones de alineación de texto: izquierda, centro, derecha y justificado.
Altura de línea, Espaciado de letras, Espaciado de párrafos	Ajusta finamente la altura de línea (1x a 3x), espaciado de letras y espaciado de párrafos para tipografía optimizada.
Superíndice, Subíndice	Formatea el texto seleccionado como superíndice o subíndice para fórmulas matemáticas, notaciones químicas, etc.
Lista con viñetas, Lista numerada	Convierte rápidamente texto en listas desordenadas (con viñetas) u ordenadas (numeradas).
Control de sangría	Aumenta o disminuye la sangría para ajustar la jerarquía de párrafos.

Estilo de elemento

Después de seleccionar cualquier elemento, usa las herramientas de estilo de elemento para ajustar su apariencia:

Característica	Descripción
Estilo de borde	Establece el tipo de borde (ninguno, sólido, discontinuo, punteado), ancho (1px-10px) y color. Haz clic en "Limpiar borde" para eliminar rápidamente todos los bordes.
Radio de esquina	Ajusta el radio de las cuatro esquinas para crear rectángulos redondeados o efectos circulares.
Opacidad	Usa el control deslizante para ajustar la opacidad del elemento (0%-100%) para efectos de transparencia.
Sombra	Cuatro preajustes de sombra: ninguna, sombra ligera, sombra media, sombra profunda, para efectos rápidos de profundidad.
Posición y tamaño	Establece con precisión las coordenadas X/Y del elemento y los valores de ancho/alto.
Bloquear relación de aspecto	Cuando está habilitado, ajustar el ancho escala automáticamente la altura proporcionalmente.

Estilo de imagen

Después de seleccionar un elemento de imagen, ajusta las opciones de visualización y reemplaza la imagen:

Característica	Descripción
Ajuste de imagen	Cuatro modos de ajuste: contain (escalar proporcionalmente), cover (llenar), fill (estirar), none (tamaño original).
Posición	Usa el posicionador de 9 cuadrículas para establecer la alineación de la imagen dentro de su contenedor (arriba-izquierda, arriba-centro, arriba-derecha, centro-izquierda, centro, centro-derecha, abajo-izquierda, abajo-centro, abajo-derecha).
Reemplazar imagen	Sube una nueva imagen local o introduce una URL para reemplazar. La subida local admite JPG, PNG, GIF, WebP y otros formatos comunes.

Estilo de tabla

Cuando se selecciona una tabla o celda de tabla, las herramientas de edición de tabla dedicadas están disponibles. Para instrucciones detalladas, consulta 4.10 Edición de tablas.

Estilo de tabla: Operaciones de filas/columnas, bordes y configuración de celdas

Característica	Descripción
Ops. de fila/columna	Inserta filas arriba/abajo, columnas izquierda/derecha, o elimina filas/columnas.
Alineación de celda	Establece la alineación horizontal (izquierda, centro, derecha) y vertical (arriba, medio, abajo) del contenido de la celda.
Estilo de borde	Ajusta el ancho del borde de la tabla, estilo (sólido, discontinuo, etc.) y color.
Fondo de celda	Establece el color de fondo de la celda, ideal para resaltar encabezados o datos importantes.
Combinar/Dividir	Selecciona celdas adyacentes para combinarlas en una; las celdas combinadas pueden dividirse de nuevo al estado original.

Edición de enlaces

Añade enlaces de navegación con clic a cualquier elemento, o edita enlaces existentes:

Característica	Descripción
Insertar / Editar enlace	Introduce la URL de destino para añadir navegación con clic al elemento seleccionado. Admite enlaces http/https.
Eliminar enlace	Elimina el enlace del elemento, restaurándolo a un elemento regular. El sistema confirmará el número de enlaces a eliminar antes de ejecutar.

Herramientas de alineación (Selección múltiple)

Cuando se seleccionan múltiples elementos, el panel muestra herramientas de alineación y distribución para ayudarte a organizar rápidamente los diseños de elementos:

Característica	Descripción
Alinear bordes izquierdo / derecho / superior / inferior	Alinea todos los elementos seleccionados al borde del elemento más a la izquierda/derecha/arriba/abajo.
Centrar horizontal / verticalmente	Alinea los puntos centrales de todos los elementos seleccionados horizontal o verticalmente.
Distribuir horizontal / verticalmente	Distribuye múltiples elementos seleccionados con espaciado igual horizontal o verticalmente.

4.6 Panel derecho - Pestaña Componentes

La pestaña "Componentes" proporciona opciones de inserción rápida para varios tipos de elementos, ayudándote a añadir rápidamente nuevo contenido al lienzo. Haz clic en un botón para insertar el componente correspondiente.

Pestaña Componentes: Inserta varios elementos con un clic

Componente	Descripción
Insertar texto	Inserta un bloque de texto editable en el lienzo. Haz doble clic después de insertar para entrar en modo edición y modificar el contenido.
Insertar botón	Inserta un elemento de botón preestilizado. Puedes editar el texto del botón y añadir un enlace de clic.
Insertar imagen	Abre el diálogo de subida de imagen que admite subida local o entrada de URL. Se aplican límites de tamaño de archivo único y subida por lotes; consulta la interfaz de subida para detalles.
Insertar icono	Abre el selector de iconos con seis categorías: Flechas, Formas, Símbolos, Social, Decorativo y Común. Establece el color y tamaño del icono antes de insertar.
Insertar tabla	Abre el selector de tamaño de tabla. Pasa el cursor para elegir filas y columnas (p. ej., tabla 3×4), luego haz clic para insertar.
Insertar enlace	Inserta un elemento de texto vinculado en el lienzo. Introduce la URL del enlace y el texto de visualización.
Insertar rectángulo / círculo	Inserta elementos de forma básicos. Usa las herramientas de estilo de elemento para ajustar borde, color de fondo, radio y otras propiedades para decoración o diseño.

4.7 Panel derecho - Pestaña Capas

La pestaña "Capas" proporciona una vista de lista de todos los elementos editables en el lienzo, admitiendo filtrado, operaciones por lotes y posicionamiento preciso, una herramienta poderosa para gestionar elementos de página complejos.

Pestaña Capas: Gestión de capas y operaciones por lotes

Lista de tarjetas de elementos

El panel muestra todos los elementos gestionables como tarjetas. Cada tarjeta muestra el tipo de etiqueta del elemento (p. ej., DIV, IMG, SPAN) y el nivel de capa, con los elementos de texto mostrando una vista previa del contenido. Los elementos de capas decorativas están marcados con una insignia "Decorativo". Los iconos de bloquear/desbloquear y ocultar/mostrar rápidos aparecen en el lado derecho de cada tarjeta.

Opciones de filtro

Haz clic en el botón de filtro para filtrar la lista por estado del elemento, con las siguientes opciones:

Filtro	Descripción
Todos	Mostrar todos los elementos gestionables
Bloqueados	Mostrar solo elementos bloqueados
Desbloqueados	Mostrar solo elementos desbloqueados
Ocultos	Mostrar solo elementos ocultos
Visibles	Mostrar solo elementos visibles

Operaciones por lotes

Después de seleccionar múltiples elementos en la lista de tarjetas, usa los botones de operación por lotes para procesamiento unificado:

Operación	Descripción
Seleccionar todo / Invertir selección	Selecciona rápidamente todos los elementos o invierte la selección actual
Bloquear seleccionados / Desbloquear seleccionados	Bloquea o desbloquea por lotes los elementos seleccionados; los elementos bloqueados no pueden editarse ni moverse
Ocultar seleccionados / Mostrar seleccionados	Oculta o muestra por lotes los elementos seleccionados; los elementos ocultos son invisibles en el lienzo pero permanecen en el HTML
Eliminar seleccionados	Elimina por lotes los elementos seleccionados con mensaje de confirmación

Interruptor de precisión

La pestaña Capas proporciona un interruptor de precisión para controlar la exactitud del reconocimiento de elementos:

Estado	Descripción
Precisión activada	Auto-deduplicación, mostrando solo elementos host para reducir tarjetas duplicadas
Precisión desactivada	Muestra todos los elementos candidatos (incluyendo fragmentos en línea), ideal para operaciones precisas de elementos en línea

Clic en tarjeta para localizar

Haz clic en cualquier tarjeta de elemento para desplazar automáticamente el lienzo y resaltar el elemento correspondiente, facilitando la localización rápida de componentes específicos en la página. Esto es especialmente útil cuando trabajas con diseños de página complejos o con capas.

4.8 Panel derecho - Pestaña Biblioteca

La pestaña "Biblioteca" es tu biblioteca personal de componentes donde puedes guardar elementos o componentes de uso frecuente para reutilizarlos en diferentes trabajos, aumentando tu eficiencia creativa.

Pestaña Biblioteca: Biblioteca personal de componentes

Lista de componentes favoritos

El panel muestra todos tus componentes guardados como tarjetas, cada una mostrando una miniatura y nombre. Las miniaturas se generan automáticamente al guardar; los componentes sin nombre se muestran como "Sin título".

Buscar favoritos

Usa el cuadro de búsqueda para encontrar rápidamente componentes guardados por nombre. La lista se filtra en tiempo real mientras escribes.

Insertar componente favorito

Haz clic en el botón "Insertar" en una tarjeta de biblioteca para añadir ese componente al lienzo actual. Los componentes insertados pueden editarse y ajustarse normalmente.

Renombrar / Eliminar favoritos

Cada tarjeta de biblioteca ofrece opciones de "Renombrar" y "Eliminar". Renombrar facilita encontrar los componentes más tarde; la eliminación borra permanentemente el componente guardado, úsala con precaución.

Cómo añadir a la biblioteca

Selecciona cualquier elemento en el lienzo, luego elige "Añadir a biblioteca" del menú contextual para guardar ese elemento y sus hijos como un componente. Aparece una confirmación "Añadido a biblioteca" cuando tiene éxito.

4.9 Menú contextual

Hacer clic derecho en un elemento seleccionado abre el menú contextual, proporcionando acceso rápido a acciones comunes. El contenido del menú se ajusta dinámicamente según el tipo de elemento seleccionado.

Menú contextual: Acceso rápido a acciones comunes

Elemento del menú	Descripción
Copiar / Pegar	Copia el elemento seleccionado al portapapeles, o pega el contenido del portapapeles en el lienzo. Admite copiar y pegar entre trabajos.
Añadir a biblioteca	Guarda el elemento seleccionado en tu biblioteca personal para reutilizarlo en otros trabajos.
Añadir/Editar/Eliminar enlace	Añade un enlace de navegación con clic al elemento, o edita/elimina enlaces existentes. La eliminación solicita confirmación.
Reemplazar imagen	Se muestra solo para elementos de imagen; reemplaza rápidamente con una subida local o imagen URL.
Mover arriba / Mover abajo	Ajusta la posición del elemento en el orden de apilamiento; mover arriba lo trae hacia adelante.
Traer al frente / Enviar al fondo	Mueve el elemento directamente al frente o al fondo de todos los elementos.
Bloquear / Desbloquear	Los elementos bloqueados no pueden editarse ni moverse, previniendo cambios accidentales. Desbloquear restaura la capacidad de edición.
Ocultar / Mostrar	Oculta temporalmente el elemento del lienzo mientras lo mantiene en el HTML. Mostrar restaura la visibilidad.
Eliminar	Elimina permanentemente el elemento seleccionado. Cuando se seleccionan múltiples elementos, se muestra la cantidad.

Menú específico de tabla

Al hacer clic derecho en una celda de tabla, el menú muestra operaciones adicionales específicas de tabla:

Elemento del menú	Descripción
Eliminar fila	Elimina la fila completa que contiene la celda actual (no puede eliminar la última fila)
Eliminar columna	Elimina la columna completa que contiene la celda actual (no puede eliminar la última columna)

4.10 Edición de tablas

Cuando se selecciona una tabla o celda de tabla, el panel derecho muestra herramientas de edición de tabla dedicadas con funciones completas de estilo y ajuste de estructura de tabla.

Edición de tabla: Operaciones de filas/columnas y configuración de estilo

Operaciones de filas y columnas

La sección "Filas y columnas" del panel de edición de tabla proporciona:

Operación	Descripción
Insertar fila arriba / abajo	Inserta una nueva fila arriba o abajo de la fila actual
Eliminar fila	Elimina la fila actualmente seleccionada (no puede eliminar la última fila)
Insertar columna izquierda / derecha	Inserta una nueva columna a la izquierda o derecha de la columna actual
Eliminar columna	Elimina la columna actualmente seleccionada (no puede eliminar la última columna)

Combinar / Dividir celdas

Después de seleccionar múltiples celdas adyacentes, usa "Combinar celdas" para unirlas en una. Para celdas combinadas, usa "Dividir celda" para restaurarlas a las múltiples celdas originales.

Alineación de celdas

Establece la alineación del contenido de la celda en dos dimensiones:

Dimensión	Opciones
Horizontal	Izquierda, Centro, Derecha
Vertical	Arriba, Medio, Abajo

Estilo de borde

Personaliza la apariencia del borde de la tabla incluyendo:

Propiedad	Descripción
Ancho del borde	Establece el grosor del borde
Estilo del borde	Sólido, Discontinuo, Punteado, Doble, Ninguno
Color del borde	Elige el color del borde mediante el selector de color

Haz clic en "Aplicar" para guardar los cambios.

Fondo de celda

Establece el color de fondo de la celda usando el selector de color, ideal para resaltar encabezados o filas de datos importantes.

4.11 Control de zoom y ventana gráfica

El controlador de zoom en la parte inferior del lienzo proporciona ajuste de zoom y tamaño de ventana gráfica, ayudándote a previsualizar tu trabajo en diferentes tamaños de dispositivo.

Control de zoom: Ajusta el zoom del lienzo y el tamaño de la ventana gráfica

Acercar / Alejar / Restablecer

Usa los botones "+" y "−" para acercar o alejar la vista del lienzo, o mantén presionado Ctrl/Cmd + rueda del ratón para hacer zoom rápidamente. Haz clic en el número de porcentaje para restablecer el zoom predeterminado. Mantén Espacio + arrastrar para panoramizar el lienzo.

Preajustes de tamaño de ventana gráfica

Haz clic en el selector de ventana gráfica para cambiar entre tamaños de vista previa, simulando la visualización en diferentes dispositivos:

Tamaño de ventana gráfica	Descripción
Automático	Coincide con el tamaño del contenido, adecuado para la mayoría de escenarios
Escritorio 1920×1080 (Predeterminado)	Monitor de escritorio Full HD
Escritorio 1440×900	Pantalla de portátil común
Escritorio 1366×768	Resolución de portátil popular
Escritorio 1280×720	Resolución HD
Tablet 1024×768	Dispositivo tablet estándar
Móvil 375×812	iPhone y dispositivos móviles similares

Parches de vista previa

Para páginas HTML con estructuras especiales, hay tres parches de vista previa disponibles para optimizar la visualización. Habilitar o deshabilitar parches guardará automáticamente y actualizará la vista previa:

Parche	Descripción
USP — estabilizar páginas ultra altas	Optimiza lienzos ultra altos o sin límites, reduciendo el temblor. Adecuado para archivos estáticos complejos/sin límites
UFP — fijar el ancho de la ventana gráfica	Restringe el ancho de la ventana gráfica, restaurando la visualización correcta de diseños complejos
SHP — optimizar tamaños inusuales	Optimiza HTML con estructuras inusuales para mejorar la compatibilidad

Consejo: Si los parches no muestran un efecto notable, primero intenta "Restaurar HTML inicial", luego vuelve a habilitar el parche.

4.12 Editor HTML

El Editor HTML te permite ver y editar directamente el código fuente HTML completo de tu trabajo, ideal para usuarios avanzados que necesitan ajustes finos o adiciones de código personalizado. Esta función es solo para el Pro.

Editor HTML: Edita el código fuente directamente (Pro)

Ver / Editar HTML completo

Cuando abres el Editor HTML, se muestra el código fuente HTML completo (incluyendo <!DOCTYPE html>). Puedes editar el código directamente; guardar aplica tus cambios.

Buscar y reemplazar

Usa Ctrl+F para abrir buscar, introduciendo palabras clave para localizar código rápidamente. Usa Ctrl+H para abrir reemplazar para reemplazo de texto por lotes. La barra de herramientas muestra el recuento de coincidencias (p. ej., "3 / 15"), con opciones para individual o reemplazar todo.

Ir a línea

Usa Ctrl+G o la función de salto de la barra de herramientas para introducir un número de línea y navegar rápidamente a esa línea, útil para archivos HTML grandes.

Coincidir mayúsculas

Habilita la opción "Coincidir mayúsculas" durante la búsqueda para coincidir con precisión contenido sensible a mayúsculas.

Ajuste de línea

Cuando el ajuste de línea está habilitado, las líneas de código largas se ajustan automáticamente para verlas sin desplazamiento horizontal.

Copiar / Guardar

Haz clic en "Copiar HTML" para copiar el código fuente completo al portapapeles. Después de editar, haz clic en Guardar para aplicar los cambios. Si el contenido está vacío o contiene errores de sintaxis, aparecerán mensajes apropiados.

Nota: Si el contenido HTML excede los límites de almacenamiento, al guardar se mostrará "Almacenamiento insuficiente, no se puede guardar esta edición." Elimina contenido innecesario o actualiza tu plan para aumentar la capacidad.

4.13 Barra de herramientas inferior

La barra de herramientas inferior proporciona los botones de acción principales del editor, incluyendo funciones de vista previa, deshacer/rehacer, restaurar y guardar.

Barra de herramientas inferior: Vista previa, guardar y restaurar

Vista previa (Abre en nueva ventana)

Haz clic en el botón de vista previa para abrir una vista previa completa de tu trabajo en una nueva ventana, mostrando el resultado de visualización real. La página de vista previa muestra un aviso de vista previa temporal recordando a los usuarios que esta es una vista previa de fase de edición con un enlace no reutilizable.

Deshacer / Rehacer

Deshacer revierte la última operación; Rehacer restaura una operación deshecha. Admite múltiples pasos de deshacer/rehacer. También disponible mediante Ctrl+Z (deshacer) y Ctrl+Y (rehacer).

Actualizar vista previa

Al hacer clic en actualizar se recarga el área de vista previa. El sistema primero guarda el contenido actual, luego actualiza el lienzo para mostrar el estado más reciente. Útil después de ediciones extensas para sincronizar la visualización.

Restaurar último estado guardado

Restaura el trabajo al último estado guardado manualmente. Todas las ediciones no guardadas se perderán, úsalo con precaución. El sistema solicita confirmación antes de ejecutar.

Restaurar HTML inicial

Restaura el HTML del trabajo a su estado original cuando se creó por primera vez. Todo el historial de edición será eliminado. Esta acción es irreversible, asegúrate de haber respaldado el contenido importante.

Guardar

Guarda manualmente todos los cambios actuales. El sistema también admite guardado automático, pero se recomienda guardar manualmente después de ediciones importantes para asegurar la seguridad de los datos. "Guardado exitoso" aparece al completarse.

4.14 Barra de herramientas superior

La barra de herramientas superior muestra información del trabajo y botones de acción rápida, proporcionando acceso rápido a funciones de compartir y descarga.

Barra de herramientas superior: Título, compartir y descargar

Título del trabajo (Doble clic para editar)

La parte superior muestra el título del trabajo actual; haz doble clic en el área del título para entrar en modo edición y cambiar el nombre. El título no puede estar vacío; "Título actualizado exitosamente" aparece cuando tiene éxito. Los trabajos sin nombre se muestran como "Trabajo sin título".

Botón compartir

Haz clic en el botón compartir para habilitar el compartir del trabajo y generar un enlace accesible. Ver 4.16 Función compartir para detalles. Esta función es solo para el Pro.

Botones de descarga

El lado derecho proporciona botones de "Descargar como imagen" y "Descargar como HTML". Ver 4.15 Descargar trabajo para detalles.

4.15 Descargar trabajo

HtmlDrag ofrece opciones de exportación flexibles, permitiéndote descargar tu trabajo como imagen o archivo HTML estándar para compartir, archivar o desarrollo posterior.

Haz clic en el botón "Descargar como imagen" en la barra superior para generar y descargar una imagen PNG de alta calidad de todo el contenido del lienzo. Esto es perfecto para mostrar diseños, compartir en redes sociales o vistas previas.

Descargar como HTML

Los usuarios del Pro pueden exportar trabajos como archivos de código fuente HTML estándar. Al hacer clic en el botón "Descargar como HTML" se ofrecen dos opciones:

• Descargar HTML actual: Incluye todas las modificaciones y ajustes que has hecho en el editor, lo que ves es lo que obtienes.
• Descargar HTML original: Exporta el código original de cuando se creó el trabajo por primera vez, sin ediciones posteriores.

Opciones de descarga: Elige entre versión editada actual o versión original

4.16 Función compartir

La función Compartir te permite generar un enlace de acceso público para tu trabajo, facilitando compartir creaciones. La página de compartir también proporciona estadísticas de acceso. Esta función es solo para el Pro.

Configuración de compartir: Gestiona enlace y estado

Configuración y gestión

• Habilitar compartir: Haz clic en el botón compartir para generar un enlace de compartir único. Al habilitarlo por primera vez, aparece "Compartir habilitado, enlace copiado al portapapeles".
• Validez: Los enlaces de compartir son válidos por 7 días por defecto. Puedes ver la hora de expiración específica en el diálogo de compartir.
• Actualizar tiempo: Si el enlace está por expirar o quieres extenderlo, haz clic en "Actualizar enlace" para restablecer el período de validez.
• Dejar de compartir: Haz clic en "Dejar de compartir" para invalidar inmediatamente el enlace actual, previniendo más accesos.
• Copiar enlace: Haz clic en el botón copiar para copiar el enlace de compartir a tu portapapeles.

Página de compartir y estadísticas

Los visitantes que abran el enlace de compartir verán una página de presentación independiente. La barra lateral derecha muestra información del trabajo, incluyendo:

• Título y autor: Muestra tu apodo y el título del trabajo.
• Estadísticas: Visualiza las Vistas y Me gusta para seguir la popularidad.
• Expiración: Muestra cuándo expirará el enlace de compartir.

Página de compartir: Vista del visitante y estadísticas

Nota: Si un trabajo es reportado y verificado por violaciones de políticas, el sistema puede deshabilitar el compartir para ese trabajo con el mensaje "Este trabajo ha sido reportado y verificado, el compartir ha sido deshabilitado por el sistema."

5. Otras funciones

Además de las funciones de edición principales, HtmlDrag también proporciona funciones de mensajes y comentarios para ayudarte a mantenerte actualizado y comunicarte con nosotros.

5.1 Mensajes

El módulo de Mensajes recibe notificaciones importantes del sistema, incluyendo estado de cuenta, recordatorios de pago, alertas de expiración de suscripción y actualizaciones de funciones.

Mensajes: Recibe notificaciones y alertas del sistema

Lista de mensajes del sistema

La lista de mensajes está ordenada cronológicamente, mostrando el título, resumen, hora de creación y hora de expiración. Haz clic en un mensaje para ver detalles o realizar acciones (p. ej., "Continuar pago", "Renovar ahora").

Filtro de no leídos

Marca la casilla "Solo no leídos" en la esquina superior derecha para filtrar rápidamente los mensajes no leídos, ayudándote a enfocarte en notificaciones importantes.

Marcar todos como leídos

Haz clic en el botón "Marcar todos como leídos" para marcar instantáneamente todos los mensajes en la lista actual como leídos, limpiando los indicadores de punto rojo.

Detalles del mensaje

Haz clic en una tarjeta de mensaje para ver el contenido completo de la notificación. Para mensajes de pedidos o suscripción, los detalles a menudo incluyen botones de acción rápida para tu conveniencia.

5.2 Comentarios

Si encuentras problemas o tienes sugerencias, envíalos a través del módulo de Comentarios. Puedes subir imágenes para describir mejor tu problema.

Comentarios: Envía problemas o sugerencias

Lista de comentarios y estado

La lista muestra tu historial de envíos y estado actual:

• En progreso: Comentario enviado, esperando revisión del administrador.
• Respondido: El administrador ha respondido; haz clic para ver.
• Cerrado: Comentario archivado o resuelto; no se permiten más respuestas.

Enviar nuevo comentario

Haz clic en "Nuevo comentario", introduce tu contenido (requerido, mín. 10 caracteres). Puedes "Subir imágenes" (máx. 2MB cada una) para proporcionar capturas de pantalla. Haz clic en "Enviar comentario" cuando termines.

Detalles del comentario y conversación

Haz clic en un elemento de la lista para ver el historial completo de conversación, incluyendo tus mensajes y respuestas del administrador. La parte superior muestra el ID del comentario y los archivos adjuntos.

Continuar respuesta

Para comentarios "En progreso" o "Respondido", usa el cuadro de entrada en la parte inferior para proporcionar más información o responder al administrador hasta que se resuelva.

6. Consejos del sistema

Durante el uso, puedes encontrar alertas o límites del sistema. Aquí hay explicaciones y sugerencias para consejos comunes del sistema.

6.1 Alertas de detección HTML

Para garantizar la calidad de importación y la estabilidad del editor, el sistema escanea automáticamente URLs y archivos, alertándote de posibles problemas.

Detección de recursos locales

Si una página contiene rutas locales (p. ej., file:// o C:/), los recursos no se cargarán. Sugerencia: Asegúrate de que todos los recursos usen enlaces HTTP/HTTPS públicos.

Protección de hotlink de imágenes

Algunos sitios bloquean el acceso externo a imágenes. Sugerencia: Usa "Reemplazar imagen" para subir archivos locales o alojarlos en un servicio público.

Páginas de renderizado dinámico (SPA)

Las páginas que dependen completamente de JavaScript (SPA) pueden importarse vacías o incompletas porque el DOM dinámico no se captura directamente. Sugerencia: Usa "Pegar código" copiando el HTML renderizado desde tu navegador.

Fuentes externas / Bibliotecas de iconos

Las fuentes o iconos con cabeceras CORS faltantes pueden mostrarse incorrectamente. Sugerencia: Reemplázalos con fuentes del sistema o iconos de biblioteca en el editor.

Contenido incrustado (iframe)

Por seguridad, algún contenido de iframe puede estar bloqueado o no ser interactivo. El sistema preserva marcadores de posición cuando es posible.

6.2 Almacenamiento y límites

HtmlDrag aplica cuotas de recursos basadas en tu plan. Puedes ver alertas de "Límite de almacenamiento alcanzado" o "Límite de trabajos alcanzado".

Límite de almacenamiento alcanzado

No puedes guardar ediciones ni subir archivos cuando te quedas sin espacio. Solución:

• Elimina elementos antiguos en "Portafolio" para liberar espacio.
• Haz clic en "Actualizar ahora" en el diálogo para obtener más capacidad con un Pro.

Límite de cantidad de trabajos

Los usuarios del Free tienen un límite en el número de trabajos guardados. Elimina trabajos antiguos o actualiza para aumentar este límite.

Límites de subida de imágenes

El sistema verifica el tamaño de archivo único y los límites por lotes. Si ves "El tamaño del archivo excede el límite" o "Tamaño de lote excedido", comprime las imágenes o súbelas en lotes más pequeños. Los usuarios del Pro disfrutan de límites más altos.

6.3 Escaneo de seguridad

El Escaneo de seguridad integrado evalúa automáticamente el riesgo del contenido al importar URLs, subir archivos o pegar código para proteger tu cuenta.

Nivel de riesgo

Basándose en amenazas como XSS, scripts maliciosos o etiquetas peligrosas, los riesgos se clasifican como:

• Riesgo bajo: Advertencias menores; generalmente seguro para proceder.
• Riesgo medio: Posibles problemas; procede con precaución.
• Riesgo alto: Riesgos severos; procede solo si la fuente es confiable.
• Riesgo crítico: Contiene malware o contenido de phishing; bloqueado inmediatamente.

Modo seguro

Para archivos con algún riesgo, el sistema ofrece "Medidas de seguridad" como Sanitización automática. Puedes elegir "Continuar en modo seguro", donde el sistema elimina código peligroso mientras preserva el diseño y la capacidad de edición.