Tienes una página construida en HTML, CSS y JavaScript puro, y quieres seguir editándola dentro de Elementor, no reconstruirla desde cero ni dejarla atrapada en un widget de código. Para eso sirve exactamente un conversor, pero las tres partes (HTML, CSS, JS) se comportan de forma distinta, así que conviene abordarlas una por una.
El objetivo: editable, no incrustado
Hay dos maneras de llevar HTML existente a Elementor que en realidad no cuentan. Pegarlo en un widget HTML lo incrusta como un bloque que no puedes editar visualmente. Reconstruirlo a mano funciona, pero descarta el marcado que ya tienes. Lo que realmente quieres es que tus títulos se conviertan en widgets de Título, tu texto en widgets de Editor de texto, tus botones en widgets de Botón y tu maquetación en Contenedores reales, para que después puedas editar cada parte en el panel de Elementor.
El HTML se convierte en widgets nativos
Pega tu HTML en el conversor y elige el modo Componentes nativos. Cada elemento se asigna al widget de Elementor que le corresponde: los títulos a Título, los párrafos y listas a Editor de texto, las imágenes a Imagen, los enlaces con estilo de botón a Botón y los elementos contenedores a Contenedores. Después de pegar el resultado en Elementor no hay ningún widget de código de por medio: es una página normal.
Tu CSS se lee, no se descarta
Esta es la parte que preocupa a la gente, y es la que mejor funciona. El conversor no descarta tus estilos: lee los estilos que tu navegador calculó realmente y los traslada a los controles correspondientes del widget. El padding, los márgenes, los colores, los bordes, el radio, la sombra, el fondo, la familia tipográfica, el tamaño, el peso, la altura de línea y el espaciado entre letras pasan a campos nativos de Elementor, de modo que siguen siendo editables en lugar de vivir en una hoja de estilos.
Para que esto funcione, el CSS debe estar presente cuando conviertas. Los estilos en línea o un único bloque <style> se leen perfectamente. Una hoja de estilos externa que no esté incluida en el archivo que pegas no se leerá: la página se mostraría sin estilos, y es precisamente eso lo que se convierte. Así que inserta el CSS en línea o pega primero la hoja de estilos en un bloque <style>. También hay un selector visual que, al tomar un solo bloque, incluye la hoja de estilos de la página, de modo que los estilos basados en clases se siguen convirtiendo correctamente.
El JavaScript es la excepción honesta
El JavaScript no se convierte, y es a propósito. Los scripts se eliminan por seguridad: importar JS arbitrario mediante una operación de pegado sería peligroso y, de todos modos, no se ejecutaría de forma fiable dentro del editor. Así que todo lo que producía tu JS (un slider, pestañas, un acordeón, un contador, una animación de scroll) llega como marcado estático.
El movimiento correcto no es volver a pegar el script, sino reconstruir esa interacción con el widget de Elementor correspondiente. Elementor tiene widgets nativos de Pestañas, Acordeón, Carrusel, Contador y Progreso, y sus propios Efectos de movimiento para la animación. Son más fáciles de mantener que un script importado y ya forman parte del paquete que carga tu sitio. En la práctica, conviertes toda la página en segundos y luego dedicas unos minutos a recrear de forma nativa las pocas piezas interactivas.
Un recorrido realista
- Combina tu HTML y CSS en un solo archivo: el marcado más un único bloque de estilos. Si las imágenes están referenciadas por una ruta local, súbelas a la Biblioteca de medios y usa esas URL, o acepta marcadores de posición.
- Pega en el conversor, elige el modo Componentes nativos y selecciona si los iconos coinciden con la biblioteca de Elementor y si los colores y las fuentes usan los valores del sitio o los originales.
- Revisa el mapa de estructura: número de componentes, profundidad de anidamiento y qué filas se quedaron como HTML.
- Copia los datos de Elementor y pégalos en tu página, o descarga una plantilla JSON e impórtala.
- Reconstruye cualquier interacción controlada por JS con el widget nativo correspondiente, configura los estados de hover de los botones y revisa las tres vistas de dispositivo.
El resultado final
Una página de Elementor normal. Tu estructura HTML original queda intacta como widgets y contenedores, tu CSS vive en controles editables y lo único que reconstruiste a mano es el comportamiento interactivo que, de todos modos, nunca debió estar en el marcado. A partir de ese momento, tú y tu cliente la editan como cualquier otra cosa en Elementor: sin widget de código, sin hoja de estilos separada y sin paso de compilación.