HTML to Elementor
Volver a los tutoriales

Cómo importar un sitio web HTML existente a Elementor

Migrar un sitio web HTML estático a WordPress con Elementor parece un trabajo enorme y, si se hace mal, lo es. Si se hace página a página con un convertidor, es casi todo mecánico. Este es el enfoque que lo mantiene manejable y que, al final, te deja páginas de Elementor reales y editables.

Tres formas de llevar una página HTML existente a Elementor: pegarla en un widget HTML deja un bloque bloqueado, reconstruirla a mano lleva alrededor de un día por página y convertirla produce widgets nativos editables.
La misma página, tres rutas. Solo la tercera te deja con algo que todavía puedes editar en el panel.

Prepara primero el lado de WordPress

Antes de convertir nada, prepara el destino: una instalación de WordPress con Elementor activo, tus fuentes registradas (Ajustes del sitio → Fuentes personalizadas) si el original usaba fuentes web, y los colores de tu marca definidos como Colores globales si quieres que las páginas importadas los adopten. Hacer esto antes significa que valoras cada página convertida frente al sitio real, no frente a fuentes de reserva y colores provisionales.

Convierte una página cada vez

No intentes importar el sitio entero de una sola vez. Avanza página a página y, dentro de una página larga, sección a sección. Cada unidad convertida es fácil de verificar; un sitio entero de golpe, no. Convertir por partes también evita que arrastres la cabecera, el pie y el aviso de cookies del sitio antiguo a cada página.

Para cada página: abre su HTML, asegúrate de que el CSS esté en línea o en un bloque style y pégalo en el convertidor en modo de componentes nativos. Títulos, textos, imágenes, botones y maquetación se convierten en widgets y contenedores nativos de Elementor, con el espaciado, los colores y la tipografía trasladados a controles reales.

La forma más rápida para muchas páginas: la conversión por lotes

Cuando el sitio tiene más de un puñado de páginas, no hace falta que las metas de una en una. Suelta todos los archivos HTML a la vez en el convertidor: con dos o más archivos pasa al modo por lotes. Se convierten uno tras otro con los mismos ajustes y descargas un único ZIP con una plantilla JSON de Elementor por página.

Entonces, en WordPress, la tarea pasa a ser importar en lugar de convertir: Plantillas → Plantillas guardadas → Importar, trae las plantillas y crea cada página a partir de su plantilla. Todo sigue ejecutándose en tu navegador: un sitio de treinta páginas no sube ni un solo archivo a ninguna parte.

Dos límites, con honestidad. El modo por lotes usa la asignación automática (el panel de mapeo por elemento y la raíz de copia son funciones para un solo archivo), así que una página en la que quieras ajustar a mano qué se convierte en qué conviene procesarla después de forma individual. Y como el modo por lotes convierte cada archivo exactamente tal como llega, la cabecera y el pie compartidos acaban dentro de cada plantilla: o los recortas de los archivos HTML antes de soltarlos, o eliminas esos contenedores de cada plantilla importada. En un sitio con mucha estructura común, recortar antes los archivos es realmente más rápido.

Resuelve una sola vez la cabecera y el pie compartidos

Un sitio estático repite su cabecera y su pie en cada archivo HTML. En WordPress no los quieres en el contenido de la página: los quieres como cabecera y pie del tema (o como plantillas del Creador de temas de Elementor), creados una vez y aplicados en todas partes. Así que, al convertir una página, usa la raíz de copia en el mapa de estructura para tomar solo el contenido principal de esa página y dejar fuera la cabecera y el pie. Créalos aparte, una sola vez.

Las imágenes y los enlaces requieren atención

  • Imágenes: súbelas a la Biblioteca de medios y usa las URL reales, y se importarán sin ningún paso manual. Las rutas de archivos locales y las imágenes en Base64 no pueden convertirse en adjuntos, así que llegan como marcadores vacíos, cada uno con su texto alternativo como leyenda para que sepas qué subir.
  • Enlaces internos: un sitio estático enlaza entre archivos .html. Después de importar, actualízalos para que apunten a tus nuevas URL de WordPress. Es la única parte tediosa de cualquier migración y no hay forma de evitarla, pero en cada página se hace rápido.
  • Formularios y menús: la acción de envío de un formulario no se traslada; conéctalo a un Formulario de Elementor en tu sitio. La navegación pasa a ser un menú real de WordPress.

Qué se convierte bien y qué hay que rehacer

La maquetación, el espaciado, los colores, la tipografía, las imágenes, los iconos y la estructura se convierten con fidelidad. Los scripts se eliminan, así que cualquier comportamiento que dependa de JavaScript se reconstruye con widgets nativos. Los estados hover y las animaciones se vuelven a aplicar en Elementor. Conocer este reparto de antemano convierte la migración en una lista de comprobación predecible y no en una sucesión de sorpresas.

Un orden de migración que funciona

  1. Crea una sola vez la cabecera y el pie compartidos.
  2. Convierte la página de inicio, después las principales páginas de aterrizaje y luego las páginas interiores.
  3. En cada página, fija una raíz de copia para tomar el contenido, pega y después corrige los enlaces internos y las imágenes.
  4. Reconstruye de forma nativa las piezas interactivas (sliders, pestañas).
  5. Guarda las secciones reutilizables (una cuadrícula de características, una franja de llamada a la acción) en la biblioteca de plantillas sobre la marcha, para que las páginas siguientes sean cuestión de ensamblar y no de construir.
  6. Configura redirecciones de las antiguas URL .html a las nuevas para conservar tu posicionamiento en buscadores.

Trabajando así, importar un sitio web HTML a Elementor es un proceso constante, página a página, que termina en un sitio de WordPress editable: ni una reconstrucción ni un montón de bloques de código que no se pueden editar.

Escrito por Leo

Nueve años de WordPress y Elementor; 189 sitios migrados. Cada regla de este convertidor viene de un proyecto real. Acerca de esta herramienta