En esta sección del blog voy a compartir fragmentos de código CSS que pueden ayudarte a ajustar detalles visuales, mejorar la experiencia de usuario o corregir pequeños errores comunes cuando trabajás con Elementor y WordPress.
Vamos con el primer tip:
1. Ocultar el scroll horizontal
html, body {
max-width: 100%;
overflow-x: hidden !important;
}¿Para qué sirve este código?
Este código se utiliza para evitar el desplazamiento horizontal no deseado en una página web. A veces, al diseñar con Elementor o al insertar ciertos elementos (como sliders, efectos de movimiento, márgenes negativos, etc.), se generan desbordes que provocan que la web tenga un scroll horizontal.
Esto no solo es molesto visualmente, sino que puede romper el diseño en dispositivos móviles o generar espacios en blanco en los costados.
Lo que hace este CSS es:
- Limitar el ancho máximo del <html> y del <body> al 100% del viewport.
- Forzar a que no se muestre el scroll horizontal, escondiendo cualquier contenido que se desborde lateralmente.
✅ Recomendación: Usalo con cuidado, ya que también puede ocultar contenido que realmente debería estar visible si el diseño no está bien ajustado.
¿Cómo se coloca este código en Elementor?
Opción 1: Desde Elementor (Elementor Pro)
- Abrí la página con Elementor.
- Hacé clic en el ícono de ajustes (⚙️) abajo a la izquierda.
- En la pestaña Avanzado, encontrá el campo CSS personalizado (disponible solo en la versión Pro).
- Pegá el código.
Opción 2: Desde el personalizador de WordPress
- Ir a tu panel de WordPress.
- Entrar en Apariencia > Personalizar > CSS adicional.
- Pegá el código ahí y guardá los cambios.