HTML to Elementor
Acerca de

Acerca de

Esta herramienta está construida y mantenida por Leo, un desarrollador full-stack que ha pasado nueve años trabajando con WordPress y Elementor — y que ha migrado 189 sitios a Elementor en el camino.

Por qué existe esto

Cada una de esas migraciones se topó con el mismo muro. Un diseño, una exportación de otro constructor o un sitio estático antiguo llega como un bloque de HTML y CSS. Llevarlo a Elementor deja dos malas opciones: pegar todo en un solo widget HTML y renunciar a editarlo para siempre, o reconstruirlo componente por componente y perder un día por página. Después de la primera docena de sitios dejas de aceptar esa disyuntiva y empiezas a automatizarla. Esta herramienta es esa automatización, limpiada y hecha pública.

Lo que me enseñaron 189 migraciones

Casi todas las reglas del convertidor son una respuesta directa a algo que salió mal en un proyecto real:

  • La hoja de estilos miente; el estilo calculado no. El orden en cascada, las media queries, los valores heredados y las clases utilitarias hacen que la regla que lees en un archivo CSS rara vez sea el valor que el navegador realmente pinta. El convertidor primero renderiza tu HTML y lee los estilos calculados, por lo que sobrevive al marcado estilo Tailwind y al CSS de frameworks en lugar de atragantarse con él — siempre que el CSS compilado esté dentro de la página. Las hojas de estilo cargadas desde URLs externas se eliminan por seguridad, así que incrusta tu CSS primero.
  • El anidamiento explota si haces una correspondencia uno a uno. Una página normal está llena de divs contenedores que no tienen significado visual. Si los copias tal cual, obtienes un árbol de Elementor de diez contenedores de profundidad que nadie puede editar. Los contenedores sin efecto de estilo se colapsan; los contenedores que realmente tienen padding, un fondo o una sombra se conservan — fusionarlos es lo que rompe un diseño.
  • El SVG en línea no puede convertirse en un icono editable de Elementor. Esa es una limitación de Elementor, no un error de conversión: su control de iconos acepta entradas de la biblioteca de iconos o archivos de la biblioteca de medios, nada más. Las clases de Font Awesome se asignan limpiamente a iconos editables; el SVG hecho a mano tiene que quedarse como HTML sin procesar. Saber esto antes de generar el HTML te ahorra una reconstrucción completa.
  • Las imágenes en Base64 se ven bien hasta que las importas. Una página con una docena de imágenes incrustadas se hincha hasta superar medio megabyte y luego no logra entrar en la biblioteca de medios. En su lugar, se convierten en espacios vacíos etiquetados, para que después puedas colocar los archivos reales y sepas cuál es cuál.
  • El diseño responsivo no es un solo ajuste. Las diferencias de diseño se miden en varios anchos y se escriben en los propios campos responsivos de Elementor, en lugar de esperar que un único diseño de escritorio se degrade con elegancia en un teléfono.
  • Algunas cosas realmente no se convierten. Las animaciones, las interacciones controladas por scripts, los pseudoelementos y cualquier cosa que dependa de los datos propios de tu sitio — menús, bucles de productos, consultas — no se pueden inferir del HTML estático. La herramienta te avisa cuando encuentra uno en lugar de descartarlo silenciosamente.

Lo que no hará

No prometerá un resultado perfecto al píxel. HTML y Elementor no renderizan de forma idéntica, y cualquier convertidor que afirme lo contrario no ha convertido suficientes páginas. No tocará tu sitio de WordPress: la herramienta solo genera datos, y la importación la haces tú dentro de tu propio Elementor. Y no te pedirá que te registres.

Tampoco arrastrará riesgos. Los scripts, los enlaces peligrosos, las hojas de estilo externas y los envíos de formularios se eliminan antes de que algo llegue a tu editor, y los estilos que sí se transfieren están limitados al contenido importado para que no se filtren al resto de tu tema.

Tus archivos nunca salen de tu navegador

El análisis, la conversión y la vista previa se ejecutan localmente en tu navegador. Tu HTML, tus imágenes y los datos de Elementor que se generan nunca se envían a este sitio ni a ningún otro lugar. Esa es una decisión de diseño tomada desde el principio, no una característica que se vaya a descartar más adelante.

Para quién es

  • Freelancers y equipos pequeños que construyen sitios para clientes con Elementor.
  • Personas que generan HTML con IA y quieren páginas editables en lugar de un bloque de código muerto.
  • Cualquiera que mueva un lote de páginas estáticas a WordPress y Elementor.

Contacto

Las preguntas, los informes de errores y las muestras de conversión complicadas son bienvenidos en [email protected]. Si algo se convierte mal, enviar el fragmento de HTML es, con diferencia, la vía más rápida para una solución — varias de las reglas anteriores existen porque alguien hizo exactamente eso.