Shape divider solo en desktop con Elementor: cómo hacerlo

Para mostrar un shape divider solo en la versión de escritorio con Elementor, seleccioná el elemento (sección o contenedor), andá a la pestaña Avanzado > Responsivo y activá Ocultar en tablet y Ocultar en móvil. El shape queda visible solo en desktop sin tocar nada de código. Es la forma de configurar formas solo desktop Elementor más limpia y rápida.

Un shape divider en Elementor es una forma SVG (ondas, triángulos, curvas, montañas, zigzag) que se ubica en el borde superior o inferior de una sección o contenedor para separarla de la siguiente sin usar una imagen pesada. Se configura desde la pestaña Estilo del elemento y se puede ajustar alto, ancho, color, flip e inversión. Sirve para dar transiciones visuales entre bloques de una página.

Ponele que armaste un hero con una onda suave abajo que separa la portada del bloque de servicios. En desktop queda bárbaro. Abrís el celu y la misma onda te comió media pantalla, te empujó el título y el CTA quedó a tres scrolls de distancia. Clásico. La solución no es borrar el shape: es mostrarlo solo donde suma.

¿Por qué conviene mostrar un shape divider solo en escritorio?

En pantallas grandes tenés aire de sobra. Una curva de 150px de alto es decorativa y no molesta. En un móvil de 375px de ancho esa misma curva se traga espacio vertical que necesitás para el contenido que importa. Relacionado: antes de avanzar con Elementor.

• Ahorro de espacio vertical: en móvil cada píxel arriba del pliegue cuenta, y un shape alto empuja tu mensaje hacia abajo.
• Mejor UX táctil: los SVG grandes a veces solapan botones o textos y arruinan la legibilidad en pantallas chicas.
• Rendimiento: menos elementos renderizados en móvil ayuda a que el LCP no se vaya de mambo, sobre todo en 3G/4G.

Eso sí: no es una regla universal. Hay ondas finitas que quedan perfectas en cualquier dispositivo. La decisión es caso por caso, y para eso hay que probar en cada breakpoint antes de publicar.

Cómo ocultar un shape divider en dispositivos móviles paso a paso

El método nativo, sin plugins ni código, según la documentación oficial de Elementor:

1. Hacé clic en el contenedor o sección que tiene el shape divider aplicado (no en el widget de adentro).
2. Andá al panel izquierdo y abrí la pestaña Avanzado.
3. Buscá el bloque Responsivo (en versiones viejas se llamaba «Visibilidad responsive»).
4. Activá Ocultar en tablet y Ocultar en móvil. El desktop queda solito.
5. Previsualizá con los iconos de dispositivo del pie del editor y confirmá que en móvil el shape desapareció.

Ojo con un detalle: los toggles de «Ocultar en» aplican al contenedor entero, no solo al shape. Si el shape está en el mismo contenedor que tu contenido, vas a ocultar todo. La jugada es meter el shape en un contenedor separado, o directamente ir por la vía del CSS que te muestro más abajo.

¿Cómo funcionan los breakpoints de Elementor para las formas?

Elementor trabaja con tres breakpoints por defecto: móvil (0 a 767px), tablet (768 a 1024px) y desktop (1025px hacia arriba). Desde la versión 2.x se pueden sumar breakpoints extra como móvil apaisado o pantallas anchas, pero para el 90% de los sitios con los tres alcanza.

Acá viene lo bueno: muchas propiedades del shape divider son responsive por breakpoint. Los iconos de escritorio, tablet y móvil que ves al lado de «Altura» y «Ancho» te dejan poner un valor distinto para cada dispositivo. En vez de esconderlo, podés dejar el shape en desktop a 150px de alto y bajarlo a 40px en móvil. Cambiás de vista con los iconos de dispositivo, ajustás el número, y listo. En componentes Elementor reutilizables profundizamos sobre esto.

La regla de oro: nunca publiques sin recorrer los tres breakpoints en el preview.

¿Cuándo usar CSS personalizado en vez de los toggles nativos?

Cuando querés esconder solo el shape sin tocar el resto del contenedor, el CSS es tu amigo. Elementor Pro tiene un campo de CSS personalizado por elemento (en la pestaña Avanzado). Le ponés una clase al contenedor, por ejemplo solo-desktop, y escribís una media query:

@media (max-width: 767px) {
 .solo-desktop .elementor-shape {
 display: none;
 }
}

Con .elementor-shape apuntás al SVG del divider sin afectar el contenido de adentro. Si el shape se te deforma en resoluciones intermedias, revisá el atributo preserveAspectRatio del SVG, que es lo que controla cómo se escala la forma cuando cambia el ancho.

La contra del CSS es obvia: si mañana otra persona edita la página desde el editor visual, no va a entender por qué el shape «desaparece» en móvil y no encuentra dónde. Documentalo o dejá un comentario en el código. Ya lo analizamos en nuestro análisis anterior.

Problemas comunes de responsividad con shape dividers y cómo resolverlos

• El shape se estira feo en móvil: casi siempre es por altura fija en píxeles. Bajá el valor en el breakpoint móvil o pasá a ocultarlo. Fue justamente uno de los temas reportados en el issue 1817 del repo de Elementor.
• El SVG se corta: revisá que el contenedor no tenga overflow:hidden peleándose con el alto del shape.
• Cambia de color en móvil: suele ser un tema de CSS heredado o de otro plugin pisando el fill. Regenerá el CSS de Elementor desde Herramientas > Regenerar CSS.
• El shape se desplaza al tope de una imagen: verificá el z-index del contenedor y que el shape esté asignado al borde correcto (arriba o abajo).

