Convierte HTML en
páginas de Elementor editables

El problema de los dos enfoques habituales

Cuando ya tienes una página HTML terminada y la necesitas dentro de WordPress, normalmente hay dos opciones, y ninguna es buena. La primera es pegar el marcado en un único widget HTML. Se renderiza bien, pero Elementor lo trata como un bloque opaco: no puedes hacer clic en un título para cambiar su tamaño, no puedes sustituir un icono, y un cliente no puede corregir una frase sin abrir código. La página está dentro de Elementor sin formar parte de él.

La segunda opción es reconstruir cada sección a mano. El resultado es idiomático y totalmente editable, pero en una página de marketing larga son horas de trabajo, y reproducir exactamente los espaciados y la tipografía originales es tedioso y propenso a errores.

La conversión es el tercer camino. En lugar de conservar el marcado o recrearlo a mano, la página se lee como la lee un navegador — con estilos computados reales — y cada parte se asigna al widget de Elementor que mejor le corresponde.

Por qué estilos computados y no la hoja de estilos

La conversión no intenta analizar tu CSS. Tu página se renderiza en un marco aislado y luego cada elemento se mide tal como el navegador lo resolvió realmente. Esa distinción importa más de lo que parece.

Eso significa que el CSS basado en clases, la cascada, la herencia, las propiedades personalizadas y las abreviaturas simplemente funcionan, porque el valor leído es el definitivo. Un color escrito como variable CSS llega como el color al que se resuelve. Un tamaño de fuente escrito con clamp llega como el tamaño que realmente es. No hay ningún analizador CSS que discrepe de tu navegador.

También crea un problema que conviene entender, porque explica la mayor parte del cuidado descrito más abajo: el navegador resuelve los valores relativos en píxeles absolutos. Un ancho del cien por cien se reporta como un número de píxeles. Los márgenes laterales auto se reportan como los píxeles que centraban el elemento en ese momento. Las columnas de la cuadrícula escritas como fracciones se reportan como anchos en píxeles. Copiar esos números tal cual congelaría tu diseño en el ancho al que casualmente se ejecutó la conversión.

Así que la intención relativa se reconstruye en lugar de copiarse. Las imágenes se expresan como porcentaje de su contenedor, y las de ancho completo no reciben ancho fijo alguno. Un bloque con ancho máximo y márgenes auto simétricos se reconoce como centrado y se convierte en un contenedor boxed, que se centra de forma nativa en cualquier tamaño de pantalla. Las pistas de cuadrícula iguales se comparan numéricamente, con tolerancia al redondeo subpíxel, y se reescriben como unidades fraccionarias para que la cuadrícula siga refluyendo.

Estructura: contenedores, y saber cuándo no crear uno

Cada envoltorio a nivel de bloque de tu marcado se convierte en un contenedor de Elementor, con su padding, fondo, borde, radio, sombra y sus ajustes flex o grid. Es una asignación fiel, pero tomada al pie de la letra produce árboles profundos: una sección dentro de un envoltorio dentro de una fila dentro de una columna son cuatro contenedores antes de llegar a un título.

Dos cosas lo reducen. Un envoltorio sin ningún efecto visual ni de diseño — sin fondo, borde, padding, sombra, ancho máximo, alto mínimo ni display flex o grid — se colapsa, porque quitarlo no cambia nada. Y una tarjeta que en realidad es solo un marco estilizado alrededor de un único contenido se aplana por completo: el marco pasa al propio widget.

Esa segunda regla es la razón por la que una fila de cinco tarjetas de imagen se convierte en una cuadrícula con cinco widgets Image Box, en lugar de una cuadrícula con cinco contenedores que sostienen un widget cada uno. Es la estructura que un usuario experimentado de Elementor construiría a mano, y es mucho más fácil de reestilizar después.

Reconocer patrones, no solo etiquetas

