Un fondo sesgado corta el borde de una sección a lo largo de la página en ángulo en lugar de dejarla plana. Divide la habitual pila de bandas horizontales y el ojo sigue la diagonal hacia la siguiente sección. Las páginas de destino y las páginas de inicio de SaaS lo utilizan constantemente.
Elementor todavía no tiene un interruptor de “esquivar esta sección”, así que hazlo con algunas líneas de CSS. El problema es que el campo CSS personalizado de Elementor está bloqueado detrás de Pro. Por eso este tutorial utiliza el archivo gratuito Extensión CSS personalizada en complementos maestros, que agrega un cuadro CSS a cada elemento en Elementor gratuito.
Esta guía ha sido reconstruida para saber cómo funciona realmente Elementor en 2026. La versión original de esta publicación se escribió en Secciones y Columnas Interiores, y ambas son heredadas ahora. Todo lo que aparece a continuación utiliza Contenedores Flexbox, el elemento de diseño predeterminado de Elementor desde 3.6 y la única estructura que obtienes en una página nueva.
Lo que necesitas antes de empezar
- Elementor libre (3.6 o más reciente, por lo que los contenedores están encendidos)
- Complementos maestros: instálelo gratis desde WordPress.org, luego active la extensión CSS personalizada
- Un contenedor con un color de fondo o conjunto de imágenes. No te saltes esto. Skew transforma la caja, por lo que si la caja no tiene nada visible, no verás ningún cambio. Un contenedor transparente es la razón número uno por la que la gente piensa que este truco está roto.
No necesitarás Elementor Pro en ningún momento. Si ya lo tiene, su campo CSS personalizado nativo se comporta de la misma manera, así que pegue el código allí.
Comprender el sesgo antes de pegar algo
La inclinación es una transformación CSS. transform: skew(0deg, -10deg) inclina el elemento a lo largo del eje Y diez grados, convirtiendo sus bordes superior e inferior en diagonales.
Lo que hace tropezar a la gente es que se aplica una transformación al elemento y todo lo que hay dentro. Inclina un contenedor y sesgas su fondo, claro, pero también sesgas el titular, el botón y la imagen que contiene. Tu texto termina inclinado.
Entonces te contrapuntas. Anida un segundo recipiente dentro del primero e inclínelo hacia atrás en la misma cantidad en la dirección opuesta. El padre va a menos diez grados, el niño va a más diez y se cancelan. Fondo en ángulo, contenido vertical.
Dos contenedores, dos reglas, valores opuestos. Eso es todo.
Paso 1: Construya la estructura del contenedor
Abra su página en Elementor y ingrese un Contenedor. Establezca su ancho en Ancho Completo. Este es el exterior, el que lleva el ángulo.
Ahora arrastra un segundo Contenedor dentro del primero. Ese contenedor anidado contiene el contenido real: encabezado, texto, botón, imagen, para qué sirve la sección. Diseñalo como quieras.
Entonces la estructura es:
- Contenedor exterior: color de fondo o imagen, obtiene el sesgo
- Contenedor interior: todo tu contenido, obtiene el contra-sesgo
¿mantener una página más antigua todavía construida sobre secciones y secciones internas? La lógica es idéntica. El elemento exterior se inclina, el elemento interior se desvincula. Sin embargo, para cualquier cosa nueva, use contenedores. Envían mucho menos DOM, lo que suma si te importa Velocidad de página del elementor.
Paso 2: agregue el CSS sesgado al contenedor exterior
Seleccione el contenedor exterior, vaya al Avanzado tab y encuentra el MA CSS personalizado cuadro que agrega Master Addons. Pegue esto en:
selector {
padding: 400px 0;
margin-top: -200px;
transform: skew(0deg, -10deg);
overflow: hidden;
}Esto es lo que hace cada línea, para que puedas ajustarla en lugar de simplemente esperar:
selectores la abreviatura de Elementor de “este elemento específico”. Master Addons lo busca por usted, por lo que la regla no puede filtrarse a otros contenedores.padding: 400px 0le da al contenedor suficiente espacio vertical para que los bordes en ángulo vayan a alguna parte. Incline un recipiente corto y simplemente recorte las esquinas.margin-top: -200pxtira del contenedor hacia arriba en el que está encima para que la diagonal se superponga, en lugar de dejar un triángulo blanco. La mitad del valor de relleno es una relación inicial decente.transform: skew(0deg, -10deg)es el ángulo mismo. Negativo se inclina en un sentido, positivo en el otro.overflow: hiddenevita que las esquinas sesgadas se derramen hacia los lados. Déjalo y obtendrás una barra de desplazamiento horizontal, a la que volveré.
Una cosa que vale la pena señalar: si también has tocado el Transformar los controles en la pestaña Avanzado del propio Elementor, lucharán con este CSS, ya que ambos escriben en el mismo transform la propiedad y el último en cargar gana. Elige un lugar para establecer el ángulo y deja en paz al otro.
La versión 2020 de este tutorial enumeró cuatro líneas con prefijo de proveedor (-webkit-, -moz-, -ms-, -o-). Eliminarlos. Sin prefijo transform ha funcionado en todos los navegadores durante aproximadamente una década y esas líneas adicionales simplemente hacen que el cuadro CSS sea más difícil de leer.
Paso 3: Contraescoge el recipiente interior
En este punto su contenido se inclina junto con el fondo. Seleccione el contenedor interior, abra su pestaña Avanzado y péguela en MA Custom CSS:
selector {
transform: skew(0deg, 10deg);
}Mismo número, signo opuesto. Contenedor exterior en -10deg significa contenedor interior en 10deg. Cambie uno sin cambiar el otro y su texto se ubicará en un ligero ángulo que los lectores notan incluso si no pueden decir por qué.
Guardar y vista previa. Deberías tener un fondo en ángulo con contenido recto encima. Si el editor aún lo muestra inclinado, vuelva a cargar la pestaña del editor; El CSS personalizado ocasionalmente se retrasa en el iframe de vista previa.
Paso 4: corrija el desbordamiento del móvil (no se salte esto)
La mayoría de los tutoriales terminan en el paso 3, y es por eso que las secciones sesgadas se retiran de los sitios en vivo una semana después.
Incline un elemento de ancho completo y sus esquinas sobresalgan más allá del borde de la ventana gráfica. En el escritorio, nadie se da cuenta. En un teléfono, ese saliente le proporciona una barra de desplazamiento horizontal y la página comienza a deslizarse hacia los lados debajo del pulgar del usuario. Se lee como roto, porque lo es.
Dos cosas lo impiden:
- Mantener
overflow: hiddenen el contenedor sesgado, como en el código anterior. - Reduzca el ángulo en pantallas pequeñas. Un sesgo de 10 grados que se ve nítido en un monitor de 1440px se convierte en una diagonal dura en un teléfono de 375px y se le mete en el titular.
Agregue esto debajo del código en el cuadro CSS del contenedor exterior:
@media (max-width: 767px) {
selector {
padding: 200px 0;
margin-top: -100px;
transform: skew(0deg, -4deg);
}
}Y la inversión correspondiente en el contenedor interior:
@media (max-width: 767px) {
selector {
transform: skew(0deg, 4deg);
}
}Ahora el efecto se reduce en lugar de arruinar el diseño. Pruébelo en un teléfono real, no solo en la vista previa responsiva del editor, ya que el panel de vista previa no siempre reproduce el desbordamiento. Si ejecuta puntos de interrupción personalizados en lugar de los valores predeterminados de Elementor, el Complemento de puntos de interrupción personalizados le permite hacer coincidir estas consultas de medios con los anchos reales de su dispositivo.
La alternativa moderna: ruta de clip, sin contrasesgo alguno
Skew-and-counter-skew funciona y es lo que enseñó el tutorial original. Sin embargo, ahora hay una manera más limpia y, para una nueva construcción, generalmente es a la que buscaría.
clip-path corta una forma del elemento en lugar de transformarlo. Dado que se engancha en lugar de girar, el contenido del interior nunca se mueve, por lo que no hay un contenedor anidado ni un segundo valor para mantener sincronizado.
Un contenedor, una regla:
selector {
padding: 160px 0;
clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}Esas cuatro coordenadas son las esquinas, en el sentido de las agujas del reloj desde arriba a la izquierda. Empuja los porcentajes para cambiar el ángulo: sube el 6% para un corte más pronunciado, déjelo caer hacia 0 para algo más sutil. También puedes inclinar solo el borde inferior y dejar la parte superior plana, que es el patrón habitual para un héroe.
¿Qué método deberías utilizar?
| Situación | Usar | Por qué |
|---|---|---|
| Nueva página, quiero un borde en ángulo | clip-path | Un contenedor, una regla, el contenido nunca se toca |
| Quieres el fondo imagen él mismo se inclina | skew | clip-path corta la caja, no gira lo que hay dentro de ella |
| Sólo se debe inclinar un borde | clip-path | Skew siempre inclina ambos bordes juntos |
| Mantener una página más antigua ya construida con sesgo | skew | No hay razón para reconstruir algo que funcione |
Cada navegador actual maneja ambos. Verifique el tablas de soporte de ruta de clip en MDN si estás atrapado apoyando algo inusual.
Omita el CSS por completo: importe la plantilla ya preparada
¿no quieres tocar el código? El diseño de fondo sesgado se envía como plantilla. Edite cualquier página con Elementor, haga clic en Biblioteca de plantillas de complementos maestros icono al lado del botón agregar elemento y busque la plantilla de fondo sesgado. Importarlo, luego intercambie su propio texto y colores.
Misma técnica, ya conectada. El Biblioteca de plantillas de complementos maestros tiene páginas, secciones, encabezados y pies de página listos construidos de la misma manera, y el Kits de plantillas vaya más allá con diseños de sitios completos de varias páginas.
Donde realmente funcionan los fondos sesgados
Vale la pena decirlo, porque este efecto se usa en exceso: las secciones en ángulo se ganan el sustento cuando marcan una transición. Héroe en características, características en precios, precios en testimonios. Le dan algo de ritmo a una página larga.
Dejan de funcionar cuando cada sección está en ángulo. Ya nada se lee como una transición y la página simplemente se siente ocupada. En una página de destino larga, normalmente son suficientes dos o tres bordes en ángulo.
Si desea más profundidad sin la geometría, otros efectos se superponen bien. Fondos degradados animados (Pro) agrega un movimiento de color lento, partículas agregue una capa interactiva y glassmorfismo da a las cartas un aspecto esmerilado que se apoya bien contra un panel sesgado. El Transforma extensión (Pro) también coloca controles de rotación, escala y sesgo en la interfaz de usuario de Elementor, si prefieres arrastrar un control deslizante que escribir grados.
Solución de problemas
- Nimic nu s-a schimbat. El contenedor no tiene fondo. Establece un color o imagen y mira de nuevo.
- Toda la página se desplaza hacia los lados. Añadir
overflow: hiddenal contenedor sesgado, luego verifique que su padre no se esté desbordando también. - El texto todavía está inclinado. El contrasesgo está en el elemento incorrecto o el signo está incorrecto. Si el contenedor exterior es negativo, el interior tiene que ser positivo.
- Espacio blanco encima de la sección. Aumenta lo negativo
margin-topentonces el ángulo se adentra más en la sección anterior. - El ángulo salta de forma impredecible. Los controles Transform integrados de Elementor están configurados en el mismo elemento y anulan su CSS. Borrarlos.
- No hay ningún cuadro MA CSS personalizado en la pestaña Avanzado. La extensión está apagada. Complementos maestros, luego Configuración, luego Extensiones y habilítelo.
Preguntas frecuentes
¿puedo crear un fondo sesgado en Elementor gratis?
Sí. Elementor free no tiene un campo CSS personalizado, pero la extensión Master Addons Custom CSS agrega uno a cada elemento y es gratis. Pegue la transformación sesgada en el cuadro MA Custom CSS en la pestaña Avanzado del contenedor. No se necesita licencia Elementor Pro.
¿por qué mi texto está inclinado después de sesgar la sección?
Se aplica una transformación CSS al elemento y a todos sus hijos, por lo que el contenido se inclina junto con el fondo. Coloque un contenedor en su interior y asígnele el valor sesgado opuesto. Contenedor exterior en -10deg, interior en 10degy los dos se cancelan.
¿un fondo sesgado perjudica la velocidad de la página?
Nu. Ambele transform y clip-path son propiedades aceleradas por GPU que maneja el compositor del navegador. No agregan scripts ni solicitudes HTTP adicionales. Unas pocas líneas de CSS cuestan mucho menos que una imagen de forma en ángulo.
¿cómo cambio el ángulo de la inclinación?
Edite el valor del grado. skew(0deg, -10deg) es una inclinación moderada, -5deg este sutil, -15deg es dramático. Cambie el valor del contenedor exterior y el contravalor del contenedor interior juntos, manteniéndolos iguales y opuestos.
¿todavía necesito prefijos de proveedores como -webkit-transform?
No. Sin prefijo transform ha trabajado en todos los navegadores importantes durante años. Las líneas con prefijo en tutoriales más antiguos, incluida la versión 2020 de este, son seguras de eliminar.
Envolviendo
La creación de un fondo sesgado en Elementor se reduce a dos reglas en dos cuadros CSS: sesgar el contenedor exterior, contrasesgar el interior. Agregar overflow: hidden, alivia el ángulo en dispositivos móviles y aguantará en dispositivos reales en lugar de solo en el editor. En una nueva construcción, clip-path te da la misma apariencia con la mitad de la configuración.
Todo se ejecuta en Elementor gratuito, desde entonces Complementos maestros para empezar, es lo que coloca la caja CSS personalizada allí. Si luego desea el resto del kit de herramientas (Theme Builder, Popup Builder, el conjunto de extensiones completo), eso es lo que Pro portadas, pero nada en este tutorial lo necesita.
Lectura relacionada: Efectos de animación elemental, cómo agregar efectos flotantes en Elementor, y cómo crear un encabezado adhesivo en Elementor.
