Aparece una barra de desplazamiento horizontal cuando un elemento de esa página es demasiado ancho para mostrarse y se desborda más allá de la pantalla. La mayoría de los temas de WordPress no utilizan el desplazamiento horizontal porque puede romper el diseño de su sitio y confundir a los usuarios.
Es frustrante para usted como propietario del sitio y, créanos, es aún más frustrante para sus visitantes que intentan navegar por su contenido.
Afortunadamente, según nuestra experiencia, deshabilitar el desbordamiento y deshacerse de esa barra de desplazamiento suele ser sencillo y marca una gran diferencia en la apariencia de su sitio y en la facilidad de uso.
En este artículo, le mostraremos cómo deshabilitar fácilmente el desbordamiento en WordPress y eliminar la barra de desplazamiento horizontal. Nuestras instrucciones sencillas son fáciles de usar y fáciles de seguir, incluso si no es un experto en codificación.
¿Qué causa la barra de desplazamiento horizontal o el desbordamiento en WordPress?
Al configurar su sitio web de WordPress, es importante hacerlo fácil de usar y accesible para todos.
WordPress mostrará una barra de desplazamiento horizontal si un elemento es más ancho que el diseño de su sitio web. Esto se llama 'desbordamiento'. Tener una barra de desplazamiento horizontal puede romper su diseño y hacer que su sitio web sea menos fácil de usar.
Una página web con barras de desplazamiento tanto horizontales como verticales también puede ser desorientadora para el visitante y volverse difícil de navegar. Puede resultar en que las personas abandonen su sitio, lo que provoca menos conversiones y ventas.
Deshabilitar el desbordamiento hará que su sitio sea más fácil de usar, creará un diseño de ancho fijo y mejorará la capacidad de respuesta general de su sitio.
Teniendo esto en cuenta, veamos cómo deshabilitar fácilmente la barra de desplazamiento horizontal de desbordamiento en WordPress:
- Método 1: Agregar el fragmento de CSS usando el personalizador de temas
- Método 2: Agregar el fragmento de CSS usando WPCode
- Extra: Agregar una barra de desplazamiento personalizada en WordPress
Método 1: Agregar el fragmento de CSS usando el personalizador de temas
Puedes deshabilitar el desbordamiento en WordPress simplemente agregando código CSS en la opción 'CSS adicional' del personalizador de temas.
Todo lo que tienes que hacer es visitar la página Apariencia » Personalizar desde el panel de WordPress.
Nota: Es posible que veas Apariencia » Editor en lugar de Personalizar. Esto significa que tu tema utiliza el editor de sitio completo (FSE) en lugar del personalizador de temas, y deberías consultar nuestra guía sobre cómo solucionar la falta del personalizador de temas o usar el Método 2 a continuación.
Una vez que estés en la página de Personalizar, haz clic en la pestaña 'CSS adicional'.
Luego, simplemente copia y pega el siguiente código:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Después de eso, se eliminará cualquier desbordamiento y podrás verlo aplicado en la vista previa en vivo de tu sitio web.
¡No olvides hacer clic en el botón 'Publicar' en la parte superior de la página cuando hayas terminado!
Método 2: Agregar el fragmento de CSS usando WPCode
También puedes agregar el código CSS a través de un fragmento de código usando el plugin WPCode.
WPCode es el mejor plugin de fragmentos de código de WordPress del mercado, utilizado por más de 1 millón de sitios web.
Recomendamos este método ya que este plugin facilita la adición de código personalizado a WordPress sin tener que editar ninguno de los archivos de tu tema.
Primero, instala y activa el plugin WPCode en tu sitio web. Para más detalles, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: WPCode también tiene una versión gratuita que se puede usar para este tutorial. Sin embargo, comprar el plan premium desbloqueará funciones como lógica condicional, una biblioteca en la nube de fragmentos de código y más.
Al activarlo, visita la página Fragmentos de código » + Agregar fragmentos desde el panel de WordPress.
Aquí, haz clic en el botón ‘+ Agregar fragmento personalizado’ debajo de la opción ‘Agregar tu código personalizado (Fragmento nuevo)’.
Luego, debes seleccionar ‘Fragmento CSS’ como tipo de código de la lista de opciones que aparecen en la pantalla.
Ahora, serás llevado a la página ‘Crear fragmento personalizado’, donde puedes comenzar ingresando un título para tu fragmento de código.
Este nombre no se mostrará a los usuarios y es solo para tu identificación.
Después de eso, copia y pega el siguiente fragmento de código CSS en el cuadro ‘Vista previa del código’:
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
</style>
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’, donde encontrarás dos opciones, ‘Inserción automática’ y ‘Shortcode’.
Desde aquí, selecciona el modo ‘Inserción automática’ para ejecutar tu código automáticamente al activarlo.
Sin embargo, si solo deseas deshabilitar la barra de desplazamiento horizontal en algunas páginas específicas, puedes seleccionar el modo ‘Shortcode’.
Al hacer eso, WPCode te proporcionará un shortcode tras la activación del fragmento que puedes pegar en un área o página específica del sitio web para eliminar el desbordamiento.
Una vez que hayas elegido tu opción, ve a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’ en la esquina superior derecha.
Luego, simplemente haz clic en el botón ‘Guardar fragmento’.
¡Eso es todo! Acabas de eliminar cualquier barra de desplazamiento de desbordamiento horizontal en tu sitio.
Extra: Agregar una barra de desplazamiento personalizada en WordPress
Una vez que hayas deshabilitado la barra de desplazamiento horizontal, también puedes agregar una barra de desplazamiento personalizada.
Por ejemplo, si tu sitio utiliza una paleta de colores específica según los colores de tu marca, entonces podrías usar ese mismo color para tu barra de desplazamiento. Esto se verá visualmente atractivo y animará a los usuarios a explorar tu sitio.
Para crear una barra de desplazamiento personalizada, instala y activa el plugin Advanced Scrollbar. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Tras la activación, visita la página Configuración » Configuración de Advanced Scrollbar desde el panel de WordPress. Desde aquí, ahora puedes cambiar el color de la barra de desplazamiento a tu gusto.
Una vez que hayas terminado, haz clic en el botón ‘Guardar Cambios’ para almacenar tu configuración. Para más información, consulta nuestro tutorial sobre cómo agregar una barra de desplazamiento personalizada en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo deshabilitar el desbordamiento en tu sitio de WordPress. También podrías querer ver nuestras selecciones expertas de los mejores fragmentos de código para usar en tu sitio de WordPress y nuestra guía para principiantes sobre cómo eliminar CSS no utilizado en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Daniela Dejeu
¡El método 1 funcionó perfectamente, ¡gracias!!
Soporte de WPBeginner
You’re welcome!
Administrador
Dennis Muthomi
Gracias por esta útil guía.
Intenté el segundo método de agregar el código CSS usando el plugin WPCode, pero los cambios no parecieron reflejarse en el frontend de mi sitio web. Borré todas las cachés, pero la barra de desplazamiento horizontal sigue ahí.
¿Podría el problema estar relacionado con el tema que estoy usando?
Soporte de WPBeginner
Sí, hay una buena posibilidad de que tu tema específico esté sobrescribiendo el CSS y si te pones en contacto con el soporte de tu tema, deberían poder ayudarte.
Administrador
Jiří Vaněk
Usé tu código CSS, pero si aumento el tamaño del sitio en el navegador a, por ejemplo, 130%, ¿todavía se muestra la barra de desplazamiento en la parte inferior? ¿Dónde estoy cometiendo un error?
Además, si reemplazo la letra x con una y, la barra de desplazamiento en el lado derecho desaparece, pero el sitio web no se desplaza hacia abajo.
¿Algún consejo?
Soporte de WPBeginner
Al usar el zoom del navegador, existe la posibilidad de que algo en la página tenga un ancho mínimo con el que te estés topando y que cause el problema de la barra de desplazamiento.
No recomendamos usar 'y' ya que no tenerlo configurado es lo que permite el desplazamiento en un sitio.
Administrador
Jiří Vaněk
Gracias por el consejo sobre el eje Y, así que buscaré en la página dónde podría estar causando el problema en el eje X. Gracias por el consejo en qué enfocarme.
Tanvi
Cuando usé el plugin WP Code, esto funcionó en todas mis páginas excepto en mi página de inicio. No hice nada para deshabilitar la barra de desplazamiento horizontal solo en algunas páginas específicas. ¿Qué puedo hacer al respecto?
Soporte de WPBeginner
Es posible que necesites consultar con el soporte de tu tema específico para ver si tienen código CSS que lo anule específicamente para tu página de inicio.
Administrador
Mara
Publiqué el código pero ahora no puedo desplazarme verticalmente en el móvil. ¿Sabes cómo solucionar esto?
Soporte de WPBeginner
Dependería de cómo esté configurado tu tema, overflow-x solo debería eliminar el desbordamiento horizontal en el sitio, por lo que tu tema podría estar usando overflow de una manera específica. Deberías consultar con el soporte de tu tema y ellos deberían poder ayudarte.
Administrador
Tobin Loveday
¡Gracias chicos, esto fue de gran ayuda!
Parece que los temas deberían tener esto automáticamente, pero bueno.
Soporte de WPBeginner
Glad our guide was helpful and some themes have added this but not all themes
Administrador