Mover una página HTML existente a Elementor generalmente significa una de dos malas opciones: pegarla en un único widget HTML que no puedes editar realmente, o reconstruir cada sección manualmente. Esta guía muestra la tercera vía — convertir HTML en componentes de Elementor nativos y editables.
1. Pega o arrastra tu HTML
Abre el convertidor, luego arrastra un archivo .html a la zona de soltar o pega tu código fuente en el cuadro de código. Se admiten CSS en línea e imágenes Base64. Todo se ejecuta en tu navegador — no se sube nada.
2. Elige el modo Componentes Nativos
En el panel de opciones selecciona Modo Componentes Nativos. Esto asigna encabezados al widget Encabezado, párrafos al Editor de texto, enlaces con estilo de botón al widget Botón, y los <div> contenedores a Contenedores — con relleno, colores, fuentes y comportamiento responsive calculados para ti.
3. Revisa el mapa de estructura
Antes de exportar, abre la pestaña Mapa de estructura. Pasa el cursor sobre cualquier fila para resaltarla en la vista previa, revisa los puntos de confianza (verde = conversión directa, rojo = mantenido como HTML), y usa el icono de destino para copiar solo el bloque que realmente deseas. Aquí es donde detectas cualquier cosa que no se haya asignado limpiamente.
4. Copia o descarga
Usa Copiar datos de Elementor y haz clic derecho → “Pegar desde otro sitio” en el editor, o descarga una plantilla JSON e impórtala desde la biblioteca de plantillas de Elementor. HTML y Elementor nunca se renderizan de manera idéntica, así que dale un repaso rápido al resultado en el editor.
Consejos para obtener resultados más limpios
- Usa etiquetas semánticas (
<h2>,<p>,<button>) para que el convertidor pueda asignarlas de forma nativa. - Evita los
<div>contenedores profundamente anidados sin estilo — añaden contenedores adicionales. - Desactiva “Mantener estilos en línea” si tu HTML no tiene bloques
<style>.