Generar una página con un asistente de IA o exportar HTML desde una herramienta de diseño te lleva la mayor parte del camino. Convertir eso en una página de Elementor fácil de mantener es un proceso corto y repetible.
Paso 1: resuelve primero las imágenes
Este es el paso que la gente se salta, y es el que más trabajo extra provoca. La IA no puede incrustar fotografías reales en el HTML, y las exportaciones de herramientas de diseño suelen usar rutas locales o URL de datos; nada de eso puede convertirse en adjuntos de la Biblioteca de medios.
Dos buenas opciones: sube primero tus imágenes a la Biblioteca de medios y usa las URL reales en el HTML, o acepta marcadores vacíos y rellénalos después en Elementor. Si optas por los marcadores, asegúrate de que cada imagen tenga un atributo alt con sentido: ese texto se conserva como leyenda del hueco, para que sepas qué foto va en cada sitio.
Paso 2: pide un marcado fácil de convertir
Si le das instrucciones a un modelo, di lo que necesitas: etiquetas semánticas, un DOM poco profundo con un envoltorio por sección, todo el CSS en un único bloque style, clases de iconos de Font Awesome en lugar de SVG en línea, y nada de scripts ni fuentes externos. Estas pocas restricciones influyen más en el resultado que cualquier cosa que puedas hacer después.
Paso 3: convierte con las opciones adecuadas
- Modo de componentes nativos, para obtener widgets editables en lugar de un único bloque HTML.
- Iconos: coincidir con la biblioteca de iconos de Elementor, para que los iconos sean iconos reales e intercambiables.
- Colores y fuentes: los valores del sitio si el contenido va a un sitio con su propia marca; los valores originales si estás reproduciendo un diseño.
- Imágenes: marcadores vacíos, salvo que ya tengas URL reales.
Paso 4: revisa la estructura antes de exportar
Abre el mapa de estructura. Fíjate en el número de componentes, la profundidad máxima de anidamiento y el desglose de confianza. Las filas rojas se conservaron como HTML y merecen un vistazo. Si la profundidad es alta, fija una raíz de copia más abajo en el árbol o simplifica el código fuente y vuelve a convertir: corregir la entrada casi siempre es más rápido que reparar el resultado.
Paso 5: pega y remata
Pega en Elementor y haz el repaso final de siempre: vuelve a enlazar los botones, define los estados hover, conecta los formularios o menús, sube las imágenes de los marcadores y revisa la vista de escritorio, tableta y móvil.
Paso 6: guarda las partes reutilizables
Todo lo que vayas a volver a usar (una fila de precios, una cuadrícula de características, un bloque de testimonios) guárdalo de inmediato en la biblioteca de plantillas. En unos pocos proyectos, esto se convierte en una biblioteca de componentes que acelera mucho el siguiente trabajo, y vale más que cualquier página convertida por separado.
Las cuatro instrucciones que más importan en un prompt
En el paso 2 se decide la mayor parte del resultado, así que vale la pena concretar qué instrucciones lo cambian de verdad. Más o menos por orden de impacto:
- «No incrustes imágenes como URL de datos en Base64». Si no se lo impides, un modelo al que pides una página autocontenida incrustará todas las imágenes, y una página con doce imágenes supera con creces el medio megabyte. Esas imágenes no pueden convertirse en adjuntos de la Biblioteca de medios, así que todas llegan como huecos vacíos. Pide en su lugar una URL alojada real o una ruta de marcador simple.
- «Usa clases de Font Awesome para los iconos, no SVG en línea». Los nombres de clase de Font Awesome pasan directamente a la biblioteca de iconos de Elementor como iconos reales e intercambiables. Un SVG en línea dibujado a mano no puede entrar en ese control de ninguna manera y se queda como HTML en bruto. Esta sola línea marca la diferencia entre iconos editables y una página llena de bloques HTML rojos.
- «Mantén el DOM plano: un envoltorio por sección, sin anidamiento redundante». El convertidor reproduce tu marcado, así que el anidamiento que entra es el anidamiento que sale. Los modelos recurren por defecto a divs envolventes muy anidados porque así es la mayoría de sus datos de entrenamiento.
- «Usa etiquetas semánticas».
<h1>–<h3>,<p>,<button>y<ul>reales. Las etiquetas semánticas se asignan a widgets nativos; una página construida solo con divs con estilos le da al convertidor mucho menos con lo que trabajar.
En la página de prompts de IA hay prompts listos para usar que incluyen las cuatro, entre ellos uno escrito específicamente para el flujo de trabajo con las imágenes primero.
Lo que te da realmente cada fuente
Dar nombres concretos es más útil que hablar de «herramientas de diseño» en abstracto, porque cada fuente falla de una forma distinta y previsible:
- ChatGPT, Claude y otros asistentes te dan HTML directamente: es la fuente que mejor se comporta y aquella para la que están escritas las reglas de prompt anteriores.
- Generadores de apps con IA: Lovable, v0, Bolt. Producen proyectos de React, y el código JSX no es HTML. No pegues el código de los componentes; abre la vista previa en vivo del generador en un navegador y toma de ahí el HTML de la página renderizada. Ya renderizada, se convierte como cualquier otra página.
- Canva. Los sitios web de Canva los aloja Canva y no se exportan como HTML, y su fragmento de inserción es un iframe, que el convertidor deliberadamente no traslada como marco activo (por política, solo se conservan los iframes de YouTube y Vimeo). No hay una vía directa de Canva a Elementor; lo viable es tomar el diseño de Canva como referencia visual y generar el HTML a partir de él con un asistente de IA.
- Figma. No tiene exportación nativa a HTML, pero existen plugins de exportación a HTML y varían mucho. Los que generan un diseño de flujo (flex y grid) se convierten bien; los que generan divs con posicionamiento absoluto chocan con el problema del lienzo que se describe más abajo.
Por qué las exportaciones de herramientas de diseño se comportan distinto que el resultado de la IA
Las dos fuentes fallan en direcciones opuestas, y saber con cuál estás tratando te indica dónde mirar.
El HTML generado por IA suele ser semánticamente aceptable: usa títulos y párrafos reales porque se entrenó con documentación. Sus puntos débiles son las imágenes incrustadas en Base64, los iconos en SVG en línea y más divs envolventes de los que necesita el diseño. Los tres se corrigen cambiando el prompt y volviendo a generar, lo que cuesta segundos.
Las exportaciones de herramientas de diseño son lo contrario. Las imágenes y los recursos suelen estar bien referenciados, pero el marcado tiende a ser divs con posicionamiento absoluto, nombres de clase generados y ninguna estructura semántica, porque la herramienta describe un lienzo, no un documento. A menudo no hay ningún elemento de título en toda la página, así que nada puede convertirse en un widget Título.
Ese segundo caso no es realmente un problema de conversión. Un resultado de lienzo con posicionamiento absoluto no corresponde a ningún diseño de Elementor, y ninguna herramienta puede deducir una estructura de documento que nunca se expresó. Si tu exportación tiene ese aspecto, la respuesta honesta es reconstruir la estructura en lugar de convertirla, o volver a la herramienta de diseño y exportar una versión semántica con diseño de flujo, si la ofrece.
Vuelve a generar en lugar de reparar
El hábito que hace rápido este proceso es tratar el código fuente como algo desechable. Si el mapa de estructura muestra profundidad 8 y seis bloques HTML rojos, no abras Elementor para ponerte a arreglarlo: añade dos líneas al prompt, vuelve a generar y convierte de nuevo. Ese ciclo lleva más o menos un minuto.
Reparar los mismos problemas dentro de Elementor lleva una hora y hay que repetirlo en la siguiente página. Corregir el prompt corrige todas las páginas que generes después, y esa es precisamente la razón por la que vale la pena montar este flujo de trabajo.