A veces la página que necesitas actualizar ya está online, pero el archivo HTML original no está disponible. Puede que estés revisando una campaña anterior, recuperando una página estática de un proyecto antiguo o preparando un nuevo mensaje mientras la persona responsable del código no está disponible. La página visible sigue siendo útil; reconstruir cada sección solo para cambiar un titular, una imagen o una llamada a la acción no lo es.
En ese caso, empieza con la URL que tienes permiso para utilizar. Un flujo de importación por URL captura una página accesible como copia de trabajo editable. Así puedes revisar el diseño real, hacer cambios visuales concretos, comprobar el resultado y después entregar o exportar el HTML. La web publicada en esa URL no se modifica.
Esta guía muestra cómo editar una página web existente desde una URL sin reescribir el código. La demostración importa la página pública de marketing de Firefox en HtmlDrag como copia de trabajo. La página de Firefox solo es la fuente del ejemplo: todos los cambios se mantienen dentro del proyecto importado y no actualizan la página original.
¿Se puede editar una página web teniendo solo su URL?
En el caso de una página accesible, sí. Introduce la URL pública completa http o https en un editor HTML visual, deja que cree un proyecto editable y trabaja sobre la página renderizada. Es útil para editar la capa visible —titulares, textos, imágenes, colores, espacios o CTA— sin buscar primero cada regla en el código.
La diferencia importante es entre una copia de trabajo y el sitio original. La importación por URL proporciona una página para revisar y perfeccionar; no concede acceso al servidor de producción, no publica cambios automáticamente y no sincroniza la página activa. El despliegue, los formularios, la analítica y las demás funciones siguen perteneciendo a tu proceso habitual.
Cuándo conviene empezar con URL Import
Usa URL Import cuando la dirección web es la fuente que realmente tienes. Si la jerarquía, la navegación, las imágenes y las secciones ya funcionan y solo falta el acabado visual, es mejor que empezar desde una página en blanco.
- URL Import es la opción adecuada cuando partes de una página pública accesible.
- Upload HTML es la opción adecuada cuando tienes el archivo local
.htmlo.htm. - Paste Code es la opción adecuada cuando partes de HTML copiado de una herramienta de IA, de un compañero o de otro proyecto.
Antes de importar, elige una página que puedas utilizar y empieza con una URL pública completa. Las zonas que exigen inicio de sesión, los paneles con datos personales y las aplicaciones muy interactivas son malos candidatos para un acabado visual. Una landing page pública y clara es mucho más sencilla de revisar y validar.
Cómo importar una URL web en un proyecto HTML editable
El flujo es sencillo:
Pegar la URL → capturar la página accesible → revisar todo el diseño → hacer cambios visuales deliberados → previsualizar → exportar la copia de trabajo
1. Empieza con la URL, no con una plantilla nueva
Abre URL Import y pega la dirección pública. En este ejemplo, la fuente es https://www.firefox.com/en-US/. En este momento todavía no se ha cambiado nada; la URL solo indica qué página visible debe convertirse en proyecto.
2. Deja que la página se convierta en una copia de trabajo
Inicia la importación y espera a que termine la captura. Esta fase crea el proyecto editable a partir de la página accesible. No promete reproducir todos los scripts remotos, descargas o servicios en tiempo real; representa el traspaso de una página pública a un flujo visual de HTML.
3. Revisa la página importada antes de editar
Cuando se abra en el lienzo, observa la página como una composición completa antes de seleccionar un elemento. El ejemplo de Firefox conserva la cabecera, el hero, los textos de apoyo, el CTA, la ilustración y las tarjetas de funciones. Esta primera revisión te ayuda a decidir qué funciona y dónde una modificación local aporta más valor.
Haz un acabado visual en vez de reconstruir la página
Un buen acabado no significa cambiarlo todo. Empieza por el mensaje que el visitante ve primero, continúa con los pocos elementos que lo apoyan y deja intacto lo que ya funciona. Así la página importada sigue siendo comprensible y cada decisión es fácil de revisar.
Empieza por el titular y su jerarquía visual
El titular del hero suele ser el primer punto de control porque contiene la promesa principal. Selecciónalo en el lienzo, júzgalo junto con el texto y la imagen cercanos y prueba un tratamiento concreto con los controles de texto. En el ejemplo, el titular está seleccionado y se revisa una opción de color dentro del contexto de la página.
El color y el tamaño solo funcionan si conservan el orden de lectura. La siguiente vista muestra por qué importa el contexto: el titular es más grande y parcialmente rojo, mientras la última palabra permanece blanca. Un cambio llamativo puede aumentar la atención, pero debe conservar contraste, espacio y equilibrio con el resto del hero.
Revisa las tarjetas de apoyo elemento por elemento
Cuando el hero esté claro, revisa los contenidos que lo refuerzan. Selecciona solo el título, párrafo o icono que necesita atención, en lugar de aplicar un cambio general a toda la sección. En la página importada, se selecciona por separado la tarjeta Privacy as a standard, manteniendo las demás como contexto.
Sustituye una imagen desactualizada sin reconstruir la sección
El acabado visual no se limita al texto. Si la imagen es un elemento compatible, selecciónala y abre el menú contextual para encontrar la acción de reemplazo. Puedes conservar la estructura y el texto cercano mientras pruebas un recurso más relevante.
Aquí la ilustración original se sustituye por una imagen de montaña en la copia de trabajo. La idea no es que todas las páginas necesiten una montaña, sino poder juzgar un reemplazo concreto dentro del diseño real: recorte, peso visual, texto cercano y relación con la sección.
Comprueba la jerarquía de sección y el tratamiento del CTA
No dejes que el primer cambio del hero sea la única decisión. Un título más abajo aparece en otra fase del recorrido de lectura y puede necesitar un énfasis diferente. Selecciónalo en contexto y revisa tamaño, color, alineación y espacio antes de decidir.
La llamada a la acción principal merece una revisión igual de concreta. Debe ser fácil de encontrar después de entender la página, pero no dominar el mensaje que la precede. El editor visual ayuda a revisar texto, tamaño, contraste y posición; el destino y el funcionamiento de descargas, formularios, pagos u otras acciones deben probarse en el entorno final.
Previsualiza y exporta la página que realmente revisaste
Antes de entregar, aléjate del elemento seleccionado y revisa la página como lo haría un visitante: titular, explicación, funciones, CTA y diseño móvil. Un cambio que parece correcto por separado puede producir un salto de línea extraño, poco contraste o un CTA desconectado en el conjunto.
Cuando estés listo para entregar el trabajo, elige la versión que quieres exportar. El cuadro de exportación distingue entre Edited HTML y Original HTML, para que puedas seleccionar conscientemente el resultado actual del lienzo o el HTML inicial importado.
La previsualización de página completa es la última comprobación visual. En este ejemplo muestra el nuevo tratamiento del hero y la imagen sustituida, mientras conserva la estructura general. Solo revisando la copia completa puedes comprobar si un cambio local sigue encajando en toda la página.
Qué no sustituye URL Import
URL Import es adecuado para el acabado visual de la capa HTML visible, pero no reemplaza todas las tareas de producción. Valida siempre con tu flujo habitual:
- envíos de formularios, pagos, inicios de sesión y contenido de cuentas;
- analítica, consentimiento, redirecciones, descargas e integraciones de terceros;
- interacciones controladas por scripts, datos en tiempo real, iframes, Canvas y recursos protegidos;
- despliegue final, QA y aprobación de la página de destino.
Si la página requiere login, bloquea la captura o es demasiado dinámica para crear una copia fiable, empieza con el archivo HTML real o con el código fuente. El objetivo no es forzar todas las webs por la misma entrada, sino elegir el punto de partida más rápido y fiable.
Preguntas frecuentes
¿Puedo editar una web activa pegando su URL?
Puedes crear una copia de trabajo editable de una página accesible. Los cambios del proyecto no actualizan la web activa original. Para publicar, sigue tu propio proceso de despliegue o entrega.
¿Puedo cambiar el texto de una web sin abrir el HTML?
En el caso de texto visible compatible, selecciónalo en la página renderizada y edítalo en contexto. Después revisa toda la página para asegurar que el nuevo mensaje funciona con el diseño, la imagen y el CTA.
¿Puedo reemplazar una imagen después de importar una URL?
Cuando la imagen importada es compatible, selecciónala y usa la acción de reemplazo. Antes de exportar, revisa recorte, tamaño, contraste y relación con el texto cercano.
¿Todos los imports por URL se ven exactamente como la página original?
No siempre. Login, protección anti-bot, fuentes y recursos externos, lazy loading, datos dinámicos, scripts, iframes y otros comportamientos cross-origin pueden afectar el resultado. Comprueba el proyecto en la vista previa y cambia a un archivo HTML o al código fuente si esa opción es más fiable.
Conclusión
Cuando una página útil ya está online, su URL puede ser el punto de partida más práctico. Importa la página accesible como copia de trabajo, conserva la estructura que funciona, toma unas pocas decisiones visuales deliberadas y comprueba el resultado antes de exportarlo.
Con HtmlDrag, URL Import convierte una página existente en un proyecto HTML editable para el acabado final: texto, imágenes, jerarquía y CTA, sin reconstruir la página ni reescribir cada línea de código.