HTML to Elementor
Volver a los tutoriales

What cannot be converted — and what to do instead

Toda herramienta de conversión tiene límites. Conocerlos de antemano convierte una sorpresa frustrante en una tarea planificada de cinco minutos.

Scripts e interactividad

Todas las etiquetas de script se eliminan. Es una decisión de seguridad: importar JavaScript arbitrario a tu sitio mediante una operación de pegado sería peligroso y, además, no funcionaría de forma fiable dentro del editor. Todo lo que depende de JS personalizado (sliders, pestañas, contadores, acordeones) llega como marcado estático.

Qué hacer: reconstruye la interacción con el widget de Elementor correspondiente. Las pestañas, acordeones, carruseles, contadores y barras de progreso existen de forma nativa y son más fáciles de mantener que los scripts importados.

Formularios

La acción de envío y el método de un formulario se eliminan, y los campos visibles se conservan. Un formulario que publica en algún lugar es una integración, no marcado: arrastrar el endpoint haría que los datos de tus visitantes se enviaran silenciosamente al servidor de otra persona.

Qué hacer: asígnalo a un widget de formulario de Elementor y configura las acciones (correo electrónico, webhook, integraciones) en tu propio sitio.

Menús de navegación

Una barra de navegación puede generar un widget de menú de navegación, pero el widget debe apuntar a un menú real de WordPress. No hay forma de inferir la estructura de menús de tu sitio a partir del marcado de otra persona.

Pseudoelementos

Los pseudoelementos ::before y ::after no son nodos del DOM. Las formas decorativas, las comillas, las superposiciones de degradado y los acentos de subrayado dibujados de esta manera simplemente no existen como elementos y no pueden convertirse en widgets. Si falta un detalle de diseño después de la conversión, un pseudoelemento es lo primero que hay que sospechar.

Animaciones, transiciones y comportamiento sticky

Las animaciones con keyframes, los efectos de scroll, las transiciones y el posicionamiento sticky no se transfieren. Elementor tiene sus propios controles de Motion Effects y sticky, que además están mejor integrados con el editor.

Embeds de terceros

Solo se conservan los iframes de YouTube y Vimeo; todo lo demás se elimina en lugar de importar un frame desconocido. Las etiquetas object y embed también se eliminan.

Estados hover y focus

Solo se puede leer el estado de reposo de un elemento. Los colores de hover, los anillos de foco y los estados activos deben volver a aplicarse en Elementor.

Imágenes Base64 y rutas locales

Las imágenes en data-URL y las rutas de archivo relativas no pueden convertirse en adjuntos de la biblioteca de medios, así que se convierten en espacios de imagen vacíos, con el texto alternativo original conservado como leyenda para que sepas qué imagen va en cada lugar.

Las propiedades personalizadas de CSS llegan aplanadas

Si tu código fuente usa tokens de diseño — --brand-500, --space-4 y similares — las variables en sí no sobreviven. El conversor lee estilos calculados y, cuando un estilo se calcula, el navegador ya ha resuelto cada referencia a var() a un valor literal. Un botón cuyo fondo es var(--brand-500) se convierte como el color que esa variable tenía en ese momento, no como una referencia a ella.

Después nada parece estar mal, y precisamente por eso esto pilla desprevenida a la gente: la página se renderiza correctamente, pero la propiedad que hacía mantenible tu sistema de diseño ha desaparecido. Si cambias el color de marca más tarde, tendrás que editar treinta widgets a mano.

Qué hacer: reconstruye la capa de tokens en el lado de Elementor. Define tu paleta en Colores globales y tu escala tipográfica en Fuentes globales antes de pegar; después, reasigna los widgets importados a esos globales. Solo lo haces una vez y recuperas el comportamiento de fuente única de verdad. El conversor tiene un modo Colores del sitio y Fuentes del sitio precisamente para esto: deja el color y la tipografía fuera de los widgets importados para que hereden tus globales de Elementor en lugar de llegar con valores fijos.

Áreas de cuadrícula con nombre