Plugins con controles responsive para shapes

La función nativa alcanza para la mayoría de los casos. Pero si querés shapes animados o formas que Elementor no trae, hay addons que amplían el juego. Premium Addons tiene un Animated Shape Divider para contenedores, y Unlimited Elements ofrece un widget de shape divider con más formas y controles por dispositivo.

¿Los necesitás? Para un divisor estático que se oculta en móvil, no. Son útiles cuando querés animación o una biblioteca de formas más grande. Antes de instalar un plugin más, preguntate si el peso extra en el sitio vale la pena. Cada addon suma scripts.

Ejemplos prácticos con shape dividers responsive

Landing page: transición hero a CTA

Una onda de 120px entre el hero y el bloque de conversión queda elegante en desktop. En móvil la ocultás con los toggles responsive y el CTA sube al pliegue. Ganás altura donde más pesa la conversión.

Portafolio: divisor decorativo que desaparece

Un zigzag entre proyectos suma personalidad en pantalla grande. En el celular, donde ya scrolleás bastante, lo sacás para que las miniaturas respiren.

Blog: ondas con altura distinta por dispositivo

Acá en vez de ocultar, ajustás: onda de 100px en desktop, 30px en móvil. El estilo se mantiene sin comerte espacio de lectura. Si vas a montar todo esto en un sitio real, asegurate de subirlo a un hosting WordPress como el de Donweb, que soporta bien la carga de Elementor sin que el editor se ponga lento.

Qué está confirmado y qué no

• Confirmado: la pestaña Avanzado > Responsivo con toggles Ocultar en tablet/móvil es funcionalidad core de Elementor, sin plugins, según la documentación oficial.
• Confirmado: los breakpoints por defecto son móvil 0–767px, tablet 768–1024px, desktop 1025px+.
• Confirmado: el shape divider vive en la pestaña Estilo del contenedor y admite valores responsive de alto y ancho por dispositivo.
• A verificar en tu setup: si usás breakpoints personalizados o un theme que los modifica, los rangos pueden cambiar. Tomalo con pinzas y probá en dispositivo real, no solo en el preview del editor.

Errores comunes al configurar formas solo desktop en Elementor

• Ocultar el contenedor entero: si el shape y el contenido comparten contenedor, el toggle «Ocultar en móvil» borra los dos. Separá el shape en su propio contenedor o usá CSS.
• Confiar solo en el preview del editor: el preview aproxima, pero un móvil real con su navegador puede renderizar distinto. Probá en el celu de verdad.
• Dejar altura fija en píxeles para todos los dispositivos: es la causa número uno del shape estirado o cortado. Usá valores por breakpoint o porcentajes.
• Olvidar regenerar el CSS: si cambiaste estilos y no se reflejan, andá a Elementor > Herramientas > Regenerar CSS antes de volverte loco buscando el bug.

Preguntas Frecuentes

¿Cómo hago que un shape divider aparezca solo en desktop con Elementor?

Seleccioná el contenedor con el shape, andá a Avanzado > Responsivo y activá «Ocultar en tablet» y «Ocultar en móvil». El divider queda visible solo en pantallas de 1025px o más. No necesitás código ni plugins. Sobre eso hablamos en alternativas a Elementor disponibles.

¿Puedo ocultar solo el shape sin ocultar el contenido del contenedor?

Sí, con CSS personalizado. Le ponés una clase al contenedor y usás una media query con .elementor-shape { display: none; } dentro de @media (max-width: 767px). Así el contenido de adentro sigue visible en móvil y solo desaparece la forma.

¿Cuáles son los breakpoints por defecto de Elementor?

Móvil de 0 a 767px, tablet de 768 a 1024px y desktop de 1025px en adelante. Desde Elementor 2.x podés agregar breakpoints extra como móvil apaisado o pantallas anchas, pero los tres base cubren la mayoría de los sitios.

¿Por qué mi shape divider se ve estirado en el celular?

Casi siempre es por dejar una altura fija en píxeles que no achica en móvil. Ajustá el alto en el breakpoint móvil con los iconos de dispositivo, o revisá el atributo preserveAspectRatio del SVG si estás editando código.

¿Necesito Elementor Pro para ocultar shapes en móvil?

No para los toggles de visibilidad responsive, que están en la versión gratuita. Sí necesitás Pro para el campo de CSS personalizado por elemento. Si usás la versión free, podés meter el CSS en Apariencia > Personalizar > CSS adicional.

Conclusión

Mostrar un shape divider solo en desktop no es magia ni requiere un plugin caro. Con los toggles de Avanzado > Responsivo lo resolvés en dos clics, y si necesitás precisión quirúrgica (esconder el shape pero no el contenido), una media query de tres líneas te salva. Lo que cambia el resultado no es la técnica sino el criterio: probar en cada breakpoint, evitar alturas fijas en píxeles y separar el shape en su propio contenedor cuando haga falta. Elegí el método según tu caso, revisá en un móvil real, y tu diseño va a respirar igual de bien en una pantalla de 27 pulgadas que en un celu de gama media.

Fuentes

• Elementor Help – Documentación oficial del Shape Divider
• Elementor Blog – Presentación del Shape Divider en la versión 1.3
• GitHub – Issue 1817 sobre responsividad de shape dividers
• Premium Addons – Animated Shape Divider para contenedores
• Unlimited Elements – Widget de Shape Divider con controles responsive