Llevar una página HTML existente a Elementor suele significar elegir entre dos malas opciones: pegarla en un único widget HTML que en realidad no puedes editar, o reconstruir cada sección a mano. Esta guía muestra la tercera vía: convertir el HTML en componentes de Elementor nativos y editables.
Qué significa realmente «editable» aquí
Vale la pena ser precisos, porque de eso se trata. Cuando una página se mete en un widget HTML, Elementor la trata como un único bloque opaco. Puedes verla en el lienzo, pero no puedes hacer clic en un título y cambiar su tamaño, no puedes cambiar un icono desde el selector de iconos y, desde luego, tu cliente no puede actualizar el texto sin tocar código. La página está en Elementor sin ser de Elementor.
Una conversión nativa es diferente. Cada título se convierte en un widget Título con sus propios controles de tipografía. Cada párrafo se convierte en un Editor de texto. Un enlace con estilo se convierte en un Botón con controles de enlace, color y relleno. Los elementos envolventes se convierten en Contenedores con ajustes flex o grid reales. Después no queda ningún widget HTML entre tú y tu contenido: es una página normal de Elementor que, simplemente, empezó siendo HTML.
¿Por qué no reconstruirla a mano?
A veces es lo que debes hacer. Si el código fuente es un único hero sencillo, reconstruirlo lleva diez minutos y te da un resultado perfectamente idiomático. La conversión compensa cuando la página es larga, cuando el espaciado y la tipografía son minuciosos y merece la pena conservarlos con exactitud, o cuando lo haces una y otra vez: al migrar un conjunto de páginas de aterrizaje o al convertir HTML generado por IA o por una herramienta de diseño en páginas reales como parte de un flujo de trabajo habitual.
1. Pega o suelta tu HTML
Abre el convertidor y arrastra un archivo .html a la zona para soltar archivos o pega tu código fuente en el cuadro de código. Se admiten CSS en línea e imágenes Base64. Todo se ejecuta en tu navegador: el archivo nunca se sube a un servidor, lo que además significa que puedes convertir trabajos de clientes sin tener que hablar de confidencialidad.
Si tus estilos están en una hoja de estilos aparte que no se incluye en el archivo, la página se mostrará sin estilos en la vista previa, y es justo eso, sin estilos, lo que se convierte. Asegúrate de que el CSS esté en línea o en un bloque <style> antes de convertir.
2. Elige el modo de componentes nativos
En el panel de opciones, elige Modo de componentes nativos. Es el ajuste que genera widgets reales en lugar de un único bloque HTML. Ya que estás ahí, vale la pena dedicar un momento a otras tres opciones:
- Iconos: elige la coincidencia con la biblioteca de iconos de Elementor para que los iconos sean iconos reales e intercambiables y no SVG bloqueados.
- Imágenes: si el HTML aún no contiene URL de la Biblioteca de medios, elige los marcadores vacíos; cada hueco conserva su texto alternativo como leyenda para que sepas qué foto va en cada sitio.
- Colores y fuentes: usa los valores del sitio si el contenido va a un sitio existente con su propia marca, o los valores originales si estás reproduciendo un diseño con fidelidad.
3. Revisa el mapa de estructura
Antes de exportar, abre la pestaña Mapa de estructura. Muestra el árbol exacto de Elementor junto a una vista previa en vivo, y al pasar el cursor sobre una fila se resalta la parte correspondiente en ambos lados.
Aquí hay que comprobar tres cosas. Los puntos de confianza: verde significa que el elemento se convirtió directamente en un widget nativo; rojo, que se conservó como HTML y merece un vistazo. La profundidad máx. de anidamiento: cualquier valor por encima de seis, más o menos, indica que el código fuente tiene más elementos envolventes de los necesarios. Y el número de componentes, que te dice aproximadamente cuánto vas a pegar.
En esta pestaña también controlas el alcance. El icono de diana de una fila la fija como raíz de copia, de modo que solo se exporta ese subárbol y se prescinde de los envoltorios exteriores de la página. El icono de la cruz excluye una fila por completo. En una página larga, convertir así una sección cada vez es mucho más fácil de verificar que importarlo todo de golpe.
4. Copia o descarga
Usa Copiar datos de Elementor, haz clic derecho en una zona vacía del editor de Elementor y elige «Pegar desde otro sitio». Es lo más rápido cuando añades una sección a una página que ya tienes abierta.
También puedes descargar una plantilla JSON e importarla desde la biblioteca de plantillas de Elementor. Esa vía es mejor cuando quieres el resultado como un archivo reutilizable y portátil: para una página entera, para compartirlo con tu equipo o para ir creando una biblioteca de componentes con el tiempo.
Cuenta con un breve repaso final
HTML y Elementor nunca se renderizan de forma idéntica, y algunas cosas, sencillamente, no pueden pasar de un lado a otro. Reserva de diez a quince minutos para: configurar los estados hover de los botones (las reglas hover de CSS no pueden leerse de una página estática), rellenar las imágenes de marcador, conectar menús y formularios a fuentes reales de WordPress y revisar las tres vistas de dispositivo. Nada de esto es difícil, pero hacerlo con una lista de comprobación deliberada es mejor que descubrirlo más tarde.
Consejos para obtener resultados más limpios
- Usa etiquetas semánticas (
<h2>,<p>,<button>) para que el convertidor pueda asignarlas de forma nativa en lugar de adivinar a partir del CSS. - Evita los
<div>envolventes muy anidados y sin estilo: cada uno que lleve un fondo o un relleno se convierte en otro Contenedor. - Usa
gapen un elemento padre flex o grid en lugar de márgenes en cada hijo; el gap se asigna a un único control. - Usa clases de iconos de Font Awesome en lugar de SVG en línea si quieres iconos que puedas cambiar en Elementor.
- Corrige los problemas en el código fuente y vuelve a convertir: casi siempre es más rápido que reparar el resultado dentro del editor.