Los diseños de cuadrícula se convierten mediante ajustes de columnas y separaciones: grid-template-columns se asigna a un contenedor de cuadrícula de Elementor y las unidades fraccionarias se conservan. Lo que no se asigna es grid-template-areas: la sintaxis de regiones con nombre con la que dibujas el diseño como un pequeño esquema ASCII y asignas un nombre a cada elemento hijo.

El contenedor de cuadrícula de Elementor no tiene equivalente a las áreas con nombre, así que un diseño construido de esa manera pierde su ubicación y los hijos vuelven al orden normal del código. El resultado no está roto, pero tampoco es tu diseño.

Qué hacer: si controlas el código fuente, expresa el diseño con grid-template-columns y spans explícitos en lugar de áreas con nombre. Si no lo controlas, espera tener que volver a colocar los hijos una vez dentro de Elementor.

El posicionamiento fijo se degrada deliberadamente

Todo lo que tenga position: fixed se reescribe a position: absolute durante la conversión, y el informe de seguridad te dice que ha ocurrido. Este es uno de los pocos lugares donde la herramienta cambia intencionadamente tu diseño en lugar de reproducirlo.

La razón es la contención. Un elemento fijo se posiciona respecto al viewport del navegador, no respecto a su elemento padre, de modo que una cabecera fija, una barra de cookies sticky o una burbuja de chat flotante importadas de la página de otra persona se escaparían de la sección donde las pegaste y flotarían sobre todo tu sitio, en cada página que use la plantilla. Degradarlo a absoluto lo mantiene dentro del bloque importado, donde puedes verlo y decidir qué hacer.

Qué hacer: si realmente quieres que el elemento sea fijo, configúralo con los controles sticky propios de Elementor después de la importación. Ellos son conscientes del editor, de la barra de administración y de tu cabecera, algo que una regla CSS cruda no es.

Fuentes web: el nombre viaja, los archivos no

La tipografía se convierte como valores — familia, tamaño, peso, altura de línea, espaciado entre letras — y esos valores aterrizan en los controles de tipografía de Elementor. Los archivos de la fuente son otra historia. Una regla @font-face apunta a archivos woff2 alojados en el sitio de origen; nada copia esos archivos a tu servidor y nada registra la familia en WordPress.

Así que un encabezado convertido de una página que usa una fuente autoalojada llevará el nombre de familia correcto y recurrirá a lo que tu sitio tenga realmente. Normalmente se ve lo bastante parecido como para que no lo notes hasta que comparas lado a lado.

Qué hacer: instala primero la fuente en tu propio sitio — mediante las fuentes personalizadas de Elementor, una selección de Google Fonts o tu tema — y solo entonces convierte. Si la familia ya está disponible, la tipografía importada se alinea de inmediato.

Cómo saber con qué límite te has topado

No tienes que adivinar. Dos cosas en la vista de resultados lo responden directamente:

  • El informe de seguridad enumera lo que se eliminó o reescribió: scripts eliminados, acciones de formulario limpiadas, embeds descartados, la reescritura de fijo a absoluto, imágenes Base64 descartadas. Si un detalle desapareció, normalmente se nombra aquí.
  • El mapa de estructura muestra el árbol de Elementor junto a una vista previa en vivo, y ambos se resaltan mutuamente al pasar el cursor. Todo lo que haya llegado como un bloque rojo de widget HTML no tenía equivalente nativo: pásale el cursor y verás exactamente qué parte de la página era.

Entre ambos, la pregunta deja de ser “por qué se ve esto diferente” y se convierte en “este elemento concreto se manejó de esta forma concreta”, lo que supone un arreglo de dos minutos en lugar de una tarde.

El resumen honesto

La estructura, el texto, las imágenes, los iconos, los colores, el espaciado y la tipografía se convierten bien. El comportamiento, las integraciones, cualquier cosa que no esté presente en el DOM y cualquier cosa que dependa de archivos o datos que vivan en el servidor de origen, no. Planifica una breve pasada posterior a la importación que cubra formularios, menús, estados hover, animaciones y fuentes, y el proceso se vuelve predecible en lugar de sorprendente.