CSS y Elementor expresan lo “responsive” de maneras diferentes. CSS usa media queries y funciones fluidas; Elementor almacena un valor por punto de ruptura. Saber cómo uno se convierte en el otro evita mucha confusión.
Cómo se producen los valores responsive
En lugar de intentar analizar tus media queries, el convertidor vuelve a medir la página en cada ancho de punto de ruptura y registra lo que el navegador realmente calculó. Los valores de escritorio, tableta y móvil se escriben por separado para espaciado, dirección de diseño, columnas de cuadrícula, altura mínima, alineación y tipografía.
La consecuencia: tus media queries no necesitan coincidir con los puntos de ruptura de Elementor. Lo que se almacena es lo que el diseño realmente muestra en cada ancho.
Tipografía fluida: clamp() y vw
Una declaración como font-size: clamp(46px, 7vw, 96px) no tiene un equivalente directo en Elementor. Lo que obtienes en su lugar son tres valores muestreados — uno por punto de ruptura — que aproximan la curva lo suficiente para la mayoría de diseños. Si un encabezado debe escalar de forma perfectamente suave, establece un valor fluido personalizado en Elementor después de importar.
Porcentajes y valores auto
Este es el punto delicado. Cuando lees un estilo calculado, el navegador devuelve píxeles resueltos, no el valor relativo que escribiste. width:100% se lee, por ejemplo, como 760px; margin:0 auto se lee como un margen lateral concreto; las pistas de cuadrícula 1fr se leen como anchos en píxeles.
Escribir esos píxeles en Elementor congelaría el diseño en el ancho en el que se ejecutó la conversión. Por eso se reconstruye la intención relativa en lugar de copiarse: las imágenes se expresan como un porcentaje de su contenedor (las imágenes a ancho completo simplemente no reciben ningún ancho fijo), los bloques centrados automáticamente se convierten en contenedores «En caja» y las pistas de cuadrícula iguales se convierten en unidades fr. Si alguna vez ves un ancho fijo en píxeles sospechoso en algo que debería ser fluido, ese es el tipo de error que conviene notificar.
Unidades de viewport
Las secciones hero con 100vh se resuelven a píxeles de la misma manera y se muestrean por punto de ruptura. Suele quedar muy cerca, pero si quieres un hero de altura completa de verdad, establece Altura mínima = 100vh en ese contenedor en Elementor después — es una solución de un clic.
Qué deberías revisar siempre después de importar
- Apilado móvil. Las cuadrículas de varias columnas y las filas flex deben apilarse; confirma el número de columnas en tableta y móvil.
- Alturas de las secciones hero, especialmente si el diseño usó
vh. - Encabezados largos en el punto de ruptura móvil — la tipografía fluida es aproximada, por lo que una línea puede partirse de forma incómoda.
- Elementos sticky y fijos. Es mejor volver a aplicar el comportamiento de posicionamiento con los controles de posicionamiento / Efectos de movimiento de Elementor.
Exactamente qué propiedades obtienen valores por dispositivo
Quince cosas se vuelven a medir y se almacenan por punto de ruptura: relleno, margen, ancho, altura mínima, alineación, columnas de cuadrícula, separaciones de cuadrícula, dirección flex, ajuste flex, justificación flex, alineación flex, separación flex, tamaño de fuente, altura de línea y espaciado entre letras.
Vale la pena leer esa lista dos veces, porque lo que no está en ella es igualmente informativo. Los colores, bordes, radios y sombras se capturan una vez, a partir del renderizado de escritorio. Si tu diseño cambia un color de fondo en el punto de ruptura móvil, ese cambio no se importa — es una decisión de diseño más que una consecuencia de la maquetación, y hay que configurarlo en Elementor. En la práctica esto es poco frecuente, pero cuando ocurre parece un error en lugar de un límite, así que conviene saberlo.
Solo se escriben las diferencias
Esta es la parte que mantiene manejables las páginas convertidas. Un valor de punto de ruptura se almacena solo cuando realmente difiere del valor de escritorio. Si un contenedor tiene un relleno de 40px en todos los anchos, los campos de relleno de tableta y móvil permanecen vacíos y heredan — exactamente como lo harían si hubieras construido la página a mano. La excepción son los pocos controles en los que Elementor incluye sus propios valores predeterminados de tableta y móvil en lugar de heredar — el número de columnas de cuadrícula y los anchos de contenedor. Esos se escriben siempre en cada punto de ruptura; de lo contrario, una cuadrícula de dos columnas caería silenciosamente al valor predeterminado móvil de una columna de Elementor.
La alternativa sería técnicamente correcta y prácticamente horrible: cada campo responsive de cada widget rellenado con un valor, de modo que nunca podrías saber de un vistazo qué diferencias son intencionales. En cambio, cuando abres un widget convertido y ves un valor en el campo móvil, ese valor está ahí porque el diseño realmente difiere en ese ancho. El panel responsive sigue siendo legible, lo que importa mucho en una página con sesenta widgets.
Cómo se realiza realmente la medición
La página se carga en un marco oculto. Para cada punto de ruptura, el marco se redimensiona a ese ancho exacto y después — esto es lo importante — la conversión espera a que el navegador termine de maquetar antes de leer nada. Espera dos fotogramas de animación, con un tiempo de espera de 80 ms como respaldo, y solo entonces recorre cada elemento mapeado para registrar sus valores calculados en ese ancho.
Sin esa espera leerías el diseño en medio del reflujo y obtendrías valores de algún punto entre los dos estados, que es el tipo de error que produce una página sutilmente incorrecta en un punto de ruptura y bien en los demás. La espera también es la razón por la que convertir una página larga tarda unos segundos por punto de ruptura en lugar de ser instantáneo: realmente está renderizando tu página en cada ancho.
Una consecuencia práctica: lo que tu página muestre en un navegador real a 390px es lo que obtendrá el móvil. No hay ninguna capa de interpretación que lo cuestione. Si el diseño móvil queda mal después de la conversión, abre el original a 390px y también estará mal allí.
Un flujo de trabajo que evita sorpresas
Convierte, pega y luego recorre inmediatamente las tres vistas de dispositivo de Elementor antes de tocar cualquier otra cosa. Corregir el diseño a nivel de punto de ruptura primero es mucho más rápido que descubrirlo más tarde después de haber reestilizado widgets individuales.
Y revisa tu original en cada ancho antes de convertir, no después. Dos minutos redimensionando una ventana del navegador detectan los diseños que nunca estuvieron bien desde el principio — convertir fielmente un diseño móvil roto produce un diseño móvil roto, y es mucho más fácil culpar a la herramienta que darse cuenta de que el original era el problema.