Al crear una página de destino en Elementor, la cuadrícula de escritorio se ve perfecta: tres columnas, orden estricto, todo respira. Ábrala en una tableta y la tercera columna se cae, rompe el ritmo y deja un hueco a la derecha. ¿Le suena familiar?

Elementor, por defecto, envuelve las columnas que no caben en una fila en pantallas estrechas. Pero ¿qué pasa si en una tableta necesita no tres, sino exactamente dos columnas por fila, sin cortes y sin espacio vacío? ¿O en móvil, no una, sino dos?

A continuación, dos métodos que funcionan: integrado (para versiones de Elementor 2024+) y CSS personalizado (para control total sobre cualquier versión). Ambos están probados y no entran en conflicto con la optimización del DOM.

💡 Resumen rápido:

• Establezca el ancho de columna en Elementor desde la pestaña Avanzado para cada punto de ruptura por separado
• Si los ajustes estándar no son suficientes, añada CSS personalizado con flex-wrap y media queries
• Verifique la maquetación en todos los dispositivos: las columnas se reorganizan sin cortes ni espacios vacíos

El proceso se muestra claramente en este video:

1. Método integrado: anchos de columna responsivos

A partir de Elementor 3.18+ (y especialmente con la transición a contenedores Flexbox en 2024), puede controlar los anchos de columna en cada dispositivo sin una sola línea de código.

Cree una sección con columnas

Añada una nueva sección y elija una estructura de tres columnas:

Duplique cada una de las tres columnas para obtener seis. Esto es necesario para que en tabletas las columnas se reorganicen en dos filas de dos, en lugar de dejar la tercera sola:

Para ver la maquetación, rellene las columnas con números usando el widget "Encabezado", para que la vista previa muestre inmediatamente cuál fue a dónde:

Configuración del ancho para cada dispositivo

Vaya a los ajustes de cada columna → pestaña Avanzado. En la sección Ancho, cambie al modo responsivo (icono de tableta/teléfono) y establezca los valores según la documentación de Elementor:

• Escritorio: tres columnas por fila (el ancho se dividirá automáticamente)
• Tableta: dos por fila
• Móvil: una por fila (o dos, si también necesita dos en móvil)

Punto clave: el ancho se establece para cada una de las seis columnas por separado, Elementor aplica el valor a todas las columnas dentro de una sección. No habrá ningún salto de línea porque en tabletas seis columnas dan exactamente dos filas de dos.

2. CSS personalizado: control total

El método integrado cubre la mayoría de los escenarios, pero a veces necesita un número diferente de columnas en tabletas (2 en lugar de 3), y en móvil, no estándar (2 en lugar de 1). O tiene una versión antigua de Elementor sin anchos responsivos. Entonces, CSS.

Asigne una clase CSS a la sección

Abra los ajustes de la sección → pestaña Avanzado → campo Clases CSS. Introduzca una clase única, por ejemplo, elementor-custom-columns:

Añada reglas CSS

Inserte el código en los ajustes de la sección (pestaña Avanzado → CSS personalizado) o en el personalizador del tema (Apariencia → Personalizar → Estilos adicionales). Aquí está la versión actual:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

Ahora, los anchos de columna para cada dispositivo mediante media queries. Para secciones (Sections) use el selector .elementor-top-column, para contenedores (Containers), .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Lo que sucede aquí: flex-wrap: wrap permite el salto de columna cuando no caben en una fila, y justify-content: center centra las columnas restantes (sin un hueco a la derecha). Las media queries sobrescriben el ancho en cada punto de ruptura, exactamente tantas columnas por fila como se necesite.

Resultado en dispositivos

En escritorio, tres columnas ordenadas:

En tableta, exactamente dos por fila, sin cortes ni huecos:

En móvil, una columna a ancho completo:

Para quienes activaron la optimización del DOM

Si en los ajustes de Elementor (Elementor → Ajustes → Experimentos) la opción Optimización del DOM mejorada está activa, los selectores cambian, .elementor-row desaparece. CSS adaptado para este modo:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Un ejemplo de código verificado para este escenario también está disponible en GitHub Gist de oooh-boi, funcional, probado en Elementor 3.19+ con optimización del DOM activada.

Qué método elegir: tabla comparativa

Si tiene una versión reciente de Elementor y una cuadrícula estándar (2-4 columnas), use el método integrado, es más rápido y no requiere CSS. Si necesita una maquetación no estándar, está usando una versión antigua del plugin o activó la optimización del DOM, el CSS personalizado le da control total.

⁉️🤔 Preguntas frecuentes

¿Por qué las columnas se envuelven con un corte en tabletas?

Elementor por defecto usa flex-wrap: nowrap para la fila de columnas. Cuando tres columnas no caben en el ancho de tableta, se forma un corte: segunda columna en la primera fila, la tercera va a la segunda y se queda sola. Con flex-wrap: wrap y anchos de columna a la mitad de la fila en tabletas, seis columnas caben exactamente en tres filas de dos, sin cortes. justify-content: center centra las columnas si hay menos de las necesarias en la última fila. Solución: o bien ancho responsivo mediante interfaz (método 1), o flex-wrap: wrap con media queries (método 2).

¿El método funciona con contenedores (Flexbox Containers)?

Sí, pero los selectores son diferentes. Para contenedores en lugar de .elementor-top-column use .e-con-inner > .e-con, y en lugar de .elementor-container, el propio contenedor. El método responsivo integrado (n.º 1) funciona con contenedores sin ediciones.

¿Es obligatorio duplicar las columnas?

Sí, si en tabletas necesita menos columnas por fila que en escritorio. Por ejemplo: escritorio, 3 columnas, tableta, 2. Tres columnas originales no pueden reorganizarse en dos filas ordenadas de dos. Seis columnas (cada una duplicada) se reorganizan en tres filas de dos.

¿Esto entra en conflicto con plugins de caché?

Las reglas CSS añadidas mediante CSS personalizado de sección o el personalizador van a estilos en línea o a wp_head, pasan por cualquier plugin de caché (WP Rocket, W3 Total Cache, LiteSpeed) sin problemas. Después de cambiar el CSS, limpie la caché.

¿Qué hacer si las columnas son demasiado estrechas en móvil?

Verifique que el ancho no se herede del punto de ruptura de tableta. En Elementor los ajustes son en cascada: móvil hereda de tableta, tableta hereda de escritorio. Establezca explícitamente el ancho en cada punto de ruptura, incluso si el valor coincide con el superior.

¿Vale la pena molestarse con CSS en 2026?

Los ajustes responsivos integrados de Elementor son suficientes para la mayoría de las tareas, úselos como herramienta principal. Pero cuando en tabletas no necesita ni dos ni tres, sino digamos, cuatro columnas con anchos desiguales, el CSS personalizado sigue siendo la única manera de hacer exactamente lo previsto.

Pruebe ambos métodos en una página de prueba: empiece con el integrado (más rápido), y si le falta flexibilidad, use el enfoque CSS. La habilidad de configurar media queries para Elementor le será útil para otras tareas: fuentes personalizadas en dispositivos, ocultar bloques, espaciado no estándar para tabletas.