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 mantenible es un proceso corto y repetible.
Paso 1 — Ordena primero las imágenes
Este es el paso que la gente se salta y es el que causa más retrabajo. La IA no puede incrustar fotografías reales en el HTML, y las exportaciones de herramientas de diseño suelen usar rutas locales o URLs de datos, nada de lo cual puede convertirse en adjuntos de la biblioteca de medios.
Dos buenas opciones: sube primero tus imágenes a la biblioteca de medios y referencia las URLs reales en el HTML, o acepta marcadores de posición vacíos y rellénalos después en Elementor. Si optas por los marcadores de posición, asegúrate de que cada imagen tenga un atributo alt significativo: ese texto se conserva como leyenda del espacio, para que sepas qué imagen va en cada lugar.
Paso 2 — Pide un marcado fácil de convertir
Si vas a dar instrucciones a un modelo, di lo que necesitas: etiquetas semánticas, un DOM poco profundo con un contenedor por sección, todo el CSS en un solo bloque de estilos, clases de iconos de Font Awesome en lugar de SVG en línea, y sin scripts ni fuentes externas. Esas pocas restricciones tienen un efecto mayor 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: usa la biblioteca de iconos de Elementor, para que los iconos se conviertan en iconos reales e intercambiables.
- Colores y fuentes: valores del sitio si va a un sitio con marca, valores originales si estás reproduciendo un diseño.
- Imágenes: marcadores de posición vacíos a menos que ya tengas URLs reales.
Paso 4 — Revisa la estructura antes de exportar
Abre el mapa de estructura. Mira el recuento de componentes, la profundidad máxima de anidamiento y el desglose de confianza. Las filas rojas se mantuvieron como HTML y merecen un vistazo. Si la profundidad es alta, establece una raíz de copia más profunda en el árbol o simplifica el origen y vuelve a convertir: arreglar la entrada casi siempre es más rápido que reparar la salida.
Paso 5 — Pega y termina
Pega en Elementor y luego ejecuta el repaso final estándar: vuelve a enlazar los botones, define los estados hover, conecta cualquier formulario o menú, sube las imágenes de los marcadores de posición y revisa en escritorio, tableta y móvil.
Paso 6 — Guarda las partes reutilizables
Todo lo que vayas a usar de nuevo (una fila de precios, una cuadrícula de características, un bloque de testimonios) guárdalo de inmediato en la biblioteca de plantillas. A lo largo de unos pocos proyectos, esto se convierte en una biblioteca de componentes que hace que la siguiente construcción sea mucho más rápida, y vale más que cualquier página convertida individualmente.
Las cuatro instrucciones que más importan en un prompt
El paso 2 es donde se decide la mayor parte del resultado, así que vale la pena ser específico sobre qué instrucciones cambian realmente el resultado. En orden aproximado de impacto:
- “No incrustes imágenes como URLs de datos Base64”. Si se le deja solo, un modelo al que se le pide una página autocontenida incrustará todas las imágenes, y una página con doce imágenes supera el medio megabyte. Esas no pueden convertirse en adjuntos de la biblioteca de medios, así que todas llegan como espacios vacíos. Pide en su lugar una URL alojada real o una ruta de marcador de posición simple.
- “Usa clases de Font Awesome para los iconos, no SVG en línea”. Los nombres de clase de Font Awesome se asignan 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 en absoluto y se queda como HTML sin procesar. Esta única línea es la diferencia entre iconos editables y una página llena de bloques HTML rojos.
- “Mantén el DOM plano: un contenedor por sección, sin anidamiento redundante”. El conversor refleja tu marcado, así que el anidamiento de entrada es igual al de salida. Los modelos tienden por defecto a usar divs contenedores profundamente anidados porque así es la mayoría de los datos de entrenamiento.
- “Usa etiquetas semánticas”.
<h1>–<h3>,<p>,<button>,<ul>reales. Las etiquetas semánticas se asignan a widgets nativos; una página construida enteramente con divs estilizados le da al conversor mucho menos con qué trabajar.
Hay prompts listos que incluyen las cuatro en la página de prompts de IA, incluido uno escrito específicamente para el flujo de trabajo de imágenes primero.
Por qué las exportaciones de herramientas de diseño se comportan diferente a la salida de IA
Las dos fuentes fallan en direcciones opuestas, y saber con cuál estás tratando te dice dónde mirar.
El HTML generado por IA suele ser semánticamente decente: usa encabezados y párrafos reales porque fue entrenado con documentación. Sus debilidades son las imágenes Base64 incrustadas, los iconos SVG en línea y más divs contenedores de los que el diseño necesita. Las tres se pueden corregir cambiando el prompt y regenerando, lo que cuesta segundos.
Las exportaciones de herramientas de diseño son lo contrario. Las imágenes y los recursos suelen estar referenciados correctamente, pero el marcado tiende a ser de divs posicionados de forma absoluta con nombres de clase generados y sin ninguna estructura semántica, porque la herramienta describe un lienzo, no un documento. A menudo no hay ningún elemento de encabezado en ninguna parte, así que nada puede convertirse en un widget de encabezado.
Ese segundo caso no es realmente un problema de conversión. La salida de lienzo posicionada de forma absoluta no corresponde a ningún diseño de Elementor, y ninguna herramienta puede inferir 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 flujo de diseño si la ofrece.
Regenera en lugar de reparar
El hábito que hace rápido este flujo es tratar el origen como desechable. Si el mapa de estructura muestra profundidad 8 y seis bloques HTML rojos, no abras Elementor y empieces a arreglar: añade dos líneas al prompt, regenera y convierte de nuevo. Ese ciclo tarda alrededor de un minuto.
Reparar los mismos problemas dentro de Elementor lleva una hora y hay que repetirlo en la siguiente página. Arreglar el prompt arregla cada página que generes después, que es toda la razón por la que vale la pena configurar este flujo de trabajo.