Asignar un título a un widget Heading es obvio. El trabajo útil está en reconocer formas. Un contenedor con un icono, un título y un párrafo corto es un Icon Box. Un contenedor con una imagen, un título y un párrafo es un Image Box. Una lista de filas repetidas, cada una con un solo icono y algo de texto, es un Icon List, con un elemento editable por fila.

Estas detecciones son deliberadamente estrictas. Si una tarjeta contiene texto extra más allá de su título y su párrafo — un número de paso, una insignia, un precio — el patrón no se aplica y el bloque se queda como contenedor normal, porque perder ese texto sería peor que un árbol algo más profundo. Una detección conservadora en la que confiar vale más que una agresiva que hay que revisar.

Los botones funcionan igual. La mayoría de las llamadas a la acción reales son anclas con CSS, no elementos button, así que un enlace solo se trata como botón cuando varias señales coinciden: texto corto, sin hijos a nivel de bloque, un fondo o borde, un radio de esquina, padding real y un display de tipo bloque. Cualquiera de ellas por sí sola produciría falsos positivos.

Iconos e imágenes: las dos cosas que piden una decisión

Los iconos pueden convertirse en entradas reales de la biblioteca de iconos de Elementor, lo que significa que después puedes cambiarlos desde el selector. Eso funciona cuando la fuente usa clases de fuente de iconos. Con un SVG inline dibujado a mano, el gráfico no puede entrar en el control de icono, y un SVG que dependía del CSS de la página para su tamaño y trazo también perderá ese estilo al sacarlo de la página. Cuando un icono no puede identificarse por nombre, el control se deja vacío a propósito en lugar de rellenarlo con una suposición errónea.

Las imágenes son la otra decisión. Una imagen en data-URL o una ruta de archivo local no puede convertirse en un adjunto de medios de WordPress, así que se convierten en huecos vacíos — cada uno conserva su texto alt como leyenda, para que sepas qué imagen va dónde. Si la fuente referencia URL reales de imágenes subidas, se importan sin ningún paso manual. Subir tus imágenes primero es el único cambio que más trabajo posterior elimina.

Qué no se convierte, honestamente

Los scripts se eliminan, así que todo lo que dependía de JavaScript personalizado llega como marcado estático y debe reconstruirse con el widget nativo correspondiente. Las acciones de envío de formularios se retiran, porque llevar el endpoint enviaría los datos de tus visitantes a un destino que no elegiste. Los menús de navegación deben apuntar a un menú real de WordPress. Los estados hover y focus no pueden leerse de una página en reposo y se configuran después. Animaciones, transiciones y comportamiento sticky se reaplican mejor con los controles propios de Elementor.

Los pseudoelementos merecen mención aparte, porque sorprenden. Las formas decorativas, comillas y acentos de subrayado dibujados con before y after no son nodos del DOM en absoluto, así que no pueden convertirse en widgets. Si tras la conversión falta un detalle del diseño, eso es lo primero que hay que revisar.

Conseguir el resultado más limpio

La calidad de una conversión la decide sobre todo el marcado que le das. Las etiquetas semánticas se asignan sin ambigüedad. Un DOM poco profundo, con un envoltorio por sección, mantiene el árbol editable. El CSS inline o en un único bloque style sí puede medirse, mientras que una hoja de estilos de framework que nunca carga deja una página sin estilo que convertir. El espaciado definido con gap se convierte en un solo control en lugar de muchos.

Antes de exportar, el mapa de estructura merece quince segundos cada vez. Muestra el número de componentes, la profundidad máxima de anidación y el desglose de confianza, con una vista previa en vivo vinculada al árbol. Si la profundidad es alta o varias filas quedaron como HTML, corregir la fuente y volver a convertir es sistemáticamente más rápido que reparar el resultado dentro de Elementor.

Para una página larga, pásala sección a sección. Define una raíz de copia en el bloque que quieras y solo se exporta ese subárbol: los envoltorios externos, la cabecera y el pie se quedan atrás. Las unidades pequeñas son mucho más fáciles de verificar, y lo que vayas a reutilizar puedes guardarlo en tu biblioteca de plantillas sobre la marcha.