Abres una página convertida en Elementor y a veces encuentras contenedores dentro de contenedores dentro de contenedores. No es aleatorio: refleja tu HTML con exactitud. Si entiendes la regla, es fácil controlarlo.
La regla básica: un elemento de bloque, un contenedor
El convertidor recorre tu DOM. Cada envoltorio de nivel de bloque (<div>, <section>, <article>, <header>, <figure>…) se convierte en un contenedor de Elementor, y su padding calculado, fondo, borde, radio, sombra y disposición flex/grid se trasladan a ese contenedor. Los textos, títulos, imágenes y botones se convierten en widgets dentro de él.
Así, una cadena de marcado como section > div.wrap > div.row > div.col > h2 produce cuatro contenedores anidados antes de llegar al título. No hay nada roto, pero editarlo es tedioso.
Lo que ya se fusiona automáticamente
Un envoltorio que no tiene ningún efecto visual ni de maquetación se elimina automáticamente. En concreto, un <div> se fusiona cuando tiene exactamente un elemento hijo y ninguno de estos: fondo, imagen de fondo, borde, padding, box-shadow, max-width, min-height o un display flex/grid. El convertidor los cuenta y los muestra como «Envoltorios redundantes fusionados» en el resumen del mapa de estructura.
En cuanto un envoltorio lleva aunque sea un pequeño padding o un fondo, se conserva, porque eliminarlo cambiaría la maquetación.
Las tarjetas se aplanan en un único widget
Hay un segundo aplanado, más fuerte: cuando una tarjeta no es más que un marco con estilo alrededor de un único contenido, el marco pasa al propio widget y el envoltorio desaparece. Lo activan dos patrones:
- imagen + título + texto corto → un único widget Caja de imagen (Image Box)
- icono + título + texto corto → un único widget Caja de icono (Icon Box)
En ambos casos, el fondo, el borde, el radio, la sombra y el padding de la tarjeta se escriben en los ajustes de la pestaña Avanzado del propio widget, de modo que una fila de cinco tarjetas se convierte en un Grid con cinco widgets, y no en un Grid con cinco contenedores que contienen un widget cada uno. Es exactamente como lo construirías a mano.
Cómo obtener un resultado más plano
- Escribe HTML menos profundo. Un envoltorio por sección suele bastar. Si generas el HTML con IA, pídelo explícitamente en el prompt.
- No añadas divs de maquetación que no necesitas. Un padre grid o flex puede colocar sus hijos directamente; con CSS moderno rara vez hace falta un envoltorio
.colextra por elemento. - Usa la raíz de copia. En el mapa de estructura, haz clic en el icono de diana de la fila que realmente quieres. Todo lo que está por encima se descarta, así que esos envoltorios externos de la página nunca llegan a Elementor.
- Excluye lo que no necesites con el icono ✕ de una fila.
La prueba exacta, y por qué el umbral de padding es de 2px
Vale la pena ver la regla real, porque explica la mayoría de las sorpresas. Un envoltorio solo se elimina cuando se cumplen todas estas condiciones: no es flex ni grid; no está posicionado (fixed, absolute o sticky); no tiene color de fondo ni imagen de fondo; el ancho total del borde es cero; el padding total es de 2px o menos; no hay sombra de caja; no hay max-width; min-height es cero; y ninguno de los márgenes laterales es auto.
La tolerancia de 2px es deliberada. Los navegadores informan el padding calculado en píxeles fraccionarios, y un envoltorio que la hoja de estilos declara sin padding suele calcularse como algo parecido a 0.4px una vez que entran en juego el redondeo, los bordes y el zoom. Comprobar que sea exactamente cero conservaría cientos de envoltorios que no hacen nada; permitir un par de píxeles de ruido los elimina sin descartar nunca un padding que el diseñador realmente quería.
Las dos condiciones de margen y max-width existen para un patrón concreto: la columna de contenido centrada. Un envoltorio con max-width: 1100px; margin: 0 auto parece vacío (sin fondo, sin padding), pero está haciendo el trabajo de maquetación más importante de la página. Fusionarlo dejaría que el contenido ocupara de borde a borde. Por eso se conserva y se convierte en un contenedor «En caja».
Por qué los envoltorios con padding nunca se fusionan con su hijo
Una idea que suena razonable es ir más allá: si un contenedor contiene exactamente otro contenedor, fusionarlos y sumar los paddings. Es lo primero que la gente pide, y la herramienta no lo hace a propósito.
Piensa en una tarjeta: un envoltorio exterior con 24px de padding que crea la separación entre tarjetas y que contiene una caja interior con su propio padding de 24px y un fondo blanco que crea el espacio entre el borde de la tarjeta y su texto. Esos dos paddings se ven idénticos en los estilos calculados y significan cosas completamente distintas. Si los fusionas, obtienes una sola caja con 48px de padding, un fondo que ahora cubre lo que antes era la separación y una fila de tarjetas que ya no tiene espacio entre ellas.
No hay una forma fiable de distinguir ambos casos solo a partir de los estilos calculados, y equivocarse rompe la maquetación en silencio, de una manera que cuesta mucho rastrear. Por eso la pasada automática solo elimina los envoltorios que demostrablemente no hacen nada, y todo lo ambiguo queda en tus manos: para eso están los controles de raíz de copia y de exclusión.
Lo que realmente te cuesta la profundidad
El anidamiento profundo no es un problema de corrección. La página se muestra bien. Lo que cuesta es todo lo que haces después:
- Seleccionar elementos. Al hacer clic en un título en el lienzo se selecciona el elemento más interno; llegar al envoltorio de la sección implica subir por la ruta de navegación cuatro o cinco veces, cada vez.
- Trabajo responsive. El padding en tres tamaños de dispositivo a lo largo de cinco niveles anidados son quince ajustes donde debería haber tres.
- Peso del resultado. Cada contenedor es un
<div>real con sus propias reglas CSS generadas. Una profundidad de ocho en veinte secciones es mucho marcado para una maquetación que necesita dos niveles. - Entrega. Si un cliente o un compañero edita la página más adelante, un árbol profundo es donde se rinde y te pide que lo hagas tú.
Un ejemplo práctico
Esta es la forma que producen la mayoría de los constructores de páginas y generadores de IA:
section.features > div.container > div.row > div.col-4 > div.card > div.card-body > h3
Siete niveles para llegar a un título. Tras la conversión, div.container se conserva si lleva el centrado con max-width, div.row se fusiona si es un padre flex sin estilo propio y, si .card contiene un icono, un título y un párrafo corto, toda la rama de la tarjeta se aplana en un único widget Caja de icono. Lo que eran siete niveles se queda en unos tres, sin que toques nada.
Reescribe el código fuente como section.features > div.grid > div.card > h3 y llegas a dos. Ese es todo el truco: el convertidor refleja tu marcado fielmente, así que un marcado poco profundo es la única vía fiable hacia un árbol de Elementor poco profundo.
Revisa antes de exportar
El resumen del mapa de estructura muestra Profundidad máx. de anidamiento. Si ves un número como 7 u 8, es la señal para fijar una raíz de copia más abajo en el árbol, o para simplificar el marcado fuente y volver a convertir. Una profundidad de 3–5 es cómoda para trabajar en el editor de Elementor.