Cómo desactivar el desbordamiento en WordPress (Quitar desplazamiento horizontal)

¿Desea desactivar el desbordamiento en su sitio web WordPress?

Una barra de desplazamiento horizontal aparece cuando un elemento de esa página es demasiado ancho para mostrarse y desborda más allá de la pantalla. La mayoría de los temas de WordPress no utilizan el desplazamiento horizontal porque puede romper la estructura / disposición / diseño / plantilla de su sitio y confundir a los usuarios.

En este artículo, le mostraremos una forma fácil y rápida de desactivar el desbordamiento en WordPress y quitar la barra de desplazamiento horizontal.

¿Qué causa la barra de desplazamiento horizontal o desbordamiento en WordPress?

Al establecer su sitio web en WordPress, es importante que sea fácil de usar y accesible para todos.

WordPress mostrará una barra de desplazamiento horizontal si un elemento es más ancho que la estructura / disposición / diseño / plantilla de su sitio web, lo que se denomina ‘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 horizontales y verticales también puede desorientar al visitante y dificultar la navegación. Esto puede provocar que la gente abandone su sitio, reduciendo las conversiones y las ofertas.

Desactivar el desbordamiento puede ser beneficioso para usted, ya que hará que su sitio sea más fácil de usar, creará una disposición de ancho fijo y mejorará la capacidad de respuesta general de su sitio.

Con esto en mente, veamos cómo desactivar fácilmente la barra de desplazamiento horizontal en WordPress:

Método 1: Añadir el fragmento de código CSS mediante el Personalizador de temas

Puede desactivar el desbordamiento en WordPress simplemente añadiendo código CSS en la opción “CSS adicional” del personalizador de temas.

Todo lo que tiene que hacer es visitar la página Apariencia ” Personalizador desde el escritorio de WordPress.

Una vez en la página Personalizador, haga clic en la pestaña “CSS adicional”.

A continuación, sólo tienes que copiar y pegar el siguiente código:

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

Una vez hecho esto, se eliminará cualquier desbordamiento y podrá verlo aplicado en el panel de vista previa en directo de su sitio web.

No olvide hacer clic en el botón “Publicar” de la parte superior de la página cuando haya terminado.

Método 2: Añadir el fragmento de código CSS con WPCode

También puede añadir el código CSS mediante un fragmento de código utilizando el plugin WPCode.

WPCode es el mejor plugin de fragmentos de código para WordPress del mercado, utilizado por más de 1 millón de sitios web.

Recomendamos este método ya que este plugin facilita añadir código personalizado a WordPress sin tener que editar ninguno de los archivos de su tema.

Primero, instala y activa el plugin WPCode en tu sitio web. Para más detalles, puedes consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, visite la página Fragmentos de código ” + Añadir fragmentos desde el escritorio de WordPress.

Una vez allí, haga clic en el botón “Usar fragmento de código” situado bajo la opción “Añada su código personalizado (nuevo fragmento de código)”.

Esto le llevará a la página ‘Crear fragmento de código personalizado’, donde puede empezar introduciendo un título para su fragmento de código. Este nombre no se mostrará a los usuarios y es solo para tu identificación.

A continuación, seleccione “Fragmento de código CSS” como tipo de código en el menú desplegable de la derecha.

Nota: Si utiliza el plugin gratuito WPCode, tendrá que seleccionar la opción ‘Universal Snippet’.

A continuación, copie y pegue 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 hecho esto, desplácese hasta la sección “Inserción”, donde encontrará dos opciones: “Inserción automática” y “Shortcode”.

Desde aquí, seleccione el modo ‘Auto Insertar’ para ejecutar automáticamente su código al activarlo.

Sin embargo, si sólo desea desactivar la barra de desplazamiento horizontal en algunas páginas específicas, entonces puede seleccionar el modo ‘Shortcode’.

Al hacerlo, WPCode le proporcionará un shortcode al activar el fragmento que podrá pegar en un área o página específica del sitio web para quitar / eliminar el desbordamiento.

Una vez que haya elegido su opción, vaya a la parte superior de la página y conmute el interruptor de “Inactivo” a “Activo” en la esquina superior derecha.

A continuación, basta con hacer clic en el botón “Guardar fragmento de código”.

Ya está. Acaba de quitar / eliminar cualquier barra de desplazamiento horizontal en su sitio.

Esperamos que este artículo te haya ayudado a aprender cómo desactivar el desbordamiento en tu sitio de WordPress. Puede que también quieras ver nuestras selecciones de expertos de los plugins de WordPress imprescindibles para hacer crecer tu sitio y nuestra guía para principiantes sobre cómo crear un formulario de contacto en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.