Lista de comprobación previa para el HTML que vas a convertir

La calidad de una conversión depende sobre todo del HTML que le proporciones. Esta es la lista de comprobación que conviene repasar antes de pegar nada en el convertidor.

1. Usa etiquetas semánticas

Los encabezados como <h1>–<h6>, el cuerpo del texto como <p>, las llamadas a la acción como <button> o <a class="button">, las listas como <ul>. Las etiquetas nativas se asignan a widgets nativos. Un encabezado simulado con un <div> con estilos puede detectarse igualmente, pero una etiqueta real nunca es ambigua.

2. Mantén el DOM poco profundo

Un envoltorio por sección. Cada nivel adicional de anidamiento se convierte en otro Contenedor que tendrás que atravesar haciendo clic en el editor. Los envoltorios puramente decorativos y sin estilos se fusionan automáticamente, pero los que tienen un relleno o un fondo se conservan porque eliminarlos cambiaría el diseño.

3. Haz que tu CSS sea autocontenido

Los estilos en línea o un único bloque <style> se convierten mejor, porque el convertidor lee los estilos que el navegador realmente calculó. Una hoja de estilos de un framework externo que nunca carga hace que la página se renderice sin estilos, y sin estilos es exactamente lo que se convierte.

4. Resuelve primero las imágenes

Mejor caso: sube las imágenes a la biblioteca de medios y usa las URL https:// reales. De lo contrario, cambia Imágenes a Marcadores de imagen vacíos y rellénalos después: cada espacio conserva su alt como leyenda. Las imágenes en Base64 y las rutas de archivo locales se convierten en marcadores de posición a propósito, ya que no se pueden importar a WordPress de forma fiable.

5. Prefiere las clases de Font Awesome antes que el SVG en línea

Solo los iconos basados en clases pueden llegar a la biblioteca de iconos de Elementor como iconos editables. Los SVG en línea no pueden entrar en el control de iconos y pierden cualquier tamaño y color de trazo que estuviera en el CSS de la página.

6. Usa gap, no márgenes por elemento hijo

Los gaps en un contenedor flex o grid se asignan a un único control de gap de Elementor. Los márgenes aplicados a cada hijo se conservan widget por widget y son mucho más tediosos de ajustar después.

7. Centra con max-width más márgenes automáticos

El patrón max-width + margin:0 auto se reconoce y se convierte en un contenedor en caja, que se centra de forma nativa en todos los tamaños de pantalla.

8. Elimina lo que no quieras conservar

Los scripts, las etiquetas de seguimiento, los banners de cookies y las incrustaciones de terceros se eliminan o neutralizan por seguridad. Los formularios pierden su acción de envío: un formulario de Elementor debe reconectarse a un destino real en tu sitio. Los menús de navegación deben apuntar a un menú real de WordPress.

9. Convierte sección por sección

Para una página grande, usa el selector visual o establece una raíz de copia en el mapa de estructura e importa una sección a la vez. Las unidades más pequeñas son mucho más fáciles de verificar y evitas importar por accidente la cabecera y el pie de página del sitio.

10. Revisa el mapa de estructura antes de exportar

Comprueba el número de componentes, la profundidad máxima de anidamiento y el desglose de confianza. Las filas verdes se convirtieron directamente; las filas rojas se mantuvieron como HTML y son las que merecen una segunda revisión. Corregir el código fuente y volver a convertir suele ser más rápido que reparar el resultado dentro de Elementor.

11. Abre primero el código fuente en cada punto de ruptura

El elemento de mayor valor de esta lista y el que más a menudo se omite. El diseño se vuelve a medir en cada ancho de punto de ruptura y lo que el navegador calcula ahí es lo que se guarda: no hay ninguna capa de interpretación que lo ordene.

Así que redimensiona la página de origen en un navegador a aproximadamente 820 px y 390 px antes de convertir. Un diseño que ya está roto a 390 px se convierte en un diseño móvil fielmente roto, y es muy fácil pasarse una hora culpando a la conversión de un problema que estuvo en el código fuente todo el tiempo. Dos minutos de redimensionado te dicen si estás convirtiendo algo que funciona.

12. Revisa los detalles que se pierden sin avisar

Cuatro cosas se ven bien en el código fuente y, sencillamente, ya no están después. Buscarlas de antemano hace que cada una deje de ser un misterio y pase a ser una tarea prevista:

• Decoración con pseudoelementos. Todo lo que se dibuja con ::before o ::after — comillas, barras de acento, superposiciones de degradado, adornos de subrayado — no es un nodo del DOM y no puede convertirse en un widget. Si un detalle de diseño desaparece, esto es lo primero de lo que hay que sospechar.
• Botones de esquinas cuadradas que no son enlaces inline-block. Los elementos <button> reales y los enlaces que son inline-block o llevan una clase btn/button siempre se convierten. Todo lo demás — anclas con estilo flex, divs clicables — debe pasar una prueba geométrica que incluye un radio de esquina de al menos 3 px, por lo que los de bordes afilados se mantienen como texto con estilo. Una clase btn en el enlace los corrige todos de una vez.
• Fuentes que no tienes. Los nombres de las familias se transfieren; los archivos de fuentes no. Instala la fuente en tu sitio de WordPress antes de convertir o evaluarás el resultado con una fuente de respaldo y perseguirás diferencias que en realidad no existen.
• Estados hover y focus. Solo el estado de reposo puede leerse desde un estilo calculado. Cada color de hover es una tarea posterior a la importación, por lo que conviene anotar cuántos elementos interactivos tiene la página antes de empezar.

Cómo es un buen código fuente

Todo lo anterior se reduce a un párrafo. El HTML que mejor se convierte es semántico, poco profundo y autocontenido: etiquetas reales de encabezado y párrafo, un envoltorio por sección, maquetación hecha con flex o grid y gap, iconos como clases de Font Awesome, imágenes como URL alojadas reales, todo el CSS en un único bloque de estilo y sin scripts.

Eso es también, no por casualidad, el aspecto que tiene un HTML bien escrito de todos modos. Si generas el código fuente en lugar de heredarlo, pedir esas propiedades cuesta una frase en un prompt y elimina la mayor parte de esta lista de comprobación.

Después de la importación

Vuelve a enlazar los botones, reconecta los formularios y los menús, recorre las tres vistas de dispositivo y vuelve a subir las imágenes de marcador de posición. Entonces será una página normal de Elementor: totalmente editable, sin ningún widget HTML entre tú y tu contenido.