Más allá de la conversión básica, tres ajustes deciden lo ordenada y editable que queda tu página de Elementor: cómo se tratan los iconos, las imágenes y la estructura. Acertar con ellos antes de exportar marca la diferencia entre una página que entregas con gusto y otra que te obliga a pasar una hora limpiándola.
Los tres comparten una idea: el convertidor solo puede trabajar con lo que realmente hay en el código fuente. Cada uno de estos ajustes consiste, en el fondo, en darle algo que pueda asignar limpiamente, y en saber qué hacer cuando no puede.
1. Iconos que llegan a 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 en Coincidir con la biblioteca de iconos de Elementor y cada icono se convertirá en un icono real y editable que puedes cambiar desde el selector de iconos de Elementor, no en un SVG bloqueado.
Mejor aún: una tarjeta formada por icono + título + texto corto se convierte en un único widget Caja de icono. El convertidor busca el icono por nombre (a partir de la clase del icono y del título de la tarjeta; p. ej., «Reutilizable» → recycle) y traslada el tamaño del icono, el espaciado y la tipografía. Si no encuentra ninguna coincidencia, deja el icono vacío para que lo elijas tú.
Consejo: los SVG personalizados dibujados a mano no pueden entrar en el control de iconos de Elementor, así que, si quieres iconos de la biblioteca, usa clases de Font Awesome en el código fuente.
2. Imágenes: complétalas en Elementor
La IA no puede incrustar archivos de imagen reales en el texto HTML, así que las imágenes son la parte más delicada. El camino más sencillo: ajusta Imágenes en Marcadores de imagen vacíos. Cada imagen se convierte en un hueco vacío y cada hueco conserva su texto alt como leyenda, así sabes qué foto va en cada sitio cuando las subas en Elementor.
- Lo mejor: sube primero las imágenes a la Biblioteca de medios y usa luego esas URL
https://en el HTML; se importan sin ningún paso manual. - Evita: las imágenes incrustadas en Base64 y las rutas de archivos locales; por defecto, el convertidor las sustituye por marcadores vacíos.
3. El mapa de estructura: revisa 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 diana de una fila fija una raíz de copia: exporta solo ese bloque y prescinde de los envoltorios exteriores.
- El icono ✕ excluye una parte de la copia (útil para un elemento suelto que no quieras).
- El resumen 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 asignado limpiamente antes de que llegue a tu sitio publicado.
Los tres juntos
Estos ajustes se suman. Una fila de tarjetas construida con iconos de Font Awesome, URL de imágenes reales y un marcado poco profundo se convierte en un Grid con widgets Caja de icono o Caja de imagen limpios, algo que te gustaría haber construido a mano. La misma fila construida con SVG en línea, imágenes en Base64 y cinco niveles de envoltorios se convierte en un árbol profundo de contenedores con gráficos bloqueados. La misma herramienta, la misma página y una tarde muy distinta.
Una guía rápida para decidir
- ¿Llevas una sección a un sitio existente con su propia marca? Iconos vinculados a la biblioteca, colores del sitio y tipografía del sitio. El bloque adopta tu marca automáticamente.
- ¿Quieres reproducir un diseño con fidelidad? Iconos vinculados a la biblioteca, colores originales y tipografía original. Después, registra las fuentes personalizadas en Elementor antes de valorar el resultado.
- ¿Aún no has subido las imágenes? Marcadores vacíos, y asegúrate antes de que cada imagen del código fuente tenga un texto alternativo con sentido.
- ¿Página larga? Fija una raíz de copia y tráela sección a sección.
El hábito que vale la pena adquirir
Abre el mapa de estructura siempre, antes de exportar, no solo cuando algo parezca ir mal. Leer el número de componentes, la profundidad de anidamiento y el desglose de confianza lleva quince segundos, y esas tres cifras te dicen si exportar ya o volver atrás y corregir el código fuente. Corregir la entrada y volver a convertir es, sistemáticamente, más rápido que reparar el resultado dentro de Elementor, y es el hábito que separa un flujo de trabajo fluido de uno frustrante.