Más allá de la conversión básica, tres características deciden qué tan ordenada y editable queda tu página de Elementor: cómo se manejan los iconos, las imágenes y la estructura.
1. Iconos que aterrizan en la biblioteca de iconos de Elementor
Si tu HTML usa clases de Font Awesome (como <i class="fas fa-check"></i>), ajusta la opción Iconos a Coincidir con la biblioteca de iconos de Elementor y cada icono se convierte en un icono real y editable que puedes cambiar desde el selector de iconos de Elementor, no un SVG bloqueado.
Mejor aún: una tarjeta compuesta por un icono + título + texto corto se convierte en un único widget de Caja de icono. El conversor empareja el icono por nombre (usando la clase del icono y el título de la tarjeta, p. ej., “Reutilizable” → reciclar), y hereda el tamaño del icono, el espaciado y la tipografía. Si no encuentra una coincidencia, deja el icono vacío para que tú elijas.
Consejo: los SVG personalizados dibujados a mano no pueden ingresar al control de iconos de Elementor, así que prefiere las clases de Font Awesome en el código fuente si quieres iconos de la biblioteca.
2. Imágenes: rellénalas en Elementor
La IA no puede incrustar archivos de imagen reales dentro del texto HTML, por lo que las imágenes son la parte más complicada. El camino más sencillo: configura Imágenes en Marcadores de posición de imagen vacíos. Cada imagen se convierte en un espacio vacío, y cada espacio conserva su texto alt como leyenda, así sabrás qué imagen va en cada lugar cuando las subas en Elementor.
- Lo mejor: sube primero las imágenes a la Biblioteca de medios y luego usa esas URL
https://en el HTML; se importan sin necesidad de pasos manuales. - Evita: imágenes incrustadas en Base64 y rutas de archivos locales; el conversor las descarta y las reemplaza con marcadores de posición vacíos de manera predeterminada.
3. El mapa de estructura: revísalo antes de exportar
Abre la pestaña Mapa de estructura para ver el árbol exacto de Elementor junto a una vista previa en vivo. Pasa el cursor sobre cualquier fila y la parte correspondiente se resalta en ambos lados.
- El icono de destino en una fila establece una raíz de copia: exporta solo ese bloque y descarta los envoltorios exteriores.
- El icono ✕ excluye una parte de la copia (útil para un elemento suelto que no quieras).
- La vista general muestra cuántos componentes hay, la profundidad del anidamiento y un desglose de confianza (directo / parcial / conservado como HTML).
Un repaso rápido aquí detecta cualquier cosa que no se haya mapeado correctamente antes de que llegue a tu sitio en vivo.